/* ===== 设计令牌：默认浅色（系统级浅灰 + 白卡片），[data-theme=dark] 覆盖为纯黑 ===== */
  :root{
    color-scheme:light;
    /* 视觉层级（浅色）：页面最浅灰 → 一级卡片近白 → 次级底板浅灰 → 输入框/列表项纯白 */
    --bg:#f1f2f5; --panel:#ffffff; --panel2:#f6f7fa; --pop:#ffffff;
    --field:#ffffff; --field2:#f3f4f7; --hover:#eceef2;
    --line:#e3e6ec; --line2:#ccd2db;
    --text:#15181e; --text2:#39404e; --dim:#5c6573; --dim2:#868e9c;
    --accent:#0f6cbd; --accent2:#0b5aa0; --accent-bg:#eaf2fb; --accent-bg2:#dfeefc;
    --accent-line:#b9d4ee; --on-accent:#ffffff;
    --ok:#0f7b57; --ok-bg:#e9f7f1; --ok-line:#b7e3d1;
    --warn:#a35b00; --warn-bg:#fff5e5; --warn-line:#f0d9a8;
    --err:#b42318; --err-bg:#fdecec; --err-line:#f3c9c9;
    --shadow:0 18px 48px rgba(15,23,42,.14);
    /* 卡片层级：非常克制的两层阴影，只用来把白卡片从浅灰底上「拎」起来 */
    --card-shadow:0 1px 1px rgba(16,24,40,.03),0 8px 24px rgba(16,24,40,.05);
    --card-shadow-hi:0 1px 2px rgba(16,24,40,.04),0 14px 36px rgba(16,24,40,.08);
    /* 毛玻璃（文件夹弹窗）：半透明面 + 背景模糊 + 顶部高光 */
    /* 文件夹弹窗专用（浅色：白玻璃，靠透明度 + 明度差分层） */
    --d-bg:rgba(252,253,255,.74); --d-side:rgba(246,248,252,.52); --d-input:rgba(255,255,255,.66);
    --d-footer:rgba(255,255,255,.34);
    --d-hover:rgba(15,23,42,.055); --d-sel:rgba(15,108,189,.12); --d-sel-line:rgba(15,108,189,.62);
    --d-line:rgba(15,23,42,.11); --d-line-soft:rgba(15,23,42,.055); --d-edge:rgba(255,255,255,.90);
    --d-scroll:rgba(15,23,42,.18);
    --d-text:#141922; --d-text2:#3d4655; --d-text3:#616b7a;
    --d-accent:#0f6cbd; --d-accent-hover:#0b5aa0; --d-accent-soft:rgba(15,108,189,.16);
    --d-warn:#8a5a00; --d-warn-bg:rgba(240,196,80,.18); --d-warn-line:rgba(190,145,35,.32);
    --d-err:#b42318; --d-err-bg:rgba(180,35,24,.08);
    --d-blur:22px;
    --d-veil:rgba(16,20,26,.28);
    --d-shadow:0 28px 70px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08);
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Cascadia Mono", "Microsoft YaHei UI","Microsoft YaHei","PingFang SC",monospace;
    --ui:var(--font-ui);
    --on-media:#f2f5fa; --on-media-dim:#c8d2df;   /* 视频/图片蒙层上的字，始终浅色 */
    /* 只有提示词输入框做上下渐变；外框常显的灰色取自参考图，聚焦只加深灰、不泛光 */
    --prompt-grad-top:#F7F7F7; --prompt-grad-bottom:#FBFBFB;
    --prompt-line:#E3E6EC; --prompt-line-focus:#C9C9C9;
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#000000; --panel:#1c1c1e; --panel2:#2c2c2e; --pop:#1c1c1e;
    --field:#2c2c2e; --field2:#2c2c2e; --hover:#3a3a3c;
    --line:#38383a; --line2:#48484a;
    --text:#f0f2f5; --text2:#c9ced6; --dim:#9aa4b2; --dim2:#8e96a3;
    --accent:#4c8dff; --accent2:#6ea3ff; --accent-bg:#132744; --accent-bg2:#1a3355;
    --accent-line:#2f527f; --on-accent:#ffffff;
    --ok:#38d39f; --ok-bg:#0c2a20; --ok-line:#1e5745;
    --warn:#ffb020; --warn-bg:#2a1f08; --warn-line:#5c4413;
    --err:#ff6b6b; --err-bg:#2a1010; --err-line:#5c2222;
    --shadow:0 18px 48px rgba(0,0,0,.72);
    --card-shadow:0 8px 24px rgb(0 0 0 / .36); --card-shadow-hi:0 14px 36px rgb(0 0 0 / .5);
    /* 文件夹弹窗专用（深色：半透明石墨黑玻璃，能透出后方的页面） */
    --d-bg:rgba(24,26,32,.66); --d-side:rgba(255,255,255,.05); --d-input:rgba(8,10,14,.42);
    --d-footer:rgba(255,255,255,.022);
    --d-hover:rgba(255,255,255,.062); --d-sel:rgba(76,141,255,.16); --d-sel-line:rgba(76,141,255,.80);
    --d-line:rgba(255,255,255,.085); --d-line-soft:rgba(255,255,255,.05); --d-edge:rgba(255,255,255,.11);
    --d-scroll:rgba(255,255,255,.16);
    --d-text:#eceff5; --d-text2:#aab1bd; --d-text3:#828b98;
    --d-accent:#4c8dff; --d-accent-hover:#6aa0ff; --d-accent-soft:rgba(76,141,255,.20);
    --d-warn:#e0b062; --d-warn-bg:rgba(224,176,98,.12); --d-warn-line:rgba(224,176,98,.26);
    --d-err:#ff8f8f; --d-err-bg:rgba(255,107,107,.10);
    --d-blur:22px;
    --d-veil:rgba(5,7,11,.46);
    --d-shadow:0 30px 76px rgba(0,0,0,.60),0 2px 10px rgba(0,0,0,.35);
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Cascadia Mono", "Microsoft YaHei UI","Microsoft YaHei","PingFang SC",monospace;
    --ui:var(--font-ui);
    /* 只有提示词输入框做上下渐变；外框常显的灰色取自参考图，聚焦只加深灰、不泛光 */
    --prompt-grad-top:#181818; --prompt-grad-bottom:#1C1C1C;
    --prompt-line:#252525; --prompt-line-focus:#3A3A3A;
  }

  *{box-sizing:border-box}
  /* 表单控件默认用的是 UA 字体（中文常见是宋体），统一成界面这一套 */
  button,input,select,textarea{font-family:var(--ui)}
  body{margin:0;background:var(--bg);color:var(--text);
       font:14px/1.55 var(--ui)}
  /* 界面以「拖拽 / 点选」为主，全局关掉文字选区：否则在参考图框里随便一拖就会刷出
     一整片浅色高亮，看着像把框拖出来了。只有真正要复制的东西才放开选中。 */
  body{user-select:none;-webkit-user-select:none;cursor:default}
  input,textarea,pre,code,#log,#outDirPath,.outdir #outDirPath,#preview,.oprompt,
  .errbox,.lgline,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
  /* 图片不要被浏览器当成「可拖出的资源」，拖拽语义留给卡片自己 */
  img{-webkit-user-drag:none;user-drag:none}
  header{display:flex;align-items:center;gap:14px;padding:12px 18px;
         background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9;
         box-shadow:0 1px 2px rgba(16,24,40,.035)}
  header h1{font-size:20px;line-height:1.4;margin:0;font-weight:700}
  .tag{font:11px var(--mono);color:var(--dim);background:var(--panel2);border:1px solid var(--line);
       padding:2px 7px;border-radius:var(--radius-tag);white-space:nowrap}
  .spacer{flex:1}
  /* ---------- 输出卡片的「保存到」「用量」小按钮 + 气泡 ---------- */
  .hbtn{display:inline-flex;align-items:center;gap:6px;font:11.5px var(--mono);color:var(--dim);
        background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-control);padding:2px 8px;
        height:23px;cursor:pointer;transition:.14s;white-space:nowrap}
  .hbtn:hover{background:var(--pop);border-color:var(--line2);color:var(--text)}
  .hbtn.on{background:var(--accent-bg2);border-color:var(--accent-line);color:var(--text)}
  .hbtn b{font-weight:600;color:var(--accent)}
  .hbtn.on b{color:var(--accent)}
  /* 新版提示：跟别的小按钮不一样，一眼能看见 */
  .hbtn.newver{background:var(--accent-bg2);border-color:var(--accent-line);color:var(--accent)}
  .hbtn.newver:hover{background:var(--accent-bg);color:var(--text)}
  .hbtn.newver[hidden]{display:none}
  .upop{position:fixed;z-index:40;width:376px;max-height:calc(100vh - 86px);overflow:auto;
        background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-control);
        padding:10px 12px 12px;
        box-shadow:var(--dd-shadow,0 18px 40px rgba(16,18,24,.16),0 2px 8px rgba(16,18,24,.08)),
                   inset 0 1px 0 var(--dd-edge,rgba(255,255,255,.5));
        animation:popin .18s cubic-bezier(.16,1,.3,1)}
  @keyframes popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .upophead{display:flex;align-items:center;gap:6px;margin-bottom:9px}
  .upophead>b{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.6px}
  button{font:inherit;font-size:13px;line-height:1.4;color:var(--text);background:var(--panel2);border:1px solid var(--line);
         border-radius:var(--radius-control);padding:7px 13px;cursor:pointer;transition:.15s}
  button:hover{background:var(--hover);border-color:var(--line2)}
  button:disabled{opacity:.45;cursor:not-allowed}
  button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
  button.primary:hover{background:var(--accent2)}
  button.ghost{background:transparent}
  button.mini{padding:3px 8px;font-size:12px;border-radius:var(--radius-control)}
  main{display:grid;grid-template-columns:minmax(240px,1fr) 12px var(--rw,400px);
       gap:0 12px;padding:14px 18px 60px}
  /* ---------- 左右分栏拖动条 ---------- */
  .splitter{position:relative;cursor:col-resize;border-radius:var(--radius-tag);touch-action:none;
            background:transparent;transition:background .15s}
  .splitter::before{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;
            background:var(--line);border-radius:2px;transition:background .15s,box-shadow .15s}
  .splitter::after{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
            width:8px;height:32px;border-radius:var(--radius-tag);opacity:0;transition:opacity .15s;
            background:radial-gradient(circle,var(--dim2) 1.1px,transparent 1.3px) center/4px 6px repeat-y}
  .splitter:hover{background:var(--hover)}
  .splitter:hover::before{background:var(--accent)}
  .splitter:hover::after{opacity:.9}
  .splitter.dragging{background:var(--accent-bg)}
  .splitter.dragging::before{background:var(--accent);box-shadow:0 0 0 1px #4c8dff55}
  .splitter.dragging::after{opacity:0}
  .splitlabel{position:fixed;transform:translate(-50%,-100%);background:var(--pop);
            border:1px solid var(--line2);color:var(--text);font:11px var(--mono);padding:2px 7px;
            border-radius:var(--radius-tag);pointer-events:none;z-index:70;white-space:nowrap}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;
        box-shadow:var(--card-shadow)}
  .card h2{font-size:12px;margin:0 0 10px;color:var(--dim);font-weight:600;
           letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
  .card h2 .line{flex:1;height:1px;background:var(--line);min-width:16px}
  .card h2 button{white-space:nowrap;flex:none}
  .card h2{flex-wrap:wrap}
  .card h2 .hint{flex:1 1 100%;order:9;text-align:right;margin-top:1px}
  #ttApiTag{text-transform:none;letter-spacing:0;color:var(--dim);font-size:10px}
  textarea{width:100%;min-height:330px;resize:vertical;background:var(--field);color:var(--text);
           border:1px solid var(--line);border-radius:var(--radius-control);padding:12px;
           font:13px/1.7 var(--mono)}
  textarea:focus{outline:none;border-color:var(--accent)}