:root{
  --bg:#f4f5f7; --panel:#fff; --line:#e8eaef; --text:#1f2430; --muted:#9aa1ad;
  --brand:#7c5cff; --brand-soft:#efeaff; --accent:#c8f54a; --accent-d:#a9d92f;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --radius:12px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* 让 hidden 属性对 display:flex 等元素也生效 */
html,body{margin:0;height:100%;font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  color:var(--text);background:var(--bg);font-size:13px}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.app{display:flex;flex:1;min-height:0;overflow:hidden}

/* 顶部导航 */
.topbar{height:52px;flex:0 0 52px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.tb-brand{font-weight:800;color:var(--brand);font-size:16px;letter-spacing:.5px;cursor:pointer}
.tb-actions{display:flex;align-items:center;gap:10px}
.tb-btn{padding:8px 14px;border-radius:9px;font-weight:700;font-size:13px;color:var(--text);
  background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;gap:6px}
.tb-btn:hover{border-color:var(--brand);color:var(--brand)}
.tb-btn.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.tb-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand) center/cover no-repeat;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-left:4px;cursor:pointer;text-transform:uppercase;overflow:hidden}

/* 用户菜单 */
.user-menu{position:fixed;top:56px;right:20px;z-index:80;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 30px rgba(30,36,48,.16);padding:8px;min-width:160px}
.user-menu .um-name{padding:8px 12px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line);margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu .um-logout{width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--bad);font-weight:700}
.user-menu .um-logout:hover{background:#fef2f2}

/* 登录 / 注册:蒙版模态 */
.auth-gate{position:fixed;inset:0;z-index:200;background:rgba(20,24,32,.5);
  display:flex;align-items:center;justify-content:center}
.auth-card{position:relative;width:360px;max-width:92vw;background:#fff;border-radius:18px;padding:32px 28px;
  box-shadow:0 20px 60px rgba(30,36,48,.28)}
.auth-close{position:absolute;top:14px;right:16px;font-size:24px;color:var(--muted);cursor:pointer;line-height:1}
.auth-close:hover{color:var(--text)}
.tb-avatar.guest{width:auto;padding:0 14px;border-radius:9px;font-size:13px;background:var(--brand-soft);color:var(--brand);text-transform:none}
.auth-logo{font-weight:800;color:var(--brand);font-size:24px;text-align:center}
.auth-sub{color:var(--muted);text-align:center;margin:6px 0 22px}
.auth-tabs{display:flex;gap:6px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:20px}
.auth-tabs button{flex:1;padding:9px;border-radius:8px;font-weight:800;color:var(--muted)}
.auth-tabs button.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(30,36,48,.1)}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;color:#5a6173;font-size:12px;margin-bottom:6px}
.auth-field input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit}
.auth-field input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.auth-err{color:var(--bad);font-size:13px;min-height:18px;margin-bottom:6px}
.auth-submit{width:100%;padding:12px;border-radius:10px;background:var(--brand);color:#fff;font-weight:800;font-size:15px}
.auth-submit:hover{opacity:.92}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}

