:root {
    --accent:      #6c5ce7;
    --accent-deep: #5a4bd4;
    --accent-soft: #efecff;
    --accent-tint: #f5f3ff;
    --ink:   #1f2130;
    --ink-2: #3f4256;
    --muted: #8a8ea3;
    --faint: #aab0c2;
    --line:  rgba(120,110,190,.14);
    --line-2:rgba(120,110,190,.2);
    --bg:    #eef0ff;
    --card:  rgba(255,255,255,.60);
    --card-solid: rgba(255,255,255,.86);
    --blur:  saturate(1.6) blur(18px);
    --ok:    #22b07d;
    --sans: "Inter", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --r: 14px; --r-sm: 10px;
    --sh-1: 0 1px 2px rgba(30,33,48,.04), 0 4px 14px rgba(30,33,48,.05);
    --sh-2: 0 8px 30px rgba(30,33,48,.1);
    --ease: cubic-bezier(0.16,1,0.3,1);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; margin: 0; }
  body { color: var(--ink); font-family: var(--sans); font-size: 13.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;
    background:
      radial-gradient(50rem 34rem at 8% -6%, rgba(124,108,255,.42), transparent 60%),
      radial-gradient(46rem 34rem at 104% 4%, rgba(80,170,255,.4), transparent 58%),
      radial-gradient(50rem 40rem at 50% 116%, rgba(255,120,200,.26), transparent 60%),
      linear-gradient(160deg, #eef0ff, #e6ecff 55%, #eae6ff);
    background-attachment: fixed; }
  .glassy { backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
  ::selection { background: var(--accent-soft); }
  button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: .16s var(--ease); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  .ic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .app { display: flex; height: 100vh; overflow: hidden; }

  /* ============ SIDEBAR ============ */
  .sidebar { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); width: 92px; flex: 0 0 92px; background: var(--card); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 6px; }
  .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
  .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #8b7cf0);
    display: grid; place-items: center; color: white; box-shadow: 0 4px 12px rgba(108,92,231,.35); }
  .brand b { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
  .nav-item { width: 72px; padding: 10px 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: var(--muted); font-size: 11.5px; font-weight: 500; transition: .16s; }
  .nav-item:hover { background: #f4f5fa; color: var(--ink-2); }
  .nav-item.active { background: var(--accent-soft); color: var(--accent); }
  .nav-item.active .ic { stroke: var(--accent); }
  .side-sp { flex: 1; }
  .credits { text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
  .credits b { display: block; font-size: 16px; color: var(--ink); font-weight: 700; margin: 2px 0 6px; }
  .credits .top { display: inline-flex; align-items: center; gap: 4px; }
  .credits .pay { background: var(--accent); color: white; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
  .side-user { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .side-user .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#8b7cf0,#6c5ce7); color: white; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
  .side-user small { color: var(--muted); font-size: 10.5px; }

  /* ============ MAIN ============ */
  .main { flex: 1; overflow: auto; }
  .view { min-height: 100%; }

  /* workbench two columns */
  .wb { display: grid; grid-template-columns: var(--wb-left, 496px) 7px 1fr; height: 100%; }
  @media (max-width: 1080px) { .wb, .wb.omni { grid-template-columns: 1fr; } .wb-split { display: none; } }
  /* 左右宽度拖拽分隔条 */
  .wb-split { position: relative; cursor: col-resize; background: transparent; z-index: 30; touch-action: none; }
  .wb-split::before { content: ""; position: absolute; inset: 0 3px; background: var(--line); transition: background .15s; }
  .wb-split:hover::before, .wb-split.dragging::before { background: var(--accent); }
  .wb-split span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 4px; height: 34px; border-radius: 3px;
    background: rgba(120,110,190,.4); transition: background .15s; }
  .wb-split:hover span, .wb-split.dragging span { background: var(--accent); }
  body.wb-resizing { cursor: col-resize; user-select: none; }
  .col-input { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border-right: 1px solid var(--line); background: var(--card); overflow-y: auto; height: 100vh; container-type: inline-size; }
  /* 容器查询：内部模块按「左栏宽度」响应（拖窄分隔条也跟随，视口媒体查询做不到） */
  @container (max-width: 430px) {
    .grid-ctrl, .grid-ctrl.two { grid-template-columns: 1fr !important; }
    .cw-examples, .gg-grid { grid-template-columns: 1fr !important; }
  }
  @container (max-width: 360px) {
    .tpl-tabs { flex-direction: column !important; }
    .style-chips { grid-template-columns: repeat(3, 1fr) !important; }
  }
  .col-result { background: transparent; overflow-y: auto; height: 100vh; }
  .pad { padding: 20px 24px; }

  .col-input h1 { font-size: 18px; font-weight: 700; margin: 0 0 16px; }

  /* tabs */
  .tabs { display: flex; gap: 4px; background: rgba(255,255,255,.5); padding: 4px; border-radius: 11px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .tab.on { background: var(--card); color: var(--accent); box-shadow: var(--sh-1); }
  /* 自由生图：主入口 */
  .mode-primary { margin-bottom: 12px; }
  .tab.primary { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255,255,255,.6); transition: .18s var(--ease); }
  .tab.primary:hover { border-color: var(--accent-soft); }
  .tab.primary.on { background: linear-gradient(135deg, var(--accent), var(--accent-2, #7b6cf0)); border-color: transparent; box-shadow: 0 10px 24px -8px var(--accent); }
  .tab.primary .mp-t { font-size: 15px; font-weight: 800; color: var(--ink); }
  .tab.primary .mp-s { font-size: 11.5px; font-weight: 500; color: var(--muted); }
  .tab.primary.on .mp-t, .tab.primary.on .mp-s { color: #fff; }
  .tab.primary.on .mp-s { opacity: .9; }
  /* 内容类型选择：两组专区 */
  .type-picker { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .tp-head { font-size: 11.5px; font-weight: 600; color: var(--faint); margin: 2px 0 -2px 2px; }
  .def-row { margin-bottom: 12px; }
  .def-row .tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; }
  .def-row .tab.on { background: var(--accent-soft); color: var(--accent); border-color: rgba(109,94,252,.3); }
  .def-tag { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(109,94,252,.16); color: var(--accent-deep); }
  .tp-sub { font-size: 11px; color: var(--faint); margin: 10px 0 7px 2px; }
  /* 两大板块 */
  .board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .board-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 15px; border-radius: 13px;
    border: 1.5px solid var(--line); background: rgba(255,255,255,.55); cursor: pointer; transition: .18s var(--ease); text-align: left; }
  .board-tab:hover { border-color: var(--accent-soft); }
  .board-tab.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 10px 24px -10px var(--accent); }
  .board-tab .bt-t { font-size: 14px; font-weight: 800; color: var(--ink); }
  .board-tab .bt-s { font-size: 11px; font-weight: 500; color: var(--muted); }
  .board-tab.on .bt-t, .board-tab.on .bt-s { color: #fff; }
  .board-tab.on .bt-s { opacity: .9; }
  .tpl-tabs { display: flex; gap: 10px; margin-top: 12px; }
  .tpl-tabs .tab { flex: 1 1 0; min-width: 0; white-space: normal; display: flex; align-items: flex-start; gap: 11px; text-align: left; padding: 13px 14px; border-radius: 13px;
    border: 1.5px solid var(--line); background: rgba(255,255,255,.55); cursor: pointer; transition: .16s var(--ease); position: relative; }
  .tpl-tabs .tab:hover { border-color: rgba(109,94,252,.35); transform: translateY(-1px); }
  .tpl-tabs .tab.on { background: linear-gradient(150deg, var(--accent-soft), rgba(109,94,252,.04)); border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(109,94,252,.25); }
  .tpl-tabs .tab-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--accent);
    background: rgba(109,94,252,.1); }
  .tpl-tabs .tab.on .tab-ic { background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: #fff; }
  .tpl-tabs .tab-ic svg { width: 19px; height: 19px; }
  .tpl-tabs .tab-t { min-width: 0; }
  .tpl-tabs .tab-t b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .tpl-tabs .tab.on .tab-t b { color: var(--accent-deep); }
  .tpl-tabs .tab-t span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
  .tpl-tabs .tab-t b { overflow-wrap: anywhere; }
  .tpl-tabs .tab-t em { font-style: normal; color: var(--ink-2); font-weight: 600; }
  .tpl-tabs .tab.on .tab-t em { color: var(--accent); }
  .tpl-modehint { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.55; color: var(--ink-2);
    background: rgba(120,110,190,.07); border: 1px solid var(--line); display: flex; gap: 8px; }
  .tpl-modehint svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--accent); }
  .tpl-modehint b { color: var(--ink); font-weight: 600; }
  /* 工作台：对话式 */
  /* 工作台：左对话（放大），右图片展示 */
  .wb.omni { grid-template-columns: var(--wb-left, minmax(0, 1.9fr)) 7px minmax(300px, 1fr); }
  .wb.omni .col-input { overflow: hidden; }
  .wb.omni .pad { display: flex; flex-direction: column; height: 100vh; padding: 22px 28px 0; }
  #omni-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 12px; display: flex; flex-direction: column; }
  .chat-msgs > :first-child { margin-top: auto; }   /* 内容少时贴底、内容多时正常滚动 */
  .chat-msgs.empty { justify-content: center; overflow: hidden; }
  .chat-msgs.empty > :first-child { margin-top: 0; }
  /* 对话内容居中一栏，避免过宽 */
  .chat-welcome { max-width: 480px; margin: auto; text-align: center; padding: 24px 4px; }
  .cw-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--accent-deep);
    background: var(--accent-soft); border: 1px solid rgba(109,94,252,.2); padding: 4px 13px; border-radius: 999px; margin-bottom: 14px; }
  .chat-welcome h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px;
    background: linear-gradient(118deg, var(--ink) 20%, var(--accent) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .chat-welcome p { font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 400px; margin: 0 auto; }
  .cw-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .cw-ex { position: relative; border-radius: 13px; overflow: hidden; aspect-ratio: 16/10; cursor: pointer;
    box-shadow: var(--sh-1); border: 1px solid rgba(255,255,255,.5); transition: transform .22s var(--ease), box-shadow .22s var(--ease); background: linear-gradient(135deg,#eceafe,#e3e0fb); }
  .cw-ex img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
  .cw-ex:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  .cw-ex:hover img { transform: scale(1.05); }
  .cw-ex span { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 11px 7px; font-size: 11.5px; font-weight: 600;
    color: #fff; text-align: left; background: linear-gradient(transparent, rgba(14,12,34,.72)); }
  .chat-msg { max-width: 860px; margin: 0 auto 20px; display: flex; gap: 11px; align-items: flex-start; }
  .chat-msg.user { flex-direction: row-reverse; }
  .chat-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    font-size: 13px; font-weight: 700; overflow: hidden; box-shadow: var(--sh-xs); }
  .chat-av.user { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #fff; }
  .chat-av.bot { background: transparent; }
  .chat-body { min-width: 0; max-width: calc(100% - 90px); }
  .chat-msg.user .chat-body { display: flex; flex-direction: column; align-items: flex-end; }
  .chat-bubble { display: inline-block; text-align: left; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.62; }
  .chat-msg.user .chat-bubble { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #fff; border-top-right-radius: 5px; }
  .chat-msg.bot .chat-bubble { background: rgba(255,255,255,.8); color: var(--ink); border: 1px solid var(--line); border-top-left-radius: 5px; box-shadow: var(--sh-xs); }
  .chat-msg .uimg { display: block; width: 132px; max-width: 60%; border-radius: 12px; object-fit: cover; margin-top: 8px; border: 1px solid var(--line); }
  .chat-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
  .chat-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: zoom-in; box-shadow: var(--sh-1); border: 1px solid rgba(255,255,255,.6); transition: transform .2s var(--ease); }
  .chat-thumbs img:hover { transform: scale(1.03); }
  /* 素材库选图弹窗 */
  .apick { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 5vh 4vw; background: rgba(20,22,35,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .apick-card { width: 100%; max-width: 820px; max-height: 80vh; display: flex; flex-direction: column; background: var(--card-solid); border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: var(--sh-2); overflow: hidden; }
  .apick-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .apick-head b { font-size: 15px; }
  .apick-head button { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
  .apick-head button:hover { background: var(--danger); color: #fff; }
  .apick-grid { padding: 16px 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 12px; }
  .apick-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: pointer; box-shadow: var(--sh-1); border: 2px solid transparent; transition: .16s; }
  .apick-grid img:hover { border-color: var(--accent); transform: translateY(-2px); }
  .apick-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 40px; font-size: 13px; }
  .chat-bar { flex: 0 0 auto; padding: 12px 0 18px; }
  .chat-inputrow { max-width: 820px; margin: 0 auto; display: flex; align-items: flex-end; gap: 9px;
    background: #fff; border: 1.5px solid var(--line-2); border-radius: 24px; padding: 9px 10px 9px 16px;
    box-shadow: 0 14px 40px -18px rgba(60,50,140,.45), var(--sh-1); transition: border-color .16s, box-shadow .16s; }
  .chat-inputrow:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 16px 40px -18px rgba(90,70,230,.48); }
  .chat-hint { max-width: 820px; text-align: center; font-size: 11px; color: var(--faint); margin: 11px auto 0; }
  .chat-tools { max-width: 820px; margin: 0 auto 8px; display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
  .chat-mini { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 30px; border-radius: 9px; font-size: 12px; font-weight: 500; padding: 0 10px; color: var(--ink-2);
    background: rgba(255,255,255,.7); border: 1px solid var(--line); cursor: pointer; transition: .15s; white-space: nowrap; }
  .chat-mini:hover { border-color: var(--accent); color: var(--accent); }
  select.chat-mini { width: auto; padding-right: 24px; }
  /* 比例·可视化选择器 */
  .ratio-wrap { position: relative; }
  #chat-ratio-btn .rshape { border: 1.7px solid currentColor; border-radius: 2.5px; opacity: .85; flex: 0 0 auto; }
  #chat-ratio-btn .car { font-size: 9px; opacity: .5; margin-left: 1px; }
  #chat-ratio-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .ratio-pop { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 70; width: 348px;
    background: var(--card-solid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--sh-2); padding: 13px 13px 11px;
    animation: rpop .16s var(--ease); transform-origin: bottom left; }
  @keyframes rpop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
  .ratio-pop .rp-h { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 0 2px 9px; text-transform: uppercase; }
  .ratio-pop .rp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .rsw { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 4px 8px; border-radius: 12px;
    cursor: pointer; border: 1.5px solid transparent; transition: .14s; }
  .rsw:hover { background: var(--accent-tint); }
  .rsw.on { border-color: var(--accent); background: var(--accent-soft); }
  .rsw .rbox { width: 46px; height: 46px; display: grid; place-items: center; }
  .rsw .rbox i { display: block; border: 2px solid var(--faint); border-radius: 4px; transition: .14s; }
  .rsw:hover .rbox i { border-color: var(--accent-2); }
  .rsw.on .rbox i { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent-soft); }
  .rsw .rlab { font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1; }
  .rsw.on .rlab { color: var(--accent); }
  .rsw .rrat { font-size: 9.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
  /* 模型·图形选择器 */
  .model-wrap { position: relative; }
  #chat-model-btn .mdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
  #chat-model-btn .car { font-size: 9px; opacity: .5; margin-left: 1px; }
  #chat-model-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .model-pop { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 70; width: 316px;
    background: var(--card-solid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--sh-2); padding: 8px;
    animation: rpop .16s var(--ease); transform-origin: bottom left; max-height: 60vh; overflow-y: auto; }
  .model-pop .rp-h { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 4px 6px 6px; text-transform: uppercase; }
  .msw { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; cursor: pointer; border: 1.5px solid transparent; transition: .14s; }
  .msw:hover { background: var(--accent-tint); }
  .msw.on { background: var(--accent-soft); border-color: var(--accent); }
  .msw .mdot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
  .msw .mmid { flex: 1; min-width: 0; }
  .msw .mname { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; }
  .msw .mtag { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .msw .mchk { color: var(--accent); font-weight: 800; opacity: 0; font-size: 13px; flex: 0 0 auto; }
  .msw.on .mchk { opacity: 1; }
  .mbadge { font-size: 9px; padding: 1px 6px; border-radius: 20px; background: rgba(120,110,190,.13); color: var(--muted); margin-left: 7px; font-weight: 700; letter-spacing: .02em; }
  .mbadge.i2i { background: rgba(34,176,125,.15); color: #16916a; }
  /* 模板页选择器：占满整格，风格贴合原下拉 */
  .tpl-pick { display: block; }
  .tpl-pick .chat-mini { width: 100%; height: 40px; justify-content: flex-start; border-radius: 10px; font-size: 13px; }
  .tpl-pick .chat-mini .car { margin-left: auto; }
  .chat-send.stop { background: #e2574f; box-shadow: 0 8px 20px -8px rgba(226,87,79,.6); }
  .chat-inputrow textarea { flex: 1; border: none; background: none; resize: none; font-size: 15px; line-height: 1.55; min-height: 26px; height: 42px; max-height: 150px; padding: 9px 2px; outline: none; color: var(--ink); }
  .chat-btn, .chat-send { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; transition: .16s; }
  .chat-btn { color: var(--muted); background: rgba(120,110,190,.08); }
  .chat-btn:hover { color: var(--accent); background: var(--accent-soft); }
  .chat-send { color: #fff; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: var(--sh-accent); }
  .chat-send:disabled { opacity: .45; cursor: default; }
  #chat-n { flex: 0 0 auto; height: 38px; border-radius: 10px; font-size: 12.5px; padding: 0 22px 0 8px; align-self: center; background-color: rgba(120,110,190,.06); border: none; }
  .chat-ctx { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; padding: 6px 8px; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid rgba(109,94,252,.25); font-size: 12px; color: var(--accent-deep); }
  .chat-ctx img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
  .chat-ctx span { flex: 1; font-weight: 500; }
  .chat-ctx button { width: 20px; height: 20px; border-radius: 6px; color: var(--muted); flex: 0 0 auto; }
  .chat-ctx button:hover { background: rgba(120,110,190,.15); color: var(--danger); }
  .chat-acts { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; }
  .chat-acts button { font-size: 12px; padding: 5px 12px; border-radius: 9px; border: 1px solid var(--line-2);
    background: rgba(255,255,255,.7); color: var(--ink-2); transition: .15s; }
  .chat-acts button:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
  #omni-chat.chat-drop { outline: 2px dashed var(--accent); outline-offset: -8px; border-radius: 16px; }
  .rcard img[draggable="true"] { cursor: grab; }
  .chat-attach { margin: 0 0 8px; position: relative; width: fit-content; }
  .chat-attach img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); display: block; }
  .chat-attach button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(20,22,35,.75); color: #fff; font-size: 11px; }
  /* 系统设置：用量 & 审计 */
  .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; }
  /* 两栏式系统设置 */
  .settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; margin-top: 22px; align-items: start; }
  @media (max-width: 820px) { .settings-layout { grid-template-columns: 1fr; } }
  .settings-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 16px; }
  .snav { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: transparent; transition: .14s; text-align: left; }
  .snav svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
  .snav:hover { background: rgba(109,94,252,.06); color: var(--ink); }
  .snav.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(109,94,252,.2); }
  .snav.on svg { opacity: 1; }
  .settings-panel { min-width: 0; }
  .sp-head { margin-bottom: 16px; }
  .sp-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
  .sp-head p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
  .set-sec-h { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 26px 2px 12px; display: flex; align-items: center; gap: 9px; }
  .set-sec-h:first-of-type { margin-top: 6px; }
  .sh-tag { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; text-transform: none; }
  .gw-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); background: rgba(120,110,190,.06); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
  .gw-keystate { font-size: 11px; font-weight: 500; color: #16916a; margin-left: 6px; }
  .gw-keystate.unset { color: #d9863b; }
  .gw-keyrow { position: relative; }
  .gw-keyrow .input { padding-right: 42px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
  .gw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; opacity: .6; }
  .gw-eye:hover { opacity: 1; background: rgba(120,110,190,.1); }
  .gw-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
  .gw-test { height: 40px; padding: 0 16px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: rgba(120,110,190,.09); border: 1px solid var(--line); transition: .15s; }
  .gw-test:hover { border-color: var(--accent); color: var(--accent); }
  .gw-result { font-size: 12.5px; font-weight: 600; }
  .gw-result.ok { color: #16916a; } .gw-result.err { color: #e2574f; }
  .usage-big { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 12px; }
  .usage-big b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(120deg,var(--ink),var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .usage-big span { font-size: 13px; color: var(--muted); }
  .usage-bar { height: 8px; border-radius: 99px; background: rgba(120,110,190,.14); overflow: hidden; }
  .usage-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width .5s var(--ease); }
  .usage-trend { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-top: 4px; }
  .usage-trend i { flex: 1; background: linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .8; }
  .audit-wrap { max-height: 420px; overflow-y: auto; }
  .audit-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
  .audit-tb td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
  .audit-tb td:first-child { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .audit-tb .a-act { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
  /* ===== 管理员数据看板 ===== */
  .dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .dash-range { flex: 0 0 auto; width: auto; }
  .dash-range button { padding: 0 16px; }
  .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
  .kpi { position: relative; overflow: hidden; background: var(--card-solid); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r);
    padding: 16px 16px 15px; box-shadow: var(--sh-1); }
  .kpi .k-ic { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    color: var(--accent); background: var(--accent-soft); }
  .kpi .k-ic svg { width: 17px; height: 17px; }
  .kpi .k-n { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    background: linear-gradient(120deg, var(--ink), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .kpi .k-l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }
  .kpi .k-s { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
  .kpi.accent { background: linear-gradient(150deg, var(--accent), var(--accent-2)); border-color: transparent; }
  .kpi.accent .k-n { background: none; color: #fff; -webkit-text-fill-color: #fff; }
  .kpi.accent .k-l, .kpi.accent .k-s { color: rgba(255,255,255,.85); }
  .kpi.accent .k-ic { background: rgba(255,255,255,.2); color: #fff; }
  .dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }
  .dash-card { min-height: 200px; }
  .trend-box { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 10px; }
  .trend-box .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
  .trend-box .bar { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 5px 5px 0 0; min-height: 3px;
    transition: height .4s var(--ease); position: relative; }
  .trend-box .bar:hover { filter: brightness(1.08); }
  .trend-box .bar .v { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap; opacity: 0; transition: .15s; }
  .trend-box .col:hover .v { opacity: 1; }
  .trend-box .d { font-size: 9.5px; color: var(--faint); white-space: nowrap; transform: rotate(0deg); }
  .trend-empty, .model-empty { display: grid; place-items: center; height: 140px; color: var(--faint); font-size: 13px; }
  .model-box { display: flex; flex-direction: column; gap: 11px; padding-top: 6px; }
  .mbar-row { display: flex; flex-direction: column; gap: 5px; }
  .mbar-row .top { display: flex; justify-content: space-between; font-size: 12px; }
  .mbar-row .top b { font-weight: 600; color: var(--ink-2); }
  .mbar-row .top span { color: var(--muted); font-variant-numeric: tabular-nums; }
  .mbar-track { height: 8px; border-radius: 99px; background: rgba(120,110,190,.12); overflow: hidden; }
  .mbar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s var(--ease); }
  .dash-tb-wrap { overflow-x: auto; }
  .dash-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
  .dash-tb th { text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .03em; padding: 0 12px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
  .dash-tb th.num, .dash-tb td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .dash-tb td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
  .dash-tb tbody tr:hover { background: rgba(109,94,252,.04); }
  .dash-tb .acct { display: flex; align-items: center; gap: 10px; }
  .dash-tb .acct .av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: 0 0 auto; }
  .dash-tb .acct .nm b { font-size: 13px; color: var(--ink); font-weight: 600; }
  .dash-tb .acct .nm small { display: block; font-size: 10.5px; color: var(--faint); }
  .dash-tb td.num b { font-weight: 700; color: var(--ink); }
  .dash-tb .zero { color: var(--faint); }
  .tp-group { background: rgba(255,255,255,.5); border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px 12px; }
  .tp-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--faint); text-transform: uppercase; margin: 0 0 8px 2px; }
  .tp-items { display: flex; flex-wrap: wrap; gap: 6px; }
  .tp-items .tab { border: 1px solid transparent; cursor: pointer; transition: .16s var(--ease); }
  .tp-items .tab:hover { background: rgba(255,255,255,.7); color: var(--ink); }
  .tp-items .tab.on { border-color: var(--accent-soft); }
  .io-badge { font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 11px; border-radius: 999px; transition: .18s; }
  .io-badge.img { color: #0a7f5a; background: rgba(16,160,110,.12); }
  /* 配色方向芯片（带可视化色卡） */
  .pal-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .pal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    background: rgba(255,255,255,.6); border: 1px solid var(--line); cursor: pointer; transition: .16s var(--ease); }
  .pal-chip:hover { color: var(--ink); background: #fff; border-color: var(--line-2); transform: translateY(-1px); }
  .pal-chip.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .pal-sw { display: flex; width: 28px; height: 17px; border-radius: 5px; overflow: hidden; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(20,20,50,.1); }
  .pal-sw i { flex: 1; }
  .pal-sw.auto { background: conic-gradient(from 210deg, #7d6dff, #50aaff, #22b07d, #ffd166, #ff5e62, #7d6dff); }

  .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .sec-head .t { font-size: 13.5px; font-weight: 700; }
  .link { color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }

  .input, textarea, select { width: 100%; font-family: var(--sans); font-size: 13px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 11px; transition: .16s; }
  .input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .search-wrap { position: relative; margin-bottom: 12px; }
  .search-wrap .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); stroke: var(--faint); }
  .search-wrap .input { padding-left: 34px; }
  select { appearance: none; cursor: pointer; padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238a8ea3' stroke-width='1.4'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; }

  .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
  .chip { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.55); color: var(--ink-2); cursor: pointer; transition: .16s; }
  .chip:hover { background: #e9eaf2; }
  .chip.on { background: var(--accent-soft); color: var(--accent); }

  .tpl-row { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
  .tpl-cards { display: flex; gap: 10px; overflow-x: auto; flex: 1; padding-bottom: 4px; scrollbar-width: thin; }
  .tpl { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); flex: 0 0 128px; border-radius: 11px; border: 2px solid transparent; background: var(--card); cursor: pointer; overflow: hidden; transition: .16s; box-shadow: var(--sh-1); }
  .tpl.on { border-color: var(--accent); }
  .tpl .thumb { height: 88px; background: linear-gradient(135deg,#e9ebf5,#dfe2f0); position: relative; overflow: hidden; }
  .tpl .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .tpl .meta { padding: 7px 9px; }
  .tpl .meta b { font-size: 12px; font-weight: 600; display: block; }
  .tpl .meta small { font-size: 10.5px; color: var(--muted); }
  .tpl-nav { width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: var(--sh-1); color: var(--muted); flex: 0 0 auto; }

  .field { position: relative; margin-bottom: 12px; }
  textarea { min-height: 118px; resize: vertical; line-height: 1.65; }
  .counter { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--faint); }
  .row-btns { display: flex; gap: 8px; margin-bottom: 22px; }
  .mini { padding: 7px 12px; border-radius: 9px; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.55); color: var(--ink-2); }
  .mini:hover { background: #e9eaf2; color: var(--accent); }
  .mini.ghost { background: transparent; border: 1px solid var(--line-2); }
  .row-btns .sp { flex: 1; }

  /* reference imgs */
  .refs { display: flex; gap: 10px; margin-bottom: 20px; }
  .ref-up { width: 84px; height: 84px; flex: 0 0 auto; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 11px; cursor: pointer; }
  .ref-up:hover { border-color: var(--accent); color: var(--accent); }
  .ref-item { width: 84px; flex: 0 0 auto; }
  .ref-item .pic { width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; position: relative; border: 1px solid var(--line); }
  .ref-item .pic img { width: 100%; height: 100%; object-fit: cover; }
  .ref-item .x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(20,22,35,.6); color: white; font-size: 11px; }
  .ref-item select { margin-top: 5px; padding: 4px 6px; font-size: 11px; }

  .grid-ctrl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .grid-ctrl.two { grid-template-columns: 1fr 1fr; align-items: end; }
  .ctl label, .lab { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
  .seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(120,110,190,.09); border: 1px solid var(--line); }
  .seg button { flex: 1; height: 32px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--muted); white-space: nowrap; }
  .seg button:hover { color: var(--accent); }
  .seg button.on { background: #fff; color: var(--accent); box-shadow: 0 2px 6px -2px rgba(40,40,90,.2), inset 0 0 0 1px rgba(109,94,252,.22); }

  .gen-bar { position: sticky; bottom: 0; background: var(--accent-tint); margin: 8px -24px -20px; padding: 14px 24px;
    display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
  .gen-bar .cost { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
  .gen-bar .cost b { color: var(--accent); }
  .btn-gen { flex: 1; padding: 13px; border-radius: 11px; font-size: 15px; font-weight: 700; color: white;
    background: linear-gradient(135deg, var(--accent), #8b7cf0); box-shadow: 0 6px 18px rgba(108,92,231,.4); }
  .btn-gen:not(:disabled):hover { transform: translateY(-1px); }

  /* ============ RESULTS ============ */
  .res-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .res-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
  .res-head .n { font-size: 12px; color: var(--muted); }
  .res-head .sp { flex: 1; }
  .res-export { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(109,94,252,.2); padding: 6px 12px; border-radius: 9px; text-decoration: none; transition: .15s; }
  .res-export:hover { background: var(--accent); color: #fff; }
  .view-toggle { display: flex; gap: 4px; background: #eceef5; padding: 3px; border-radius: 9px; }
  .view-toggle button { padding: 6px 10px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); transition: .15s; }
  .view-toggle button:hover { color: var(--ink-2); }
  .view-toggle button.on { background: var(--card); color: var(--accent); box-shadow: var(--sh-1); }

  .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
  .results.big { grid-template-columns: 1fr; }
  .results.poster { grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); }
  .results.poster .rcard { aspect-ratio: 3/4; }
  /* 大纲编辑器 */
  .ol-wrap { animation: rise .4s var(--ease) both; padding-bottom: 4px; }
  /* 醒目步骤横幅 */
  .ol-tip { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); margin-bottom: 16px; padding: 13px 16px; border-radius: 14px;
    background: linear-gradient(120deg, var(--accent-soft), rgba(109,94,252,.06)); border: 1px solid var(--accent); box-shadow: 0 6px 18px -10px rgba(109,94,252,.5); }
  .ol-tip .ol-step { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em;
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
  .ol-tip .ol-step b { font-size: 12px; }
  .ol-tip .ol-tiptx b { color: var(--accent-deep); }
  .ol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .ol-card { background: var(--card-solid); border: 1px solid rgba(140,150,180,.16); border-radius: 16px; padding: 14px 16px 16px;
    box-shadow: var(--sh-1); animation: rise .4s var(--ease) both; }
  .ol-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
  .ol-h b { font-size: 14px; }
  .ol-h span { font-size: 11.5px; color: #fff; background: var(--accent); padding: 2px 9px; border-radius: 999px; }
  .ol-body { display: flex; flex-direction: column; gap: 9px; }
  .ol-f { display: flex; flex-direction: column; gap: 4px; }
  .ol-f > span { font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .ol-f .input { font-size: 13px; padding: 7px 10px; }
  .ol-f textarea.input { resize: vertical; line-height: 1.5; }
  .ol-adjust { margin-top: 16px; }
  .ol-adjust label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
  .ol-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 0 6px; z-index: 6;
    background: linear-gradient(to top, var(--bg) 62%, transparent); }
  .ol-bar .ol-hintleft { flex: 1; font-size: 12px; color: var(--muted); }
  .ol-bar .btn-o { flex: 0 0 auto; }
  .ol-bar .btn-gen { flex: 0 0 auto; padding: 12px 22px; font-size: 14.5px; box-shadow: var(--sh-accent); }
  .ol-bar .btn-gen:hover { transform: translateY(-1px); }
  .gen-stop { font-size: 11px; font-weight: 600; color: #e2574f; background: rgba(226,87,79,.1); padding: 2px 9px; border-radius: 7px; margin-left: 6px; vertical-align: middle; }
  .gen-stop:hover { background: #e2574f; color: #fff; }
  .rcard { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border-radius: var(--r); overflow: hidden; background: var(--card-solid); box-shadow: var(--sh-1); position: relative; aspect-ratio: 16/10;
    animation: rise .5s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  .rcard img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
  .rcard .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: repeating-linear-gradient(45deg,#f6f7fb,#f6f7fb 10px,#f1f2f8 10px,#f1f2f8 20px); }
  .rcard.gen .ph { background: none; }
  .rcard.fail { outline: 1px dashed rgba(217,90,90,.4); }
  .rcard.fail .ph { color: #c85a5a; background: repeating-linear-gradient(45deg,#fdf3f3,#fdf3f3 10px,#faeaea 10px,#faeaea 20px); font-weight: 600; }
  .r-retry { color: #fff !important; background: rgba(200,90,90,.9); font-weight: 600; }
  .r-retry:hover { background: #c85a5a; }
  .rbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 9px 9px;
    background: linear-gradient(transparent, rgba(20,22,35,.72)); opacity: 0; transition: .2s; }
  .rcard:hover .rbar { opacity: 1; }
  .rbar button, .rbar a { color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 8px; text-decoration: none;
    background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: .14s; }
  .rbar button:hover, .rbar a:hover { background: rgba(255,255,255,.32); }
  .rbar .sp { flex: 1; min-width: 0; }
  .rbar .r-cutout:hover { background: rgba(16,160,110,.85); }
  .rbar .r-edit:hover { background: rgba(109,94,252,.85); }
  .ref-tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--ok); color: white; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
  .skel { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(108,92,231,.14) 50%, transparent 80%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }

  .hist { margin-top: 26px; }

  .empty { text-align: center; padding: 80px 20px; color: var(--muted); }
  .empty .big { font-size: 30px; opacity: .4; margin-bottom: 10px; }
  .empty h3 { font-size: 15px; color: var(--ink-2); margin: 0 0 5px; }

  /* generic page header for assets/history/settings */
  .page { padding: 26px 30px; }
  .page h1 { font-size: 22px; font-weight: 700; margin: 0; }
  .page .sub { color: var(--muted); margin-top: 4px; }

  /* assets */
  .lib { display: grid; grid-template-columns: 210px 1fr; gap: 22px; margin-top: 20px; align-items: start; }
  @media (max-width: 820px) { .lib { grid-template-columns: 1fr; } }
  .filters { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
  .filters h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
  .filters h4:first-child { margin-top: 0; }
  .fitem { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
  .fitem:hover { background: #f4f5fa; } .fitem.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  /* 文件夹素材库 */
  .folder-rail { backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; align-self: start; }
  .frow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: .14s; position: relative; }
  .frow:hover { background: rgba(109,94,252,.06); }
  .frow.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .frow svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
  .frow .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frow .fc { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .frow.on .fc { color: var(--accent); }
  .frow .fdel { opacity: 0; font-size: 13px; color: var(--faint); padding: 0 2px; transition: .12s; }
  .frow:hover .fdel { opacity: 1; } .frow .fdel:hover { color: #e2574f; }
  .frail-div { height: 1px; background: var(--line); margin: 8px 4px; }
  .frail-new { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; border: 1px dashed rgba(109,94,252,.35); transition: .14s; }
  .frail-new:hover { background: var(--accent-soft); border-style: solid; }
  .lib-main { min-width: 0; }
  .lib-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .lib-title { font-size: 16px; font-weight: 700; color: var(--ink); }
  .lib-toolbar .sp { flex: 1; }
  .lib-toolbar .search-wrap { margin-bottom: 0; max-width: 260px; flex: 0 1 260px; }
  .btn-up { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--sh-accent); transition: .16s; }
  .btn-up:hover { transform: translateY(-1px); filter: brightness(1.05); }
  #assets-grid.updrop { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 14px; background: var(--accent-tint); }
  .upcard { position: relative; }
  .upcard .del-u { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(18,16,38,.6); color: #fff; opacity: 0; transition: .14s; z-index: 2; }
  .upcard:hover .del-u { opacity: 1; } .upcard .del-u:hover { background: #e2574f; }
  .fitem .c { color: var(--faint); font-size: 12px; }
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; }
  .gcard { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border-radius: var(--r-sm); overflow: hidden; background: var(--card-solid); box-shadow: var(--sh-1); position: relative; aspect-ratio: 1; }
  .gcard img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
  .gcard .rbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 9px 9px; display: flex; align-items: center; gap: 6px;
    background: linear-gradient(to top, rgba(18,16,38,.74), rgba(18,16,38,.28) 60%, transparent);
    opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
  .gcard:hover .rbar, .gcard:focus-within .rbar { opacity: 1; transform: none; pointer-events: auto; }
  .gcard .rbar button, .gcard .rbar a { color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 7px;
    background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: .15s; line-height: 1; }
  .gcard .rbar button:hover, .gcard .rbar a:hover { background: rgba(255,255,255,.34); }
  .gcard .rbar .r-cutout:hover { background: rgba(16,160,110,.9); }
  .gcard .rbar .sp { flex: 1; }

  /* history rows */
  /* 任务库 · 作品卡片墙 */
  .tk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; }
  .tk-more { display: flex; justify-content: center; padding: 18px 0 8px; }
  .tk-search { position: relative; flex: 1 1 220px; max-width: 340px; color: var(--faint); }
  .tk-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .tk-search input { width: 100%; height: 38px; padding: 0 14px 0 36px; border-radius: 11px; border: 1px solid var(--line);
    background: rgba(255,255,255,.7); font-size: 13px; color: var(--ink); transition: .15s; }
  .tk-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .tk-chips { display: flex; gap: 6px; }
  .tk-chip { height: 34px; padding: 0 15px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    background: rgba(255,255,255,.6); border: 1px solid var(--line); cursor: pointer; transition: .15s; }
  .tk-chip:hover { border-color: var(--accent); color: var(--accent); }
  .tk-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .tk-sp { flex: 1; }
  .tk-count { font-size: 12px; color: var(--faint); font-weight: 500; }
  .tk-group-h { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .05em; margin: 26px 2px 13px; display: flex; align-items: baseline; gap: 9px; }
  .tk-group-h .c { color: var(--faint); font-weight: 600; font-size: 11px; }
  .tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }
  .tcard { display: flex; flex-direction: column; background: var(--card-solid); border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
  .tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .tcard .cover { position: relative; aspect-ratio: 4/3; background: #eceef5; overflow: hidden; }
  .tcard .cover > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
  .tcard:hover .cover > img { transform: scale(1.04); }
  .tcard .cover .noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12px; font-weight: 500;
    background: repeating-linear-gradient(45deg,#f6f7fb,#f6f7fb 10px,#f1f2f8 10px,#f1f2f8 20px); }
  .tcard .cnt { position: absolute; top: 8px; right: 8px; background: rgba(18,16,38,.66); color: #fff; font-size: 10.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 20px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .tcard .st { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; }
  .st.done { background: rgba(34,176,125,.92); color: #fff; } .st.progress { background: rgba(217,134,59,.92); color: #fff; } .st.failed { background: rgba(217,90,90,.92); color: #fff; }
  .st.pending { background: rgba(120,110,190,.92); color: #fff; }
  .tcard .ov { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px;
    background: linear-gradient(to top, rgba(18,16,38,.8), rgba(18,16,38,.1) 55%, transparent); opacity: 0; transition: opacity .2s var(--ease); }
  .tcard:hover .ov, .tcard:focus-within .ov { opacity: 1; }
  .tcard .ov button, .tcard .ov a { color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 9px; text-decoration: none;
    background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: .15s; }
  .tcard .ov button:hover, .tcard .ov a:hover { background: rgba(255,255,255,.34); }
  .tcard .ov .primary { background: var(--accent); } .tcard .ov .primary:hover { background: var(--accent-deep); }
  .tcard .ov .del-btn { padding: 6px 9px; background: rgba(255,255,255,.16); }
  .tcard .ov .del-btn:hover { background: rgba(226,87,79,.9); }
  .tcard .ov .del-btn.armed { background: #e2574f; padding: 6px 12px; animation: delpulse 1s ease infinite; }
  @keyframes delpulse { 50% { box-shadow: 0 0 0 4px rgba(226,87,79,.3); } }
  .tcard .body { padding: 11px 13px 13px; }
  .tcard .pr { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.84em; }
  .tcard .mt { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11px; color: var(--faint); }
  .tcard .mt .mdl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--muted); }
  .tcard .mt .mdl i { width: 7px; height: 7px; border-radius: 50%; }
  .tcard .mt .mt-owner { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tcard .mt .mt-av { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; font-style: normal;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: 0 0 auto; }
  .tcard .mt .dot { opacity: .5; }
  /* 多选 */
  .tk-check { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 7px; z-index: 3;
    background: rgba(255,255,255,.85); border: 2px solid rgba(120,110,190,.5); display: none; place-items: center;
    color: #fff; font-size: 13px; font-weight: 800; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: .12s; }
  #tasks.tk-selecting .tk-check { display: grid; }
  #tasks.tk-selecting .st { opacity: 0; }               /* 选择态让位给勾选框 */
  #tasks.tk-selecting .tcard:hover .ov { opacity: 0; }  /* 选择态不弹操作条 */
  .tcard.sel .tk-check { background: var(--accent); border-color: var(--accent); }
  .tcard.sel { box-shadow: 0 0 0 2px var(--accent), var(--sh-1); }
  .tcard.sel::after { content: ''; position: absolute; inset: 0; background: rgba(109,94,252,.1); pointer-events: none; border-radius: var(--r); }
  .tcard { position: relative; }
  .tk-batchbar { position: sticky; bottom: 16px; margin: 20px auto 0; max-width: 620px; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line-2);
    box-shadow: var(--sh-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); z-index: 20; }
  .tk-batchbar .bb-n { font-size: 13px; font-weight: 700; color: var(--ink); }
  .tk-batchbar .sp { flex: 1; }
  .tk-batchbar button { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    background: rgba(120,110,190,.08); transition: .15s; }
  .tk-batchbar button:hover { background: var(--accent-soft); color: var(--accent); }
  .tk-batchbar #bb-export:hover { background: var(--accent); color: #fff; }
  .tk-batchbar .danger { color: #e2574f; } .tk-batchbar .danger:hover { background: #e2574f; color: #fff; }
  .tk-batchbar #bb-cancel { color: var(--muted); }
  .tcard .ov .retry-btn { background: rgba(255,180,60,.92); }
  .tcard .ov .retry-btn:hover { background: #e59a2b; }
  .btn-o:hover { background: var(--accent-soft); color: var(--accent); }

  /* ================= 百万级精修层 (overrides) ================= */
  :root {
    --accent:#6d5efc; --accent-deep:#584ae2; --accent-2:#8b7cff;
    --accent-soft: rgba(109,94,252,.10); --accent-tint: rgba(109,94,252,.05);
    --ink:#191b28; --ink-2:#464a60; --muted:#7b8098; --faint:#a6abbe;
    --line: rgba(88,78,158,.12); --line-2: rgba(88,78,158,.18);
    --card: rgba(255,255,255,.66); --card-solid: rgba(255,255,255,.9);
    --blur: saturate(1.7) blur(22px);
    --sh-xs: 0 1px 2px rgba(30,30,60,.05);
    --sh-1: 0 1px 3px rgba(40,40,80,.05), 0 8px 18px -8px rgba(40,40,90,.14);
    --sh-2: 0 6px 14px rgba(40,40,80,.07), 0 22px 44px -14px rgba(40,40,90,.24);
    --sh-accent: 0 10px 24px -8px rgba(109,94,252,.55);
    --r:16px; --r-sm:11px;
  }
  body { font-size:14px; letter-spacing:-.003em; -moz-osx-font-smoothing:grayscale;
    background:
      radial-gradient(60rem 42rem at 6% -10%, rgba(120,105,255,.26), transparent 62%),
      radial-gradient(52rem 40rem at 106% 2%, rgba(70,150,255,.2), transparent 60%),
      radial-gradient(62rem 48rem at 52% 122%, rgba(150,110,255,.15), transparent 62%),
      linear-gradient(165deg,#eef0fb,#e9ecff 55%,#efe9ff); background-attachment:fixed; }
  .col-input h1, .page h1, .res-head h2 { letter-spacing:-.022em; font-weight:800; }
  .page h1 { font-size:24px; }

  /* scrollbars — 全局隐藏（保留滚动能力） */
  *::-webkit-scrollbar { width:0; height:0; background:transparent; }
  *::-webkit-scrollbar-thumb { background:transparent; }
  * { scrollbar-width:none; -ms-overflow-style:none; }
  button:focus-visible, .input:focus-visible, textarea:focus-visible, select:focus-visible, .nav-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  /* glass surfaces — crisp border + inner highlight */
  .sidebar { border-right:1px solid rgba(255,255,255,.55); box-shadow: 1px 0 0 rgba(88,78,158,.06), inset 1px 0 0 rgba(255,255,255,.5); }
  .col-input { border-right:1px solid rgba(255,255,255,.5); box-shadow: 1px 0 24px -12px rgba(40,40,90,.16); }
  .brand .logo { border-radius:11px; box-shadow: 0 6px 16px -4px rgba(109,94,252,.55), inset 0 1px 0 rgba(255,255,255,.45); }
  .brand b { letter-spacing:.06em; }

  /* nav */
  .nav-item { transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); border-radius:13px; }
  .nav-item:hover { background: rgba(255,255,255,.55); color:var(--ink-2); }
  .nav-item.active { background: linear-gradient(160deg, rgba(109,94,252,.16), rgba(109,94,252,.06));
    box-shadow: inset 0 0 0 1px rgba(109,94,252,.2), 0 6px 14px -6px rgba(109,94,252,.4); }

  /* primary button */
  .btn-gen { background: linear-gradient(135deg,#7d6dff,#6d5efc 52%,#5a4be0); letter-spacing:.01em; border-radius:13px;
    box-shadow: var(--sh-accent), inset 0 1px 0 rgba(255,255,255,.42); transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s; }
  .btn-gen:not(:disabled):hover { transform: translateY(-1.5px); filter:saturate(1.06) brightness(1.02);
    box-shadow: 0 16px 34px -8px rgba(109,94,252,.62), inset 0 1px 0 rgba(255,255,255,.5); }
  .btn-gen:not(:disabled):active { transform: translateY(0); }

  /* inputs */
  .input, textarea, select { background: rgba(255,255,255,.7); border:1px solid rgba(88,78,158,.16);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s; }
  .input:hover, textarea:hover, select:hover { border-color: rgba(109,94,252,.42); }
  .input:focus, textarea:focus, select:focus { border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-soft), inset 0 1px 2px rgba(30,30,60,.03); background: rgba(255,255,255,.9); }

  /* tabs / segments / view-toggle */
  .tabs { background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); border-radius:12px; }
  .tab { transition:.2s var(--ease); border-radius:9px; }
  .tab.on { background:#fff; box-shadow: 0 3px 9px -3px rgba(40,40,90,.2); }
  .seg button { transition:.18s var(--ease); }
  .view-toggle { background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
  .view-toggle button.on { background:#fff; box-shadow: 0 3px 9px -3px rgba(40,40,90,.22); }

  /* chips / mini / template cards */
  .chip { border:1px solid transparent; transition:.18s var(--ease); }
  .chip:hover { background: rgba(255,255,255,.9); border-color: rgba(109,94,252,.22); color: var(--accent-deep); }
  .chip.on { background: linear-gradient(135deg, rgba(109,94,252,.16), rgba(109,94,252,.08));
    box-shadow: inset 0 0 0 1px rgba(109,94,252,.28); color: var(--accent-deep); }
  .mini { border:1px solid transparent; transition:.18s var(--ease); }
  .mini:hover { background:#fff; border-color: rgba(109,94,252,.26); color: var(--accent-deep); }
  .tpl { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .18s; border:2px solid rgba(255,255,255,.5); }
  .tpl:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  .tpl.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-1); }
  .ref-up { transition:.18s var(--ease); }
  .ref-up:hover { background: rgba(109,94,252,.05); }

  /* result & gallery cards */
  .rcard { border:1px solid rgba(255,255,255,.55); box-shadow: var(--sh-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  .rcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .rcard img { transition: transform .6s var(--ease); }
  .rcard:hover img { transform: scale(1.045); }
  .gcard { border:1px solid rgba(255,255,255,.55); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  .gcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .rbar { background: linear-gradient(transparent, rgba(15,16,30,.82)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .rbar button, .rbar a { transition:.15s; }

  /* gen bar glass */
  .gen-bar { background: linear-gradient(180deg, rgba(244,242,255,.4), rgba(244,242,255,.82));
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top:1px solid rgba(255,255,255,.6); }

  /* task rows */
  .task { border:1px solid rgba(255,255,255,.55); box-shadow: var(--sh-1);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
  .task:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  .btn-o { background: rgba(255,255,255,.72); border:1px solid rgba(88,78,158,.1); box-shadow: var(--sh-xs); transition:.18s var(--ease); }
  .btn-o:hover { background:#fff; border-color: rgba(109,94,252,.3); color: var(--accent-deep); }
  .status.done { background: rgba(34,176,125,.12); box-shadow: inset 0 0 0 1px rgba(34,176,125,.22); }
  .status.progress { background: rgba(217,134,59,.12); color:#c8792f; box-shadow: inset 0 0 0 1px rgba(217,134,59,.22); }

  /* filters + fitem */
  .filters { border:1px solid rgba(255,255,255,.55); box-shadow: var(--sh-1); }
  .fitem { transition:.15s var(--ease); }
  .fitem:hover { background: rgba(255,255,255,.7); }

  /* 脚本主输入框 — hero */
  .script-hero textarea { min-height:178px; font-size:14px; line-height:1.72; background: rgba(255,255,255,.85);
    border:1.5px solid rgba(88,78,158,.2); box-shadow: inset 0 1px 3px rgba(30,30,60,.035); border-radius:12px; padding:13px 14px; }
  .script-hero textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), inset 0 1px 3px rgba(30,30,60,.03); background:#fff; }
  .script-hero .counter { bottom:10px; right:12px; }
  /* 参考图片 拖拽长栏 */
  .dropzone { width:100%; min-height:66px; border:1.5px dashed rgba(88,78,158,.3); border-radius:12px; background:rgba(255,255,255,.5);
    cursor:pointer; transition:.18s var(--ease); overflow:hidden; display:flex; align-items:center; }
  .dropzone:hover { border-color:var(--accent); background:rgba(109,94,252,.05); }
  .dropzone.drag { border-color:var(--accent); border-style:solid; background:rgba(109,94,252,.1); box-shadow:0 0 0 4px var(--accent-soft); }
  .dz-empty { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:22px; color:var(--muted); font-size:13px; font-weight:500; }
  .dz-empty .ic { stroke:var(--accent); }
  .dz-full { display:flex; align-items:center; gap:14px; width:100%; padding:10px 12px; }
  .dz-full img { width:58px; height:58px; border-radius:9px; object-fit:cover; border:1px solid var(--line); }
  .dz-full .dz-info { flex:1; min-width:0; } .dz-full .dz-info b { font-size:13px; display:block; color:var(--ink); }
  .dz-full .dz-info span { font-size:11px; color:var(--muted); }
  .dz-x { flex:0 0 auto; width:32px; height:32px; border-radius:8px; background:rgba(88,78,158,.08); color:var(--muted); font-size:13px; transition:.16s; }
  .dz-x:hover { background:var(--danger); color:#fff; }

  /* ===== 左栏区块卡系统：统一分组 · 高级留白 · 清晰节奏 ===== */
  .wb-head { margin: 2px 0 16px; display: flex; align-items: flex-start; gap: 14px; }
  .wb-head-t { flex: 1; min-width: 0; }
  .wb-head h1 { font-size: 19px; margin: 0; line-height: 1.2; }
  .wb-head p { font-size: 12px; color: var(--muted); margin: 4px 0 0; font-weight: 500; }
  #btn-newchat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
    font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft);
    border: 1px solid rgba(109,94,252,.22); border-radius: 10px; transition: .16s; }
  #btn-newchat:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 6px 16px -6px rgba(109,94,252,.6); transform: translateY(-1px); }
  #btn-newchat svg { opacity: .9; }
  .grp { position: relative; background: rgba(255,255,255,.46); border: 1px solid var(--line);
    border-radius: 16px; padding: 15px 16px; margin-bottom: 12px; box-shadow: var(--sh-xs);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: box-shadow .2s var(--ease), border-color .2s; }
  .grp:focus-within { border-color: rgba(109,94,252,.28); box-shadow: var(--sh-1); }
  .grp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .grp-h .gt { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
  /* 统一区块表头：左侧强调竖条 */
  .grp .grp-h .gt, .grp .sec-head .t { position: relative; padding-left: 12px; }
  .grp .grp-h .gt::before, .grp .sec-head .t::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-2)); }
  .grp-h .gs { font-size: 11px; color: var(--faint); font-weight: 500; }
  /* 区块内部去掉重复的底部间距（由区块 padding 统一控制节奏） */
  .grp .sec-head { margin-bottom: 10px; }
  .grp .field, .grp .row-btns, .grp .style-chips, .grp .pal-chips,
  .grp .grid-ctrl, .grp .type-picker, .grp .mode-primary, .grp .ctl { margin-bottom: 0; }
  .grp .field + .row-btns { margin-top: 10px; }
  .grp > .ctl + .ctl, .grp > .grid-ctrl + .ctl, .grp > .ctl + .grid-ctrl { margin-top: 13px; }
  .grp .mode-primary + .type-picker { margin-top: 12px; }
  /* 图片风格 缩略卡 */
  .style-chips { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-bottom:20px; }
  .scard { cursor:pointer; text-align:center; transition: transform .18s var(--ease); }
  .scard:hover { transform: translateY(-2px); }
  .scard .sthumb { position:relative; aspect-ratio:1; border-radius:11px; overflow:hidden; border:2px solid transparent;
    box-shadow: var(--sh-1); transition: border-color .18s, box-shadow .18s; background:linear-gradient(135deg,#eceafe,#e3e0fb); }
  .scard .sthumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .scard .sthumb.auto { display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--accent-deep); }
  .scard span { display:block; font-size:11px; color:var(--muted); margin-top:5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scard.on .sthumb { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-2); }
  .scard.on span { color: var(--accent-deep); font-weight:700; }
  .scard.on .sthumb::after { content:'✓'; position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%;
    background:var(--accent); color:#fff; font-size:11px; display:grid; place-items:center; box-shadow:0 2px 6px rgba(109,94,252,.5); }
  #tpl-head { margin-top:18px; }
  #tpls .tpl { flex:0 0 106px; }
  #tpls .tpl .thumb { height:62px; }
  #tpls .tpl .meta { padding:6px 8px; }
  #tpls .tpl .meta b { font-size:11.5px; }
  #tpls .tpl .meta small { font-size:10px; }

  /* 加载骨架 + 生图动效 */
  .rcard.loading { background: linear-gradient(135deg,#efeafe,#e6e1fc); border:1px solid rgba(255,255,255,.6); overflow:hidden; }
  .rcard.loading .skel { background: linear-gradient(100deg, transparent 20%, rgba(124,108,255,.28) 48%, rgba(80,170,255,.2) 55%, transparent 80%);
    background-size:220% 100%; animation: shimmer 1.25s var(--ease) infinite; }
  .rcard.loading::after { content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:3px solid rgba(124,108,255,.25); border-top-color:var(--accent); animation:spin .8s linear infinite; z-index:2; }
  .gen-stage { text-align:center; color:var(--accent-deep); font-size:13.5px; font-weight:600; margin:0 0 18px; letter-spacing:.01em;
    display:flex; align-items:center; justify-content:center; gap:8px; animation: fadeSlide .4s var(--ease); }
  @keyframes fadeSlide { from{opacity:0; transform:translateY(-4px)} }
  .gen-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle;
    background:var(--accent); box-shadow:0 0 0 0 rgba(124,108,255,.5); animation:ring 1.2s ease-out infinite; }
  @keyframes ring { 0%{box-shadow:0 0 0 0 rgba(124,108,255,.5)} 70%{box-shadow:0 0 0 8px rgba(124,108,255,0)} 100%{box-shadow:0 0 0 0 rgba(124,108,255,0)} }
  @keyframes pulse { 0%,100%{opacity:.3; transform:scale(.85)} 50%{opacity:1; transform:scale(1)} }

  /* 生成进度条 */
  .genbar { height:6px; border-radius:99px; background:rgba(109,94,252,.14); overflow:hidden; margin:0 0 16px; }
  .genbar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#7d6dff,#50aaff); transition:width .5s var(--ease); box-shadow:0 0 12px rgba(109,94,252,.5); }
  .genbar-fill.indet { width:40%; animation:indet 1.3s ease-in-out infinite; }
  @keyframes indet { 0%{margin-left:-40%} 100%{margin-left:100%} }

  /* 空状态插画 */
  .empty .art { width:96px; height:96px; margin:0 auto 16px; opacity:.9; }
  .empty .art svg { width:100%; height:100%; }
  .gallery-guide { margin-top:34px; width:min(430px,92%); margin-left:auto; margin-right:auto; }
  .gallery-guide .gg-h { font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--faint); text-transform:uppercase;
    text-align:center; position:relative; margin-bottom:18px; }
  .gallery-guide .gg-h::before, .gallery-guide .gg-h::after { content:''; position:absolute; top:50%; width:64px; height:1px;
    background:linear-gradient(90deg,transparent,var(--line-2)); }
  .gallery-guide .gg-h::before { right:calc(50% + 44px); background:linear-gradient(90deg,transparent,var(--line-2)); }
  .gallery-guide .gg-h::after { left:calc(50% + 44px); background:linear-gradient(90deg,var(--line-2),transparent); }
  .gg-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .gallery-ex { display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px; text-align:left; cursor:pointer;
    background:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); border:1px solid rgba(255,255,255,.7);
    box-shadow:var(--sh-xs); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
  .gallery-ex:hover { transform:translateY(-3px); border-color:rgba(109,94,252,.35); box-shadow:var(--sh-2); }
  .gg-ic { flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--accent);
    background:linear-gradient(150deg, var(--accent-soft), rgba(109,94,252,.04)); box-shadow:inset 0 0 0 1px rgba(109,94,252,.14); transition:.2s var(--ease); }
  .gg-ic svg { width:21px; height:21px; }
  .gallery-ex:hover .gg-ic { background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 6px 14px -4px rgba(109,94,252,.55); }
  .gg-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .gg-tx b { font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
  .gg-tx i { font-size:10.5px; font-style:normal; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .empty h3 { font-size:16px; }

  /* ================= 响应式 ================= */
  @media (max-width: 1080px) {
    .app { height:auto; min-height:100vh; }
    .wb { grid-template-columns:1fr; height:auto; }
    .col-input, .col-result { height:auto; }
    .col-input { position:relative; border-right:none; border-bottom:1px solid rgba(255,255,255,.5); }
  }
  @media (max-width: 760px) {
    .app { flex-direction:column; }
    .sidebar { width:100%; flex:0 0 auto; flex-direction:row; height:auto; padding:8px 10px; gap:4px;
      border-right:none; border-bottom:1px solid rgba(255,255,255,.5); overflow-x:auto; }
    .brand { flex-direction:row; margin:0 8px 0 4px; gap:8px; }
    .side-sp, .side-user { display:none; }
    .nav-item { flex:0 0 auto; width:auto; flex-direction:row; padding:8px 12px; gap:6px; font-size:12.5px; border-radius:10px; }
    .results, .results.poster { grid-template-columns:1fr 1fr; }
    .style-chips { grid-template-columns:repeat(3,1fr); }
    .lib { grid-template-columns:1fr; }
    .task { grid-template-columns:1fr; }
    .page, .pad { padding:16px; }
  }
  @media (max-width: 460px) {
    .results, .results.poster { grid-template-columns:1fr; }
    .style-chips { grid-template-columns:repeat(2,1fr); }
    .grid-ctrl { grid-template-columns:1fr; }
  }

  /* lightbox 精修 */
  .lightbox { background: rgba(16,17,28,.62); backdrop-filter: blur(10px); }
  .lightbox img { cursor:default; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .lb-close { position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14);
    color:#fff; font-size:16px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.16s; }
  .lb-close:hover { background:rgba(255,255,255,.3); transform:scale(1.05); }
  .lb-dl { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.16); color:#fff;
    padding:11px 24px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.16s; }
  .lb-dl:hover { background:rgba(255,255,255,.3); }

  /* honor/quote refinements already handled; toast refinement */
  .toast { border:1px solid rgba(255,255,255,.5); box-shadow: var(--sh-2); }

  /* lightbox + toast */
  .lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 3vw; background: rgba(20,22,35,.6); backdrop-filter: blur(6px); }
  .lightbox.on { display: grid; }
  .lightbox img { max-width: 90vw; max-height: 88vh; border-radius: var(--r); box-shadow: var(--sh-2); }
  .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; font-size: 30px; line-height: 1; color: #fff;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
    transition: .16s var(--ease); z-index: 201; }
  .lb-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.06); }
  .lb-prev { left: 3vw; } .lb-next { right: 3vw; }
  .lb-nav[hidden] { display: none; }
  .lb-count { position: fixed; bottom: 3vh; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.9);
    font-size: 13px; font-weight: 600; background: rgba(20,22,35,.5); padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(6px); z-index: 201; }
  .toasts { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
  .toast { backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); background: var(--card-solid); border-left: 3px solid var(--accent); border-radius: 10px; padding: 11px 14px; font-size: 13px; box-shadow: var(--sh-2); max-width: 320px; animation: slidein .35s var(--ease) both; }
  .toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: #e5484d; }
  .toast b { display: block; margin-bottom: 1px; } .toast span { color: var(--muted); font-size: 12px; }
  @keyframes slidein { from { opacity: 0; transform: translateX(20px); } }
  @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms!important; transition-duration:.01ms!important; } }
  /* ===== 登录 / 用户 ===== */
  .side-role { color: var(--accent); font-size: 10px; font-weight: 600; }
  .side-logout { margin-top: 6px; font-size: 10.5px; color: var(--muted); padding: 3px 12px; border-radius: 8px;
    background: rgba(120,110,190,.08); transition: .16s; }
  .side-logout:hover { background: var(--danger); color: #fff; }
  /* 登录：左品牌 + 右白卡两栏（对齐运营系统，配色臻图紫） */
  .login-wrap { position: fixed; inset: 0; z-index: 300; overflow: auto;
    background: linear-gradient(118deg,#3a1f9e 0%,#6d5efc 50%,#9d8dff 100%); }
  .login-wrap .bg-grid { position: fixed; inset: 0; pointer-events: none; opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 22px 22px; }
  .login-grid { position: relative; z-index: 1; min-height: 100vh; max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 380px; align-items: center; gap: 72px; padding: 40px 32px; }
  .brand-side { color: #fff; }
  .brand-side .logo-mark { margin-bottom: 22px; box-shadow: 0 14px 34px rgba(20,10,60,.4); border-radius: 13px; }
  .brand-tag { display: inline-block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; opacity: .82;
    border: 1px solid rgba(255,255,255,.28); border-radius: 20px; padding: 4px 14px; margin-bottom: 20px; }
  .brand-title-main { font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; margin-bottom: 8px; }
  .brand-title-sub { font-size: 16px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; opacity: .68; margin-bottom: 20px; }
  .brand-desc { font-size: 14px; opacity: .84; line-height: 1.85; margin-bottom: 34px; max-width: 440px; }
  .brand-features { display: flex; flex-direction: column; gap: 13px; }
  .brand-features .feat { display: flex; align-items: center; gap: 11px; font-size: 14px; opacity: .92; }
  .feat-icon { width: 30px; height: 30px; background: rgba(255,255,255,.16); border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
  .login-card { background: #fff; border-radius: 18px; padding: 38px 32px 30px; box-shadow: 0 24px 60px rgba(40,20,120,.34); }
  .login-card h2 { text-align: center; font-size: 23px; font-weight: 800; color: #1e2130; margin-bottom: 6px; letter-spacing: 2px; }
  .login-subtitle { text-align: center; font-size: 13px; color: #9aa0b4; margin-bottom: 26px; }
  .login-f { display: block; margin-bottom: 16px; }
  .login-f span { display: block; font-size: 13px; font-weight: 600; color: #4a5068; margin-bottom: 7px; }
  .login-card .input { width: 100%; padding: 12px 14px; font-size: 14px; color: #1e2130;
    background: #f7f8fb; border: 1.5px solid #e6e8f0; border-radius: 11px; }
  .login-card .input::placeholder { color: #9aa0b4; }
  .login-card .input:focus { border-color: #6d5efc; box-shadow: 0 0 0 3px rgba(109,94,252,.15); background: #fff; }
  .login-err { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px;
    color: #dc2626; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
  .login-card .btn-gen { width: 100%; height: auto; padding: 13px; margin-top: 6px; font-size: 15px; font-weight: 700;
    border-radius: 11px; letter-spacing: 6px; background: linear-gradient(90deg,#6d5efc,#9b8bff); }
  .login-foot { text-align: center; margin-top: 22px; font-size: 12px; color: #c2c6d4; }
  .logo-mark { width: 52px; height: 52px; flex: 0 0 auto; }
  @media (max-width: 860px){
    .login-grid { grid-template-columns: 1fr; gap: 26px; justify-items: center; padding: 32px 20px; }
    .brand-side { text-align: center; } .brand-title-main { font-size: 30px; } .brand-features { align-items: center; }
    .login-card { width: min(100%, 420px); }
  }
  .urow { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
  .urow:last-child { border-bottom: none; }
  .urow .uav { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg,#8b7cf0,#6c5ce7); }
  .urow .uinfo { flex: 1; min-width: 0; }
  .urow .uinfo b { font-size: 13.5px; }
  .urow .uinfo small { display: block; color: var(--muted); font-size: 11.5px; }
  .urole { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
  .urole.admin { color: var(--accent-deep); background: var(--accent-soft); }
  .urole.lead { color: #b26a00; background: rgba(217,134,59,.15); }
  .urole.operator { color: #0a7f5a; background: rgba(16,160,110,.12); }
  .role-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; padding: 12px 16px; border-radius: 12px;
    background: rgba(255,255,255,.5); border: 1px solid var(--line); }
  .role-legend .rl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .users-tb-wrap { overflow-x: auto; }
  .users-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
  .users-tb th { text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .03em; padding: 0 12px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
  .users-tb th.num, .users-tb td.num { text-align: right; }
  .users-tb td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
  .users-tb tbody tr:hover { background: rgba(109,94,252,.04); }
  .users-tb .uacct { display: flex; align-items: center; gap: 10px; }
  .users-tb .uacct .av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: 0 0 auto; }
  .users-tb .uacct b { font-size: 13px; color: var(--ink); font-weight: 600; }
  .users-tb .uacct small { display: block; font-size: 10.5px; color: var(--faint); }
  .users-tb .u-act { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: rgba(120,110,190,.08); color: var(--ink-2); transition: .15s; margin-left: 6px; }
  .users-tb .u-act:hover { background: var(--accent-soft); color: var(--accent); }
  .users-tb .u-act.del:hover { background: #e2574f; color: #fff; }
  .users-tb .u-me { font-size: 10px; color: var(--faint); margin-left: 6px; }
  .urole-sel { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--ink-2); cursor: pointer; }
  .urole-sel:hover { border-color: var(--accent); }