/* ---------- 参考图：拖拽网格 ---------- */
  /* 参考素材统一尺寸：图片卡与视频卡一样大（230 × 16:9），窄窗口时按容器收缩。
     这些规则必须限定在 #imgs 里：.img 也是提示词引用标签（.tok.img）、
     成片卡片（.oitem.img）和预览弹层（#modal.img）在用的类名，不能全局套卡片尺寸。 */
  .grid-imgs{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;min-height:40px}
  .grid-imgs.dragging-over{background:#0b0f1410;border-radius:var(--radius-control)}
  #imgs .img{position:relative;width:230px;max-width:100%;flex:0 0 auto;aspect-ratio:16/9;
       background:var(--field);border:1px solid var(--line);border-radius:var(--radius-control);
       overflow:hidden;cursor:grab;user-select:none;transition:border-color .15s,box-shadow .15s}
  #imgs .img:hover{border-color:var(--line2)}
  #imgs .img.sel{border-color:var(--accent);box-shadow:0 0 0 2px #4c8dff44}
  #imgs .img.dragging{opacity:.32;cursor:grabbing;border-style:dashed}
  #imgs .img .shot{position:relative;height:100%;background:var(--panel2)}
  #imgs .img .shot img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  #imgs .img .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
           font-size:11px;color:var(--err);text-align:center;padding:4px}
  #imgs .img .idx{position:absolute;top:6px;left:6px;background:#000c;border:1px solid #ffffff26;
            border-radius:var(--radius-tag);font:10px var(--mono);padding:1px 6px;backdrop-filter:blur(3px);
            color:var(--on-media)}
  #imgs .img .idx .roleTag{font-style:normal;color:var(--ok);margin-left:4px}
  #imgs .img .idx .roleTag.off{color:var(--on-media-dim)}
  #imgs .img .grip{position:absolute;top:6px;right:6px;width:20px;height:20px;display:flex;
             align-items:center;justify-content:center;border-radius:var(--radius-tag);color:#fff;
             background:#000a;font-size:11px;opacity:0;transition:.15s}
  #imgs .img:hover .grip{opacity:1}
  #imgs .img .meta{padding:6px 8px;font-size:11px;color:var(--dim);font-family:var(--mono)}
  #imgs .img .meta b{display:block;color:var(--text);font-weight:500;overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}

  /* ---------- 从系统拖入文件 ---------- */
  [data-drop]{transition:border-color .15s,box-shadow .15s,background .15s}
  .card[data-drop].dz-over{border-color:var(--accent);
    box-shadow:0 0 0 2px var(--accent),0 0 46px var(--accent-line)}
  .grid-imgs.dz-over{background:#4c8dff14;outline:2px dashed var(--accent);outline-offset:6px;border-radius:var(--radius-control)}
  .vthumb.dz-over{outline:2px dashed var(--accent);outline-offset:4px}
  #dropmask{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0;
            background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.06),rgba(0,0,0,.28));
            display:flex;align-items:center;justify-content:center;transition:opacity .14s}
  #dropmask.on{opacity:1}
  #dropmask .box{border:2px dashed #4c8dff99;border-radius:var(--radius-card);padding:24px 42px;text-align:center;
                 background:var(--pop);box-shadow:0 24px 60px #000a;transform:translateY(6px);
                 transition:transform .18s}
  #dropmask.on .box{transform:none}
  #dropmask .box b{display:block;font-size:15px;color:var(--text);margin-bottom:7px;letter-spacing:.3px}
  #dropmask .box span{font-size:12px;color:var(--dim)}

  /* ---------- 参考视频 ---------- */
  .vbox{display:flex;gap:12px;margin-bottom:10px}
  /* 参考视频卡压扁：16:9 下 250px 宽 ≈ 140px 高，够看清又不抢提示词的位置 */
  .vbox .vthumb{width:min(250px,100%);flex:none}
  /* 多段参考视频：卡片横排自动换行，宽度压到 200px，一行能塞 4 段 */
  .vlist{display:flex;flex-wrap:wrap;gap:10px;width:100%}
  .vlist .vthumb{width:min(200px,100%);flex:none}
  .vlist.dragover{outline:none}
  .vthumb.dragging{opacity:.45}
  .vthumb .vidx{position:absolute;left:7px;top:7px;z-index:2;font:10px var(--mono);
                background:#000b;border:1px solid #ffffff26;border-radius:var(--radius-tag);
                padding:1px 6px;color:var(--on-media)}
  .vthumb .grip{position:absolute;right:7px;top:7px;z-index:2;font-size:13px;
                color:var(--on-media);opacity:.55;pointer-events:none}
  .vhide{display:none!important}
  .vthumb{position:relative;aspect-ratio:16/9;background:var(--field);border:1px solid var(--line);
          border-radius:var(--radius-control);overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}
  .vthumb:hover{border-color:var(--line2)}
  .vthumb.sel{border-color:var(--accent);box-shadow:0 0 0 2px #4c8dff44}
  .vthumb video{width:100%;height:100%;object-fit:contain;display:block;background:var(--field)}
  .vthumb .empty[hidden]{display:none}   /* display:flex 会盖掉 [hidden]，这里补回来 */
  .vthumb .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                 color:var(--dim2);font-size:12px;flex-direction:column;gap:6px}
  .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
         width:44px;height:44px;border-radius:50%;background:#000a;border:1px solid #ffffff33;
         display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;
         transition:.18s;pointer-events:none;backdrop-filter:blur(2px)}
  .vthumb:hover .vplay{opacity:0;transform:translate(-50%,-50%) scale(.85)}
  .vthumb.playing .vplay{opacity:0}
  .vbadge{position:absolute;right:7px;bottom:7px;display:flex;gap:5px;pointer-events:none;
          transition:opacity .15s}
  /* 悬停播放时把底部这一排（分辨率 / 时长 / 帧率 / 大小）收起来，只留画面 */
  .vthumb:hover .vbadge,.vthumb.playing .vbadge{opacity:0}
  .vbadge span{font:10px var(--mono);background:#000b;border:1px solid #ffffff26;border-radius:var(--radius-tag);
               padding:1px 6px;color:var(--on-media);backdrop-filter:blur(3px)}
  .vmeta{font:11px var(--mono);color:var(--dim);display:flex;flex-wrap:wrap;gap:6px}
  .vmeta span{background:var(--field);border:1px solid var(--line);border-radius:var(--radius-tag);padding:2px 7px}

  /* ---------- 参考内容：图片 + 视频合并成一张卡，素材并排 ---------- */
  /* 视频相关按钮和视频素材区只在视频生成板块出现（图片生成不提交视频） */
  #refVideoTools{display:inline-flex;align-items:center;gap:8px;flex:none}
  /* 图片网格和视频卡同处一行：视频区和列表都不生成盒子，让每张视频卡直接参与外层换行 */
  /* 留够一行缩略图的高度：有没有素材、切到哪个板块，参考栏都一样高，切换不跳 */
  #refMaterials{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;min-height:130px}
  #refMaterials > #imgs{flex:0 1 auto;min-width:0}
  #refVideoBlock,#refVideoBlock > #vlist{display:contents}
  #refVideoBlock[hidden],#refVideoTools[hidden],#refVideoInfo[hidden]{display:none}
  #refVideoBlock .vthumb{width:230px;max-width:100%;flex:0 0 auto}
  /* 选中提示和段信息放在整行素材下面，不挤占并排布局 */

  .field{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  .field label{width:74px;color:var(--dim);font-size:12px;flex:none}
  input[type=text],input[type=number],select{flex:1;min-width:0;background:var(--field);color:var(--text);
        border:1px solid var(--line);border-radius:var(--radius-control);padding:6px 9px;font:13px var(--mono)}
  input:focus,select:focus{outline:none;border-color:var(--accent)}
  .locked{background:var(--panel2)!important;color:var(--dim)!important;cursor:not-allowed}
  .fhint{font-size:11px;color:var(--dim);margin:-4px 0 9px 84px}
  #resHint{margin:-3px 0 10px;font-size:10.5px}