/* 生成记录页 */
.records-page{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
.rec-head{display:flex;align-items:center;gap:16px;padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--line)}
.rec-tabs{display:flex;gap:6px;background:var(--bg);border-radius:10px;padding:4px;flex-shrink:0}
.rec-tabs button{white-space:nowrap}   /* 空间不足时不要把标签压成竖排 */
/* 来源筛选:定宽、不参与 flex 伸缩,否则会挤扁左侧 tabs */
.rec-srcfilter{flex:0 0 auto;width:132px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg);font-size:13px;font-family:inherit;color:var(--text);cursor:pointer}
.rec-srcfilter:focus{border-color:var(--brand);outline:none}
.rec-tabs button{padding:7px 16px;border-radius:8px;font-weight:800;font-size:13px;color:var(--muted)}
.rec-tabs button.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(30,36,48,.08)}
.rec-search{flex:1;max-width:440px;padding:9px 14px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:var(--bg)}
.rec-search:focus{border-color:var(--brand);outline:none}
.rec-all{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.rec-all input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.rec-body{flex:1;overflow-y:auto;padding:20px 24px}
.rec-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:18px}
.rec-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rec-card-head .cb{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.rec-title{font-weight:800;font-size:15px;flex:1}
.rec-acts{display:flex;align-items:center;gap:10px}
.rec-more{width:30px;height:30px;border-radius:8px;color:var(--muted);font-size:18px;font-weight:800}
.rec-more:hover{background:var(--bg)}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.rec-grid--video{align-items:start}   /* 视频记录:参考图(方)与成片封面(宽)混排,各格按自身高度 */
.rec-thumb{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f4f5f7;cursor:pointer}
.rec-thumb img{width:100%;display:block}
.rec-thumb video{width:100%;display:block;background:#000}   /* 视频记录:成片封面格 */
.rec-thumb.orig::after{content:"原图";position:absolute;top:8px;left:8px;background:#0009;color:#fff;
  font-size:11px;padding:2px 7px;border-radius:6px}
.rec-cap{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.3;padding:0 2px}
.rec-ph{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:22px}
.rec-ph.failed{color:var(--bad)}
.card-clear{float:right;color:var(--muted);font-size:12px;font-weight:700}
.card-clear:hover{color:var(--bad)}
.tile.orig .tile-img img{cursor:zoom-in}
.rec-chip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;margin-left:2px}
.rec-chip.queued{background:#eef0f3;color:#6b7280}
.rec-chip.spec{background:#eef0f3;color:#6b7280;font-weight:600}   /* 视频记录:模型/分辨率/时长 */
.rec-chip.viral{background:#fff1e6;color:#c2410c;font-weight:700}  /* AI爆款 来源徽标 */
.rec-chip.swap{background:#e0f2fe;color:#0369a1;font-weight:700}   /* 视频换人 来源徽标 */
.rec-chip.running{background:var(--brand-soft);color:var(--brand)}
.rec-chip.partial{background:#fef3c7;color:#b45309}
.rec-chip.failed{background:#fee2e2;color:#b91c1c}
.rec-acts .btn-ghost:disabled,.rec-acts .btn-primary:disabled{opacity:.45;cursor:not-allowed}
.rec-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted)}
.rec-empty .rec-empty-ic{font-size:46px;opacity:.35}
.rec-empty .btn-ghost{padding:10px 26px;font-weight:700;box-shadow:0 2px 10px rgba(30,36,48,.08)}

/* 批量托管页 */
.batch-page{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.batch-scroll{flex:1;overflow-y:auto;padding:22px 26px 30px;max-width:1120px;width:100%;margin:0 auto}
.batch-card{padding:18px 20px}
.bc-label{font-weight:800;font-size:15px}
.bc-label .hint{font-weight:400;margin-left:4px}
.bc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bc-acts{display:flex;align-items:center;gap:14px}
.link-btn{color:var(--muted);font-size:13px;font-weight:700}
.link-btn:hover{color:var(--brand)}
/* 业务类型卡 */
.biz-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.biz-card{border:1.5px solid var(--line);border-radius:12px;padding:18px 20px;cursor:pointer;background:var(--panel);transition:.15s}
.biz-card:hover{border-color:var(--brand)}
.biz-card.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.biz-card .bz-t{font-weight:800;font-size:16px}
.biz-card .bz-d{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.5}
/* 全局设置 */
.batch-global-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mod-opt{border:1px solid var(--line);border-radius:9px;padding:11px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:700;font-size:13px;background:var(--bg)}
.mod-opt:hover{border-color:var(--brand)}
.mod-opt.checked{border-color:var(--brand);background:var(--brand-soft)}
.mod-opt input{width:16px;height:16px;accent-color:var(--brand)}
/* 任务卡 */
.task-card{padding:18px 20px}
.task-card.confirmed{border-color:var(--brand)}
.tc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tc-title{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.tc-title .ok{color:var(--ok);font-size:13px}
.tc-acts{display:flex;gap:10px}
.tc-acts .btn-ghost{padding:7px 16px;font-weight:700}
.btn-dark{padding:7px 18px;border-radius:8px;background:var(--brand);color:#fff;font-weight:700}
.btn-dark:hover{opacity:.9}
.tc-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.tc-col{display:flex;flex-direction:column}
.tc-colhead{height:34px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tc-colhead .lbl{color:var(--muted);font-size:13px}
.tc-colhead .btn-ai{padding:6px 14px}
.tc-upload{flex:1;border:1.5px dashed var(--line);border-radius:12px;padding:16px;display:flex;flex-wrap:wrap;gap:10px;min-height:150px;align-items:center;align-content:center}
.tc-drop{display:flex;align-items:center;gap:18px;color:var(--muted);cursor:pointer}
.tc-drop .plus{width:64px;height:64px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:300;color:var(--muted);flex:none}
.tc-drop .dp-text{max-width:230px;line-height:1.7}
.tc-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.tc-thumb img{width:100%;height:100%;object-fit:cover}
.tc-thumb .del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#000a;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.tc-core{flex:1;width:100%;min-height:150px;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;resize:vertical;font-family:inherit}
.tc-core:focus{border-color:var(--brand);outline:none}
.tc-ov-toggle{margin-top:14px;color:var(--muted);font-size:13px;font-weight:700}
.tc-ov-toggle:hover{color:var(--brand)}
.tc-ov{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:12px;border-top:1px dashed var(--line)}
.batch-newtask{text-align:center;color:var(--brand);font-weight:800;cursor:pointer;padding:16px}
.batch-newtask:hover{background:var(--brand-soft)}
.batch-foot{border-top:1px solid var(--line);background:var(--panel);padding:12px 26px;display:flex;justify-content:flex-end}
.btn-submit{padding:12px 40px;border-radius:10px;background:linear-gradient(90deg,#8b6cff,var(--brand));color:#fff;font-weight:800;font-size:15px}
.btn-submit:hover{opacity:.92}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}

/* 左侧导航 */
.rail{width:96px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;padding:16px 8px;gap:6px}
.logo{font-weight:800;color:var(--brand);font-size:15px;margin-bottom:14px;text-align:center;line-height:1.2}
.rail .nav{width:100%}
.rail .nav button{width:100%;padding:12px 6px;border-radius:10px;color:var(--muted);
  font-size:12px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800}
.rail .nav button .ic{font-size:18px}
.rail .nav button.active{background:var(--brand-soft);color:var(--brand)}

/* 配置列 */
.config{width:392px;min-width:392px;overflow-y:auto;padding:18px;background:var(--bg)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:6px}
.card h3 .req{color:var(--bad)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{margin-bottom:10px}
.field>label{display:block;color:#5a6173;font-size:12px;margin-bottom:5px}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;
  font-size:13px;background:#fbfbfd;color:var(--text);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
textarea{resize:vertical;min-height:108px;line-height:1.6}
.hint{color:var(--muted);font-size:12px}

/* 上传 */
.upload{border:1.5px dashed #cfd4de;border-radius:10px;padding:26px 18px;text-align:center;color:var(--muted);
  cursor:pointer;transition:.15s;background:#fbfbfd}
.upload:hover{border-color:var(--brand);color:var(--brand);background:#faf9ff}
.upload .up-inner{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;color:#3a3f4c}
.upload:hover .up-inner{color:var(--brand)}
.upload .up-inner .svg-ic{width:18px;height:18px;vertical-align:middle}
.upload .hint{margin-top:8px}
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.up-thumb{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#f7f8fa}
.up-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.up-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:7px;background:#1f2430cc;color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s}
.up-thumb:hover .up-del{opacity:1}
.up-del:hover{background:var(--bad)}
.up-add{aspect-ratio:1/1;border:1.5px dashed #cfd4de;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#b7bdc9;cursor:pointer;background:#fbfbfd;transition:.15s}
.up-add:hover{border-color:var(--brand);color:var(--brand);background:#faf9ff}

/* 按钮 */
.btn-ghost{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:600;color:#444;background:#fff}
.btn-ai{border:1px solid var(--brand);color:var(--brand);border-radius:8px;padding:6px 12px;font-weight:700;background:#fff}
.btn-ai:hover{background:var(--brand-soft)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

/* 出图类型 */
.type-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.type-actions .ai-gen{background:linear-gradient(135deg,#8b6cff,#7c5cff);color:#fff;border-radius:10px;
  padding:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.type-actions .pick{border:1.5px dashed var(--brand);color:var(--brand);border-radius:10px;padding:12px;font-weight:700}
.sel-empty{border:1.5px dashed var(--line);border-radius:10px;padding:26px;text-align:center;color:var(--muted)}
.sel-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;background:#fbfbfd}
.sel-item .meta{flex:1}
.sel-item .nm{font-weight:700;font-size:13px}
.sel-item .badge{font-size:11px;color:var(--brand);background:var(--brand-soft);border-radius:5px;padding:1px 6px;margin-left:6px}
.sel-item .ds{color:var(--muted);font-size:11px;margin-top:2px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stepper button{width:26px;height:28px;font-size:15px;color:#555;background:#fff}
.stepper span{width:30px;text-align:center;font-weight:700}
.sel-item .del{color:var(--muted);font-size:15px;padding:4px}

/* 生成按钮 */
.generate{position:sticky;bottom:0;margin-top:6px}
.btn-generate{width:100%;background:linear-gradient(90deg,#8b6cff,var(--brand));color:#fff;
  border-radius:12px;padding:15px;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 18px rgba(124,92,255,.28)}
.btn-generate:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-generate .cost{font-size:12px;font-weight:700;background:#ffffff33;border-radius:20px;padding:3px 10px}

/* 右侧结果 */
.result{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border-left:1px solid var(--line)}
.result-head{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px}
.result-head .t{font-weight:800;font-size:15px}
.result-head .sub{color:var(--muted)}
.result-body{flex:1;overflow-y:auto;padding:20px;display:flex;gap:18px}
.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;align-content:start}
.tile{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fafbfc;display:flex;flex-direction:column}
.tile .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:
  repeating-conic-gradient(#eef0f3 0% 25%, #f7f8fa 0% 50%) 50%/18px 18px;position:relative}
.tile img{width:100%;display:block}
.tile .cap{padding:8px 10px;font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.tile .cap .badge{font-size:10px;color:var(--accent-d);background:#f4fbe0;border-radius:4px;padding:1px 5px}
.spinner{width:30px;height:30px;border:3px solid #dfe3ea;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tile.failed .ph{color:var(--bad);font-size:12px;text-align:center;padding:10px}

/* SVG 图标(用 mask 上色,复用 images/*.svg) */
.svg-ic{display:inline-block;width:16px;height:16px;background-color:currentColor;vertical-align:-3px;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ic-view{-webkit-mask-image:url(/images/view.svg);mask-image:url(/images/view.svg)}
.ic-download{-webkit-mask-image:url(/images/download.svg);mask-image:url(/images/download.svg)}
.ic-delete{-webkit-mask-image:url(/images/delete.svg);mask-image:url(/images/delete.svg)}
.ic-upload{-webkit-mask-image:url(/images/upload.svg);mask-image:url(/images/upload.svg)}

/* 生成图上的操作(勾选 + 预览/下载/删除) */
.tile-img{position:relative;display:block;line-height:0}
.tile-cb{position:absolute;top:8px;left:8px;z-index:2;background:#ffffffe0;border-radius:5px;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tile-cb input{width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--brand)}
.tile-img .ov{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:.15s;z-index:2}
.tile-img:hover .ov{opacity:1}
.ov-btn{width:30px;height:30px;border-radius:8px;background:#1f2430cc;color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);cursor:pointer}
.ov-btn:hover{background:var(--brand)}

/* 结果区顶栏(创作记录/本次生成) */
.result-main{flex:1;display:flex;flex-direction:column;min-width:0}
.result-header{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:14px;
  background:#f7f8fa;border:1px solid var(--line);border-radius:10px}
.result-header .cb-wrap{display:flex;align-items:center}
.result-header .cb-wrap input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.rh-title{font-weight:700;font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-acts{display:flex;gap:8px;align-items:center}
.rh-acts .btn-primary{padding:7px 16px;display:flex;align-items:center;gap:5px}
.rh-acts .btn-ghost{padding:7px 14px}

/* 空状态:整套图预览示意(在容器中居中) */
.grid--empty{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.preview-mock{display:flex;gap:18px;align-items:flex-start;justify-content:center;
  padding:8px 4px 4px;flex-wrap:wrap}
.pv-main,.pv-cell{position:relative;border-radius:14px;overflow:hidden;background:#f0f1f4;box-shadow:0 6px 20px rgba(30,36,48,.06)}
.pv-main{width:336px;height:336px}
.pv-side{display:grid;grid-template-columns:163px 163px;grid-template-rows:163px 163px;gap:10px}
.pv-cell{width:163px;height:163px}
.preview-mock img{width:100%;height:100%;object-fit:cover;display:block}
.pv-tag{position:absolute;top:8px;left:8px;background:#fffffff2;color:#333;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.preview-hint{text-align:center;color:var(--muted);margin-top:6px}

/* 详情套图空状态示意 */
.detail-mock{align-items:center;gap:20px}
.detail-mock .dm-cap{display:block;text-align:center;margin-top:8px;font-size:11px;font-weight:700;color:#555;
  background:#fff;border-radius:20px;padding:4px 10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.dm-src-imgs{display:flex;flex-direction:column;gap:9px}
.dm-src-imgs img{width:104px;height:109px;object-fit:cover;border-radius:10px;background:#f0f1f4;box-shadow:0 4px 14px rgba(30,36,48,.06)}
.dm-arrow{font-size:24px;color:#b7bdc9}
.dm-long img{width:94px;height:336px;object-fit:cover;border-radius:12px;background:#f0f1f4;box-shadow:0 6px 20px rgba(30,36,48,.08)}
.dm-grid{display:grid;grid-template-columns:175px 175px;grid-auto-rows:108px;gap:10px}
.dm-grid img{width:175px;height:108px;object-fit:cover;border-radius:10px;background:#f0f1f4;box-shadow:0 4px 14px rgba(30,36,48,.06)}

/* 创作记录 */
.history{width:150px;min-width:150px;border-left:1px solid var(--line);overflow-y:auto;padding:12px 10px}
.history h4{margin:4px 0 10px;font-size:13px;color:#444}
.hist-item{border:1px solid var(--line);border-radius:10px;padding:6px;margin-bottom:10px;cursor:pointer;background:#fafbfc}
.hist-item:hover{border-color:var(--brand)}
.hist-thumb{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:#eef0f3}
.hist-item .meta{font-size:11px;color:var(--muted);margin-top:4px}
.hist-item .cnt{font-weight:700;color:#444}

/* 弹窗 */
/* 类型选择:右侧抽屉 */
.drawer-bg{position:fixed;inset:0;background:#0006;opacity:0;visibility:hidden;transition:.22s;z-index:60}
.drawer-bg.open{opacity:1;visibility:visible}
/* 判重确认弹窗(居中小卡) */
#dupModal{display:flex;align-items:center;justify-content:center}
.dup-box{background:#fff;border-radius:16px;padding:26px 28px;width:420px;max-width:92vw;
  box-shadow:0 20px 60px rgba(30,36,48,.28)}
.dup-box h3{margin:0 0 10px;font-size:17px}
.dup-box .hint{line-height:1.6;margin:0 0 18px}
.dup-acts{display:flex;flex-direction:column;gap:10px}
.dup-acts button{padding:11px;font-weight:700}
.drawer{position:fixed;top:0;right:0;height:100vh;width:640px;max-width:94vw;background:#fff;z-index:61;
  box-shadow:-8px 0 30px rgba(30,36,48,.16);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .22s}
.drawer-bg.open .drawer{transform:translateX(0)}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0 0 4px}
.drawer-head .sub{color:var(--muted);font-size:13px}
.drawer-head .lb-close{position:static;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:16px 18px}
.drawer-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.drawer-foot .btn-ghost{flex:1;padding:11px}
.drawer-foot .btn-primary{flex:1.4;padding:11px}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type-opt{border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.type-opt:hover{border-color:var(--brand)}
.type-opt.checked{border-color:var(--brand);background:var(--brand-soft)}
.type-opt input{width:16px;height:16px;margin-top:2px}
.type-opt .nm{font-weight:700;font-size:13px}
.type-opt .ds{color:var(--muted);font-size:11px;margin-top:2px}
.btn-primary{background:var(--brand);color:#fff;border-radius:9px;padding:10px 22px;font-weight:700}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1f2430;color:#fff;
  padding:10px 18px;border-radius:10px;font-size:13px;z-index:99;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1}

/* 自定义下拉(白色样式) */
.dd{position:relative;width:100%}
.dd-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#fff;color:var(--text);
  font-size:13px;text-align:left}
.dd.open .dd-toggle{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.dd-toggle .dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-toggle .dd-caret{color:var(--muted);font-size:11px;transition:.15s;flex:none}
.dd.open .dd-toggle .dd-caret{transform:rotate(180deg);color:var(--brand)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(30,36,48,.14);
  padding:6px;max-height:260px;overflow-y:auto;display:none}
.dd.open .dd-menu{display:block}
.dd-opt{padding:9px 10px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--text)}
.dd-opt:hover{background:#f4f5f7}
.dd-opt.selected{background:var(--brand-soft);color:var(--brand);font-weight:700}
/* 顶栏语言下拉:压成顶栏按钮视觉;必须在 .dd 之后声明以覆盖其 width:100% */
.dd.tb-lang{width:112px;flex:none}
.dd.tb-lang .dd-toggle{padding:8px 12px;font-weight:700;background:var(--bg);cursor:pointer}
.dd.tb-lang .dd-menu{min-width:112px}

/* AI润色费用 info 图标 + tooltip */
.info-ic{position:relative;color:var(--muted);font-size:12px;cursor:help;margin-left:4px;font-weight:400}
.info-ic .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#1f2430;color:#fff;font-size:12px;font-weight:400;line-height:1.5;white-space:nowrap;
  padding:8px 12px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.2);opacity:0;pointer-events:none;
  transition:.15s;z-index:60}
.info-ic .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#1f2430}
.info-ic:hover .tip{opacity:1}

/* 图片预览灯箱 */
.lightbox{position:fixed;inset:0;background:#000d;display:none;align-items:center;justify-content:center;z-index:80;padding:32px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 10px 50px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:20px;right:28px;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.8}
.lb-close:hover{opacity:1}

/* 预览长图 弹框 */
.longbox{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:85;padding:20px}
.longbox.open{display:flex}
.longbox-panel{background:#fff;border-radius:14px;width:min(1600px,96vw);max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
.longbox-head{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.longbox-head .t{font-weight:800;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.longbox-head .acts{display:flex;align-items:center;gap:8px}
.longbox-head .lb-close{position:static;color:var(--muted);font-size:26px}
.longbox-head .btn-primary,.longbox-head .btn-ghost{padding:8px 16px;display:flex;align-items:center;gap:5px}
/* 宽底、长图在正中间竖向拼接显示 */
.longbox-body{overflow-y:auto;background:#f4f5f7;display:flex;flex-direction:column;align-items:center;padding:28px 0}
.longbox-body img{display:block;width:min(480px,90%)}

/* ============ AI改图 面板 ============ */
.edit-fn-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.edit-fn{border:1px solid var(--line);border-radius:9px;padding:10px 4px;font-size:13px;font-weight:600;
  color:#3a3f4c;background:#fff;text-align:center;transition:.15s}
.edit-fn:hover{border-color:var(--brand);color:var(--brand)}
.edit-fn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.edit-fn.disabled{color:#b7bdc9;cursor:not-allowed}
.edit-fn.disabled:hover{border-color:var(--line);color:#b7bdc9}

/* 分段控件(模式 / 分辨率) */
.seg{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f4f5f7;flex-wrap:wrap}
.seg button{flex:1;min-width:64px;padding:9px 8px;font-size:13px;font-weight:600;color:#5a6173;background:transparent;white-space:nowrap}
.seg button.active{background:var(--brand);color:#fff}
.seg.seg-res button.active{background:var(--brand);color:#fff}
.cn-boost{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:13px;color:#5a6173;cursor:pointer}
.cn-boost input{width:15px;height:15px;accent-color:var(--brand)}

.edit-prompt-acts{display:flex;gap:10px;margin-top:10px}
.edit-prompt-acts .btn-ai{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(135deg,#8b6cff,#7c5cff);color:#fff;border:none}
.edit-prompt-acts .btn-ai:hover{opacity:.92}

/* 单图上传(改图主图 / 参考图) */
.edit-one{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f7f8fa}
.edit-one img{width:100%;max-height:240px;object-fit:contain;display:block;background:#fff}
.edit-one .one-ov{position:absolute;right:10px;bottom:10px;display:flex;gap:8px;opacity:0;transition:.15s}
.edit-one:hover .one-ov{opacity:1}
.edit-one .one-ov button{display:flex;align-items:center;gap:4px;background:#1f2430cc;color:#fff;border-radius:8px;
  padding:6px 10px;font-size:12px;font-weight:600;backdrop-filter:blur(2px)}
.edit-one .one-ov button:hover{background:var(--brand)}
.edit-ref-small .edit-one img{max-height:140px}

/* ============ 生成图上的 hover 底部按钮(AI改图/编辑文字)+ 边框 ============ */
.tile-img:hover{box-shadow:inset 0 0 0 2px var(--brand)}
.tile-img .ov-bottom{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:8px;opacity:0;transition:.15s;z-index:2}
.tile-img:hover .ov-bottom{opacity:1}
.ov-bottom button{flex:1;background:#1f2430cc;color:#fff;border-radius:8px;padding:9px 6px;font-size:12px;font-weight:700;
  backdrop-filter:blur(2px)}
.ov-bottom button:hover{background:var(--brand)}

/* 改图/改字结果:虚线紫框 + 角标(紧跟原图,水平平铺) */
.tile.child{border:1.5px dashed var(--brand)}
.tile.child .cap .badge{color:var(--brand);background:var(--brand-soft)}

/* ============ 编辑文字 右侧抽屉 ============ */
.text-panel{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:92vw;background:#fff;z-index:70;
  box-shadow:-8px 0 30px rgba(30,36,48,.16);display:flex;flex-direction:column;transform:translateX(105%);transition:.22s}
.text-panel.open{transform:translateX(0)}
.tp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.tp-head .t{font-weight:800;font-size:16px}
.tp-head .lb-close{position:static;color:var(--muted);font-size:26px}
.tp-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.tp-field{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}
.tp-field:focus{border-color:var(--brand)}
.tp-skel{height:46px;border-radius:10px;background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.tp-empty{color:var(--muted);text-align:center;padding:30px 0}
.tp-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.tp-foot .btn-ghost{flex:1;padding:11px}
.tp-foot .btn-primary{flex:1.4;padding:11px;display:flex;align-items:center;justify-content:center;gap:6px}
.tp-foot .btn-primary:disabled{opacity:.5;cursor:not-allowed}

/* ============ AI生视频 (Seedance) ============ */
/* 生成模式卡片(仿单选) */
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mode-card{position:relative;border:1.5px solid var(--line);border-radius:10px;padding:12px 10px 12px 32px;
  cursor:pointer;background:var(--panel);transition:border-color .15s,background .15s}
.mode-card:hover{border-color:var(--brand)}
.mode-card.active{border-color:var(--brand);background:var(--brand-soft)}
.mode-card .mc-dot{position:absolute;left:11px;top:13px;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--muted);background:#fff;box-sizing:border-box}
.mode-card.active .mc-dot{border-color:var(--brand)}
.mode-card.active .mc-dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-radius:50%;background:var(--brand);transform:translate(-50%,-50%)}
.mode-card .mc-label{font-weight:700;color:var(--text);font-size:13px}
.mode-card.active .mc-label{color:var(--brand)}
.mode-card .mc-sub{color:var(--muted);font-size:11px;margin-top:2px}
/* 首尾帧/参考视频 上传槽 */
#videoModeExtra{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
#videoModeExtra:empty{margin-top:0}
.frame-slot{display:flex;flex-direction:column;gap:6px}
.frame-slot .fs-label{font-size:12px;color:var(--muted)}
.frame-slot .fs-box{width:96px;height:96px;border:1.5px dashed var(--line);border-radius:10px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:var(--bg)}
.frame-slot .fs-box:hover{border-color:var(--brand)}
.frame-slot .fs-box img,.frame-slot .fs-box video{width:100%;height:100%;object-fit:cover}
.frame-slot .fs-plus{color:var(--muted);font-size:22px}
/* 开关行 */
.switch-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.switch-row .sw{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}
.switch-row .sw input{width:15px;height:15px;accent-color:var(--brand)}
/* 分镜脚本生成区 */
#videoGenRow{display:flex;flex-direction:column;gap:8px;margin:8px 0}
#videoDesc{min-height:60px}
/* 视频结果 */
.grid--video{display:block}
.video-result{display:flex;flex-direction:column;gap:12px;align-items:center}
.video-result video{width:100%;max-height:60vh;border-radius:10px;background:#000}
.video-acts{display:flex;gap:10px}
.video-acts .btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 18px}
.video-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:280px;color:var(--text)}
.video-status .hint{color:var(--muted)}
.video-status.failed{color:var(--bad)}

/* Seedance 选脸缩略图网格 */
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.model-cell { cursor: pointer; border: 2px solid transparent; border-radius: 8px; padding: 3px; text-align: center; transition: border-color .15s, background .15s; }
.model-cell:hover { background: rgba(127,127,127,.08); }
.model-cell.selected { border-color: #6c5ce7; background: rgba(108,92,231,.08); }
.model-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f2f2f5; color: #9aa; font-size: 12px; }
.model-auto { background: linear-gradient(135deg,#eef0ff,#e6e0ff); color: #6c5ce7; font-weight: 600; }
.model-noimg { color: #bbb; }
.model-name { margin-top: 4px; font-size: 11px; color: var(--muted,#888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 视频创作记录缩略图(复用 .hist-thumb 尺寸,视频取首帧) */
video.hist-thumb { object-fit: cover; background: #000; }

/* 视频创作记录:结果区顶部 header 条 */
.video-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--border, #eee); border-radius: 10px; background: var(--card, #fafafa); }
.video-result-head .rh-title { font-size: 13px; color: var(--muted, #666); }
/* 选脸网格:放大按钮 */
.model-cell { position: relative; }
.model-zoom { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; line-height: 22px; cursor: pointer; padding: 0; opacity: 0; transition: opacity .15s; }
.model-cell:hover .model-zoom { opacity: 1; }

/* 视频创作记录:输入信息面板 */
.vh-acts { display: flex; gap: 8px; align-items: center; }
.video-info { border: 1px solid var(--border, #eee); border-radius: 10px; padding: 6px 14px; margin-bottom: 12px; background: var(--card, #fafafa); font-size: 13px; }
.vi-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border, #eee); }
.vi-row:last-child { border-bottom: none; }
.vi-row.vi-col { flex-direction: column; gap: 4px; }
.vi-k { color: var(--muted, #888); min-width: 96px; flex-shrink: 0; }
.vi-v { color: var(--fg, #222); }
.vi-prompt { white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 180px; overflow: auto; background: var(--bg, #fff); border-radius: 8px; padding: 8px; font-size: 12px; line-height: 1.5; }

/* ===== AI生视频 结果区:3栏(视频右 / 原图左上 / 分镜左下) ===== */
.video-stage { display: flex; gap: 14px; align-items: stretch; }
.vs-left { display: flex; flex-direction: column; gap: 14px; width: 300px; flex-shrink: 0; min-width: 0; }
.vs-right { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.vs-right > video { max-height: 68vh; max-width: 100%; border-radius: 12px; background: #000; }
.vs-cell { position: relative; border-radius: 12px; overflow: hidden; background: var(--card, #f4f4f6); border: 1px solid var(--border, #eee); }
.vs-cell > img { width: 100%; display: block; object-fit: cover; max-height: 240px; }
.vs-board { flex: 1; min-height: 220px; max-height: 68vh; overflow: auto; }
.vs-ph { padding: 46px 0; text-align: center; color: #b3b3b3; font-size: 13px; }
.vs-badge { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(40,40,45,.72); }
.vs-badge.blue { background: #5b6cff; }
.vs-badge.accent { background: #7a5cff; }
.vs-dl { align-self: center; }
@media (max-width: 860px) { .video-stage { flex-direction: column-reverse; } .vs-left { width: auto; flex-direction: row; } .vs-cell > img { max-height: 160px; } .vs-board { max-height: 320px; } }

/* 分镜图信息图(--sb 为商品自动配色) */
.board-holder { height: 100%; }
.board-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: #999; font-size: 12px; }
.sb { --sb: #6c5ce7; font-size: 12px; color: var(--fg, #222); padding-top: 26px; }
.sb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 10px; background: var(--sb); color: #fff; }
.sb-head b { font-size: 13px; }
.sb-head span { font-size: 11px; opacity: .92; white-space: nowrap; }
.sb-usp { padding: 5px 10px; background: color-mix(in srgb, var(--sb) 12%, transparent); font-size: 11px; color: var(--muted, #666); }
.sb-row { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border, #eee); }
.sb-frame { position: relative; width: 66px; flex-shrink: 0; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; background: #000; }
.sb-frame video { width: 100%; height: 100%; object-fit: cover; }
.sb-no { position: absolute; top: 2px; left: 2px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 10px; color: #fff; background: var(--sb); border-radius: 4px; }
.sb-txt { min-width: 0; flex: 1; }
.sb-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.sb-tag { font-size: 10px; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--sb) 16%, transparent); color: var(--sb); }
.sb-time { font-size: 10px; color: #b0b0b0; margin-left: auto; }
.sb-scene { font-size: 11px; line-height: 1.45; color: var(--fg, #333); }
.sb-audio, .sb-notes { font-size: 10px; color: var(--muted, #888); margin-top: 2px; }
.sb-specs { padding: 8px 10px; font-size: 10px; color: var(--muted, #777); line-height: 1.7; }
.sb-specs b { color: var(--sb); margin-right: 3px; }

/* ===== 分镜图生视频:配置卡 / 提示词 / 深色分镜图面板 ===== */
.step-no { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #eaf1ff; color: #2b6cff; font-size: 12px; align-items: center; justify-content: center; margin-right: 4px; }
.num-input { width: 120px; padding: 9px 12px; border: 1px solid var(--border, #e3e3e8); border-radius: 10px; font-size: 14px; background: var(--bg, #fff); color: var(--fg, #222); }
.btn-row { display: flex; gap: 10px; margin: 4px 0 8px; }
.btn-row .btn-primary, .btn-row .btn-ghost { flex: 1; }
.badge-done { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #e7f7ec; color: #1a9e4b; font-size: 12px; font-weight: 600; }
/* 4 个生成模式:允许换行/自适应 */
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* 视频提示词 contenteditable + @菜单 + chip */
.vp-wrap { position: relative; }
.vp-input { min-height: 150px; max-height: 320px; overflow: auto; padding: 12px 14px; border: 1px solid var(--border, #e3e3e8); border-radius: 12px; font-size: 14px; line-height: 1.7; background: var(--bg, #fff); color: var(--fg, #222); outline: none; }
.vp-input:focus { border-color: #2b6cff; }
.vp-input:empty::before { content: attr(data-ph); color: #aab; }
.vp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; margin: 0 1px; border-radius: 6px; background: #eaf1ff; color: #2b6cff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.vp-count { text-align: right; font-size: 12px; color: #aab; margin-top: 4px; }
.vp-menu { position: absolute; z-index: 20; left: 14px; bottom: 46px; min-width: 200px; max-height: 240px; overflow: auto; background: var(--bg, #fff); border: 1px solid var(--border, #e3e3e8); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 6px; }
.vpm-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.vpm-item:hover { background: rgba(43,108,255,.08); }
.vpm-item img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.vpm-ic { width: 30px; height: 30px; border-radius: 6px; background: #eaf1ff; display: inline-flex; align-items: center; justify-content: center; }
.vpm-empty { padding: 10px; color: #aab; font-size: 13px; text-align: center; }

/* 分镜图深色面板(结果区) */
.board-panel { background: #0f1216; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.bp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bp-head b { color: #fff; font-size: 15px; }
.bp-head .hint { color: #9aa; }
.bp-body { background: #fff; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.bp-body .sb { padding-top: 0; }
.bp-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.sb-frame img { width: 100%; height: 100%; object-fit: cover; }
.sb-noimg { width: 100%; height: 100%; background: #eceef2; }
/* 分镜图放大层 */
.board-zoom { position: fixed; inset: 0; z-index: 999; background: rgba(10,12,16,.86); display: none; align-items: center; justify-content: center; padding: 3vh 3vw; }
.board-zoom.open { display: flex; }
.bz-box { background: #fff; border-radius: 14px; width: 96vw; max-width: 1500px; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.bz-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #eee; }
.bz-bar b { font-size: 16px; }
.bz-close { border: none; background: #f1f2f5; color: #666; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.bz-close:hover { background: #e6e7ea; }
.bz-scroll { flex: 1; overflow: auto; padding: 18px 22px; }
.bz-scroll .sbt { font-size: 13px; min-width: 960px; }
.bz-scroll .sbt-frame img, .bz-scroll .sbt-frame video, .bz-scroll .sbt-frame .sb-frame-loading { height: 110px; }
.bz-scroll .sbt-move-svg { width: 76px; height: 48px; }
.bz-scroll .sbt-refstrip img { width: 38px; height: 52px; }
.bz-foot { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid #eee; }

/* 分镜图项目总览网格 */
.sb-ov { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px 12px; padding: 6px 10px; background: color-mix(in srgb, var(--sb) 8%, transparent); font-size: 10px; color: var(--muted, #666); }
.sb-ov b { color: var(--sb); margin-right: 3px; }

/* 分镜图参考画面:关键帧生成中的转圈占位 */
.sb-frame-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f0f1f4; }
.sb-frame-loading .spinner { width: 18px; height: 18px; }

/* ===== 分镜图:专业导演分镜表(表格样式,--sb 自动配色) ===== */
.bp-body { overflow-x: auto; }
.sbt { font-size: 12px; color: #1f2937; background: #fff; min-width: 720px; }
.sbt-tbl { width: 100%; border-collapse: collapse; }
.sbt-tbl th, .sbt-tbl td { border: 1px solid #dfe3e6; padding: 6px 9px; text-align: center; vertical-align: middle; word-break: break-word; line-height: 1.4; }
.sbt-tbl th { background: color-mix(in srgb, var(--sb) 16%, #fff); font-weight: 600; color: #223; }
.sbt-side { background: var(--sb); color: #fff; font-weight: 700; width: 40px; padding: 4px !important; }
.sbt-title { background: var(--sb); color: #fff; text-align: center; font-weight: 700; padding: 7px; }
.sbt-ov td, .sbt-ov th { font-size: 11px; }
.sbt-shots { table-layout: fixed; }
.sbt-shots th:nth-child(1), .sbt-shots td:nth-child(1) { width: 8%; }
.sbt-shots th:nth-child(2), .sbt-shots td:nth-child(2) { width: 7%; }
.sbt-shots th:nth-child(3), .sbt-shots td:nth-child(3) { width: 16%; }
.sbt-shots th:nth-child(4), .sbt-shots td:nth-child(4) { width: 15%; }
.sbt-shots th:nth-child(5), .sbt-shots td:nth-child(5) { width: 22%; }
.sbt-shots th:nth-child(6), .sbt-shots td:nth-child(6) { width: 16%; }
.sbt-shots th:nth-child(7), .sbt-shots td:nth-child(7) { width: 16%; }
.sbt-no { white-space: nowrap; font-weight: 600; }
.sbt-no span { font-weight: 400; color: #888; font-size: 11px; }
.sbt-desc { text-align: left; }
.sbt-frame { padding: 6px !important; }
.sbt-frame img, .sbt-frame video { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; display: block; }
.sbt-frame .sb-frame-loading { height: 90px; border-radius: 4px; }
.sbt-move { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0; }
.sbt-move-lbl { font-size: 11px; border: 1px solid #cfd4d8; border-radius: 4px; padding: 2px 8px; max-width: 100%; white-space: normal; word-break: break-word; line-height: 1.35; text-align: center; }
.sbt-move-svg { width: 72px; height: 46px; color: #555; }
.sbt-refcell { padding: 3px !important; }
.sbt-refstrip { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.sbt-refstrip img { width: 34px; height: 46px; object-fit: cover; border-radius: 3px; }

/* @ 提及:图片缩略图 chip */
.vp-chip { cursor: pointer; }
.vp-chip-img { padding: 1px 7px 1px 3px; }
.vp-chip-img img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; vertical-align: middle; margin-right: 4px; }

/* 结果区分镜图缩小居中(点击放大看全尺寸) */
.board-panel .sbt { width: 100%; min-width: 0; }
.board-panel .sbt { font-size: 11px; }
.board-panel .sbt-frame img, .board-panel .sbt-frame video, .board-panel .sbt-frame .sb-frame-loading { height: 58px; }
.board-panel .sbt-move-svg { width: 48px; height: 32px; }
.board-panel .sbt-refstrip img { width: 22px; height: 30px; }


/* ---------- AI爆款:参考视频选取态 ---------- */
.viral-picked{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px}
.viral-picked video{width:88px;border-radius:8px;background:#000;display:block}
.viral-picked .vp-meta{flex:1;min-width:0}
.viral-picked .vp-name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 回填态:原片没留存,但套路在,仍可直接重新生成 */
.viral-saved{display:flex;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:10px;
  padding:12px;background:#fafbfc}
.viral-saved .vs-ok{color:#16a34a;font-weight:700}
.viral-saved .vs-txt{flex:1;font-size:13px;color:var(--muted)}

/* ===== AI爆款 v2 逐镜进度网格 ===== */
.v2-shots { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.v2-shot { width: 120px; border-radius: 8px; overflow: hidden; background: var(--card, #1c1c22); }
.v2-shot img, .v2-shot .ph { width: 100%; aspect-ratio: 9/16; object-fit: cover;
  display: flex; align-items: center; justify-content: center; }
.v2-shot .v2-meta { font-size: 11px; padding: 4px 6px; opacity: .75; }
.v2-shot.warn { outline: 1px solid #d9a13b; }