/* ============ 数字人工作台 / AI外壳（复刻「AI智能体」浅色视觉） ============ */
.dh-root,.ai-shell{
  --bg-root:#eef6ff; --bg-card:#ffffffd1; --bg-input:#ffffffe6; --bg-preview:#0d1627;
  --border-subtle:#2e5c9129; --border-hover:#2563eb38; --border-strong:#00b8d96b;
  --text-primary:#102033; --text-secondary:#4a607a; --text-muted:#73849a;
  --accent:#00a9ff; --accent-soft:#00a9ff1f; --accent-border:#00a9ff52; --accent-2:#6d5dfc;
  --success:#10b981; --success-soft:#10b9811f; --success-border:#10b98142;
  --danger:#e5484d; --danger-soft:#e5484d1f; --danger-border:#e5484d52;
  --warning:#f59e0b; --warning-soft:#f59e0b26; --warning-border:#f59e0b47;
  --surface-muted:#143f6d0f; --surface-muted-strong:#143f6d1a; --surface-active:#00a9ff1a;
  --button-primary-bg:linear-gradient(135deg,#00c8ff 0%,#2f6bff 55%,#6d5dfc 100%);
  --button-primary-shadow:0 12px 30px #0088ff42;
  --body-bg:radial-gradient(900px 480px at 6% -12%,#00c8ff38,transparent 62%),radial-gradient(820px 520px at 92% 2%,#6d5dfc2e,transparent 58%),linear-gradient(180deg,#f7fbff 0%,#eef6ff 46%,#e8f1ff 100%);
  --card-bg:linear-gradient(180deg,#ffffffc2,#fff0 48%),var(--bg-card);
  --shadow-panel:0 16px 42px #2c537e24;
  --radius-sm:10px; --radius-md:14px;
  color:var(--text-primary);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
.dh-root ::-webkit-scrollbar{width:10px;height:10px}
.dh-root ::-webkit-scrollbar-thumb{background:#4a607a3d;border-radius:8px}
.dh-workspace{zoom:1;gap:16px;min-height:0;display:flex;flex-direction:column;padding:2px}
.dh-panel{background:var(--card-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-panel);overflow:hidden}
.dh-panel-head{box-sizing:border-box;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 62%,transparent),transparent 72%),color-mix(in srgb,var(--bg-card) 96%,var(--surface-muted));min-height:50px;color:var(--text-primary);align-items:center;gap:10px;padding:12px 16px;display:flex}
.dh-panel-head .dh-num{border:1px solid var(--accent-border);background:var(--accent-soft);width:28px;height:24px;color:var(--accent);border-radius:7px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex;flex:0 0 auto}
.dh-panel-head strong{font-size:14px;font-weight:800}
.dh-panel-head .dh-hint{color:var(--text-muted);font-size:12px;font-weight:500}
.dh-panel-body{padding:16px}
.dh-grid{display:grid;gap:16px}
.dh-grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.dh-field{margin-bottom:12px}
.dh-field-label{color:var(--text-muted);font-size:12px;font-weight:700;line-height:1.25;display:block;margin-bottom:6px}
.dh-input,.dh-textarea,.dh-select{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.dh-input,.dh-select{height:36px;padding:0 12px}
.dh-textarea{padding:10px 12px;line-height:1.6;resize:vertical}
.dh-input:focus,.dh-textarea:focus,.dh-select:focus{border-color:var(--input-focus-border,#00a9ff7a);box-shadow:0 0 0 3px var(--accent-soft)}
.dh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 18px;border:none;border-radius:10px;background:var(--button-primary-bg);color:#fff;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--button-primary-shadow);transition:filter .15s}
.dh-btn:hover{filter:brightness(1.06)}
.dh-btn:disabled{opacity:.55;cursor:not-allowed}
.dh-btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:8px;box-shadow:none}
.dh-btn-ghost{background:transparent;color:var(--text-secondary);box-shadow:none;border:1px solid var(--border-subtle)}
.dh-btn-ghost:hover{background:var(--surface-muted)}
.dh-btn-danger{background:linear-gradient(135deg,#f87171,#dc2626);box-shadow:none}
.dh-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:700;background:var(--surface-muted);color:var(--text-secondary)}
.dh-chip.ok{background:var(--success-soft);color:var(--success);border:1px solid var(--success-border)}
.dh-chip.warn{background:var(--warning-soft);color:var(--warning);border:1px solid var(--warning-border)}
.dh-upload{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;background:var(--surface-active);transition:background .15s}
.dh-upload:hover{background:var(--accent-soft-strong,#00a9ff33)}
/* 形象卡片 */
.dh-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.dh-avatar-card{border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;box-shadow:0 4px 14px #2c537e14;transition:border-color .15s,box-shadow .15s}
.dh-avatar-card:hover{border-color:var(--border-hover)}
.dh-avatar-card.sel{border-color:var(--success);box-shadow:0 0 0 2px var(--success-soft)}
.dh-avatar-card video{width:100%;height:96px;object-fit:cover;display:block;background:#000}
.dh-avatar-card .nm{padding:6px 8px;font-size:11.5px;color:var(--text-primary);font-weight:600;display:flex;align-items:center;gap:4px;min-width:0}
.dh-avatar-card .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
/* 声音行 */
.dh-voice-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border-subtle);border-radius:10px;padding:6px 8px;background:#fff;font-size:12px;margin-bottom:6px}
.dh-voice-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);font-weight:600}
.dh-voice-row audio{height:28px;width:160px}
/* 任务 / 进度 */
.dh-task{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surface-muted);font-size:12.5px;color:var(--text-secondary)}
.dh-task .spinner{width:14px;height:14px;border:2px solid var(--accent-soft-strong,#00a9ff33);border-top-color:var(--accent);border-radius:50%;animation:dhspin .8s linear infinite;flex:0 0 auto}
@keyframes dhspin{to{transform:rotate(360deg)}}
.dh-result video{width:100%;max-width:400px;border-radius:12px;background:#000;box-shadow:var(--shadow-panel)}
.dh-empty{color:var(--text-muted);font-size:12.5px;padding:8px 2px}
.dh-err{color:var(--danger);font-size:12.5px;padding:8px 2px}
.dh-bar{height:6px;border-radius:6px;background:var(--surface-muted-strong);overflow:hidden;margin-top:6px}
.dh-bar i{display:block;height:100%;background:var(--button-primary-bg);border-radius:6px;transition:width .4s}

/* 表格（数字人管理 / 任务中心） */
.dh-table{width:100%;border-collapse:collapse;font-size:12px}
.dh-table th{text-align:left;padding:8px 10px;color:var(--text-muted);font-weight:700;border-bottom:1px solid var(--border-subtle);font-size:11.5px}
.dh-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:middle}
.dh-table tr:hover td{background:var(--surface-muted)}
.dh-table .thumb{width:56px;height:40px;border-radius:6px;object-fit:cover;background:#000;display:block}
.dh-table .op{display:flex;gap:6px}
.dh-pager{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--text-muted)}
.dh-pager button{height:26px;padding:0 10px;border:1px solid var(--border-subtle);border-radius:7px;background:#fff;color:var(--text-secondary);font-size:12px;cursor:pointer}
.dh-pager button:disabled{opacity:.4;cursor:not-allowed}

/* ============ AI智能体 全屏外壳（复刻原版 app-shell） ============ */
.ai-shell{--topnav-h:76px;--shell-gap:20px;--human-content-gap:18px;--human-workspace-pad-x:24px;position:fixed;top:calc(var(--topnav-h) + var(--shell-gap));left:0;right:0;bottom:0;z-index:500;background:var(--body-bg);color:var(--text-primary);display:none;flex-direction:column;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.ai-shell.open{display:flex}
.ai-top-nav{z-index:10;border-bottom:1px solid var(--border-subtle);background:var(--surface-sheen),var(--bg-elevated);height:64px;box-shadow:var(--shadow-panel);flex-shrink:0;align-items:center;gap:16px;padding:0 20px;display:flex;position:relative}
.ai-top-nav .ai-logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;color:var(--text-primary)}
.ai-top-nav .ai-logo .ai-logo-badge{width:34px;height:34px;border-radius:10px;background:var(--button-primary-bg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--button-primary-shadow)}
.ai-top-nav .ai-project{flex-shrink:0;max-width:min(420px,42vw);margin-left:clamp(12px,2vw,28px);border:1px solid var(--border-subtle);border-radius:10px;height:36px;padding:0 12px;font-size:12px;font-weight:800;color:var(--text-primary);background:var(--bg-elevated);display:flex;align-items:center;gap:6px}
.ai-top-nav .ai-nav-link{border:1px solid var(--border-subtle);border-radius:10px;height:36px;padding:0 12px;font-size:12px;font-weight:800;color:var(--text-primary);background:var(--bg-elevated);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ai-top-nav .ai-nav-link:hover{background:var(--surface-muted)}
.ai-nav-actions{flex-shrink:0;align-items:center;gap:12px;display:flex;margin-left:auto}
.ai-main{flex:1;min-height:0;display:flex}
.ai-module-sidebar{border-right:1px solid var(--border-subtle);background:var(--bg-elevated);flex-direction:column;flex:0 0 66px;align-items:stretch;gap:6px;width:66px;min-height:0;padding:12px 6px;display:flex}
.ai-module-btn{border:1px solid transparent;background:transparent;height:52px;border-radius:10px;cursor:pointer;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;padding:0}
.ai-module-btn:hover{background:var(--surface-muted);color:var(--text-primary)}
.ai-module-btn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}
.ai-module-btn .mi{font-size:20px;line-height:1}
.ai-module-btn .badge{background:var(--danger);color:#fff;font-size:9px;min-width:15px;height:15px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-top:-2px}
.ai-workflow-sidebar{box-sizing:border-box;border-right:1px solid var(--border-subtle);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 52%,var(--bg-card)),color-mix(in srgb,var(--surface-muted) 72%,var(--bg-card)));width:clamp(220px,20vw,280px);flex:0 0 auto;padding:16px 12px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.ai-wf-title{font-size:12px;font-weight:800;color:var(--text-muted);margin-bottom:6px;letter-spacing:.5px}
.ai-wf-item{border:1px solid transparent;border-radius:12px;padding:12px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;background:transparent}
.ai-wf-item:hover{background:var(--surface-muted)}
.ai-wf-item.on{border-color:var(--accent-border);background:var(--accent-soft);color:var(--text-primary)}
.ai-wf-item .n{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:0 0 auto}
.ai-wf-item.on .n{background:var(--accent);color:#fff}
.ai-wf-item .t{font-size:13px;font-weight:800;color:var(--text-primary)}
.ai-wf-item .d{font-size:11px;color:var(--text-muted);margin-top:2px}
.ai-workspace-main{flex:1;min-width:0;min-height:0;padding:10px 0 0;overflow:auto;display:flex}
.ai-workspace{min-height:0;padding:0 var(--human-workspace-pad-x) 10px 0;flex-direction:column;flex:1;display:flex;overflow:auto;gap:var(--human-content-gap)}
.ai-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.ai-wf-footer{min-height:62px;margin:0 var(--human-workspace-pad-x) 10px 0;border:1px solid var(--border-subtle);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 24%,var(--bg-card)),var(--bg-card));border-radius:8px;flex:none;justify-content:flex-end;align-items:center;padding:0 14px;display:flex;gap:10px}
.ai-wf-footer .btn{border:none;border-radius:10px;height:38px;padding:0 18px;font-size:13px;font-weight:700;cursor:pointer}
.ai-wf-footer .btn.primary{background:var(--button-primary-bg);color:#fff;box-shadow:var(--button-primary-shadow)}
.ai-wf-footer .btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle)}
.ai-wf-footer .btn:disabled{opacity:.45;cursor:not-allowed}

/* ============ AI智能体 嵌式工作台：融合我们网站深色主题 ============ */
.ai-embed{
  --bg-root:#0b0f17; --bg-elevated:#121a29; --bg-card:#131c2dcc; --bg-card-hover:#16233b;
  --bg-input:#0f172acc; --bg-preview:#020617;
  --border-subtle:rgba(148,163,184,.14); --border-hover:rgba(59,130,246,.35); --border-strong:rgba(0,184,217,.4);
  --text-primary:#e7eef8; --text-secondary:#c6d0de; --text-muted:#8fa0b5;
  --accent:#3b82f6; --accent-soft:rgba(59,130,246,.14); --accent-soft-strong:rgba(59,130,246,.25); --accent-border:rgba(59,130,246,.4); --accent-2:#6366f1;
  --success:#22c55e; --success-soft:rgba(34,197,94,.12); --success-border:rgba(34,197,94,.4);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,.12); --danger-border:rgba(239,68,68,.4);
  --warning:#f59e0b; --warning-soft:rgba(245,158,11,.12); --warning-border:rgba(245,158,11,.4);
  --surface-muted:rgba(148,163,184,.08); --surface-muted-strong:rgba(148,163,184,.16); --surface-active:rgba(59,130,246,.14);
  --button-primary-bg:linear-gradient(135deg,#3b82f6,#6366f1);
  --button-primary-shadow:0 8px 24px #3b82f640;
  --body-bg:radial-gradient(900px 480px at 6% -12%,rgba(59,130,246,.14),transparent 60%),radial-gradient(820px 520px at 92% 2%,rgba(99,102,241,.12),transparent 58%),#0b0f17;
  --shadow-panel:0 12px 32px #00000040;
}
.ai-embed .dh-panel{background:linear-gradient(180deg,rgba(18,26,41,.9),rgba(13,20,32,.9));border:1px solid var(--border-subtle)}
.ai-embed .dh-panel-head{background:linear-gradient(90deg,rgba(59,130,246,.12),transparent 70%),#121a29;border-bottom:1px solid var(--border-subtle);color:var(--text-primary)}
.ai-embed .dh-panel-head .dh-num{background:rgba(59,130,246,.15);color:#7fb3ff;border-color:rgba(59,130,246,.4)}
.ai-embed .dh-input,.ai-embed .dh-textarea,.ai-embed .dh-select{background:#0f172a;color:var(--text-primary);border-color:var(--border-subtle)}
.ai-embed .dh-btn{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.ai-embed .dh-btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle)}
.ai-embed .dh-upload{color:#7fb3ff;background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.4)}
.ai-embed .dh-avatar-card{background:#131c2d;border-color:var(--border-subtle)}
.ai-embed .dh-voice-row{background:#121a29;border-color:var(--border-subtle)}
.ai-embed .dh-chip{background:rgba(148,163,184,.1);color:var(--text-secondary)}
.ai-embed .ai-workflow-sidebar{background:linear-gradient(180deg,rgba(59,130,246,.08),rgba(148,163,184,.04));border:1px solid var(--border-subtle)}
.ai-embed .ai-wf-item .n{background:rgba(59,130,246,.18);color:#7fb3ff}
.ai-embed .ai-wf-item.on{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.4)}
.ai-embed .ai-wf-item.on .n{background:#3b82f6;color:#fff}
.ai-embed .ai-module-btn{color:var(--text-muted)}
.ai-embed .ai-module-btn.on{background:rgba(59,130,246,.15);color:#7fb3ff;border-color:rgba(59,130,246,.4)}
.ai-embed .ai-wf-footer{background:linear-gradient(180deg,rgba(59,130,246,.1),rgba(18,26,41,.9));border:1px solid var(--border-subtle)}
.ai-embed .ai-wf-footer .btn.primary{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.ai-embed .ai-wf-footer .btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle)}
.ai-embed table.dh-table th{color:var(--text-muted);border-bottom:1px solid var(--border-subtle)}
.ai-embed table.dh-table td{color:var(--text-secondary);border-bottom:1px solid var(--border-subtle)}
.ai-embed table.dh-table tr:hover td{background:rgba(59,130,246,.06)}
.ai-embed .dh-pager button{background:#121a29;border-color:var(--border-subtle);color:var(--text-secondary)}

/* ============================================================
   数字人全屏外壳 v2 —— 复刻「岳哥爆款AI智能体 · 暗夜科技」深色青绿主题
   ============================================================ */
.ai-shell{
  --bg-root:#070a0f; --bg-elevated:#0d1117; --bg-card:#121820; --bg-card-hover:#161d28;
  --bg-input:rgba(0,0,0,.35); --bg-preview:#05080d;
  --border-subtle:rgba(255,255,255,.06); --border-hover:rgba(255,255,255,.12); --border-strong:rgba(79,209,197,.35);
  --text-primary:#f0f4f8; --text-secondary:#94a3b8; --text-muted:#64748b;
  --accent:#5eead4; --accent-2:#2dd4bf; --accent-contrast:#042f2e;
  --accent-soft:rgba(94,234,212,.12); --accent-soft-strong:rgba(94,234,212,.18); --accent-border:rgba(94,234,212,.28);
  --success:#34d399; --success-soft:rgba(52,211,153,.08); --success-border:rgba(52,211,153,.22);
  --danger:#f87171; --danger-soft:rgba(248,113,113,.1); --danger-border:rgba(248,113,113,.3); --danger-text:#fca5a5;
  --warning:#facc15; --warning-soft:rgba(250,204,21,.12); --warning-border:rgba(250,204,21,.25);
  --surface-sheen:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);
  --surface-sheen-soft:linear-gradient(165deg,rgba(255,255,255,.04),transparent 55%);
  --surface-muted:rgba(0,0,0,.22); --surface-muted-strong:rgba(0,0,0,.35); --surface-active:rgba(94,234,212,.12);
  --overlay-strong:rgba(0,0,0,.62); --overlay-modal:rgba(0,0,0,.62);
  --button-primary-bg:linear-gradient(180deg,#7ff0df 0%,var(--accent) 100%);
  --button-primary-shadow:0 8px 24px rgba(45,212,191,.25); --button-secondary-hover:#1a2330;
  --input-focus-border:rgba(94,234,212,.45);
  --body-bg:radial-gradient(1200px 600px at 10% -10%,rgba(45,212,191,.08),transparent),radial-gradient(900px 500px at 90% 0%,rgba(56,189,248,.06),transparent),var(--bg-root);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--bg-card);
  --shadow-panel:0 16px 42px rgba(0,0,0,.32); --shadow-glow:0 0 0 1px rgba(94,234,212,.15),0 12px 40px rgba(0,0,0,.45);
  --scrollbar-thumb:rgba(148,163,184,.25);
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px;
  --font-sans:-apple-system,"Inter","PingFang SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  position:fixed; top:calc(var(--topnav-h,76px) + var(--shell-gap,20px)); left:0; right:0; bottom:0; z-index:500; background:var(--body-bg); color:var(--text-primary);
  display:none; flex-direction:column; font-family:var(--font-sans);
}
.ai-shell.open{display:flex}
.ai-shell *{box-sizing:border-box}
.ai-shell .scroll-thin::-webkit-scrollbar{width:8px;height:8px}
.ai-shell .scroll-thin::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:8px}
.ai-shell .scroll-thin::-webkit-scrollbar-track{background:transparent}

/* ---------- 顶部栏 ---------- */
.ai-ref-header{flex-shrink:0;display:flex;align-items:center;gap:14px;height:58px;padding:0 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--bg-elevated);
  border-bottom:1px solid var(--border-subtle)}
.ai-ref-back{width:32px;height:32px;border-radius:8px;border:1px solid var(--border-subtle);background:var(--surface-muted);
  color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ai-ref-back:hover{border-color:var(--border-hover);color:var(--text-primary)}
.ai-ref-brand{display:flex;align-items:center;gap:10px;min-width:0}
.ai-ref-logo{width:32px;height:32px;border-radius:9px;background:var(--button-primary-bg);color:var(--accent-contrast);
  font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--button-primary-shadow)}
.ai-ref-brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ai-ref-brand-txt b{font-size:14px;font-weight:800;color:var(--text-primary);white-space:nowrap}
.ai-ref-brand-txt small{font-size:11px;color:var(--text-muted)}
.ai-ref-project{flex-shrink:0;max-width:min(380px,36vw);border:1px solid var(--border-subtle);border-radius:9px;height:32px;
  padding:0 12px;font-size:12px;font-weight:700;color:var(--text-primary);background:var(--bg-card);
  display:flex;align-items:center;gap:6px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ai-ref-spacer{flex:1}
.ai-ref-version{font-size:11px;color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:8px;padding:3px 8px}
.ai-ref-local{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:8px;padding:3px 9px}
.ai-ref-pulse{width:7px;height:7px;border-radius:50%;background:#475569}
.ai-ref-pulse.on{background:var(--success);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.ai-ref-user{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--border-subtle);border-radius:9px;
  background:var(--bg-card);font-size:12px;font-weight:700;color:var(--text-primary);cursor:pointer}
.ai-ref-user:hover{border-color:var(--accent-border);background:var(--surface-active)}
.ai-ref-user .avatar{width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}

/* ---------- 主体三栏 ---------- */
.ai-ref-main{flex:1;min-height:0;display:flex}
/* 数字人板块的 ai-ref-header 被隐藏后（见 index.html），主体内容会紧贴全站顶部导航。
   面板与导航的间距现在由 .ai-shell 的 top 偏移统一留出（--topnav-h + --shell-gap），
   这里只保留底部一点内边距，避免最后一行贴着窗口底。 */
#aiShell .ai-ref-main{padding-bottom:12px}
/* 左侧功能图标栏 */
.ai-ref-modules{flex:0 0 72px;border-right:1px solid var(--border-subtle);background:var(--bg-elevated);
  display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px 6px;overflow:auto}
.ai-ref-module{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:54px;
  border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text-muted);cursor:pointer;
  font-size:10px;font-weight:700;padding:0 4px;position:relative}
.ai-ref-module .mi{font-size:19px;line-height:1}
.ai-ref-module:hover{background:var(--surface-muted);color:var(--text-primary)}
.ai-ref-module.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}
.ai-ref-module.on .mi{filter:drop-shadow(0 0 6px rgba(94,234,212,.55))}
.ai-ref-mod-spacer{flex:1}
.ai-ref-badge{position:absolute;top:6px;right:8px;min-width:15px;height:15px;border-radius:8px;background:var(--danger);
  color:#fff;font-size:9px;font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* 六步导航 */
.ai-ref-strip{flex:0 0 216px;border-right:1px solid var(--border-subtle);
  background:linear-gradient(180deg,rgba(94,234,212,.05),transparent 60%),var(--bg-elevated);
  padding:18px 14px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.ai-ref-step{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-radius:13px;
  cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s}
.ai-ref-step:hover{background:var(--surface-muted)}
.ai-ref-step .step-node{flex:0 0 16px;width:16px;height:16px;border-radius:50%;margin-top:4px;position:relative;
  border:2px solid var(--text-muted);background:transparent}
.ai-ref-step .step-num{font-size:13px;font-weight:900;color:var(--text-muted);line-height:1.35;flex:0 0 22px}
.ai-ref-step .step-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai-ref-step .step-title{font-size:14px;font-weight:800;color:var(--text-secondary)}
.ai-ref-step .step-subtitle{font-size:11px;color:var(--text-muted)}
.ai-ref-step.reached .step-node{border-color:var(--accent-2);background:var(--accent-2);box-shadow:0 0 0 3px rgba(45,212,191,.14)}
.ai-ref-step.reached .step-title{color:var(--text-primary)}
.ai-ref-step.current{background:var(--accent-soft);border-color:var(--accent-border)}
.ai-ref-step.current .step-node{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px rgba(94,234,212,.18),0 0 12px rgba(94,234,212,.6)}
.ai-ref-step.current .step-num,.ai-ref-step.current .step-title{color:var(--accent)}
.ai-ref-step.current .step-subtitle{color:var(--text-secondary)}

/* 工作区 */
.ai-ref-workspace{flex:1;min-width:0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:22px 26px}
.ai-ref-content{flex:1 0 auto;display:flex;flex-direction:column;gap:16px;min-height:100%}
.ai-ref-footer{
  flex-shrink:0;display:flex;justify-content:flex-end;gap:10px;padding:12px 0;margin-top:12px;
  border-top:1px solid var(--border-subtle);background:transparent
}
/* 业主明确要求：这条操作按钮跟着内容一起滚，不要悬浮/吸底。
   原来这里是 position:sticky + bottom:0 + 半透明模糊底，滚动时会浮在内容之上。 */
#aiShell .ai-ref-footer{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:auto}
.btn-ref{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 22px;border-radius:10px;
  font-size:13px;font-weight:800;cursor:pointer;border:1px solid transparent;transition:filter .15s}
.btn-ref.primary{background:var(--button-primary-bg);color:var(--accent-contrast);box-shadow:var(--button-primary-shadow)}
.btn-ref.primary:hover{filter:brightness(1.06)}
.btn-ref.primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ref.ghost{background:var(--bg-card);color:var(--text-secondary);border-color:var(--border-subtle)}
.btn-ref.ghost:hover{background:var(--surface-muted);color:var(--text-primary)}
.btn-ref.ghost:disabled{opacity:.5;cursor:not-allowed}

/* ---------- 卡片通用 ---------- */
.ai-ref-card{background:var(--card-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-panel);overflow:hidden}
.ai-ref-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px}
.ai-ref-kicker{font-size:15px;font-weight:900;color:var(--text-primary)}
.ai-ref-hint{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.5}
.ai-ref-panel-body{padding:0 18px 18px}
.ai-ref-textarea,.ai-ref-input,.ai-ref-select{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:10px;
  color:var(--text-primary);font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;font-family:var(--font-sans)}
.ai-ref-textarea{padding:10px 12px;line-height:1.65;resize:vertical}
.ai-ref-input,.ai-ref-select{height:36px;padding:0 12px}
.ai-ref-textarea:focus,.ai-ref-input:focus,.ai-ref-select:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)}
.ai-ref-select option{background:#0d1117;color:#f0f4f8}
.btn-ai{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border:none;border-radius:10px;
  background:var(--button-primary-bg);color:var(--accent-contrast);font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--button-primary-shadow);transition:filter .15s}
.btn-ai:hover{filter:brightness(1.06)}
.btn-ai:disabled{opacity:.5;cursor:not-allowed}
.btn-ai.sm{height:30px;padding:0 12px;font-size:12px;border-radius:8px;box-shadow:none}
.btn-ai.ghost{background:transparent;color:var(--text-secondary);box-shadow:none;border:1px solid var(--border-subtle)}
.btn-ai.ghost:hover{background:var(--surface-muted);color:var(--text-primary)}
.btn-ai.secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:none}
.btn-ai.secondary:hover{background:var(--surface-muted)}

/* ---------- 01 文案仿写 ---------- */
.ai-ref-tabs{display:flex;gap:6px;padding:14px 18px 0;border-bottom:1px solid var(--border-subtle)}
.ai-ref-tab{border:1px solid transparent;border-bottom:none;background:transparent;color:var(--text-muted);
  font-size:14px;font-weight:800;padding:10px 18px 12px;cursor:pointer;border-radius:11px 11px 0 0;position:relative;top:1px}
.ai-ref-tab:hover{color:var(--text-primary)}
.ai-ref-tab.active{color:var(--accent);background:var(--surface-active);border-color:var(--accent-border)}
.ai-ref-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.ai-ref-pin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ai-ref-pin-grid.viral-copy{grid-template-columns:minmax(0,1fr)}

/* 文案仿写：按桌面端 AI 智能体 StepCopywriting 原结构复刻 */
.ai-copy-replica{display:flex;flex-direction:column;gap:18px;min-width:0}
.ai-copy-replica .ai-ref-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-muted)}
.ai-copy-replica .ai-ref-tab{position:static;min-height:46px;padding:0 18px;border:0;border-radius:9px;background:transparent;color:var(--text-muted);font:inherit;font-size:15px;font-weight:900}
.ai-copy-replica .ai-ref-tab:hover{color:var(--text-primary)}
.ai-copy-replica .ai-ref-tab.active{color:var(--accent-contrast);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 24%,transparent)}
.ai-copy-replica .ai-ref-tab.active::after{display:none}
.ai-copy-body{display:flex;flex-direction:column;gap:18px;min-width:0}
.ai-copy-panel,.ai-copy-history{position:relative;isolation:isolate;border:1px solid transparent;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--accent) 46%,transparent),color-mix(in srgb,var(--warning) 28%,transparent),color-mix(in srgb,var(--border-subtle) 84%,transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent),0 14px 32px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden}
.ai-copy-panel::before,.ai-copy-history::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%)}
.ai-copy-replica .ai-ref-panel-head{align-items:center;padding:18px 22px 10px}
.ai-copy-replica .ai-ref-kicker{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--accent-border);border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--bg-card));color:var(--text-primary);font-size:18px;font-weight:900}
.ai-copy-replica .ai-ref-hint{margin:10px 0 0;color:var(--text-muted);font-size:13px}
.ai-copy-replica .ai-ref-panel-body{padding:8px 22px 22px}
.ai-copy-extract-grid{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:stretch;gap:14px}
.ai-copy-extract-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.ai-copy-replica .ai-ref-textarea,.ai-copy-replica .ai-ref-input,.ai-copy-replica .ai-ref-select{
  border:1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb,var(--accent) 8%,var(--bg-input)),color-mix(in srgb,var(--accent) 8%,var(--bg-input))) padding-box,
    linear-gradient(90deg,
      color-mix(in srgb,var(--border-subtle) 78%,transparent),
      color-mix(in srgb,var(--accent) 42%,transparent),
      color-mix(in srgb,var(--accent-2) 38%,transparent),
      color-mix(in srgb,var(--success) 32%,transparent),
      color-mix(in srgb,var(--border-subtle) 78%,transparent)) border-box;
  background-size:auto,260% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 16px color-mix(in srgb,var(--accent) 6%,transparent);
  font-size:14px;
  animation:aiCopyInputBorderFlow 8s linear infinite;
  transition:box-shadow .18s,filter .18s;
}
.ai-copy-replica .ai-ref-textarea:hover,.ai-copy-replica .ai-ref-input:hover,.ai-copy-replica .ai-ref-select:hover,
.ai-copy-replica .ai-ref-textarea:focus,.ai-copy-replica .ai-ref-input:focus,.ai-copy-replica .ai-ref-select:focus{
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 3px color-mix(in srgb,var(--accent-soft-strong) 44%,transparent),0 10px 22px color-mix(in srgb,var(--accent) 12%,transparent);
  filter:saturate(1.04);
}
@keyframes aiCopyInputBorderFlow{0%{background-position:0 0,0% 0}100%{background-position:0 0,260% 0}}
@media (prefers-reduced-motion:reduce){.ai-copy-replica .ai-ref-textarea,.ai-copy-replica .ai-ref-input,.ai-copy-replica .ai-ref-select{animation:none;background-position:0 0,50% 0}}
.ai-copy-link{min-height:86px;resize:none;padding:14px 16px!important}
.ai-copy-extract-actions{display:flex;flex-direction:column;gap:10px}
.ai-copy-extract-btn{flex:1;min-height:43px;height:auto;font-size:14px}
.ai-copy-import{display:inline-flex;margin-top:10px;padding:0;border:0;background:transparent;color:var(--text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:700}
.ai-copy-import:hover{color:var(--accent)}
.ai-copy-replica .ai-ref-progress-block{display:flex!important;margin:0;min-height:8px}
.ai-copy-replica .ai-ref-progress-track{height:5px}
.ai-copy-inline-msg{min-height:18px}
.ai-copy-replica .ai-ref-pin-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px;min-height:430px}
.ai-copy-replica .ai-ref-pin-grid.viral-copy{grid-template-columns:1fr;min-height:520px}
.ai-copy-editor{display:flex;flex-direction:column;min-height:430px}
.ai-copy-editor .ai-ref-panel-head{flex:none}
.ai-copy-editor .ai-ref-panel-body{display:flex;flex:1;min-height:0;flex-direction:column}
.ai-copy-text-action{align-self:center;padding:8px 4px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:800}
.ai-copy-text-action:hover{color:var(--accent)}
.ai-copy-script-area{box-sizing:border-box;flex:1;min-height:270px;resize:none;padding:16px!important;line-height:1.75!important;white-space:pre-wrap;overflow:auto}
.ai-copy-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-copy-head-actions .btn-ai{min-height:44px;height:44px;padding:0 20px;font-size:14px}
.ai-copy-replica .ai-ref-meta-grid{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.ai-copy-meta-field{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:12px;font-weight:800}
.ai-copy-meta-field>span{white-space:nowrap}
.ai-copy-meta-field .ai-ref-select{width:128px;height:38px}
.ai-copy-meta-field .ai-ref-input{width:96px;height:38px}
.ai-copy-meta-field em{white-space:nowrap;color:var(--text-muted);font-style:normal;font-weight:600}
.ai-copy-merchant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ai-copy-merchant-field{display:flex;flex-direction:column;gap:7px;color:var(--text-secondary);font-size:12px;font-weight:800}
.ai-copy-merchant-field span em{color:var(--text-muted);font-style:normal;font-weight:600}
.ai-copy-merchant-wide{grid-column:1/-1}
.ai-copy-merchant-wide textarea{min-height:66px;resize:vertical}
.ai-copy-library{margin-bottom:14px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-muted)}
.ai-copy-library summary{cursor:pointer;color:var(--text-secondary);font-size:12px;font-weight:800}
.ai-copy-library-tools{display:flex;align-items:center;gap:8px;margin:10px 0 6px}
.ai-copy-library-tools .ai-ref-select{width:190px}
.ai-copy-replica .voice-confirm-bar{margin-top:12px}
.ai-copy-legal:empty{display:none}
.ai-copy-legal:not(:empty){margin-top:0}
.ai-copy-history{padding:0}
.ai-copy-history>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:10px 18px;cursor:pointer;list-style:none}
.ai-copy-history>summary::-webkit-details-marker{display:none}
.ai-copy-history>summary>span{display:flex;flex-direction:column;gap:2px;color:var(--text-primary);font-size:13px}
.ai-copy-history>summary small{color:var(--text-muted);font-weight:500}
.ai-copy-history>#aiHistoryList{padding:0 18px 18px}
@media (max-width:1180px){.ai-copy-replica .ai-ref-pin-grid{grid-template-columns:1fr}.ai-copy-merchant-grid{grid-template-columns:1fr 1fr}.ai-copy-merchant-wide{grid-column:1/-1}}
@media (max-width:720px){.ai-copy-extract-grid{grid-template-columns:1fr}.ai-copy-extract-actions{flex-direction:row}.ai-copy-extract-btn{min-height:42px}.ai-copy-replica .ai-ref-panel-head{align-items:flex-start;flex-direction:column}.ai-copy-head-actions{width:100%}.ai-copy-replica .ai-ref-meta-grid{align-items:flex-start;flex-direction:column}.ai-copy-meta-field{flex-wrap:wrap}.ai-copy-merchant-grid{grid-template-columns:1fr}.ai-copy-merchant-wide{grid-column:auto}}
.ai-ref-field{margin-bottom:12px}
.ai-ref-field-label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:6px}
.ai-ref-progress-block{display:flex;align-items:center;gap:10px;margin-top:8px}
.ai-ref-progress-track{flex:1;height:6px;border-radius:4px;background:var(--surface-muted-strong);overflow:hidden}
.ai-ref-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent-2),var(--accent));
  box-shadow:0 0 8px rgba(94,234,212,.55);transition:width .3s}
.ai-ref-pct{font-size:12px;font-weight:800;color:var(--accent);min-width:38px;text-align:right}
.ai-ref-error{color:var(--danger);font-size:12px;margin-top:6px}
.ai-ref-toast{color:var(--success);font-size:12px;margin-top:6px}
.ai-ref-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.ai-ref-meta-grid{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:end;margin-bottom:12px;flex-wrap:wrap}
.ai-ref-target-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-muted);font-weight:700}
.ai-ref-target-field input{width:110px}
.ai-ref-target-field em{font-style:normal;font-size:11px;color:var(--text-muted);font-weight:500;align-self:center}
.ai-ref-task{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);padding:8px 12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card)}
.ai-ref-task.ok{color:var(--success);border-color:var(--success-border)}
.ai-ref-task .spinner,.dh-task .spinner{width:14px;height:14px;border:2px solid var(--accent-border);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:aiRefSpin .7s linear infinite}
@keyframes aiRefSpin{to{transform:rotate(360deg)}}
.ai-ref-err{color:var(--danger);font-size:12px;padding:8px 12px;border:1px solid var(--danger-border);border-radius:10px;background:var(--danger-soft)}
.ai-ref-video{width:100%;max-width:420px;border-radius:12px;background:#000;display:block}
.ai-ref-audio{width:100%;margin-top:6px}
.ai-ref-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:700;background:var(--surface-muted);color:var(--text-secondary)}
.ai-ref-chip.ok{background:var(--success-soft);color:var(--success);border:1px solid var(--success-border)}
.ai-ref-empty{color:var(--text-muted);font-size:12px;padding:14px;text-align:center;border:1px dashed var(--border-subtle);border-radius:10px}
.ai-ref-upload{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1px dashed var(--border-strong);border-radius:10px;
  color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;background:var(--surface-active);transition:background .15s}
.ai-ref-upload:hover{background:var(--accent-soft-strong)}
.ai-ref-table{width:100%;border-collapse:collapse;font-size:12px}
.ai-ref-table th{color:var(--text-muted);font-weight:700;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-subtle)}
.ai-ref-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
.ai-ref-table video{height:52px;border-radius:8px;background:#000}
.ai-ref-pager{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:12px;color:var(--text-muted)}
.ai-ref-pager button{height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);font-size:12px;cursor:pointer}
.ai-ref-pager button:disabled{opacity:.4;cursor:not-allowed}
.ai-ref-voice-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border-subtle);border-radius:10px;padding:6px 8px;background:var(--bg-card);font-size:12px;margin-bottom:6px}
.ai-ref-voice-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);font-weight:600}
.ai-ref-voice-row audio{height:28px;width:170px}
.ai-ref-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ai-ref-avatar-card{border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--bg-card);transition:border-color .15s,box-shadow .15s}
.ai-ref-avatar-card:hover{border-color:var(--border-hover)}
.ai-ref-avatar-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ai-ref-avatar-card video{width:100%;height:96px;object-fit:cover;display:block;background:#000}
.ai-ref-avatar-card .nm{padding:6px 8px;font-size:11.5px;color:var(--text-primary);font-weight:600;display:flex;align-items:center;gap:4px;min-width:0}
.ai-ref-avatar-card .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ai-ref-pub-platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.ai-ref-pub-platforms label{display:flex;align-items:center;gap:6px;border:1px solid var(--border-subtle);border-radius:9px;padding:7px 10px;font-size:12px;color:var(--text-secondary);cursor:pointer;background:var(--bg-card)}
.ai-ref-pub-platforms label:has(input:checked){border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)}

/* ============================================================
   用户授权复用的视频工作台基础样式（作用域限定 #aiShell）
   运行时仅依赖半山项目自身的静态资源与本地服务
   ============================================================ */
#aiShell .user-menu{
position:relative
}
#aiShell .user-trigger{
border-radius:var(--radius-sm);height:40px;color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:0 12px;font-weight:700;display:inline-flex
}
#aiShell .user-icon{
color:currentColor;flex:0 0 18px;width:18px;height:18px;position:relative
}
#aiShell .user-icon:before, #aiShell .user-icon:after{
content:"";box-sizing:border-box;position:absolute
}
#aiShell .user-icon:before{
border:2px solid;border-radius:50%;width:8px;height:8px;top:1px;left:5px
}
#aiShell .user-icon:after{
border:2px solid;border-radius:10px 10px 4px 4px;width:14px;height:9px;bottom:1px;left:2px
}
#aiShell .user-trigger:hover, #aiShell .user-trigger[aria-expanded=true]{
background:var(--surface-muted);border-color:var(--border-hover)
}
#aiShell .user-name{
text-overflow:ellipsis;white-space:nowrap;max-width:138px;overflow:hidden
}
#aiShell .user-popover{
z-index:20;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--bg-elevated);width:330px;box-shadow:var(--shadow-glow);padding:18px;position:absolute;top:calc(100% + 10px);right:0
}
#aiShell .user-menu.sidebar-user-menu{
width:100%
}
#aiShell .user-menu.sidebar-user-menu .user-trigger{
width:100%;height:48px;min-height:48px;color:var(--text-muted);border-radius:8px;flex-direction:column;justify-content:center;padding:7px 4px;font-size:12px
}
#aiShell .user-menu.sidebar-user-menu .user-trigger:hover, #aiShell .user-menu.sidebar-user-menu .user-trigger[aria-expanded=true]{
border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)
}
#aiShell .user-menu.sidebar-user-menu .user-icon{
border:1px solid color-mix(in srgb, currentColor 18%, transparent);background:radial-gradient(circle at 30% 20%, #ffffff5c, transparent 42%), color-mix(in srgb, currentColor 10%, transparent);border-radius:9px;flex-basis:30px;width:30px;height:30px;box-shadow:inset 0 1px #ffffff59,0 6px 14px #0f172a14
}
#aiShell .user-menu.sidebar-user-menu .user-icon:before{
top:6px;left:10px
}
#aiShell .user-menu.sidebar-user-menu .user-icon:after{
width:16px;bottom:5px;left:7px
}
#aiShell .user-menu.sidebar-user-menu .user-name{
display:none
}
#aiShell .user-menu.sidebar-user-menu .user-popover{
z-index:100;inset:auto auto 0 calc(100% + 12px)
}
#aiShell .user-popover-head{
border-bottom:1px solid var(--border-subtle);padding-bottom:14px
}
#aiShell .change-password-head{
align-items:flex-start;gap:10px;display:flex
}
#aiShell .back-btn{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-muted);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;flex:0 0 32px;font-size:16px;line-height:1
}
#aiShell .back-btn:hover{
border-color:var(--border-hover);color:var(--text-primary)
}
#aiShell .popover-user-name{
font-weight:800
}
#aiShell .popover-user-sub{
color:var(--text-muted);margin-top:2px;font-size:12px
}
#aiShell .license-info{
flex-direction:column;gap:10px;margin:14px 0 16px;display:flex
}
#aiShell .license-info div{
grid-template-columns:72px minmax(0,1fr);gap:12px;display:grid
}
#aiShell .license-info dt{
color:var(--text-muted);font-size:12px
}
#aiShell .license-info dd{
min-width:0;color:var(--text-secondary);overflow-wrap:anywhere;margin:0;font-size:12px;font-weight:700
}
#aiShell .license-info dd.expire-limited{
color:var(--danger-text)
}
#aiShell .user-popover-actions{
flex-direction:column;gap:10px;display:flex
}
#aiShell .user-action, #aiShell .logout-action{
width:100%;min-height:40px
}
#aiShell .change-password-form{
flex-direction:column;gap:12px;margin-top:14px;display:flex
}
#aiShell .change-password-error{
margin:0
}
@media(width<=520px){
#aiShell .user-popover{
width:min(320px,100vw - 32px)
}

}
#aiShell .theme-select-wrap{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-card);width:142px;height:36px;color:var(--text-secondary);flex:0 0 142px;align-items:center;gap:8px;padding:0 10px;display:inline-flex;position:relative
}
#aiShell .theme-select-wrap:focus-within{
border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)
}
#aiShell .theme-select-dot{
background:linear-gradient(135deg, var(--accent), var(--accent-2));width:10px;height:10px;box-shadow:0 0 0 4px var(--accent-soft);border-radius:50%;flex:none
}
#aiShell .theme-select-button{
min-width:0;height:100%;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:0;outline:0;flex:1;justify-content:space-between;align-items:center;gap:6px;padding:0 2px 0 0;font-size:13px;font-weight:700;display:inline-flex
}
#aiShell .theme-select-button span{
text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden
}
#aiShell .theme-select-button:after{
content:"";border:1.5px solid;border-width:0 1.5px 1.5px 0;flex:none;width:7px;height:7px;transform:translateY(-2px)rotate(45deg)
}
#aiShell .theme-select-menu{
z-index:80;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-elevated);width:142px;box-shadow:var(--shadow-panel);padding:5px;position:absolute;top:calc(100% + 6px);left:-1px
}
#aiShell .theme-select-option{
width:100%;min-height:32px;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;padding:0 9px;font-size:13px;font-weight:700;display:flex
}
#aiShell .theme-select-option:hover, #aiShell .theme-select-option.active{
background:var(--accent-soft);color:var(--accent)
}
.op-loading-root{
z-index:12000;pointer-events:auto;place-items:center;padding:24px;display:grid;position:fixed;inset:0
}
.op-loading-root--scoped{
z-index:80;border-radius:10px;padding:16px;position:absolute;inset:0
}
.op-loading-backdrop{
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#060a129e;position:absolute;inset:0
}
.op-loading-root--scoped .op-loading-backdrop{
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#060a128c
}
.op-loading-dialog{
z-index:1;isolation:isolate;border-radius:20px;width:min(100%,360px);padding:4px;animation:2.4s ease-in-out infinite op-glow-breathe-a90e2d47;position:relative;overflow:hidden
}
.op-loading-root--scoped .op-loading-dialog{
width:min(100%,300px)
}
.op-loading-glow-ring{
border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden
}
.op-loading-glow-spin{
aspect-ratio:1;filter:blur(.5px)saturate(1.35);background:conic-gradient(#22d3ee 0deg,#38bdf8 40deg,#a78bfa 80deg,#f472b6 120deg,#fb7185 160deg,#fbbf24 200deg,#34d399 240deg,#22d3ee 280deg,#38bdf8 320deg,#22d3ee 360deg);width:220%;margin-top:-110%;margin-left:-110%;animation:1.35s linear infinite op-border-spin-a90e2d47;position:absolute;top:50%;left:50%
}
.op-loading-glow-ring:before{
content:"";border-radius:inherit;mix-blend-mode:screen;opacity:.65;pointer-events:none;background:conic-gradient(from 180deg,#0000 0deg 50deg,#ffffff8c 90deg,#0000 130deg 360deg);animation:1.35s linear infinite reverse op-border-spin-a90e2d47;position:absolute;inset:0
}
.op-loading-glow-ring:after{
content:"";background:var(--bg-card,#141a24);box-shadow:inset 0 0 28px #0006, 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent);border-radius:17px;position:absolute;inset:3px
}
@keyframes op-border-spin-a90e2d47{
to{transform:rotate(360deg)}
}
@keyframes op-glow-breathe-a90e2d47{
0%,to{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 25%, transparent))}50%{filter:drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent))}
}
.op-loading-panel{
z-index:2;background:linear-gradient(165deg, #ffffff0f, transparent 42%), var(--bg-card,#141a24);box-shadow:0 24px 48px #00000073, 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent);text-align:center;border-radius:15px;flex-direction:column;align-items:center;gap:12px;padding:28px 24px 22px;display:flex;position:relative
}
.op-loading-root--scoped .op-loading-panel{
gap:10px;padding:22px 18px 18px
}
.op-loading-spinner{
width:52px;height:52px;margin-bottom:4px;position:relative
}
.op-arc{
border:3px solid #0000;border-radius:50%;animation:1.1s cubic-bezier(.5,.15,.35,.85) infinite op-arc-spin-a90e2d47;position:absolute;inset:0
}
.op-arc--a{
border-top-color:#f472b6;animation-duration:1s
}
.op-arc--b{
border-right-color:#a78bfa;animation-duration:1.25s;animation-direction:reverse;inset:5px
}
.op-arc--c{
border-bottom-color:#38bdf8;animation-duration:1.45s;inset:10px
}
@keyframes op-arc-spin-a90e2d47{
to{transform:rotate(360deg)}
}
.op-loading-title{
color:var(--text-primary,#f3f6fb);letter-spacing:.02em;margin:0;font-size:18px;font-weight:800
}
.op-loading-root--scoped .op-loading-title{
font-size:16px
}
.op-loading-message{
max-width:280px;color:var(--text-muted,#9aa8bc);margin:0;font-size:13px;line-height:1.55
}
.op-loading-cancel{
border:1px solid var(--border-subtle,#ffffff1f);min-width:120px;min-height:38px;color:var(--text-secondary,#c5d0de);cursor:pointer;background:#ffffff0f;border-radius:10px;margin-top:6px;padding:0 20px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s,color .15s
}
.op-loading-cancel:hover:not(:disabled){
border-color:var(--accent-border,#38bdf873);background:var(--accent-soft,#38bdf81f);color:var(--text-primary,#f3f6fb)
}
.op-loading-cancel:disabled{
opacity:.55;cursor:not-allowed
}
.op-loading-fade-enter-active, .op-loading-fade-leave-active{
transition:opacity .22s
}
.op-loading-fade-enter-active .op-loading-dialog, .op-loading-fade-leave-active .op-loading-dialog{
transition:opacity .22s,transform .22s
}
.op-loading-fade-enter-from, .op-loading-fade-leave-to{
opacity:0
}
.op-loading-fade-enter-from .op-loading-dialog, .op-loading-fade-leave-to .op-loading-dialog{
opacity:0;transform:scale(.96)translateY(8px)
}
#aiShell .module-loading-host{
flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative
}
#aiShell .upload-progress{
flex-direction:column;gap:6px;margin-top:12px;display:flex
}
#aiShell .progress-row{
align-items:center;gap:12px;display:flex
}
#aiShell .progress-track{
background:var(--surface-muted);border-radius:999px;flex:1;height:6px;overflow:hidden
}
#aiShell .progress-fill{
background:var(--accent);border-radius:999px;height:100%;transition:width .25s
}
#aiShell .pct{
font-variant-numeric:tabular-nums;min-width:40px;color:var(--accent);text-align:right;font-size:12px;font-weight:700
}
#aiShell .upload-progress-label{
color:var(--text-secondary);margin:0;font-size:12px
}
#aiShell .themed-video-mask{
z-index:12000;background:color-mix(in srgb, var(--bg-base) 70%, #000000bf);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0
}
#aiShell .themed-video-dialog{
border:1px solid color-mix(in srgb, var(--accent) 44%, var(--border-subtle));background:var(--surface-sheen-soft), color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%);width:min(92vw,860px);max-height:min(92vh,860px);box-shadow:0 24px 70px #00000075, 0 0 34px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 #fff3;border-radius:18px;flex-direction:column;gap:14px;padding:16px;display:flex
}
#aiShell .themed-video-dialog:fullscreen{
border-radius:0;width:100vw;height:100vh;max-height:none;padding:18px
}
#aiShell .themed-video-dialog:fullscreen{
border-radius:0;width:100vw;height:100vh;max-height:none;padding:18px
}
:-webkit-any(.themed-video-dialog:fullscreen .themed-video-player,.themed-video-dialog:-webkit-full-screen .themed-video-player){
flex:1;min-height:0;max-height:none
}
:is(.themed-video-dialog:fullscreen .themed-video-player,.themed-video-dialog:fullscreen .themed-video-player){
flex:1;min-height:0;max-height:none
}
#aiShell .themed-video-head{
justify-content:space-between;align-items:center;gap:12px;display:flex
}
#aiShell .themed-video-head h3{
color:var(--text-primary);margin:0;font-size:16px;font-weight:900
}
#aiShell .themed-video-close{
border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-input) 82%, var(--accent) 18%);width:34px;height:34px;color:var(--text-primary);cursor:pointer;border-radius:999px;font-size:24px;line-height:1
}
#aiShell .themed-video-close:hover{
border-color:var(--accent);color:var(--accent)
}
#aiShell .themed-video-player{
border:1px solid var(--border-subtle);object-fit:contain;cursor:pointer;background:#000;border-radius:14px;width:100%;max-height:min(68vh,620px)
}
#aiShell .themed-video-controls{
border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-input) 86%, var(--accent) 14%);border-radius:999px;grid-template-columns:42px auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;display:grid
}
#aiShell .themed-video-play{
border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);background:color-mix(in srgb, var(--accent) 12%, #ffffff14);width:36px;height:36px;color:var(--accent);cursor:pointer;box-shadow:0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:50%;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .themed-video-play:hover{
border-color:var(--accent);background:color-mix(in srgb, var(--accent) 20%, #ffffff14)
}
#aiShell .themed-video-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid;width:0;height:0;margin-left:3px
}
#aiShell .themed-video-play-icon.pause{
background:linear-gradient(currentColor,currentColor) 0/4px 14px no-repeat,linear-gradient(currentColor,currentColor) 100%/4px 14px no-repeat;border:0;width:12px;height:14px;margin-left:0
}
#aiShell .themed-video-time{
min-width:74px;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:12px;font-weight:800
}
#aiShell .themed-video-range{
appearance:none;cursor:pointer;background:0 0;width:100%;min-width:0;height:18px;margin:0
}
#aiShell .themed-video-range:disabled{
cursor:not-allowed;opacity:.55
}
#aiShell .themed-video-range::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent) 0 var(--range-fill,0%), color-mix(in srgb, var(--text-secondary) 22%, transparent) var(--range-fill,0%) 100%);border-radius:999px;height:6px
}
#aiShell .themed-video-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-input);background:var(--accent);width:14px;height:14px;box-shadow:0 0 12px color-mix(in srgb, var(--accent) 42%, transparent);border-radius:50%;margin-top:-4px
}
#aiShell .themed-video-range::-moz-range-track{
background:color-mix(in srgb, var(--text-secondary) 22%, transparent);border-radius:999px;height:6px
}
#aiShell .themed-video-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell .themed-video-range::-moz-range-thumb{
border:2px solid var(--bg-input);background:var(--accent);border-radius:50%;width:14px;height:14px
}
#aiShell .themed-video-download-wrap{
justify-content:center;gap:8px;display:inline-flex;position:relative
}
#aiShell .themed-video-icon-button{
border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 72%, var(--accent) 14%);width:34px;height:34px;color:var(--text-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .themed-video-icon-button:hover, #aiShell .themed-video-download:hover, #aiShell .themed-video-download[aria-expanded=true]{
border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, var(--bg-card))
}
#aiShell .themed-video-download span{
border-bottom:2px solid;width:15px;height:15px;display:inline-block;position:relative
}
#aiShell .themed-video-download span:before{
content:"";background:currentColor;border-radius:999px;width:2px;height:9px;position:absolute;top:1px;left:6px
}
#aiShell .themed-video-download span:after{
content:"";border-bottom:2px solid;border-right:2px solid;width:7px;height:7px;position:absolute;top:6px;left:3px;transform:rotate(45deg)
}
#aiShell .themed-video-fullscreen span{
width:16px;height:16px;display:inline-block;position:relative
}
#aiShell .themed-video-fullscreen span:before, #aiShell .themed-video-fullscreen span:after{
content:"";border-color:currentColor;width:6px;height:6px;position:absolute
}
#aiShell .themed-video-fullscreen span:before{
border-top:2px solid;border-left:2px solid;top:0;left:0
}
#aiShell .themed-video-fullscreen span:after{
border-bottom:2px solid;border-right:2px solid;bottom:0;right:0
}
#aiShell .themed-video-error{
color:var(--danger);margin:0;font-size:12px;font-weight:800
}
#aiShell .themed-video-fade-enter-active, #aiShell .themed-video-fade-leave-active{
transition:opacity .18s
}
#aiShell .themed-video-fade-enter-from, #aiShell .themed-video-fade-leave-to{
opacity:0
}
#aiShell .video-compare-overlay{
z-index:11000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#060a12b8;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0
}
#aiShell .video-compare-dialog{
border:1px solid var(--border-subtle);background:linear-gradient(165deg, #ffffff0d, transparent 42%), var(--bg-card,#141a24);border-radius:16px;flex-direction:column;gap:16px;width:min(100%,920px);max-height:min(92vh,880px);padding:20px 20px 16px;display:flex;position:relative;box-shadow:0 24px 64px #00000073
}
#aiShell .video-compare-head{
padding-right:36px;position:relative
}
#aiShell .video-compare-title{
color:var(--text-primary);margin:0;font-size:18px;font-weight:800
}
#aiShell .video-compare-sub{
color:var(--text-muted);margin:6px 0 0;font-size:13px;line-height:1.5
}
#aiShell .video-compare-close{
width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;font-size:24px;line-height:1;position:absolute;top:0;right:0
}
#aiShell .video-compare-close:hover{
background:var(--surface-muted);color:var(--text-primary)
}
#aiShell .video-compare-grid{
flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:0;display:grid
}
#aiShell .video-compare-pane{
flex-direction:column;gap:8px;min-width:0;display:flex
}
#aiShell .pane-label{
color:var(--accent);text-align:center;margin:0;font-size:14px;font-weight:700
}
#aiShell .pane-frame{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-width:320px;min-height:280px;max-height:min(62vh,640px);box-shadow:var(--shadow-panel);background:#000;border-radius:14px;flex:1;margin:0 auto;overflow:hidden
}
#aiShell .pane-video{
object-fit:contain;background:#000;width:100%;height:100%;display:block
}
#aiShell .pane-empty{
text-align:center;width:100%;height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;padding:20px 14px;font-size:14px;display:flex
}
#aiShell .pane-empty p{
margin:0 0 8px
}
#aiShell .pane-empty-hint{
opacity:.9;margin:0;font-size:12px;line-height:1.45
}
#aiShell .video-compare-foot{
justify-content:flex-end;display:flex
}
#aiShell .video-compare-fade-enter-active, #aiShell .video-compare-fade-leave-active{
transition:opacity .2s
}
#aiShell .video-compare-fade-enter-active .video-compare-dialog, #aiShell .video-compare-fade-leave-active .video-compare-dialog{
transition:opacity .2s,transform .2s
}
#aiShell .video-compare-fade-enter-from, #aiShell .video-compare-fade-leave-to{
opacity:0
}
#aiShell .video-compare-fade-enter-from .video-compare-dialog, #aiShell .video-compare-fade-leave-to .video-compare-dialog{
opacity:0;transform:scale(.97)translateY(8px)
}
@media(width<=760px){
#aiShell .video-compare-grid{
grid-template-columns:1fr
}
#aiShell .pane-frame{
max-height:50vh
}

}
#aiShell .legal-panel{
border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--surface-muted);flex-direction:column;margin-top:12px;padding:14px 16px;display:flex
}
#aiShell .legal-panel--ok{
border-color:var(--success-border);background:var(--success-soft)
}
#aiShell .legal-panel--warn{
border-color:var(--warning-border);background:var(--warning-soft)
}
#aiShell .legal-panel--loading{
color:var(--text-secondary);align-items:center;gap:12px;font-size:13px;display:flex
}
#aiShell .legal-spinner{
border:2px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin-8a2e3525
}
@keyframes spin-8a2e3525{
to{transform:rotate(360deg)}
}
#aiShell .legal-head{
flex-wrap:wrap;flex:none;align-items:center;gap:10px;margin-bottom:8px;display:flex
}
#aiShell .legal-body{
flex:0 auto;min-height:0;overflow:auto
}
#aiShell .legal-badge{
background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800
}
#aiShell .legal-panel--ok .legal-badge{
background:var(--success-soft);color:var(--success)
}
#aiShell .legal-panel--warn .legal-badge{
background:var(--warning-soft);color:var(--warning)
}
#aiShell .legal-risk{
color:var(--text-muted);font-size:12px;font-weight:600
}
#aiShell .legal-dismiss{
color:var(--text-muted);cursor:pointer;background:0 0;border:0;margin-left:auto;padding:0;font-size:12px
}
#aiShell .legal-dismiss:hover{
color:var(--accent)
}
#aiShell .legal-summary, #aiShell .legal-sub, #aiShell .legal-hint, #aiShell .legal-disclaimer{
color:var(--text-secondary);margin:0 0 8px;font-size:13px;line-height:1.5
}
#aiShell .legal-hint, #aiShell .legal-disclaimer{
color:var(--text-muted);font-size:12px
}
#aiShell .legal-tags{
flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex
}
#aiShell .legal-tag{
background:var(--danger-soft);color:var(--danger-text);border-radius:4px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block
}
#aiShell .legal-violations{
margin:0 0 12px;padding:0;list-style:none
}
#aiShell .legal-violations li{
background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;margin-bottom:6px;padding:8px 10px;font-size:12px;line-height:1.45
}
#aiShell .issue-head{
flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;display:flex
}
#aiShell .issue-type{
background:var(--warning-soft);color:var(--warning);border-radius:4px;padding:1px 8px;font-weight:700;display:inline-block
}
#aiShell .legal-violations .term{
background:var(--danger-soft);color:var(--danger-text);border-radius:4px;padding:1px 8px;font-weight:800;display:inline-block
}
#aiShell .legal-violations .reason{
color:var(--text-secondary);margin:0
}
#aiShell .legal-preview{
background:var(--bg-card);border:1px solid var(--border-subtle);white-space:pre-wrap;word-break:break-word;max-height:160px;color:var(--text-primary);border-radius:8px;margin:0 0 12px;padding:12px;font-family:inherit;font-size:13px;line-height:1.55;overflow:auto
}
#aiShell .legal-apply{
width:100%;min-height:40px
}
#aiShell .rewrite-merchant-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;display:grid
}
#aiShell .rewrite-merchant-field{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .rewrite-merchant-field--wide{
grid-column:1/-1
}
#aiShell .rewrite-merchant-label{
color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .rewrite-merchant-opt{
color:var(--text-muted,var(--text-secondary));opacity:.85;font-size:11px;font-weight:600
}
#aiShell .rewrite-merchant-input, #aiShell .rewrite-merchant-textarea{
border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;min-height:38px;color:var(--text-primary);border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.45
}
#aiShell .rewrite-merchant-textarea{
resize:vertical;min-height:56px
}
#aiShell .rewrite-merchant-input:disabled, #aiShell .rewrite-merchant-textarea:disabled{
opacity:.55
}
@media(width<=900px){
#aiShell .rewrite-merchant-grid{
grid-template-columns:1fr
}

}
#aiShell .meta-select{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .meta-select.open{
z-index:2;position:relative
}
#aiShell .meta-select-label{
color:var(--text-secondary);letter-spacing:.02em;font-size:12px;font-weight:800
}
#aiShell .meta-select-anchor{
position:relative
}
#aiShell .meta-select-trigger{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 38%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:100%;min-height:40px;color:var(--text-primary);cursor:pointer;text-align:left;box-shadow:inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in srgb, var(--accent) 6%, transparent);background-size:auto,240% 100%;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-size:13px;font-weight:700;transition:box-shadow .15s,filter .15s;animation:8s linear infinite meta-select-border-flow-168a6cba;display:inline-flex
}
#aiShell .meta-select-trigger:after{
content:"";opacity:.7;border:1.5px solid;border-width:0 1.5px 1.5px 0;flex:none;width:7px;height:7px;transition:transform .18s;transform:translateY(-2px)rotate(45deg)
}
#aiShell .meta-select.open .meta-select-trigger, #aiShell .meta-select-trigger:hover:not(:disabled){
box-shadow:inset 0 1px 0 #fff3, 0 0 0 3px color-mix(in srgb, var(--accent-soft-strong) 44%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent);filter:saturate(1.04)
}
#aiShell .meta-select.open .meta-select-trigger:after{
transform:translateY(1px)rotate(225deg)
}
#aiShell .meta-select-trigger:disabled{
opacity:.55;cursor:not-allowed
}
#aiShell .meta-select-value{
text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden
}
#aiShell .meta-select.disabled{
opacity:.85
}
@keyframes meta-select-border-flow-168a6cba{
0%{background-position:0 0,0%}to{background-position:0 0,240%}
}
#aiShell .meta-select-menu{
z-index:12000;border:1px solid var(--accent-border,var(--border-subtle));background:var(--surface-sheen-soft,linear-gradient(180deg, #ffffff14, transparent)), var(--bg-elevated,var(--bg-root));color:var(--text-primary);box-shadow:0 18px 42px #00000057, 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 #ffffff29;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;padding:6px;position:fixed;overflow-y:auto
}
#aiShell .meta-select-option{
width:100%;min-height:32px;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;margin-bottom:2px;padding:7px 10px;font-size:13px;font-weight:700;line-height:1.3;display:block
}
#aiShell .meta-select-option:last-child{
margin-bottom:0
}
#aiShell .meta-select-option:hover, #aiShell .meta-select-option.active{
border-color:color-mix(in srgb, var(--accent-border) 60%, transparent);background:var(--surface-sheen-soft,linear-gradient(180deg, #ffffff14, transparent)), var(--accent-soft);color:var(--accent)
}
#aiShell .meta-select-option.active{
font-weight:900
}
#aiShell .dialog-overlay{
background:var(--overlay-modal);z-index:20000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0
}
#aiShell .dialog-container{
border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-sheen-soft), var(--bg-elevated);width:min(500px,100%);min-width:min(400px,100%);color:var(--text-primary);box-shadow:var(--shadow-panel);animation:.3s dialog-slide-in-5b9ba36f;overflow:hidden
}
#aiShell .dialog-header{
border-bottom:1px solid var(--border-subtle);background:var(--surface-muted);justify-content:space-between;align-items:center;padding:20px 24px;display:flex
}
#aiShell .dialog-title{
color:var(--text-primary);margin:0;font-size:18px;font-weight:600
}
#aiShell .dialog-close{
cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex
}
#aiShell .dialog-close:hover{
background:var(--accent-soft);color:var(--accent)
}
#aiShell .dialog-body{
padding:24px
}
#aiShell .dialog-content{
color:var(--text-secondary);margin:0;font-size:15px;line-height:1.6
}
#aiShell .dialog-footer{
border-top:1px solid var(--border-subtle);background:var(--surface-muted);justify-content:flex-end;gap:12px;padding:16px 24px;display:flex
}
#aiShell .dialog-btn{
border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;min-width:80px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s
}
#aiShell .dialog-btn-cancel{
border-color:var(--border-subtle);background:var(--bg-card-hover);color:var(--text-primary)
}
#aiShell .dialog-btn-cancel:hover{
border-color:var(--border-hover);background:var(--button-secondary-hover)
}
#aiShell .dialog-btn-confirm{
color:var(--accent-contrast)
}
#aiShell .dialog-btn-primary{
background:var(--button-primary-bg);box-shadow:var(--button-primary-shadow)
}
#aiShell .dialog-btn-primary:hover{
filter:brightness(1.06);transform:translateY(-1px)
}
#aiShell .dialog-btn-danger{
border-color:var(--danger-border);background:var(--danger);color:#fff;box-shadow:0 8px 22px var(--danger-soft)
}
#aiShell .dialog-btn-danger:hover{
filter:brightness(.94);box-shadow:0 10px 26px var(--danger-border);transform:translateY(-1px)
}
#aiShell .dialog-btn-warning{
border-color:var(--warning-border);background:var(--warning);color:var(--accent-contrast);box-shadow:0 8px 22px var(--warning-soft)
}
#aiShell .dialog-btn-warning:hover{
filter:brightness(.96);box-shadow:0 10px 26px var(--warning-border);transform:translateY(-1px)
}
#aiShell .dialog-fade-enter-active, #aiShell .dialog-fade-leave-active{
transition:opacity .3s
}
#aiShell .dialog-fade-enter-from, #aiShell .dialog-fade-leave-to{
opacity:0
}
@keyframes dialog-slide-in-5b9ba36f{
0%{opacity:0;transform:scale(.95)translateY(-10px)}to{opacity:1;transform:scale(1)translateY(0)}
}
#aiShell .text-style-backdrop{
z-index:10001;background:var(--overlay-modal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;padding:18px;display:grid;position:fixed;inset:0
}
#aiShell .text-style-modal{
border:1px solid var(--border-strong);background:var(--bg-elevated);width:min(100%,860px);height:auto;max-height:calc(100vh - 36px);box-shadow:var(--shadow-glow);border-radius:14px;flex-direction:column;display:flex;overflow:hidden
}
#aiShell .text-style-modal-head{
border-bottom:1px solid var(--border-subtle);flex:none;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 16px 12px;display:flex
}
#aiShell .text-style-modal-head>div{
flex:auto;min-width:0
}
#aiShell .text-style-template-btn{
border-color:color-mix(in srgb, var(--accent-border) 62%, var(--border-subtle));background:color-mix(in srgb, var(--accent-soft) 44%, var(--bg-card-hover));color:var(--text-primary)
}
#aiShell .modal-title{
color:var(--text-primary);margin:0 0 6px;font-size:17px;font-weight:900
}
#aiShell .modal-desc{
color:var(--text-muted);margin:0;font-size:13px;line-height:1.45
}
#aiShell .text-style-modal-body{
flex:0 auto;grid-template-columns:minmax(300px,360px) minmax(0,1fr);min-height:0;max-height:calc(100vh - 118px);display:grid;overflow:hidden
}
#aiShell .canvas-pane{
--range-track:var(--surface-muted-strong);background:color-mix(in srgb, var(--bg-page) 70%, #000);flex-direction:column;gap:10px;min-width:0;min-height:0;padding:12px;display:flex;overflow:hidden
}
#aiShell .canvas-shell{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:min(100%,310px);max-width:100%;height:min(520px,100vh - 300px);min-height:360px;max-height:520px;box-shadow:var(--shadow-panel);background:#05070a;border-radius:10px;flex:0 auto;justify-content:center;align-items:center;display:flex;overflow:hidden
}
#aiShell .video-canvas{
background:#000;position:relative;overflow:hidden;container-type:inline-size
}
#aiShell .video-canvas.is-wide-video{
width:100%;max-height:100%
}
#aiShell .video-canvas.is-tall-video{
max-width:100%;height:100%
}
#aiShell .preview-video{
object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .preview-empty{
color:var(--text-muted);text-align:center;background:linear-gradient(#10141d,#07090d);place-items:center;padding:16px;font-size:13px;line-height:1.45;display:grid;position:absolute;inset:0
}
#aiShell .text-layer{
z-index:3;box-sizing:border-box;padding:var(--preview-pad-y,0) var(--preview-pad-x,0);white-space:normal;overflow-wrap:anywhere;-webkit-user-select:none;user-select:none;cursor:grab;touch-action:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;font-weight:900;display:inline-flex;position:absolute
}
#aiShell .title-layer{
min-height:var(--title-box-height,auto);padding:var(--title-box-pad,0)
}
#aiShell .subtitle-layer{
min-height:var(--subtitle-box-height,auto)
}
#aiShell .title-layer:before{
content:"";z-index:0;border-radius:inherit;background:var(--title-box-bg,transparent);position:absolute;inset:0
}
#aiShell .title-layer .preview-text-line{
z-index:1;height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex;position:relative
}
#aiShell .text-layer:after{
content:"";inset:calc(-1 * var(--preview-outline-offset,2px));border:1px dashed color-mix(in srgb, var(--accent) 72%, transparent);opacity:0;pointer-events:none;border-radius:10px;position:absolute
}
#aiShell .text-layer:hover:after, #aiShell .text-layer.dragging:after{
opacity:1
}
#aiShell .text-layer.dragging{
cursor:grabbing
}
#aiShell .text-layer.animation-fade{
animation:1.8s ease-out infinite preview-layer-fade-85bb4c4c
}
#aiShell .text-layer.animation-pop{
animation:1.8s ease-out infinite preview-layer-pop-85bb4c4c
}
#aiShell .text-layer.animation-slideUp{
animation:1.8s ease-out infinite preview-layer-slide-up-85bb4c4c
}
#aiShell .text-layer.animation-slideRight{
animation:1.8s ease-out infinite preview-layer-slide-right-85bb4c4c
}
#aiShell .text-layer.animation-slideLeft{
animation:1.8s ease-out infinite preview-layer-slide-left-85bb4c4c
}
#aiShell .text-layer.animation-slideDown{
animation:1.8s ease-out infinite preview-layer-slide-down-85bb4c4c
}
#aiShell .text-layer.animation-zoom{
animation:1.8s ease-out infinite preview-layer-zoom-85bb4c4c
}
#aiShell .text-layer.animation-shake{
animation:1.8s ease-out infinite preview-layer-shake-85bb4c4c
}
#aiShell .text-layer.animation-wordByWord{
animation:1.8s steps(6,end) infinite preview-layer-word-85bb4c4c
}
@keyframes preview-layer-fade-85bb4c4c{
0%{opacity:0}24%,to{opacity:1}
}
@keyframes preview-layer-pop-85bb4c4c{
0%{opacity:.28;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) scale(.72)}16%{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) scale(1.12)}28%,to{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) scale(1)}
}
@keyframes preview-layer-slide-up-85bb4c4c{
0%{opacity:.24;transform:translate(var(--layer-x,-50%), calc(var(--layer-y,-50%) + 22px))}24%,to{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%))}
}
@keyframes preview-layer-slide-right-85bb4c4c{
0%{opacity:.24;transform:translate(calc(var(--layer-x,-50%) - 30px), var(--layer-y,-50%))}24%,to{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%))}
}
@keyframes preview-layer-slide-left-85bb4c4c{
0%{opacity:.24;transform:translate(calc(var(--layer-x,-50%) + 30px), var(--layer-y,-50%))}24%,to{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%))}
}
@keyframes preview-layer-slide-down-85bb4c4c{
0%{opacity:.24;transform:translate(var(--layer-x,-50%), calc(var(--layer-y,-50%) - 22px))}24%,to{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%))}
}
@keyframes preview-layer-zoom-85bb4c4c{
0%{opacity:.2;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) scale(.42)}24%,to{opacity:1;transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) scale(1)}
}
@keyframes preview-layer-shake-85bb4c4c{
0%{transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) rotate(0deg)}8%{transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) rotate(-8deg)}16%{transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) rotate(8deg)}24%{transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) rotate(-6deg)}32%{transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) rotate(6deg)}44%,to{transform:translate(var(--layer-x,-50%), var(--layer-y,-50%)) rotate(0deg)}
}
@keyframes preview-layer-word-85bb4c4c{
0%{opacity:.18;clip-path:inset(0 100% 0 0)}34%,to{opacity:1;clip-path:inset(0)}
}
#aiShell .preview-text-line{
display:block
}
#aiShell .pip-preview-overlay{
z-index:4;border:2px solid var(--accent);cursor:grab;touch-action:none;border-radius:6px;position:absolute;overflow:hidden;box-shadow:0 4px 16px #00000059
}
#aiShell .pip-preview-overlay.dragging{
cursor:grabbing;opacity:.92
}
#aiShell .pip-preview-media{
object-fit:cover;pointer-events:none;width:100%;height:auto;max-height:100%;display:block
}
#aiShell .controls-pane{
--range-track:var(--surface-muted-strong);border-left:1px solid var(--border-subtle);flex-direction:column;gap:8px;min-width:0;min-height:0;padding:10px;display:flex;overflow:auto
}
#aiShell .control-section{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--surface-muted);border-radius:8px;flex-direction:column;gap:8px;min-width:0;padding:10px;display:flex;position:relative
}
#aiShell .control-section.dropdown-open{
z-index:10
}
#aiShell .control-section.is-section-disabled{
background:linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 86%, #fff), color-mix(in srgb, var(--surface-muted) 92%, #fff))
}
#aiShell .control-section.is-section-disabled>:not(.style-setting-head){
opacity:.48
}
#aiShell .control-section.is-section-disabled .field-label, #aiShell .control-section.is-section-disabled .range-value, #aiShell .control-section.is-section-disabled .text-bg-toggle{
color:color-mix(in srgb, var(--text-muted) 68%, var(--border-strong))
}
#aiShell .subtitle-title-template-section{
flex:none
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;justify-self:end;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .template-head-select-btn:hover{
border-color:var(--accent-border);background:color-mix(in srgb, var(--accent-soft) 62%, var(--bg-card-hover))
}
#aiShell .template-card-body{
min-width:0;padding-top:2px
}
#aiShell .template-selected-line{
border:1px solid color-mix(in srgb, var(--accent-border) 45%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 84%, var(--surface-muted-strong));border-radius:8px;align-items:center;gap:8px;min-width:0;min-height:22px;padding:2px 7px;display:flex
}
#aiShell .template-selected-label{
color:var(--text-secondary);flex:none;font-size:12px;font-weight:700
}
#aiShell .template-selected-name{
text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-primary);flex:auto;font-size:12px;font-weight:800;overflow:hidden
}
#aiShell .template-trash-btn{
border:1px solid color-mix(in srgb, var(--danger) 38%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 90%, var(--danger) 6%);width:24px;height:24px;color:var(--danger);cursor:pointer;border-radius:50%;flex:none;place-items:center;padding:0;display:inline-grid
}
#aiShell .template-trash-btn:hover{
background:color-mix(in srgb, var(--danger) 14%, var(--bg-card))
}
#aiShell .template-trash-btn svg{
width:14px;height:14px
}
#aiShell .position-section{
flex:none
}
#aiShell .style-setting-head{
min-width:0;display:block
}
#aiShell .style-setting-title-row{
justify-content:flex-start;align-items:center;gap:8px;min-width:0;min-height:24px;display:flex
}
#aiShell .style-setting-title-row h3{
color:var(--text-primary);white-space:nowrap;flex:none;margin:0;font-size:13px;font-weight:900;line-height:1.25
}
#aiShell .check-row{
min-width:0;color:var(--text-secondary);cursor:pointer;flex:none;align-items:center;gap:6px;font-size:12px;line-height:1;display:inline-flex
}
#aiShell .check-row input{
flex:0 0 14px;width:14px;height:14px;margin:0
}
#aiShell .font-select-wrap{
grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;min-width:0;display:grid;position:relative
}
#aiShell .picker-trigger{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);width:100%;min-width:0;min-height:36px;color:var(--text-primary);font:inherit;cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;font-size:13px;display:inline-flex;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .picker-trigger.on{
border-color:var(--accent)
}
#aiShell .picker-trigger:hover{
border-color:var(--border-hover);background:var(--surface-sheen-soft), var(--bg-card-hover)
}
#aiShell .picker-trigger:disabled{
border-color:color-mix(in srgb, var(--border-subtle) 72%, transparent);background:color-mix(in srgb, var(--bg-input) 70%, var(--surface-muted));color:var(--text-muted);box-shadow:none;cursor:not-allowed
}
#aiShell .picker-trigger:disabled .picker-chev{
opacity:.45
}
#aiShell .picker-trigger-text{
text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:1;min-width:0;overflow:hidden
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0
}
#aiShell .font-menu{
z-index:20;border:1px solid var(--border-subtle);background:var(--bg-elevated);width:max(100% - 118px,220px);max-height:260px;box-shadow:var(--shadow-modal);border-radius:8px;padding:6px;position:absolute;top:calc(100% + 6px);right:0;overflow:auto
}
#aiShell .font-option{
width:100%;color:var(--text-primary);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:8px 10px
}
#aiShell .font-option:hover, #aiShell .font-option.active{
background:var(--accent-soft)
}
#aiShell .compact-setting-grid{
grid-template-columns:minmax(0,1fr);gap:8px;display:grid
}
#aiShell .compact-setting-grid label{
grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;min-width:0;min-height:36px;display:grid
}
#aiShell .field-label{
color:var(--text-muted);margin-bottom:0;font-size:12px;font-weight:700;line-height:1.25;display:block
}
#aiShell .input{
box-sizing:border-box;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);width:100%;min-width:0;min-height:36px;color:var(--text-primary);font:inherit;border-radius:8px;padding:7px 10px;font-size:14px;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .input:disabled, #aiShell .compact-setting-grid input:disabled, #aiShell .text-bg-color:disabled{
border-color:color-mix(in srgb, var(--border-subtle) 72%, transparent);background:color-mix(in srgb, var(--bg-input) 68%, var(--surface-muted));color:var(--text-muted);box-shadow:none;cursor:not-allowed
}
#aiShell .compact-setting-grid input[type=color]{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);border-radius:8px;width:100%;height:34px;min-height:34px;padding:4px;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .style-range-field{
grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;display:grid
}
#aiShell .range-control{
grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;min-width:0;display:grid
}
#aiShell .range-value{
color:var(--text-secondary);text-align:right;white-space:nowrap;font-size:12px;font-weight:800;line-height:1
}
#aiShell .style-range-field input[type=range]{
appearance:none;background:var(--range-track,var(--surface-muted-strong));width:100%;height:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 55%, transparent);cursor:pointer;border-radius:999px;margin:0
}
#aiShell .style-range-field input[type=range]:disabled{
filter:grayscale(.7);opacity:.58;cursor:not-allowed
}
#aiShell .style-range-field input[type=range]:disabled::-webkit-slider-thumb{
background:color-mix(in srgb, var(--text-muted) 58%, #fff);box-shadow:none
}
#aiShell .style-range-field input[type=range]:disabled::-moz-range-thumb{
background:color-mix(in srgb, var(--text-muted) 58%, #fff);box-shadow:none
}
#aiShell .style-range-field input[type=range]::-webkit-slider-runnable-track{
background:0 0;border-radius:999px;height:6px
}
#aiShell .style-range-field input[type=range]::-webkit-slider-thumb{
appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:15px;height:15px;margin-top:-4.5px;box-shadow:0 2px 8px #00000059
}
#aiShell .style-range-field input[type=range]::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:50%;width:15px;height:15px;box-shadow:0 2px 8px #00000059
}
#aiShell .style-range-field input[type=range]::-moz-range-track{
background:0 0;border-radius:999px;height:6px
}
#aiShell .text-bg-row{
align-items:center;min-height:36px;display:grid
}
#aiShell .text-bg-toggle{
min-width:0;color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex
}
#aiShell .text-bg-color{
width:100%
}
#aiShell .transparent-color-picker{
width:100%;height:34px;position:relative
}
#aiShell .transparent-color-swatch{
z-index:1;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);pointer-events:none;border-radius:8px;display:block;position:absolute;inset:0;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .transparent-color-swatch:before{
content:"";border:1px solid color-mix(in srgb, var(--text-muted) 62%, transparent);background-color:#fff;background-image:linear-gradient(45deg,#cfd6df 25%,#0000 25%),linear-gradient(-45deg,#cfd6df 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#cfd6df 75%),linear-gradient(-45deg,#0000 75%,#cfd6df 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:4px
}
#aiShell .transparent-color-picker .text-bg-color{
width:100%;height:34px
}
#aiShell .transparent-color-picker.is-transparent .text-bg-color{
opacity:0
}
#aiShell .transparent-color-picker.is-disabled{
opacity:.55
}
#aiShell .transparent-color-label{
z-index:2;color:var(--text-primary);pointer-events:none;background:color-mix(in srgb, var(--bg-card) 48%, transparent);place-items:center;font-size:12px;font-weight:800;display:grid;position:absolute;inset:0
}
#aiShell .title-bg-setting-row{
grid-column:1/-1
}
#aiShell .position-section .compact-setting-grid{
gap:8px
}
#aiShell .title-text-field{
grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;min-width:0;display:grid
}
#aiShell .template-dialog-empty, #aiShell .template-dialog-error{
min-height:86px;color:var(--text-secondary);flex:1;place-items:center;margin:0;font-size:13px;display:grid
}
#aiShell .template-dialog-error{
color:var(--danger)
}
#aiShell .subtitle-title-template-grid{
grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-right:4px;display:grid;overflow:auto
}
#aiShell .subtitle-title-template-card{
text-align:left;color:var(--text-primary);background:color-mix(in srgb, var(--bg-card) 88%, var(--surface-muted-strong));border:1px solid color-mix(in srgb, var(--accent-border) 42%, var(--border-subtle));cursor:pointer;border-radius:8px;gap:8px;padding:10px;display:grid;position:relative
}
#aiShell .subtitle-title-template-card.active, #aiShell .subtitle-title-template-card:hover{
border-color:var(--warning)
}
#aiShell .subtitle-title-template-card.active{
box-shadow:0 0 0 3px color-mix(in srgb, var(--warning) 30%, transparent), 0 12px 28px color-mix(in srgb, var(--accent-2) 12%, transparent);border-width:2px;padding:9px
}
#aiShell .subtitle-title-template-card.active:before{
content:"已选";z-index:2;background:var(--warning);color:var(--accent-contrast);border-radius:6px 0 8px;padding:3px 8px 4px;font-size:12px;font-weight:900;line-height:1;position:absolute;top:0;left:0
}
#aiShell .subtitle-title-template-card.applied:not(.active){
border-color:color-mix(in srgb, var(--warning) 42%, var(--border-subtle))
}
#aiShell .subtitle-title-template-card strong{
font-size:14px
}
#aiShell .subtitle-title-template-card>span:last-child{
min-height:34px;color:var(--text-secondary);font-size:12px;line-height:1.45
}
#aiShell .template-dialog-sections{
gap:18px;display:grid
}
#aiShell .template-dialog-section-title{
color:var(--text-primary);margin:0 0 10px;font-size:14px;font-weight:800
}
#aiShell .product-commerce-template-grid{
grid-template-columns:repeat(5,minmax(0,1fr))
}
@media(width<=960px){
#aiShell .product-commerce-template-grid{
grid-template-columns:repeat(3,minmax(0,1fr))
}

}
#aiShell .product-commerce-preview-canvas{
aspect-ratio:9/16;background:#111;border-radius:8px;display:block;overflow:hidden
}
#aiShell .product-commerce-demo-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 60%, transparent);color:var(--accent-2);cursor:pointer;background:0 0;border-radius:999px;justify-self:start;padding:4px 10px;font-size:12px;font-weight:700
}
#aiShell .product-commerce-demo-btn:hover{
border-color:var(--accent-2)
}
#aiShell .template-dialog-footnote{
color:var(--text-secondary);margin-right:auto;font-size:12px
}
#aiShell .template-dialog-cancel, #aiShell .template-dialog-apply{
cursor:pointer;border:0;border-radius:14px;min-height:48px;padding:0 20px;font-size:15px;font-weight:900
}
#aiShell .template-dialog-cancel{
color:var(--text-primary);background:color-mix(in srgb, var(--accent-soft-strong) 42%, var(--bg-card-hover))
}
#aiShell .template-dialog-apply{
color:var(--accent-contrast);background:var(--button-primary-bg);box-shadow:var(--button-primary-shadow)
}
#aiShell .template-dialog-apply:disabled{
cursor:not-allowed;opacity:.52;box-shadow:none
}
#aiShell .template-preview-canvas{
aspect-ratio:9/16;background:linear-gradient(180deg, color-mix(in srgb, var(--accent-contrast) 6%, transparent), color-mix(in srgb, var(--bg-preview) 16%, transparent)), var(--bg-preview);background-position:50%;background-size:cover;border-radius:8px;display:block;position:relative;overflow:hidden;container-type:inline-size
}
#aiShell .template-preview-title, #aiShell .template-preview-subtitle{
--anim-x:-50%;--anim-y:-50%;width:86%;transform:translate(var(--anim-x), var(--anim-y));text-align:center;font-weight:900;line-height:1.16;position:absolute
}
#aiShell .template-preview-title.animation-fade, #aiShell .template-preview-subtitle.animation-fade{
animation:1.8s ease-out infinite template-fade-85bb4c4c
}
#aiShell .template-preview-title.animation-pop, #aiShell .template-preview-subtitle.animation-pop{
animation:1.8s ease-out infinite template-pop-85bb4c4c
}
#aiShell .template-preview-title.animation-slideUp, #aiShell .template-preview-subtitle.animation-slideUp{
animation:1.8s ease-out infinite template-slide-up-85bb4c4c
}
#aiShell .template-preview-title.animation-slideRight, #aiShell .template-preview-subtitle.animation-slideRight{
animation:1.8s ease-out infinite template-slide-right-85bb4c4c
}
#aiShell .template-preview-title.animation-slideLeft, #aiShell .template-preview-subtitle.animation-slideLeft{
animation:1.8s ease-out infinite template-slide-left-85bb4c4c
}
#aiShell .template-preview-title.animation-slideDown, #aiShell .template-preview-subtitle.animation-slideDown{
animation:1.8s ease-out infinite template-slide-down-85bb4c4c
}
#aiShell .template-preview-title.animation-zoom, #aiShell .template-preview-subtitle.animation-zoom{
animation:1.8s ease-out infinite template-zoom-85bb4c4c
}
#aiShell .template-preview-title.animation-shake, #aiShell .template-preview-subtitle.animation-shake{
animation:1.8s ease-out infinite template-shake-85bb4c4c
}
#aiShell .template-preview-title.animation-wordByWord, #aiShell .template-preview-subtitle.animation-wordByWord{
animation:1.8s steps(5,end) infinite template-word-85bb4c4c
}
@keyframes template-fade-85bb4c4c{
0%{opacity:.16}24%,to{opacity:1}
}
@keyframes template-pop-85bb4c4c{
0%{opacity:.32;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(.72)}16%{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(1.12)}28%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(1)}
}
@keyframes template-slide-up-85bb4c4c{
0%{opacity:.24;transform:translate(var(--anim-x,-50%), calc(var(--anim-y,-50%) + 20px))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes template-slide-right-85bb4c4c{
0%{opacity:.24;transform:translate(calc(var(--anim-x,-50%) - 28px), var(--anim-y,-50%))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes template-slide-left-85bb4c4c{
0%{opacity:.24;transform:translate(calc(var(--anim-x,-50%) + 28px), var(--anim-y,-50%))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes template-slide-down-85bb4c4c{
0%{opacity:.24;transform:translate(var(--anim-x,-50%), calc(var(--anim-y,-50%) - 20px))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes template-zoom-85bb4c4c{
0%{opacity:.2;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(.42)}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(1)}
}
@keyframes template-shake-85bb4c4c{
0%{transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) rotate(0deg)}8%{transform:translate(calc(var(--anim-x,-50%) - 4px), var(--anim-y,-50%)) rotate(-2deg)}16%{transform:translate(calc(var(--anim-x,-50%) + 4px), var(--anim-y,-50%)) rotate(2deg)}28%,to{transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) rotate(0deg)}
}
@keyframes template-word-85bb4c4c{
0%{opacity:.15;clip-path:inset(0 100% 0 0)}34%,to{opacity:1;clip-path:inset(0)}
}
@media(width<=980px){
#aiShell .text-style-modal{
width:calc(100vw - 24px);height:calc(100vh - 24px)
}
#aiShell .text-style-modal-body{
grid-template-columns:1fr
}
#aiShell .controls-pane{
border-left:0;border-top:1px solid var(--border-subtle)
}
#aiShell .subtitle-title-template-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

}
#aiShell .ai-cover-modal{
z-index:3000;background:radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 34%), var(--overlay-modal,#0f172a94);justify-content:center;align-items:center;padding:22px;display:flex;position:fixed;inset:0
}
#aiShell .ai-cover-shell{
border:1px solid var(--border-subtle);border-radius:var(--radius-md,10px);background:linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, var(--accent-soft)), var(--bg-elevated) 18%), var(--bg-elevated);width:1320px;max-width:96vw;height:min(860px,92vh);color:var(--text-primary);box-shadow:var(--shadow-panel,0 24px 80px #0f172a59);flex-direction:column;display:flex;overflow:hidden
}
#aiShell .ai-cover-shell.is-editor{
width:min(69vh + 304.5px,96vw)
}
#aiShell .ai-cover-shell.is-frame-picker{
width:min(1040px,96vw)
}
#aiShell .ai-cover-head{
border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 34%, transparent), transparent 52%), var(--card-bg);justify-content:space-between;align-items:center;min-height:74px;padding:16px 22px;display:flex
}
#aiShell .ai-cover-head p{
color:var(--accent);text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:800
}
#aiShell .ai-cover-head h2{
color:var(--text-primary);margin:0;font-size:22px
}
#aiShell .icon-btn{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-input);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;font-size:24px;line-height:1
}
#aiShell .icon-btn:hover{
border-color:var(--border-hover);background:var(--bg-card-hover);color:var(--text-primary)
}
#aiShell .template-picker, #aiShell .frame-picker, #aiShell .frame-editor-workspace{
flex-direction:column;flex:1;min-height:0;display:flex
}
#aiShell .frame-editor-layout{
--cover-preview-height:clamp(300px, 38vh, 320px);background:linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 68%, var(--bg-elevated)), var(--bg-elevated)), var(--surface-muted);flex:1;grid-template-columns:280px minmax(0,690px);justify-content:center;gap:10px;min-height:0;padding:14px;display:grid;overflow:hidden
}
#aiShell .frame-editor-picker{
border:1px solid var(--border-subtle);background:var(--bg-card);min-width:0;min-height:0;box-shadow:0 1px 0 #ffffff6b inset, 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:10px;flex-direction:column;display:flex;overflow:hidden
}
#aiShell .frame-editor-panel{
background:0 0;justify-content:flex-start;gap:14px;min-width:0;min-height:0;display:flex;overflow:hidden
}
#aiShell .frame-picker-content{
background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:0;padding:18px 16px;display:flex;overflow:hidden
}
#aiShell .step-panel-heading{
box-sizing:border-box;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 72%), color-mix(in srgb, var(--bg-card) 96%, var(--surface-muted));min-height:50px;color:var(--text-primary);align-items:center;gap:10px;padding:12px 16px;display:flex
}
#aiShell .step-panel-heading span{
border:1px solid var(--accent-border);background:var(--accent-soft);width:28px;height:24px;color:var(--accent);font-variant-numeric:tabular-nums;border-radius:7px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .step-panel-heading strong{
font-size:14px;font-weight:800
}
#aiShell .frame-picker-video{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-preview,#000);object-fit:contain;cursor:pointer;width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:none;display:block
}
#aiShell .frame-video-shell{
box-sizing:border-box;width:calc(var(--cover-preview-height) * .5625);height:var(--cover-preview-height);max-width:min(100%, calc(var(--cover-preview-height) * .5625));max-height:var(--cover-preview-height);aspect-ratio:9/16;flex:0 0 var(--cover-preview-height);border-radius:var(--radius-sm,8px);background:var(--bg-preview,#000);position:relative;overflow:hidden
}
#aiShell .frame-video-controls{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-input);width:min(100%,238px);box-shadow:none;grid-template-columns:34px minmax(0,1fr) 70px;align-items:center;gap:10px;padding:8px 10px;display:grid
}
#aiShell .frame-use-current-btn{
background:var(--button-primary-bg,var(--accent));min-height:34px;color:var(--accent-contrast);font:inherit;cursor:pointer;border:1px solid #0000;border-radius:7px;grid-column:1/-1;font-size:13px;font-weight:800;transition:opacity .15s,transform .15s
}
#aiShell .frame-use-current-btn:hover:not(:disabled){
transform:translateY(-1px)
}
#aiShell .frame-use-current-btn:disabled{
opacity:.6;cursor:not-allowed;transform:none
}
#aiShell .frame-control-play{
border:1px solid var(--border-subtle);background:var(--bg-input);width:34px;height:30px;color:var(--text-primary);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;transition:border-color .15s,background .15s;display:inline-flex
}
#aiShell .frame-control-play:hover{
border-color:var(--border-hover);background:var(--bg-card-hover)
}
#aiShell .frame-control-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid;width:0;height:0;margin-left:2px
}
#aiShell .frame-control-play-icon.is-playing{
border:0;border-left:3px solid;border-right:3px solid;width:10px;height:12px;margin-left:0
}
#aiShell .frame-control-range{
width:100%;min-width:0;accent-color:var(--accent);appearance:none;background:0 0;height:16px
}
#aiShell .frame-control-range::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent) 0 var(--frame-progress,0%), var(--border-subtle) var(--frame-progress,0%) 100%);border-radius:999px;height:6px
}
#aiShell .frame-control-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px;margin-top:-5px
}
#aiShell .frame-control-range::-moz-range-track{
background:var(--border-subtle);border-radius:999px;height:6px
}
#aiShell .frame-control-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell .frame-control-range::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:14px;height:14px
}
#aiShell .frame-control-time{
color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right;font-size:12px
}
#aiShell .frame-picker-content p{
color:var(--text-muted);text-align:center;margin:0;font-size:13px
}
#aiShell .template-library-panel{
background:0 0;flex:1;min-height:0;margin:0;padding:18px 26px;overflow:hidden
}
#aiShell .template-card-grid{
scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex:1;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-height:100%;padding:2px;display:grid;overflow:auto
}
#aiShell .template-card-grid::-webkit-scrollbar{
width:8px;height:8px
}
#aiShell .editor-control-scroll::-webkit-scrollbar{
width:8px;height:8px
}
#aiShell .template-card-grid::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .editor-control-scroll::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .template-card{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-card);min-width:0;color:var(--text-primary);text-align:left;cursor:pointer;grid-template-rows:auto auto;padding:0;transition:border-color .15s,background .15s,box-shadow .15s;display:grid;overflow:hidden
}
#aiShell .template-card:hover{
background:var(--bg-card-hover)
}
#aiShell .template-card:hover, #aiShell .template-card.selected{
border-color:var(--accent)
}
#aiShell .template-card.selected{
box-shadow:0 0 0 2px var(--accent-soft-strong)
}
#aiShell .template-card-preview{
aspect-ratio:3/4;background:var(--surface-muted);width:100%;position:relative;overflow:hidden
}
#aiShell .template-card-preview img{
object-fit:cover;width:100%;height:100%
}
#aiShell .template-card-preview>svg{
width:100%;height:100%;position:absolute;inset:0
}
#aiShell .template-card-copy{
gap:5px;padding:10px;display:grid
}
#aiShell .template-card-copy strong{
color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden
}
#aiShell .template-card-copy small{
color:var(--text-muted);line-height:1.4
}
#aiShell .modal-actions, #aiShell .editor-actions{
border-top:1px solid var(--border-subtle);background:linear-gradient(90deg, color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft)), var(--card-bg) 44%), var(--card-bg);align-items:center;gap:10px;padding:14px 18px;display:flex
}
#aiShell .status{
min-width:0;color:var(--text-muted);flex:1;font-size:13px
}
#aiShell .status.error{
color:var(--danger-text,#b91c1c)
}
#aiShell .btn{
border-radius:var(--radius-sm,8px);border:1px solid var(--border-subtle);cursor:pointer;min-height:36px;padding:0 14px;font-weight:700;transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}
#aiShell .btn:disabled{
opacity:.6;cursor:not-allowed
}
#aiShell .btn.primary{
background:var(--button-primary-bg,var(--accent));color:var(--accent-contrast);box-shadow:var(--button-primary-shadow,none);border-color:#0000
}
#aiShell .btn.secondary{
background:var(--bg-card-hover);color:var(--text-primary)
}
#aiShell .btn.secondary:hover:not(:disabled){
border-color:var(--border-hover);background:var(--button-secondary-hover,var(--bg-card-hover))
}
#aiShell .btn.wide{
width:100%
}
#aiShell .editor-layout{
border:1px solid var(--border-subtle);background:var(--bg-card);min-height:0;box-shadow:0 1px 0 #ffffff6b inset, 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:10px;flex:0 auto;grid-template-columns:360px 330px;margin:0;display:grid;overflow:hidden
}
#aiShell .frame-editor-panel .editor-layout{
width:min(100%,690px)
}
#aiShell .editor-pending{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);min-width:0;color:var(--text-muted);text-align:center;background:linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 58%), var(--bg-card);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:0 24px 24px;display:flex;overflow:hidden
}
#aiShell .editor-pending .step-panel-heading{
text-align:left;align-self:stretch;margin:0 -24px auto
}
#aiShell .editor-pending strong{
color:var(--text-primary);font-size:16px
}
#aiShell .editor-pending span{
max-width:32ch;font-size:13px;line-height:1.55
}
#aiShell .editor-workspace{
flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden
}
#aiShell .editor-preview-pane{
box-sizing:border-box;background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent-soft) 38%, transparent), transparent 34%), var(--bg-card);flex-direction:column;justify-content:flex-start;align-items:center;min-width:0;min-height:0;padding:0 18px 24px;display:flex;overflow:hidden
}
#aiShell .editor-preview-pane .step-panel-heading{
align-self:stretch;margin:0 -18px 28px
}
#aiShell .cover-stage{
box-sizing:border-box;width:calc(var(--cover-preview-height) * .75);height:var(--cover-preview-height);max-width:min(100%, calc(var(--cover-preview-height) * .75));max-height:var(--cover-preview-height);aspect-ratio:3/4;flex:0 0 var(--cover-preview-height);border:1px solid var(--accent-border);border-radius:var(--radius-sm,8px);background:var(--bg-preview,#111827);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-soft) 58%, var(--bg-card)), 0 14px 28px color-mix(in srgb, var(--accent) 14%, transparent);position:relative;overflow:hidden
}
#aiShell .cover-svg{
width:100%;height:100%;position:absolute;inset:0
}
#aiShell .cover-bg{
object-fit:fill;transform-origin:50%;max-width:none;position:absolute
}
#aiShell .cover-svg{
pointer-events:none
}
#aiShell .editor-controls{
border-left:1px solid var(--border-subtle);background:var(--bg-card);flex-direction:column;min-height:0;display:flex;overflow:hidden
}
#aiShell .editor-controls .step-panel-heading{
flex:none
}
#aiShell .editor-control-scroll{
overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex:1;min-height:0;overflow-y:auto
}
#aiShell .control-section{
border-bottom:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-card) 96%, var(--surface-muted));gap:12px;padding:14px 16px;display:grid
}
#aiShell .slot-section{
align-content:start;gap:0;overflow:visible
}
#aiShell .slot-section>h3{
margin-bottom:4px
}
#aiShell .control-section h3{
color:var(--text-primary);margin:0;font-size:16px
}
#aiShell .control-section-head{
justify-content:space-between;align-items:center;gap:12px;display:flex
}
#aiShell .background-position-row{
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid
}
#aiShell .background-position-row label{
min-width:0
}
#aiShell .btn.compact{
min-height:30px;padding:0 10px;font-size:12px
}
#aiShell .control-section label{
color:var(--text-secondary);gap:7px;font-size:13px;font-weight:700;display:grid
}
#aiShell .control-section input[type=range]{
width:100%;accent-color:var(--accent);appearance:none;background:0 0;height:16px
}
#aiShell .control-section input[type=range]::-webkit-slider-runnable-track{
background:var(--border-subtle);border-radius:999px;height:6px
}
#aiShell .control-section input[type=range]::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px;margin-top:-5px
}
#aiShell .control-section input[type=range]::-moz-range-track{
background:var(--border-subtle);border-radius:999px;height:6px
}
#aiShell .control-section input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell .control-section input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:14px;height:14px
}
#aiShell .control-section input[type=text]{
box-sizing:border-box;border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);width:100%;min-width:0;height:36px;color:var(--text-primary);font:inherit;background:var(--bg-input);outline:none;padding:0 10px;transition:border-color .15s,box-shadow .15s
}
#aiShell .control-section input[type=text]:focus{
border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)
}
#aiShell .slot-editor{
background:0 0;border:0;border-radius:0;gap:10px;padding:12px 0 14px;display:grid;position:relative
}
#aiShell .slot-editor:after{
content:"";background:var(--border-subtle);height:1px;position:absolute;bottom:0;left:12px;right:0
}
#aiShell .slot-editor:last-child:after{
display:none
}
#aiShell .slot-text-field{
grid-template-columns:minmax(0,1fr)
}
#aiShell .slot-style-row{
grid-template-columns:minmax(0,1fr) 72px;align-items:end;gap:14px;display:grid
}
#aiShell .font-scale-field, #aiShell .color-field{
min-width:0
}
#aiShell .color-field input[type=color]{
box-sizing:border-box;border:1px solid var(--border-subtle);background:var(--bg-input);cursor:pointer;border-radius:6px;width:100%;height:30px;padding:2px
}
#aiShell .color-field input[type=color]:focus{
border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft);outline:none
}
@media(width<=920px){
#aiShell .frame-editor-layout{
grid-template-columns:1fr;gap:10px;padding:10px;overflow:auto
}
#aiShell .frame-editor-picker{
border-right:1px solid var(--border-subtle);min-height:520px
}
#aiShell .frame-editor-panel{
flex-direction:column;overflow:visible
}
#aiShell .editor-layout{
grid-template-columns:1fr;overflow:auto
}
#aiShell .editor-controls{
border-left:0;border-top:1px solid var(--border-subtle)
}

}
#aiShell .manual-cover-modal{
z-index:3000;background:var(--overlay-modal,#0f172a94);justify-content:center;align-items:center;padding:22px;display:flex;position:fixed;inset:0
}
#aiShell .manual-cover-modal.is-inline{
z-index:auto;background:0 0;padding:0;display:block;position:relative;inset:auto
}
#aiShell .manual-cover-shell{
border:1px solid var(--border-subtle);border-radius:var(--radius-md,10px);background:var(--bg-elevated);width:min(1040px,96vw);height:min(820px,92vh);color:var(--text-primary);box-shadow:var(--shadow-panel);flex-direction:column;display:flex;overflow:hidden
}
#aiShell .manual-cover-shell.is-inline{
width:100%;max-width:none;height:auto;min-height:620px;box-shadow:none;background:0 0;border:0;border-radius:0;overflow:visible
}
#aiShell .manual-cover-head, #aiShell .modal-actions{
border-bottom:1px solid var(--border-subtle);background:var(--card-bg);justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex
}
#aiShell .modal-actions{
border-top:1px solid var(--border-subtle);border-bottom:0
}
#aiShell .manual-cover-head p{
color:var(--accent);text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:800
}
#aiShell .manual-cover-head h2, #aiShell .control-section h3{
color:var(--text-primary);margin:0
}
#aiShell .icon-btn{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-input);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;font-size:24px
}
#aiShell .frame-picker, #aiShell .editor-workspace{
flex-direction:column;flex:1;min-height:0;display:flex
}
#aiShell .manual-frame-editor-layout{
--cover-preview-height:clamp(280px, 42vh, 330px);background:linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 68%, var(--bg-elevated)), var(--bg-elevated)), var(--surface-muted);flex:1;grid-template-columns:280px minmax(0,690px);justify-content:center;gap:10px;min-height:0;padding:14px;display:grid;overflow:hidden
}
#aiShell .manual-frame-picker, #aiShell .editor-layout{
border:1px solid var(--border-subtle);background:var(--bg-card);min-width:0;min-height:0;box-shadow:0 1px 0 #ffffff6b inset, 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:10px;overflow:hidden
}
#aiShell .manual-frame-picker{
flex-direction:column;display:flex
}
#aiShell .manual-frame-editor-panel{
min-width:0;min-height:0;display:flex;overflow:hidden
}
#aiShell .step-panel-heading{
box-sizing:border-box;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 72%), color-mix(in srgb, var(--bg-card) 96%, var(--surface-muted));min-height:50px;color:var(--text-primary);align-items:center;gap:10px;padding:12px 16px;display:flex
}
#aiShell .step-panel-heading span{
border:1px solid var(--accent-border);background:var(--accent-soft);width:28px;height:24px;color:var(--accent);font-variant-numeric:tabular-nums;border-radius:7px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .step-panel-heading strong{
font-size:14px;font-weight:800
}
#aiShell .frame-picker-content{
background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:0;padding:18px 16px;display:flex
}
#aiShell .frame-picker-video{
width:calc(var(--cover-preview-height) * .5625);height:var(--cover-preview-height);max-width:min(100%, calc(var(--cover-preview-height) * .5625));max-height:var(--cover-preview-height);border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-preview);object-fit:contain
}
#aiShell .frame-use-btn{
width:min(100%,238px)
}
#aiShell .frame-picker-content p, #aiShell .status{
color:var(--text-muted);margin:0;font-size:13px
}
#aiShell .status{
flex:1
}
#aiShell .status.error, #aiShell .error-line{
color:var(--danger-text)
}
#aiShell .editor-layout{
flex:0 auto;grid-template-columns:360px 330px;width:min(100%,690px);min-height:0;margin:0;display:grid;overflow:hidden
}
#aiShell .preview-pane{
background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent-soft) 38%, transparent), transparent 34%), var(--bg-card);flex-direction:column;justify-content:flex-start;align-items:center;min-width:0;min-height:0;padding:0 18px 24px;display:flex
}
#aiShell .preview-pane .step-panel-heading{
align-self:stretch;margin:0 -18px 28px
}
#aiShell .cover-stage{
width:calc(var(--cover-preview-height) * .75);height:var(--cover-preview-height);max-width:min(100%, calc(var(--cover-preview-height) * .75));max-height:var(--cover-preview-height);aspect-ratio:3/4;border:1px solid var(--accent-border);border-radius:var(--radius-sm,8px);background:var(--bg-preview);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-soft) 58%, var(--bg-card)), 0 14px 28px color-mix(in srgb, var(--accent) 14%, transparent);flex:none;position:relative;overflow:hidden
}
#aiShell .cover-stage-empty{
color:var(--text-muted);background:var(--surface-muted);place-items:center;font-size:13px;display:grid
}
#aiShell .cover-bg{
object-fit:fill;transform-origin:50%;max-width:none;position:absolute
}
#aiShell .title-layer{
z-index:2;text-align:center;white-space:pre-wrap;word-break:break-word;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;font-family:Microsoft YaHei,PingFang SC,sans-serif;font-weight:900;line-height:1.18;position:absolute;left:50%;transform:translate(-50%,-50%)
}
#aiShell .title-layer:active{
cursor:grabbing
}
#aiShell .subtitle{
font-weight:800
}
#aiShell .editor-controls{
border-left:1px solid var(--border-subtle);background:var(--bg-card);flex-direction:column;min-height:0;display:flex
}
#aiShell .editor-controls.disabled{
opacity:.62;pointer-events:none
}
#aiShell .control-scroll{
flex:1;min-height:0;overflow-y:auto
}
#aiShell .manual-cover-shell.is-inline .editor-workspace{
overflow:visible
}
#aiShell .manual-cover-shell.is-inline .frame-picker-content{
justify-content:flex-start;padding-top:28px
}
#aiShell .manual-cover-shell.is-inline .manual-frame-editor-layout{
background:0 0;grid-template-columns:minmax(260px,.9fr) minmax(0,2.4fr);justify-content:stretch;gap:12px;padding:0;overflow:visible
}
#aiShell .manual-cover-shell.is-inline .manual-frame-editor-panel{
display:block;overflow:visible
}
#aiShell .manual-cover-shell.is-inline .editor-layout{
grid-template-columns:minmax(300px,1fr) minmax(320px,.88fr);width:100%
}
#aiShell .manual-cover-shell.is-inline .manual-frame-picker, #aiShell .manual-cover-shell.is-inline .editor-layout{
box-shadow:none
}
#aiShell .manual-cover-shell.is-inline .modal-actions{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);margin-top:12px
}
#aiShell .control-section{
border-bottom:1px solid var(--border-subtle);gap:14px;padding:16px;display:grid
}
#aiShell .control-section-head, #aiShell .position-row, #aiShell .config-grid{
gap:12px;display:grid
}
#aiShell .control-section-head{
grid-template-columns:minmax(0,1fr) max-content;align-items:center
}
#aiShell .position-row, #aiShell .config-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}
#aiShell .full{
grid-column:1/-1
}
#aiShell label{
color:var(--text-secondary);gap:6px;font-size:13px;font-weight:700;display:grid
}
#aiShell input[type=text]{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-input);width:100%;min-width:0;height:36px;color:var(--text-primary);outline:none;padding:0 10px
}
#aiShell input[type=range]{
appearance:none;width:100%;height:16px;accent-color:var(--accent);cursor:pointer;background:0 0
}
#aiShell input[type=range]::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill,0%), var(--border-subtle) var(--range-fill,0%), var(--border-subtle) 100%);border-radius:999px;height:6px
}
#aiShell input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px;margin-top:-5px
}
#aiShell input[type=range]::-moz-range-track{
background:var(--border-subtle);border-radius:999px;height:6px
}
#aiShell input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);width:14px;height:14px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px
}
#aiShell input[type=color]{
border:1px solid var(--accent-border);background:var(--bg-input);cursor:pointer;border-radius:6px;width:100%;height:32px;padding:2px
}
#aiShell input[type=color]:focus, #aiShell input[type=range]:focus-visible{
box-shadow:0 0 0 3px var(--accent-soft);outline:none
}
#aiShell .text-config{
border-bottom:1px solid var(--border-subtle);gap:12px;padding-bottom:14px;display:grid
}
#aiShell .text-config:last-child{
border-bottom:0;padding-bottom:0
}
#aiShell .btn{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);cursor:pointer;min-height:36px;padding:0 14px;font-weight:700
}
#aiShell .btn.primary{
background:var(--button-primary-bg,var(--accent));color:var(--accent-contrast);border-color:#0000
}
#aiShell .btn.secondary{
background:var(--bg-card-hover);color:var(--text-primary)
}
#aiShell .btn.compact{
min-height:30px;padding:0 10px;font-size:12px
}
#aiShell .btn:disabled{
opacity:.6;cursor:not-allowed
}
#aiShell .template-select-backdrop{
z-index:13000;background:color-mix(in srgb, var(--overlay-modal) 82%, var(--bg-preview) 18%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);place-items:center;padding:24px;display:grid;position:fixed;inset:0
}
#aiShell .template-select-dialog{
width:min(var(--dialog-width), 94vw);max-height:min(var(--dialog-max-height), 92vh);background:radial-gradient(circle at 58% 12%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 94%, var(--accent-2) 6%), color-mix(in srgb, var(--bg-card) 96%, var(--bg-preview) 4%));border:1px solid color-mix(in srgb, var(--warning) 48%, var(--border-subtle));box-shadow:0 30px 90px color-mix(in srgb, var(--bg-preview) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 18%, transparent);border-radius:12px;flex-direction:column;display:flex;overflow:hidden
}
#aiShell .template-select-head{
background:linear-gradient(90deg, color-mix(in srgb, var(--warning) 16%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)), color-mix(in srgb, var(--bg-card-hover) 42%, transparent);border-bottom:1px solid color-mix(in srgb, var(--border-subtle) 68%, transparent);justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 20px 18px;display:flex
}
#aiShell .template-select-eyebrow{
color:var(--warning);margin-bottom:6px;font-size:12px;font-weight:900;display:block
}
#aiShell .template-select-head h3{
color:var(--text-primary);margin:0;font-size:18px;font-weight:900
}
#aiShell .template-select-head p{
color:var(--text-secondary);margin:4px 0 0;font-size:13px
}
#aiShell .template-select-close{
width:32px;height:32px;color:var(--text-secondary);background:color-mix(in srgb, var(--bg-preview) 10%, var(--bg-card-hover));cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;font-size:24px;line-height:1;display:inline-flex
}
#aiShell .template-select-close:hover{
color:var(--text-primary);background:color-mix(in srgb, var(--accent-soft-strong) 56%, var(--bg-card-hover))
}
#aiShell .template-select-body{
min-height:122px;max-height:min(var(--dialog-body-max-height), 62vh);border:1px dashed color-mix(in srgb, var(--accent-border) 72%, var(--border-subtle));background:color-mix(in srgb, var(--surface-muted-strong) 82%, var(--bg-card) 18%);border-radius:8px;flex-direction:column;margin:20px 28px 24px;padding:18px;display:flex;overflow:hidden
}
#aiShell .template-select-actions{
border-top:1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);background:color-mix(in srgb, var(--surface-muted-strong) 72%, var(--bg-card) 28%);justify-content:flex-end;align-items:center;gap:10px;padding:12px 20px;display:flex
}
#aiShell .template-dialog-empty, #aiShell .template-dialog-error{
min-height:86px;color:var(--text-secondary);flex:1;place-items:center;margin:0;font-size:13px;display:grid
}
#aiShell .template-dialog-error{
color:var(--danger)
}
#aiShell .subtitle-title-template-grid{
grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-right:4px;display:grid;overflow:auto
}
#aiShell .subtitle-title-template-card{
text-align:left;color:var(--text-primary);background:color-mix(in srgb, var(--bg-card) 88%, var(--surface-muted-strong));border:1px solid color-mix(in srgb, var(--accent-border) 42%, var(--border-subtle));cursor:pointer;border-radius:8px;gap:8px;padding:10px;display:grid;position:relative
}
#aiShell .subtitle-title-template-card.active, #aiShell .subtitle-title-template-card:hover{
border-color:var(--warning)
}
#aiShell .subtitle-title-template-card.active{
box-shadow:0 0 0 3px color-mix(in srgb, var(--warning) 30%, transparent), 0 12px 28px color-mix(in srgb, var(--accent-2) 12%, transparent);border-width:2px;padding:9px
}
#aiShell .subtitle-title-template-card.active:before{
content:"已选";z-index:2;background:var(--warning);color:var(--accent-contrast);border-radius:6px 0 8px;padding:3px 8px 4px;font-size:12px;font-weight:900;line-height:1;position:absolute;top:0;left:0
}
#aiShell .subtitle-title-template-card.applied:not(.active){
border-color:color-mix(in srgb, var(--warning) 42%, var(--border-subtle))
}
#aiShell .subtitle-title-template-card strong{
font-size:14px
}
#aiShell .subtitle-title-template-card>span:last-child{
color:var(--text-secondary);font-size:12px;line-height:1.45
}
#aiShell .template-dialog-footnote{
color:var(--text-secondary);margin-right:auto;font-size:12px
}
#aiShell .template-dialog-cancel, #aiShell .template-dialog-apply{
cursor:pointer;border:0;border-radius:14px;min-height:48px;padding:0 20px;font-size:15px;font-weight:900
}
#aiShell .template-dialog-cancel{
color:var(--text-primary);background:color-mix(in srgb, var(--accent-soft-strong) 42%, var(--bg-card-hover))
}
#aiShell .template-dialog-apply{
color:var(--accent-contrast);background:var(--button-primary-bg);box-shadow:var(--button-primary-shadow)
}
#aiShell .template-dialog-apply:disabled{
cursor:not-allowed;opacity:.52;box-shadow:none
}
#aiShell .template-preview-canvas{
aspect-ratio:9/16;background:linear-gradient(180deg, color-mix(in srgb, var(--accent-contrast) 6%, transparent), color-mix(in srgb, var(--bg-preview) 16%, transparent)), var(--bg-preview);background-position:50%;background-size:cover;border-radius:8px;display:block;position:relative;overflow:hidden;container-type:inline-size
}
#aiShell .template-preview-title, #aiShell .template-preview-subtitle{
text-align:center;white-space:pre-wrap;word-break:break-word;max-width:88%;font-weight:900;line-height:1.2;position:absolute;transform:translate(-50%,-50%)
}
@media(width<=960px){
#aiShell .subtitle-title-template-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

}
#aiShell .full-model{
box-sizing:border-box;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(4,minmax(385px,1fr));align-items:stretch;gap:10px;height:100%;min-height:0;padding:10px 14px 12px 0;display:grid;overflow:auto hidden
}
#aiShell .full-model::-webkit-scrollbar{
height:8px
}
#aiShell .full-model::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .horizontal-scroll-mask{
z-index:1200;pointer-events:none;justify-content:center;align-items:center;width:40px;display:flex;position:fixed
}
#aiShell .horizontal-scroll-mask.is-right{
background:linear-gradient(90deg,#0f172a00,#0f172a1a)
}
#aiShell .horizontal-scroll-mask.is-left{
background:linear-gradient(270deg,#0f172a00,#0f172a1a)
}
#aiShell [data-theme$=-light]{
-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(270deg,#f8fcff00,#f8fcfff5)
}
#aiShell .horizontal-scroll-button{
width:100%;height:100%;color:var(--accent);cursor:pointer;pointer-events:auto;filter:drop-shadow(0 3px 8px #00000061);background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;display:inline-flex;position:relative
}
#aiShell [data-theme$=-light]{
color:var(--accent);filter:drop-shadow(0 3px 8px #10203329)
}
#aiShell .horizontal-scroll-button:hover{
color:var(--accent)
}
#aiShell .horizontal-scroll-button:before{
content:"";border:1px solid color-mix(in srgb, var(--accent) 68%, transparent);background:color-mix(in srgb, var(--bg-card) 62%, var(--accent-soft-strong));width:32px;height:56px;box-shadow:0 8px 22px color-mix(in srgb, var(--text-primary) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 18%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .18s,border-color .18s,box-shadow .18s;position:absolute;top:50%;transform:translateY(-50%)
}
#aiShell .horizontal-scroll-mask.is-left .horizontal-scroll-button:before{
border-left:0;border-radius:0 999px 999px 0;left:0
}
#aiShell .horizontal-scroll-mask.is-right .horizontal-scroll-button:before{
border-right:0;border-radius:999px 0 0 999px;right:0
}
#aiShell .horizontal-scroll-button:hover:before{
border-color:color-mix(in srgb, var(--accent) 86%, transparent);background:color-mix(in srgb, var(--bg-card) 70%, var(--accent-soft-strong));box-shadow:0 10px 24px color-mix(in srgb, var(--text-primary) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 24%, transparent)
}
#aiShell [data-theme$=-light]{
background:color-mix(in srgb, var(--bg-card) 82%, var(--accent-soft-strong));box-shadow:0 8px 18px color-mix(in srgb, var(--text-primary) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 42%, transparent);background:color-mix(in srgb, var(--bg-card) 72%, var(--accent-soft-strong));box-shadow:0 10px 22px color-mix(in srgb, var(--text-primary) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 55%, transparent)
}
#aiShell .horizontal-scroll-button span{
width:18px;height:18px;display:block;position:absolute;top:50%;transform:translateY(-50%)
}
#aiShell .horizontal-scroll-mask.is-left .horizontal-scroll-button span{
left:4px
}
#aiShell .horizontal-scroll-mask.is-right .horizontal-scroll-button span{
right:4px
}
#aiShell .horizontal-scroll-button span:before, #aiShell .horizontal-scroll-button span:after{
content:"";transform-origin:0;background:currentColor;border-radius:999px;width:16px;height:2px;transition:height .16s;position:absolute;top:50%;left:50%
}
#aiShell .horizontal-scroll-button:hover span:before, #aiShell .horizontal-scroll-button:hover span:after{
height:3px
}
#aiShell .horizontal-scroll-mask.is-left .horizontal-scroll-button span:before{
transform:translate(-3px)rotate(-67.5deg)
}
#aiShell .horizontal-scroll-mask.is-left .horizontal-scroll-button span:after{
transform:translate(-3px)rotate(67.5deg)
}
#aiShell .horizontal-scroll-mask.is-right .horizontal-scroll-button span:before{
transform:translate(3px)rotate(112.5deg)
}
#aiShell .horizontal-scroll-mask.is-right .horizontal-scroll-button span:after{
transform:translate(3px)rotate(247.5deg)
}
#aiShell .full-column{
min-width:385px;height:100%;min-height:0;box-shadow:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;background:0 0;border:0;border-radius:0;flex-direction:column;align-self:stretch;gap:12px;padding:0;display:flex;overflow:hidden auto
}
#aiShell .module-loading-wrap{
flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex;position:relative
}
#aiShell .module-card{
--module-glow-a:var(--accent);--module-glow-b:var(--accent-2);border:1px solid var(--border-subtle);background:var(--card-bg);min-width:0;min-height:0;box-shadow:0 0 0 1px color-mix(in srgb, var(--module-glow-a) 10%, transparent), 0 10px 28px color-mix(in srgb, var(--module-glow-a) 12%, transparent), inset 0 1px 0 #ffffff73;border-radius:8px;flex-direction:column;display:flex;position:relative;overflow:visible
}
#aiShell .module-card--step-2{
--module-glow-a:var(--success);--module-glow-b:var(--accent)
}
#aiShell .module-card--step-3{
--module-glow-a:#38bdf8;--module-glow-b:var(--accent-2)
}
#aiShell .module-card--step-4{
--module-glow-a:var(--warning);--module-glow-b:var(--accent)
}
#aiShell .module-card--step-5{
--module-glow-a:#a78bfa;--module-glow-b:#38bdf8
}
#aiShell .module-card--step-6{
--module-glow-a:var(--danger);--module-glow-b:var(--accent)
}
#aiShell .module-edit{
grid-area:1/3/span 2;padding-right:4px
}
#aiShell .module-copy{
--clip-line:var(--accent);--clip-tint:var(--accent-soft);grid-area:1/1/span 2
}
#aiShell .module-media{
grid-area:1/2/span 2
}
#aiShell .module-publish{
box-sizing:border-box;grid-area:1/4/span 2;padding:0 4px;overflow-x:visible
}
#aiShell .module-media .module-card, #aiShell .module-copy .module-card{
height:100%;min-height:0
}
#aiShell .module-media .module-content{
overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex:auto;min-height:0;overflow:hidden auto
}
#aiShell .module-media .module-content::-webkit-scrollbar{
width:8px
}
#aiShell .module-media .module-content::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .module-copy .module-loading-wrap{
flex:auto;min-height:0
}
#aiShell .module-content{
flex-direction:column;gap:10px;padding:12px;display:flex
}
#aiShell .module-copy .module-content{
overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex:auto;gap:12px;min-height:0;overflow:hidden auto
}
#aiShell .module-copy .module-content::-webkit-scrollbar{
width:8px
}
#aiShell .module-copy .module-content::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .module-copy .full-card{
flex:none
}
#aiShell .module-copy .compact-card, #aiShell .module-copy .full-card.tall{
flex:none;min-height:0
}
#aiShell .module-copy .extract-textarea{
resize:vertical;flex:none;height:72px;min-height:72px
}
#aiShell .module-copy .fill-textarea{
resize:vertical;flex:none;height:150px;min-height:150px;max-height:320px
}
#aiShell .module-copy .copy-rewrite-textarea{
height:200px;min-height:200px;max-height:360px
}
#aiShell .copy-extract-section, #aiShell .copy-original-section, #aiShell .copy-rewrite-section{
flex-direction:column;gap:10px;display:flex
}
#aiShell .copy-extract-section{
--clip-line:var(--accent);--clip-tint:var(--accent-soft)
}
#aiShell .copy-original-section{
--clip-line:var(--success);--clip-tint:var(--success-soft)
}
#aiShell .copy-rewrite-section{
--clip-line:var(--warning);--clip-tint:var(--warning-soft);overflow:visible
}
#aiShell .copy-extract-head{
flex-wrap:wrap;align-items:center
}
#aiShell .copy-extract-head h3{
flex:auto;min-width:0
}
#aiShell .copy-rewrite-section .rewrite-meta-grid.full{
border-top:0;border-bottom:1px solid var(--border-subtle);z-index:2;margin:0;padding-bottom:10px;position:relative;overflow:visible
}
#aiShell .copy-rewrite-section .rewrite-meta-grid.full .meta-select{
flex-direction:row;align-items:center;gap:10px;width:fit-content;max-width:100%
}
#aiShell .copy-rewrite-section .rewrite-meta-grid.full .meta-select-label{
white-space:nowrap;flex:none
}
#aiShell .copy-rewrite-section .rewrite-meta-grid.full .meta-select-anchor{
flex:0 0 128px;width:128px
}
#aiShell .voice-field .field-row-head, #aiShell .video-template-field .field-row-head{
grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;display:grid
}
#aiShell .hidden-file-input{
display:none
}
#aiShell .upload-inline-btn{
grid-column:3;justify-self:end
}
#aiShell .inline-actions{
flex-wrap:nowrap;justify-content:flex-end;gap:6px;min-width:0;display:flex
}
#aiShell .inline-actions .btn{
white-space:nowrap;min-height:28px;padding:5px 8px;font-size:12px
}
#aiShell .task-list-link{
color:var(--accent);cursor:pointer;font:inherit;white-space:nowrap;background:0 0;border:0;flex:none;padding:0;font-size:12px;font-weight:800
}
#aiShell .task-list-link:hover{
color:color-mix(in srgb, var(--accent) 72%, var(--text-primary));text-underline-offset:3px;text-decoration:underline
}
#aiShell .topic-textarea{
resize:none;box-sizing:border-box;height:50px;min-height:50px;max-height:50px
}
#aiShell .module-edit>.module-loading-wrap{
flex:auto;min-height:0
}
#aiShell .module-edit>.module-loading-wrap .module-loading-host{
flex:auto;min-height:0;overflow:hidden
}
#aiShell .module-edit-scroll{
overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex:auto;min-height:0;overflow:hidden auto
}
#aiShell .module-edit-scroll .module-card--step-4{
margin-top:12px
}
#aiShell .module-edit>.module-loading-wrap .module-card{
flex:none;min-height:0;overflow:visible
}
#aiShell .module-edit>.module-loading-wrap .module-content{
flex:none;min-height:0;overflow:hidden visible
}
#aiShell .module-content--video-edit{
gap:12px
}
#aiShell .module-edit-scroll::-webkit-scrollbar{
width:8px
}
#aiShell .module-edit-scroll::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .module-content--video-edit>.edit-panel{
box-sizing:border-box;flex-shrink:0;width:100%;min-width:0;overflow:visible
}
#aiShell .module-edit>.module-loading-wrap .module-content.module-content--video-edit{
overscroll-behavior:contain;overflow:hidden visible
}
#aiShell .edit-panel{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), linear-gradient(180deg, #ffffff0a, transparent 28%), var(--surface-muted);border-radius:10px;flex-direction:column;gap:10px;padding:10px 12px 12px;display:flex
}
#aiShell .smart-edit-panel{
border-color:color-mix(in srgb, var(--accent) 46%, var(--border-subtle));gap:12px
}
#aiShell .smart-workspace{
justify-content:center;min-width:0;min-height:260px;display:flex
}
#aiShell .smart-template-grid{
grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid
}
#aiShell .smart-template-card{
border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-input) 88%, transparent);min-width:0;color:var(--text-primary);cursor:pointer;font:inherit;text-align:center;border-radius:8px;padding:7px
}
#aiShell .smart-template-card:hover, #aiShell .smart-template-card.active{
border-color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 42%, var(--bg-input));box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent)
}
#aiShell .smart-template-thumb{
aspect-ratio:9/14;background:#07111f;border-radius:6px;width:min(70px,100%);margin:0 auto 7px;display:block;position:relative;overflow:hidden;container-type:inline-size
}
#aiShell .smart-template-thumb img, #aiShell .smart-preview-frame img, #aiShell .smart-preview-video{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .smart-template-thumb.has-scene-preview img{
filter:brightness(.96)saturate(.96)
}
#aiShell .smart-template-thumb:after{
content:"";background:linear-gradient(#0000 35%,#00000094);position:absolute;inset:0
}
#aiShell .smart-template-thumb.has-scene-preview:after{
z-index:1;background:linear-gradient(#00000005 0%,#00000008 62%,#0000002e 100%)
}
#aiShell .smart-template-thumb-title{
z-index:1;color:#fff;font-size:9px;font-weight:900;line-height:1.15;position:absolute;bottom:5px;left:5px;right:5px
}
#aiShell .smart-template-card strong{
text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900;display:block;overflow:hidden
}
#aiShell .smart-template-card>span:last-of-type:not(.smart-template-selected){
color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:10px;display:block;overflow:hidden
}
#aiShell .smart-template-demo-btn{
color:var(--text-muted);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:999px;align-items:center;margin-top:6px;padding:2px 10px;font-size:10px;display:inline-flex
}
#aiShell .smart-template-demo-btn:hover{
color:#fff;border-color:#ffffff57
}
#aiShell .smart-template-preview{
flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;min-width:0;display:flex
}
#aiShell .smart-preview-heading{
justify-content:space-between;align-items:center;gap:10px;width:min(260px,100%);display:flex
}
#aiShell .smart-preview-label{
color:var(--text-primary);font-size:13px;font-weight:900
}
#aiShell .smart-preview-frame{
aspect-ratio:9/16;width:min(220px,100%);box-shadow:none;background:0 0;border:0;border-radius:8px;position:relative;overflow:hidden
}
#aiShell .smart-preview-frame:after{
content:"";z-index:1;pointer-events:none;background:linear-gradient(#00000042,#0000 30%),linear-gradient(#0000 64%,#0000007a);position:absolute;inset:0
}
#aiShell .smart-preview-action{
border:1px solid color-mix(in srgb, var(--accent) 72%, #fff);background:var(--button-primary-bg);min-height:34px;color:var(--accent-contrast);cursor:pointer;font:inherit;box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 #ffffff3d;border-radius:7px;align-items:center;gap:6px;padding:7px 11px;font-size:12px;font-weight:900;transition:filter .18s,transform .18s,box-shadow .18s;display:inline-flex
}
#aiShell .smart-preview-action:hover{
filter:brightness(1.08)saturate(1.08);box-shadow:0 9px 20px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 #ffffff47;transform:translateY(-1px)
}
#aiShell .smart-preview-action:active{
transform:translateY(0)
}
#aiShell .smart-template-entry-icon{
grid-template-columns:repeat(2,1fr);gap:2px;width:13px;height:13px;display:grid
}
#aiShell .smart-template-entry-icon:before, #aiShell .smart-template-entry-icon:after{
content:"";border:1px solid;border-radius:2px
}
#aiShell .smart-preview-title, #aiShell .smart-preview-subtitle, #aiShell .smart-preview-template-name{
z-index:2;color:#fff;text-align:center;text-shadow:0 2px 8px #00000094;font-weight:900;line-height:1.18;position:absolute;left:8%;right:8%
}
#aiShell .smart-preview-title{
font-size:24px;top:14%
}
#aiShell .smart-preview-subtitle{
font-size:17px;bottom:16%
}
#aiShell .smart-template-effect-position{
z-index:2;text-align:center;width:86%;line-height:1.2;position:absolute;transform:translate(-50%,-50%)
}
#aiShell .smart-template-effect{
transform-origin:50%;display:block
}
#aiShell .smart-template-scene-preview{
z-index:2;pointer-events:none;position:absolute;inset:0;container-type:inline-size
}
#aiShell .smart-template-scene-text{
text-align:center;text-overflow:ellipsis;white-space:pre-line;max-width:92%;line-height:1.12;position:absolute;overflow:hidden;transform:translate(-50%,-50%)
}
#aiShell .smart-template-scene-text--card{
white-space:nowrap;max-height:none
}
#aiShell .smart-template-scene-text--card.is-title{
z-index:2;font-weight:900
}
#aiShell .smart-template-scene-text--card.is-subtitle{
z-index:1;padding:0 2px
}
#aiShell .smart-template-scene-highlight{
font-weight:900
}
#aiShell .smart-template-scene-text--card.animation-pop{
animation:1.8s ease-out infinite smart-card-pop-eb38d16c
}
#aiShell .smart-template-scene-text--card.animation-slideUp{
animation:1.8s ease-out infinite smart-card-slide-up-eb38d16c
}
#aiShell .smart-template-scene-text--card.animation-slideRight{
animation:1.8s ease-out infinite smart-card-slide-right-eb38d16c
}
#aiShell .smart-template-scene-text--card.animation-fade{
animation:1.8s ease-out infinite smart-card-fade-eb38d16c
}
@keyframes smart-card-pop-eb38d16c{
0%{opacity:.3;transform:translate(-50%,-50%)scale(.72)}16%{opacity:1;transform:translate(-50%,-50%)scale(1.12)}28%,to{opacity:1;transform:translate(-50%,-50%)scale(1)}
}
@keyframes smart-card-slide-up-eb38d16c{
0%{opacity:.22;transform:translate(-50%,calc(18px - 50%))}24%,to{opacity:1;transform:translate(-50%,-50%)}
}
@keyframes smart-card-slide-right-eb38d16c{
0%{opacity:.25;transform:translate(calc(-50% - 24px),-50%)}24%,to{opacity:1;transform:translate(-50%,-50%)}
}
@keyframes smart-card-fade-eb38d16c{
0%{opacity:0}24%,to{opacity:1}
}
#aiShell .smart-preview-scene-layer{
z-index:2;pointer-events:none;position:absolute;inset:0;container-type:inline-size
}
#aiShell .smart-preview-scene-text{
text-align:center;text-overflow:ellipsis;white-space:pre-line;max-width:92%;line-height:1.12;position:absolute;overflow:hidden;transform:translate(-50%,-50%)
}
#aiShell .smart-preview-scene-text.animation-pop{
animation:1.8s ease-out infinite smart-scene-pop-eb38d16c
}
#aiShell .smart-preview-scene-text.animation-slideUp{
animation:1.8s ease-out infinite smart-scene-slide-up-eb38d16c
}
#aiShell .smart-preview-scene-text.animation-slideRight{
animation:1.8s ease-out infinite smart-scene-slide-right-eb38d16c
}
#aiShell .smart-preview-scene-text.animation-fade{
animation:1.8s ease-out infinite smart-scene-fade-eb38d16c
}
@keyframes smart-scene-pop-eb38d16c{
0%{opacity:.35;transform:translate(-50%,-50%)scale(.72)}16%{opacity:1;transform:translate(-50%,-50%)scale(1.12)}28%,to{opacity:1;transform:translate(-50%,-50%)scale(1)}
}
@keyframes smart-scene-slide-up-eb38d16c{
0%{opacity:.25;transform:translate(-50%,calc(24px - 50%))}24%,to{opacity:1;transform:translate(-50%,-50%)}
}
@keyframes smart-scene-slide-right-eb38d16c{
0%{opacity:.25;transform:translate(calc(-50% - 34px),-50%)}24%,to{opacity:1;transform:translate(-50%,-50%)}
}
@keyframes smart-scene-fade-eb38d16c{
0%{opacity:0}24%,to{opacity:1}
}
#aiShell .smart-template-effect.animation-pop{
animation:1.8s ease-out infinite smart-subtitle-pop-eb38d16c
}
#aiShell .smart-template-effect.animation-fade{
animation:1.8s ease-out infinite smart-subtitle-fade-eb38d16c
}
#aiShell .smart-template-effect.animation-zoom{
animation:1.8s ease-out infinite smart-subtitle-zoom-eb38d16c
}
#aiShell .smart-template-effect.animation-slideUp{
animation:1.8s ease-out infinite smart-subtitle-slide-up-eb38d16c
}
#aiShell .smart-template-effect.animation-slideDown{
animation:1.8s ease-out infinite smart-subtitle-slide-down-eb38d16c
}
#aiShell .smart-template-effect.animation-slideLeft{
animation:1.8s ease-out infinite smart-subtitle-slide-left-eb38d16c
}
#aiShell .smart-template-effect.animation-slideRight{
animation:1.8s ease-out infinite smart-subtitle-slide-right-eb38d16c
}
#aiShell .smart-template-effect.animation-shake{
animation:1.8s ease-out infinite smart-subtitle-shake-eb38d16c
}
#aiShell .smart-template-effect.animation-zoomOut{
animation:1.8s ease-out infinite smart-subtitle-zoom-out-eb38d16c
}
#aiShell .smart-template-effect.animation-blurReveal, #aiShell .smart-template-effect.animation-inkReveal{
animation:1.8s ease-out infinite smart-subtitle-blur-reveal-eb38d16c
}
#aiShell .smart-template-effect.animation-glow{
animation:1.8s ease-out infinite smart-subtitle-glow-eb38d16c
}
#aiShell .smart-template-effect.animation-blurLeft{
animation:1.8s ease-out infinite smart-subtitle-blur-left-eb38d16c
}
#aiShell .smart-template-effect.animation-suckIn{
animation:1.8s ease-out infinite smart-subtitle-suck-in-eb38d16c
}
#aiShell .smart-template-effect.animation-riseScatter{
animation:1.8s ease-out infinite smart-subtitle-rise-scatter-eb38d16c
}
#aiShell .smart-template-effect.animation-wordByWord{
animation:1.8s steps(6,end) infinite smart-subtitle-word-reveal-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-pop{
animation:1.8s ease-out infinite smart-subtitle-pop-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-fade{
animation:1.8s ease-out infinite smart-subtitle-fade-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-zoom{
animation:1.8s ease-out infinite smart-subtitle-zoom-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-slideUp{
animation:1.8s ease-out infinite smart-subtitle-slide-up-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-slideDown{
animation:1.8s ease-out infinite smart-subtitle-slide-down-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-slideLeft{
animation:1.8s ease-out infinite smart-subtitle-slide-left-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-slideRight{
animation:1.8s ease-out infinite smart-subtitle-slide-right-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-shake{
animation:1.8s ease-out infinite smart-subtitle-shake-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-zoomOut{
animation:1.8s ease-out infinite smart-subtitle-zoom-out-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-blurReveal, #aiShell .smart-preview-subtitle.animation-inkReveal{
animation:1.8s ease-out infinite smart-subtitle-blur-reveal-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-glow{
animation:1.8s ease-out infinite smart-subtitle-glow-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-blurLeft{
animation:1.8s ease-out infinite smart-subtitle-blur-left-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-suckIn{
animation:1.8s ease-out infinite smart-subtitle-suck-in-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-riseScatter{
animation:1.8s ease-out infinite smart-subtitle-rise-scatter-eb38d16c
}
#aiShell .smart-preview-subtitle.animation-wordByWord{
animation:1.8s steps(6,end) infinite smart-subtitle-word-reveal-eb38d16c
}
@keyframes smart-subtitle-pop-eb38d16c{
0%{opacity:.35;transform:scale(.65)}14%{opacity:1;transform:scale(1.12)}22%,to{opacity:1;transform:scale(1)}
}
@keyframes smart-subtitle-fade-eb38d16c{
0%{opacity:0}20%,to{opacity:1}
}
@keyframes smart-subtitle-zoom-eb38d16c{
0%{opacity:.35;transform:scale(.45)}22%,to{opacity:1;transform:scale(1)}
}
@keyframes smart-subtitle-slide-up-eb38d16c{
0%{opacity:.35;transform:translateY(28px)}22%,to{opacity:1;transform:translateY(0)}
}
@keyframes smart-subtitle-slide-down-eb38d16c{
0%{opacity:.2;transform:translateY(-32px)}22%,to{opacity:1;transform:translateY(0)}
}
@keyframes smart-subtitle-slide-left-eb38d16c{
0%{opacity:.35;transform:translate(36px)}22%,to{opacity:1;transform:translate(0)}
}
@keyframes smart-subtitle-slide-right-eb38d16c{
0%{opacity:.2;transform:translate(-38px)}22%,to{opacity:1;transform:translate(0)}
}
@keyframes smart-subtitle-zoom-out-eb38d16c{
0%{opacity:.2;transform:scale(1.65)}24%,to{opacity:1;transform:scale(1)}
}
@keyframes smart-subtitle-blur-reveal-eb38d16c{
0%{opacity:0;filter:blur(12px);transform:scale(1.12)}26%,to{opacity:1;filter:blur();transform:scale(1)}
}
@keyframes smart-subtitle-glow-eb38d16c{
0%{opacity:.2;filter:blur(7px);text-shadow:0 0 18px}26%,to{opacity:1;filter:blur()}
}
@keyframes smart-subtitle-blur-left-eb38d16c{
0%{opacity:0;filter:blur(10px);transform:translate(42px)}26%,to{opacity:1;filter:blur();transform:translate(0)}
}
@keyframes smart-subtitle-suck-in-eb38d16c{
0%{opacity:.15;transform:scale(1.7,.3)}24%,to{opacity:1;transform:scale(1)}
}
@keyframes smart-subtitle-rise-scatter-eb38d16c{
0%{opacity:0;transform:translateY(44px)rotate(-7deg)scale(.75)}28%,to{opacity:1;transform:translateY(0)rotate(0)scale(1)}
}
@keyframes smart-subtitle-word-reveal-eb38d16c{
0%{opacity:0;clip-path:inset(0 100% 0 0)}30%,to{opacity:1;clip-path:inset(0)}
}
@keyframes smart-subtitle-shake-eb38d16c{
0%,8%,16%,24%,to{transform:rotate(0)}4%,20%{transform:rotate(-3deg)}12%{transform:rotate(3deg)}
}
#aiShell .smart-preview-template-name{
font-size:20px;bottom:5%
}
#aiShell .smart-template-backdrop{
padding:20px
}
#aiShell .modal-card.smart-template-modal{
width:min(1280px,100%);max-height:min(820px,100vh - 40px);padding:0;overflow:hidden
}
#aiShell .smart-template-modal-head{
border-bottom:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--surface-active);flex:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px 14px;display:flex
}
#aiShell .smart-template-modal-head .modal-title, #aiShell .smart-template-modal-head .modal-desc, #aiShell .smart-template-kicker{
margin:0
}
#aiShell .smart-template-kicker{
color:var(--accent);letter-spacing:.08em;margin-bottom:3px;font-size:11px;font-weight:900
}
#aiShell .smart-template-modal-head .modal-desc{
margin-top:4px
}
#aiShell .smart-template-close{
border:1px solid var(--border-subtle);background:var(--bg-input);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;border-radius:7px;flex:0 0 34px;font-size:22px;line-height:1
}
#aiShell .smart-template-modal-grid{
background:var(--surface-muted);flex:auto;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:start;gap:22px 20px;min-height:0;padding:22px 28px 26px;display:grid;overflow:auto
}
#aiShell .smart-template-modal-grid .smart-template-card{
border-color:color-mix(in srgb, var(--border-subtle) 78%, transparent);background:color-mix(in srgb, var(--bg-card) 82%, var(--accent-soft) 18%);min-height:426px;box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 9%, transparent);text-align:center;border-radius:8px;flex-direction:column;align-items:center;padding:0;transition:border-color .18s,box-shadow .18s,transform .18s;display:flex;overflow:hidden
}
#aiShell .smart-template-modal-grid .smart-template-card:hover, #aiShell .smart-template-modal-grid .smart-template-card.active{
border-color:var(--accent);background:color-mix(in srgb, var(--bg-card) 74%, var(--accent-soft) 26%);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 16px 32px color-mix(in srgb, var(--accent) 16%, transparent);transform:translateY(-3px)
}
#aiShell .smart-template-empty{
border:1px dashed var(--border-subtle);color:var(--text-muted);text-align:center;border-radius:8px;grid-column:1/-1;margin:0;padding:48px 20px;font-size:14px
}
#aiShell .smart-template-modal-grid .smart-template-thumb{
aspect-ratio:9/16;border:0;border-radius:6px;width:200px;max-width:calc(100% - 20px);margin:10px auto 0;box-shadow:0 10px 18px #0f172a2e
}
#aiShell .smart-template-modal-grid .smart-template-thumb img{
transition:filter .18s,transform .18s
}
#aiShell .smart-template-modal-grid .smart-template-thumb:before{
content:"↗";z-index:4;color:#111827;opacity:0;pointer-events:none;background:#ffffffeb;border-radius:999px;justify-content:center;align-items:center;width:42px;height:42px;font-size:18px;font-weight:900;transition:opacity .18s,transform .18s;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.86);box-shadow:0 10px 24px #0f172a3d
}
#aiShell .smart-template-modal-grid .smart-template-card:hover .smart-template-thumb img{
filter:brightness(.72)saturate(1.04);transform:scale(1.035)
}
#aiShell .smart-template-modal-grid .smart-template-card:hover .smart-template-thumb:before{
opacity:1;transform:translate(-50%,-50%)scale(1)
}
#aiShell .smart-template-modal-grid .smart-template-card strong{
min-height:46px;color:var(--text-primary);white-space:normal;justify-content:center;align-items:center;padding:8px 8px 10px;font-size:15px;line-height:1.2;display:flex
}
#aiShell .smart-template-selected{
z-index:2;background:var(--button-primary-bg);color:var(--accent-contrast);border-radius:999px;padding:2px 6px;font-size:9px;font-weight:900;position:absolute;top:5px;right:5px
}
#aiShell .smart-template-modal-actions{
border-top:1px solid var(--border-subtle);background:var(--surface-muted);flex:none;justify-content:space-between;align-items:center;gap:14px;padding:12px 20px;display:flex
}
#aiShell .smart-template-modal-actions>span{
color:var(--text-muted);font-size:12px;font-weight:700
}
#aiShell .smart-template-modal-actions>div{
gap:8px;display:flex
}
@media(width<=620px){
#aiShell .smart-template-modal-grid{
grid-template-columns:repeat(2,minmax(140px,1fr));gap:12px;padding:12px
}
#aiShell .smart-template-modal-grid .smart-template-card{
min-height:366px
}
#aiShell .smart-template-modal-grid .smart-template-thumb{
width:min(200px,100% - 20px)
}
#aiShell .smart-template-backdrop{
padding:10px
}
#aiShell .smart-template-modal-actions{
flex-direction:column;align-items:stretch
}
#aiShell .smart-template-modal-actions>div{
justify-content:flex-end
}

}
#aiShell .edit-panel-title{
color:var(--text-primary);margin:0;font-size:14px;font-weight:900
}
#aiShell .edit-panel--preview{
padding:10px
}
#aiShell .manual-settings-panel{
background:0 0;border:0;border-radius:0;padding:0
}
#aiShell .manual-settings-under-preview{
border-left:1px solid var(--border-subtle);align-self:stretch;min-width:0;padding:0 0 0 12px
}
#aiShell .manual-edit-options{
align-content:center;gap:16px;min-width:0;height:100%;display:grid
}
#aiShell .manual-option-card{
border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-card) 88%, transparent);border-radius:8px;flex-direction:column;gap:8px;min-width:0;padding:36px 12px 12px;display:flex;position:relative
}
#aiShell .manual-option-card--template{
border-color:color-mix(in srgb, var(--accent-border) 72%, var(--border-subtle));background:linear-gradient(135deg, color-mix(in srgb, var(--accent-soft-strong) 38%, transparent), transparent 54%), color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft))
}
#aiShell .manual-option-card--custom{
background:color-mix(in srgb, var(--surface-muted) 86%, transparent)
}
#aiShell .manual-option-head{
min-width:0;position:absolute;top:-1px;left:-1px
}
#aiShell .manual-option-badge{
border-radius:8px 0;justify-content:center;align-items:center;min-height:26px;padding:0 14px;font-size:12px;font-weight:900;line-height:1;display:inline-flex
}
#aiShell .manual-option-badge--template{
background:var(--button-primary-bg);color:var(--accent-contrast)
}
#aiShell .manual-option-badge--custom{
border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);border-left:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-input) 82%, transparent);color:var(--text-secondary)
}
#aiShell .manual-option-desc{
color:var(--text-secondary);margin:0;font-size:12px;font-weight:700;line-height:1.45
}
#aiShell .manual-template-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 72%, #fff);background:var(--button-primary-bg);width:100%;min-width:0;min-height:34px;color:var(--accent-contrast);cursor:pointer;font:inherit;white-space:nowrap;border-radius:7px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;font-weight:900;display:inline-flex
}
#aiShell .manual-template-select-btn:hover{
filter:brightness(1.06)saturate(1.06)
}
#aiShell .manual-template-select-btn:disabled{
opacity:.58;filter:grayscale(.35);cursor:not-allowed
}
#aiShell .manual-template-selected{
border:1px solid color-mix(in srgb, var(--accent-border) 34%, transparent);background:color-mix(in srgb, var(--bg-input) 74%, transparent);border-radius:7px;align-items:center;gap:6px;min-height:30px;padding:0 8px;display:flex
}
#aiShell .manual-template-selected-label{
color:var(--text-secondary);white-space:nowrap;font-size:12px;font-weight:800
}
#aiShell .manual-template-selected-name{
text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-primary);flex:1;font-size:12px;font-weight:800;overflow:hidden
}
#aiShell .manual-template-clear-btn{
width:24px;height:24px;color:var(--text-secondary);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;padding:0;font-size:18px;line-height:1;display:grid
}
#aiShell .manual-template-clear-btn:hover{
color:var(--danger);background:color-mix(in srgb, var(--danger) 12%, transparent)
}
#aiShell .manual-settings-action-btn{
justify-content:center;width:100%;min-width:0
}
#aiShell .clip-preview-section--flat{
box-shadow:none;background:0 0;border:0;align-items:center;gap:12px;padding:0;display:flex;overflow:hidden
}
#aiShell .clip-preview-section--flat>.style-panel-head, #aiShell .clip-preview-section--flat>.style-main-layout, #aiShell .clip-preview-section--flat>.style-settings-under-preview{
min-width:0
}
#aiShell .clip-preview-section--flat:before{
display:none
}
#aiShell .text-editor-entry{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--surface-muted);border-radius:8px;gap:4px;min-width:0;padding:10px;display:grid
}
#aiShell .text-editor-entry-copy{
color:var(--text-primary);font-size:13px;font-weight:800
}
#aiShell .text-editor-entry-meta{
color:var(--text-muted);font-size:12px;font-weight:700
}
#aiShell .text-editor-preview-card{
background:0 0;border:0;border-radius:0;flex:0 0 180px;order:1;justify-content:center;min-width:0;padding:0;display:flex
}
#aiShell .text-editor-preview-readonly{
width:min(100%,180px);box-shadow:none;border:0;border-radius:6px
}
#aiShell .text-editor-preview-readonly .preview-title-text, #aiShell .text-editor-preview-readonly .preview-subtitle-text, #aiShell .text-editor-preview-readonly .pip-preview-overlay{
cursor:default;pointer-events:none
}
#aiShell .edit-panel--styles .style-settings-bottom{
gap:10px
}
#aiShell .edit-panel--bgm{
gap:12px
}
#aiShell .module-publish .module-card--step-5{
flex:none
}
#aiShell .module-publish .module-card--step-5 .module-content{
overscroll-behavior:auto;min-width:0;overflow:hidden visible
}
#aiShell .module-card--step-5 .cover-editor-card{
box-sizing:border-box;width:100%;min-width:0;max-width:100%
}
#aiShell .module-publish .module-card--step-6{
border-color:color-mix(in srgb, var(--danger) 24%, var(--border-subtle));background:linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--danger) 26%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)) border-box;min-height:555px;box-shadow:0 0 0 1px color-mix(in srgb, var(--danger) 12%, transparent), 0 10px 28px color-mix(in srgb, var(--danger) 12%, transparent), inset 0 1px 0 #ffffff73;flex:auto
}
#aiShell .module-publish .module-card--step-6:after{
content:"";z-index:10;pointer-events:none;border:1px solid color-mix(in srgb, var(--danger) 30%, var(--border-subtle));border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);position:absolute;inset:0
}
#aiShell .module-publish .module-card--step-6 .module-content{
flex:auto;min-width:0;min-height:0
}
#aiShell .module-publish .module-card--step-6 .full-card{
flex:auto;min-width:0;max-width:100%
}
#aiShell .full-column::-webkit-scrollbar{
width:8px
}
#aiShell .full-column::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);border-radius:999px
}
#aiShell .column-title{
border:0;border-bottom:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-card);min-height:48px;box-shadow:none;border-radius:7px 7px 0 0;flex:none;align-items:center;gap:10px;padding:8px 12px;display:flex
}
#aiShell .module-subtitle{
margin-top:2px
}
#aiShell .column-index{
background:linear-gradient(145deg, var(--module-glow-a), var(--module-glow-b));color:#fff;letter-spacing:-.02em;width:34px;height:34px;box-shadow:0 0 0 3px color-mix(in srgb, var(--module-glow-a) 22%, transparent), 0 0 18px color-mix(in srgb, var(--module-glow-a) 45%, transparent), 0 6px 14px color-mix(in srgb, var(--module-glow-a) 28%, transparent);border:2px solid #ffffff6b;border-radius:999px;flex:0 0 34px;place-items:center;font-size:13px;font-weight:900;display:grid
}
#aiShell .column-title h2{
min-width:0;color:var(--text-primary);flex:1;margin:0;font-size:15px;font-weight:900;line-height:1.2
}
#aiShell .tutorial-title-btn{
min-height:24px;color:var(--accent);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;flex:none;padding:2px 0;font-size:13px;font-weight:900;line-height:1.2;text-decoration:none
}
#aiShell .tutorial-title-btn:hover{
text-decoration:underline
}
#aiShell .module-copy{
--module-tint:var(--accent-soft)
}
#aiShell .module-copy .column-title{
background:var(--surface-sheen-soft), linear-gradient(180deg, var(--accent-soft), transparent 78%), var(--bg-card)
}
#aiShell .module-media .column-title{
background:var(--surface-sheen-soft), linear-gradient(180deg, var(--success-soft), transparent 78%), var(--bg-card)
}
#aiShell .module-media .column-index{
background:linear-gradient(135deg, var(--success), var(--accent))
}
#aiShell .module-edit .column-title{
background:var(--surface-sheen-soft), linear-gradient(180deg, var(--warning-soft), transparent 78%), var(--bg-card)
}
#aiShell .module-edit .column-index{
background:linear-gradient(135deg, var(--warning), var(--accent))
}
#aiShell .module-publish .column-title{
background:var(--surface-sheen-soft), linear-gradient(180deg, var(--danger-soft), transparent 78%), var(--bg-card)
}
#aiShell .module-publish .column-index{
background:linear-gradient(135deg, var(--danger), var(--accent))
}
#aiShell .full-card{
min-width:0;box-shadow:none;background:0 0;border:0;border-radius:0;flex-direction:column;gap:8px;padding:0;display:flex
}
#aiShell .full-card:last-child{
border-bottom:0
}
#aiShell .full-model .input, #aiShell .full-model .textarea, #aiShell .full-model .select{
border-color:var(--accent-border);background:var(--surface-sheen-soft), var(--bg-input);box-shadow:none;border-radius:8px;min-height:34px;padding:8px 10px;font-size:13px
}
#aiShell .full-model .textarea{
line-height:1.55
}
#aiShell .full-model .input:hover, #aiShell .full-model .textarea:hover, #aiShell .full-model .select:hover{
border-color:var(--border-hover);box-shadow:0 0 0 2px var(--accent-soft)
}
#aiShell .full-model .input:focus, #aiShell .full-model .textarea:focus, #aiShell .full-model .select:focus{
border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)
}
#aiShell .full-card.tall{
min-height:0
}
#aiShell .render-head-actions{
flex-shrink:0;align-items:center;gap:8px;display:flex
}
#aiShell .card-head{
border-bottom:0;justify-content:space-between;align-items:center;gap:10px;min-height:28px;padding:0;display:flex
}
#aiShell .card-head h3{
margin:0;font-size:14px;font-weight:800
}
#aiShell .mini{
white-space:nowrap;min-height:30px;padding:6px 10px;font-size:12px
}
#aiShell .full-model .btn{
border-radius:8px;min-height:32px;padding:7px 12px;font-size:13px;font-weight:700
}
#aiShell .full-model .btn-primary{
border-color:color-mix(in srgb, var(--accent) 55%, transparent);box-shadow:0 4px 14px var(--accent-soft-strong)
}
#aiShell .full-model .btn-secondary{
border-color:var(--accent-border);color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 55%, var(--bg-card))
}
#aiShell .full-model .btn-secondary:hover:not(:disabled){
background:var(--accent-soft);border-color:var(--accent)
}
#aiShell .link-btn{
border:1px solid var(--border-subtle);background:var(--surface-muted);color:var(--text-secondary);cursor:pointer;border-radius:999px;flex-shrink:0;padding:4px 10px;font-size:12px;font-weight:700;text-decoration:none
}
#aiShell .link-btn:hover{
border-color:var(--accent-border);color:var(--accent);background:var(--accent-soft)
}
#aiShell .compact-textarea{
resize:vertical;min-height:68px
}
#aiShell .extract-textarea{
resize:none;height:80px;min-height:80px
}
#aiShell .fill-textarea{
resize:vertical;flex:1;min-height:104px
}
#aiShell .progress-row{
color:var(--text-muted);font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:12px;display:flex
}
#aiShell .progress-track{
background:var(--surface-muted-strong);border-radius:999px;flex:1;height:6px;overflow:hidden
}
#aiShell .progress-fill{
border-radius:inherit;background:var(--accent);height:100%;transition:width .25s
}
#aiShell .progress-fill--active{
background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2,#7c8cff) 42%, var(--accent) 84%);background-size:200% 100%;animation:1.6s ease-in-out infinite render-progress-shimmer-eb38d16c
}
@keyframes render-progress-shimmer-eb38d16c{
0%{background-position:100% 0}to{background-position:-100% 0}
}
#aiShell .button-row{
flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex
}
#aiShell .hint-line, #aiShell .error-line{
margin:0;font-size:12px;line-height:1.45
}
#aiShell .hint-line{
color:var(--text-muted)
}
#aiShell .submitted-task-hint{
width:fit-content;max-width:100%;color:var(--accent);background:linear-gradient(105deg, var(--accent) 0%, var(--accent) 36%, var(--accent-contrast) 48%, var(--accent-2) 56%, var(--accent) 68%, var(--accent) 100%);-webkit-text-fill-color:transparent;background-position:140% 0;background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:2.4s linear infinite submitted-task-wave-eb38d16c
}
#aiShell .submitted-task-status{
gap:6px;display:grid
}
#aiShell .generation-progress-panel{
border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border-subtle));background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent)), color-mix(in srgb, var(--bg-card) 94%, transparent);border-radius:10px;margin-top:2px;padding:12px 14px
}
#aiShell .generation-progress-panel .hint-line{
color:var(--text-primary);margin:0;font-weight:700
}
#aiShell .submitted-task-progress{
grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;display:grid
}
#aiShell .submitted-task-progress-track{
background:#3b82f624;border:1px solid #3b82f62e;border-radius:999px;height:11px;overflow:hidden
}
#aiShell .submitted-task-progress-fill{
border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .45s
}
#aiShell .submitted-task-progress-text{
text-align:right;min-width:34px;color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px
}
@keyframes submitted-task-wave-eb38d16c{
0%{background-position:140% 0}to{background-position:-140% 0}
}
#aiShell .error-line{
color:var(--danger-text)
}
#aiShell .media-audio-player{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent) 8%, var(--bg-input));min-height:54px;box-shadow:inset 0 1px 0 #ffffff42, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:10px;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;display:grid
}
#aiShell .media-audio-play{
border:1px solid var(--accent-border);background:linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, var(--bg-card))), var(--bg-card);width:38px;height:38px;color:var(--accent);cursor:pointer;box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .media-audio-play:hover{
border-color:var(--accent);background:var(--accent-soft)
}
#aiShell .media-audio-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid;width:0;height:0;margin-left:3px
}
#aiShell .media-audio-play-icon.pause{
background:linear-gradient(90deg,currentColor 0 36%,#0000 36% 64%,currentColor 64% 100%);border:0;width:12px;height:14px;margin-left:0
}
#aiShell .media-audio-main{
flex-direction:column;gap:7px;min-width:0;display:flex
}
#aiShell .media-audio-meta{
min-width:0;color:var(--text-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:800;display:flex
}
#aiShell .media-audio-meta span:first-child{
text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-primary);overflow:hidden
}
#aiShell .media-audio-range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:14px
}
#aiShell .media-audio-range::-webkit-slider-runnable-track{
border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), var(--surface-muted-strong) var(--range-fill), var(--surface-muted-strong) 100%);border-radius:999px;height:6px
}
#aiShell .media-audio-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:14px;height:14px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px;margin-top:-5px
}
#aiShell .media-audio-range::-moz-range-track{
border:1px solid var(--border-subtle);background:var(--surface-muted-strong);border-radius:999px;height:6px
}
#aiShell .media-audio-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell .media-audio-range::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);width:10px;height:10px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px
}
#aiShell .media-audio-native{
display:none
}
#aiShell .file-hidden{
opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden
}
#aiShell .segmented{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid
}
#aiShell .segmented label{
border:1px solid var(--border-subtle);background:var(--surface-muted);cursor:pointer;border-radius:8px;align-items:center;gap:7px;min-height:32px;padding:6px 8px;font-size:12px;font-weight:700;display:flex
}
#aiShell .segmented label.on{
border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)
}
#aiShell .check-row{
color:var(--text-secondary);white-space:nowrap;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex
}
#aiShell .enable-row{
grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;display:grid
}
#aiShell .two-fields{
grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid
}
#aiShell .two-fields label{
flex-direction:column;gap:4px;min-width:0;display:flex
}
#aiShell .compact-setting-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid
}
#aiShell .compact-setting-grid label{
flex-direction:column;gap:4px;min-width:0;display:flex
}
#aiShell .compact-setting-grid input[type=color]{
width:100%;min-height:34px;padding:4px
}
#aiShell .style-range-field{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .style-range-field input[type=range]{
appearance:none;border:1px solid var(--border-subtle);border-radius:999px;width:100%;height:7px
}
#aiShell .style-range-field input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:13px;height:13px;box-shadow:0 2px 7px #2563eb3d
}
#aiShell .style-range-field input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:12px;height:12px
}
#aiShell .preview-card{
min-height:170px
}
#aiShell .final-video-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-height:250px;color:var(--text-primary);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff3d, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);background:#000;border-radius:8px;margin:0 auto;padding:0;display:block;position:relative;overflow:hidden
}
#aiShell .final-video-entry:hover{
border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff3d, 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent)
}
#aiShell .final-video-thumb{
background:#000;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:hidden
}
#aiShell .final-video-thumb-fallback{
object-fit:contain;background:#000;width:100%;height:100%;display:block
}
#aiShell .final-video-thumb:after{
content:"";z-index:1;-webkit-backdrop-filter:grayscale(.05);backdrop-filter:grayscale(.05);pointer-events:none;background:#1c1e241f;position:absolute;inset:0
}
#aiShell .final-video-thumb-play{
z-index:2;border:3px solid color-mix(in srgb, var(--accent) 72%, transparent);background:color-mix(in srgb, var(--bg-base) 58%, var(--accent) 28%);width:36px;height:36px;color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--bg-base) 35%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 46%, transparent);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
}
#aiShell .final-video-thumb-play .media-audio-play-icon{
border-top-width:9px;border-bottom-width:9px;border-left-width:14px;margin-left:4px
}
#aiShell .final-video-entry-main{
z-index:3;color:#fff;pointer-events:auto;background:0 0;justify-content:space-between;align-items:center;gap:8px;max-width:calc(100% - 16px);padding:0;display:flex;position:absolute;bottom:8px;left:8px;right:8px
}
#aiShell .final-video-entry-time{
color:#ffffffeb;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;background:#000000ad;border-radius:6px;align-items:center;min-height:24px;padding:3px 8px;font-size:11px;font-weight:800;line-height:1.2;display:inline-flex
}
#aiShell .final-video-download{
border:1px solid color-mix(in srgb, var(--accent) 66%, transparent);background:color-mix(in srgb, var(--accent) 84%, #111);color:#fff;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-height:24px;padding:3px 8px;font-size:11px;font-weight:900;line-height:1.2;display:inline-flex;box-shadow:0 6px 14px #00000038
}
#aiShell .final-video-download:hover{
filter:brightness(1.08)
}
#aiShell .empty-preview{
border:1px dashed var(--border-subtle);background:var(--surface-muted);min-height:130px;color:var(--text-muted);border-radius:8px;place-items:center;font-size:12px;display:grid
}
#aiShell .edit-style-preview{
aspect-ratio:9/16;border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:8px;align-self:flex-start;min-height:0;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff80,0 14px 28px #0f172a24;container-type:inline-size
}
#aiShell .edit-preview-empty{
z-index:2;color:var(--text-muted);text-align:center;place-items:center;padding:16px;font-size:12px;font-weight:800;line-height:1.45;display:grid;position:absolute;inset:0
}
#aiShell .edit-preview-video{
z-index:0;object-fit:cover;pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .edit-template-cover-preview{
z-index:0;border-radius:inherit;background-color:var(--bg-preview);width:100%;height:100%;position:absolute;inset:0
}
#aiShell .subtitle-title-template-preview-bg{
z-index:0;border-radius:inherit;background-color:var(--bg-preview);background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .edit-design-card{
--range-track:var(--surface-muted-strong);gap:14px
}
#aiShell .style-panel-head{
z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative
}
#aiShell .style-panel-head h3{
margin:0;font-size:16px;font-weight:900
}
#aiShell .style-main-layout{
grid-template-columns:158px minmax(0,1fr);align-items:start;gap:10px;min-width:0;display:grid
}
#aiShell .style-settings-under-preview{
flex-direction:column;gap:10px;margin-top:12px;display:flex
}
#aiShell .manual-settings-under-preview{
border-top:0;border-bottom:0;flex:auto;order:2;margin-top:0;margin-bottom:0
}
#aiShell .pip-settings-group{
flex-direction:column;gap:8px;display:flex
}
#aiShell .pip-settings-group h3{
margin:0;font-size:14px;font-weight:900
}
#aiShell .pip-position-grid{
margin-top:4px
}
#aiShell .pip-hint{
color:var(--text-muted);margin:0;font-size:11px;line-height:1.45
}
#aiShell .style-preview-wrap{
justify-content:flex-start;width:158px;min-width:158px;display:flex
}
#aiShell .position-controls{
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;display:grid
}
#aiShell .position-controls-side{
flex-direction:column;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;display:flex
}
#aiShell .position-controls label{
min-width:0;color:var(--text-secondary);flex-direction:column;gap:7px;font-size:12px;font-weight:800;display:flex
}
#aiShell .position-controls input[type=range]{
appearance:none;border:1px solid var(--border-subtle);width:100%;height:6px;accent-color:var(--accent);cursor:pointer;border-radius:999px;box-shadow:inset 0 1px 2px #0f172a14,0 6px 14px #2563eb14
}
#aiShell .position-controls input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;border:2px solid var(--bg-card);background:linear-gradient(135deg, var(--accent), var(--accent-2));width:15px;height:15px;box-shadow:0 5px 12px #2563eb47, 0 0 0 3px var(--accent-soft);border-radius:999px
}
#aiShell .position-controls input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:linear-gradient(135deg, var(--accent), var(--accent-2));width:13px;height:13px;box-shadow:0 5px 12px #2563eb47, 0 0 0 3px var(--accent-soft);border-radius:999px
}
#aiShell .position-controls .text-bg-row{
grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;min-width:0;min-height:34px;margin-top:2px;display:grid
}
#aiShell .position-controls .text-bg-toggle{
min-width:0;color:var(--text-secondary);flex-direction:row;align-self:center;align-items:center;gap:8px;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .text-bg-toggle{
white-space:nowrap
}
#aiShell .text-bg-toggle input{
width:14px;height:14px;accent-color:var(--accent)
}
#aiShell .text-bg-color{
border:1px solid var(--border-subtle);background:var(--bg-input);cursor:pointer;border-radius:7px;justify-self:end;width:44px;height:34px;min-height:34px;padding:3px
}
#aiShell .text-bg-color:disabled{
opacity:.48;cursor:not-allowed
}
#aiShell .style-settings-bottom{
border-top:0;grid-template-columns:minmax(0,1fr);gap:12px;padding-top:0;display:grid
}
#aiShell .font-only-group{
padding:8px 10px
}
#aiShell .font-only-row{
grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;display:grid
}
#aiShell .font-only-row h3{
white-space:nowrap;color:var(--text-primary);margin:0;font-size:14px;font-weight:900
}
#aiShell .font-only-select{
min-width:0
}
#aiShell .settings-group{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--surface-muted);border-radius:10px;flex-direction:column;gap:8px;min-width:0;padding:10px;display:flex
}
#aiShell .clip-section{
--clip-accent:var(--warning);--clip-soft:var(--warning-soft);--clip-tint:var(--warning-soft);--clip-line:var(--border-hover);border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), linear-gradient(90deg, var(--clip-tint), transparent 42%), var(--surface-muted);min-width:0;box-shadow:none;border-radius:8px;padding:10px;position:relative;overflow:visible
}
#aiShell .clip-section:before{
content:"";background:var(--clip-line);width:2px;position:absolute;inset:0 auto 0 0
}
#aiShell .clip-section>*{
z-index:1;position:relative
}
#aiShell .clip-preview-section>.style-panel-head{
z-index:120
}
#aiShell .settings-group.dropdown-open{
z-index:110
}
#aiShell .clip-bgm-section:has(.bgm-menu){
z-index:110
}
#aiShell .settings-group.dropdown-open>.style-setting-head{
z-index:120
}
#aiShell .clip-section .style-panel-head, #aiShell .clip-section>.card-head, #aiShell .clip-section .style-setting-title-row{
border-bottom:1px solid var(--border-subtle);min-height:30px;padding-bottom:8px
}
#aiShell .clip-section .style-panel-head h3, #aiShell .clip-section>.card-head h3, #aiShell .clip-section .style-setting-title-row h3{
color:var(--text-primary)
}
#aiShell .clip-preview-section .style-main-layout, #aiShell .clip-bgm-section .enable-row{
margin-top:10px
}
#aiShell .bgm-panel-head{
border:0;align-items:center;gap:8px;min-height:0;margin:0;padding:0;display:flex
}
#aiShell .edit-panel--pip{
gap:10px
}
#aiShell .edit-panel--pip .style-setting-title-row{
border-bottom:1px solid var(--border-subtle);min-height:30px;padding-bottom:8px
}
#aiShell .bgm-panel-head-actions{
flex-wrap:wrap;flex:1;justify-content:space-between;align-items:center;gap:8px;display:flex
}
#aiShell .bgm-title-check{
min-width:0;color:var(--text-primary);align-items:center;gap:8px;font-size:14px;font-weight:900;display:inline-flex
}
#aiShell .bgm-title-check input{
width:14px;height:14px;accent-color:var(--accent)
}
#aiShell .bgm-fieldset{
border:0;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0;display:flex
}
#aiShell .bgm-fieldset:disabled{
opacity:.55;pointer-events:none
}
#aiShell .edit-panel--bgm .bgm-fieldset{
flex-direction:column;gap:10px;display:flex
}
#aiShell .bgm-picker-row{
grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:10px;display:grid
}
#aiShell .bgm-select-shell{
min-width:0;display:block
}
#aiShell .bgm-time{
color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px
}
#aiShell .bgm-play-btn{
background:var(--success-soft);width:34px;height:34px;color:var(--success);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .bgm-play-btn:disabled{
cursor:not-allowed;opacity:.45
}
#aiShell .bgm-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid;width:0;height:0;margin-left:2px
}
#aiShell .bgm-play-icon.pause{
background:linear-gradient(90deg,currentColor 0 36%,#0000 36% 64%,currentColor 64% 100%);border:0;width:11px;height:14px;margin-left:0
}
#aiShell .bgm-volume-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid
}
#aiShell .bgm-slider-row{
flex-direction:column;gap:8px;min-width:0;display:flex
}
#aiShell .bgm-slider-head{
color:var(--text-secondary);justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:800;display:flex
}
#aiShell .bgm-slider-value{
color:var(--text-primary);font-variant-numeric:tabular-nums
}
#aiShell .bgm-slider-row input[type=range]{
--range-fill:0%;appearance:none;width:100%;height:28px;accent-color:var(--accent);cursor:pointer;background:0 0
}
#aiShell .bgm-slider-row input[type=range]::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}
#aiShell .bgm-slider-row input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;background:var(--accent);border:2px solid #fff;border-radius:999px;width:14px;height:14px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}
#aiShell .bgm-slider-row input[type=range]::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}
#aiShell .bgm-slider-row input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}
#aiShell .bgm-slider-row input[type=range]::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:999px;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}
#aiShell .settings-group.clip-section{
background:var(--surface-sheen-soft), linear-gradient(90deg, var(--clip-tint), transparent 42%), var(--surface-muted);border-radius:8px;gap:10px;padding:10px
}
#aiShell .media-audio-section, #aiShell .media-video-section{
--clip-accent:var(--success);--clip-soft:var(--success-soft);--clip-tint:var(--success-soft);--clip-line:var(--border-hover)
}
#aiShell .media-audio-section .field, #aiShell .media-video-section .field, #aiShell .video-preview-block, #aiShell .title-topic-panel .input:first-of-type{
margin-top:10px
}
#aiShell .title-topic-panel .input, #aiShell .title-topic-panel .textarea{
box-sizing:border-box;width:100%
}
#aiShell .style-setting-head{
grid-template-columns:minmax(0,1fr);gap:8px;display:grid
}
#aiShell .style-setting-title-row{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .style-setting-title-row h3{
flex:none;margin:0;font-size:13px;font-weight:900
}
#aiShell .style-setting-title-row .check-row{
flex:none
}
#aiShell .style-setting-head .select{
width:100%;min-height:38px;font-size:13px
}
#aiShell .font-select-wrap{
width:100%;min-width:0;position:relative
}
#aiShell .dropdown-wrap{
min-width:0;position:relative
}
#aiShell .dropdown-trigger, #aiShell .font-picker-trigger{
border-color:var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);min-height:38px;box-shadow:none;font-size:13px;font-weight:700
}
#aiShell .compact-dropdown-trigger, #aiShell .bgm-select-trigger{
min-height:34px
}
#aiShell .bgm-select-trigger{
border-radius:999px
}
#aiShell .dropdown-trigger:hover, #aiShell .dropdown-trigger.on, #aiShell .font-picker-trigger:hover, #aiShell .font-picker-trigger.on{
border-color:var(--input-focus-border);background:var(--surface-sheen-soft), var(--bg-card-hover)
}
#aiShell .dropdown-trigger:disabled, #aiShell .font-picker-trigger:disabled{
cursor:not-allowed;opacity:.58
}
#aiShell .dropdown-trigger.on .picker-chev, #aiShell .font-picker-trigger.on .picker-chev{
transform:rotate(180deg)
}
#aiShell .dropdown-menu, #aiShell .font-menu{
z-index:100;border:1px solid var(--border-strong);background:var(--bg-elevated);border-radius:8px;max-height:210px;margin-top:0;padding:6px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:inset 0 1px #ffffff2e,0 8px 20px #0f172a1a
}
#aiShell .dropdown-menu-sm{
max-height:156px
}
#aiShell .style-dropdown-menu{
z-index:100;max-height:190px
}
#aiShell .bgm-menu{
max-height:180px
}
#aiShell .font-menu{
max-height:150px
}
#aiShell .dropdown-option, #aiShell .font-option{
background:var(--bg-elevated);width:100%;min-height:28px;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;border:0;border-radius:7px;align-items:center;padding:5px 10px;font-size:12px;line-height:1.35;display:flex
}
#aiShell .dropdown-option:hover, #aiShell .font-option:hover{
background:var(--surface-muted)
}
#aiShell .dropdown-option.active, #aiShell .font-option.active{
background:var(--accent-soft);color:var(--accent);font-weight:800
}
#aiShell .compact-head{
min-height:auto;margin-bottom:12px
}
#aiShell .compact-head h3{
font-size:13px
}
#aiShell .bgm-preview-audio{
width:100%;height:34px
}
#aiShell .edit-style-preview:has(.edit-preview-video):before{
content:"";z-index:1;pointer-events:none;background:linear-gradient(#03071233,#03071208 38%,#0307125c),radial-gradient(circle at 50% 70%,#ffffff1f,#0000 44%);position:absolute;inset:0
}
#aiShell .preview-title-text, #aiShell .preview-subtitle-text{
z-index:2;box-sizing:border-box;padding:var(--preview-pad-y,3px) var(--preview-pad-x,8px);text-align:center;white-space:pre;word-break:keep-all;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;outline-offset:var(--preview-outline-offset,3px);border-radius:4px;font-weight:900;line-height:1.2;position:absolute;transform:none
}
#aiShell .preview-title-text{
min-height:var(--title-box-height,auto);padding:var(--title-box-pad,0);flex-direction:column;justify-content:center;align-items:center;display:flex
}
#aiShell .preview-title-text:before{
content:"";z-index:0;border-radius:inherit;background:var(--title-box-bg,transparent);position:absolute;inset:0
}
#aiShell .preview-title-text .preview-text-line{
z-index:1;height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex;position:relative
}
#aiShell .preview-subtitle-text{
min-height:var(--subtitle-box-height,auto);flex-direction:column;justify-content:center;align-items:center;display:flex
}
#aiShell .preview-text-line{
white-space:pre;display:block
}
#aiShell .preview-title-text:active, #aiShell .preview-subtitle-text:active{
cursor:grabbing
}
#aiShell .preview-title-text.animation-fade, #aiShell .preview-subtitle-text.animation-fade{
animation:1.8s ease-out infinite preview-layer-fade-eb38d16c
}
#aiShell .preview-title-text.animation-pop, #aiShell .preview-subtitle-text.animation-pop{
animation:1.8s ease-out infinite preview-layer-pop-eb38d16c
}
#aiShell .preview-title-text.animation-slideUp, #aiShell .preview-subtitle-text.animation-slideUp{
animation:1.8s ease-out infinite preview-layer-slide-up-eb38d16c
}
#aiShell .preview-title-text.animation-slideRight, #aiShell .preview-subtitle-text.animation-slideRight{
animation:1.8s ease-out infinite preview-layer-slide-right-eb38d16c
}
#aiShell .preview-title-text.animation-slideLeft, #aiShell .preview-subtitle-text.animation-slideLeft{
animation:1.8s ease-out infinite preview-layer-slide-left-eb38d16c
}
#aiShell .preview-title-text.animation-slideDown, #aiShell .preview-subtitle-text.animation-slideDown{
animation:1.8s ease-out infinite preview-layer-slide-down-eb38d16c
}
#aiShell .preview-title-text.animation-zoom, #aiShell .preview-subtitle-text.animation-zoom{
animation:1.8s ease-out infinite preview-layer-zoom-eb38d16c
}
#aiShell .preview-title-text.animation-shake, #aiShell .preview-subtitle-text.animation-shake{
animation:1.8s ease-out infinite preview-layer-shake-eb38d16c
}
#aiShell .preview-title-text.animation-wordByWord, #aiShell .preview-subtitle-text.animation-wordByWord{
animation:1.8s steps(6,end) infinite preview-layer-word-eb38d16c
}
@keyframes preview-layer-fade-eb38d16c{
0%{opacity:0}24%,to{opacity:1}
}
@keyframes preview-layer-pop-eb38d16c{
0%{opacity:.28;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) scale(.72)}16%{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) scale(1.12)}28%,to{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) scale(1)}
}
@keyframes preview-layer-slide-up-eb38d16c{
0%{opacity:.24;transform:translate(var(--preview-layer-x,-50%), calc(var(--preview-layer-y,-50%) + 22px))}24%,to{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%))}
}
@keyframes preview-layer-slide-right-eb38d16c{
0%{opacity:.24;transform:translate(calc(var(--preview-layer-x,-50%) - 30px), var(--preview-layer-y,-50%))}24%,to{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%))}
}
@keyframes preview-layer-slide-left-eb38d16c{
0%{opacity:.24;transform:translate(calc(var(--preview-layer-x,-50%) + 30px), var(--preview-layer-y,-50%))}24%,to{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%))}
}
@keyframes preview-layer-slide-down-eb38d16c{
0%{opacity:.24;transform:translate(var(--preview-layer-x,-50%), calc(var(--preview-layer-y,-50%) - 22px))}24%,to{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%))}
}
@keyframes preview-layer-zoom-eb38d16c{
0%{opacity:.2;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) scale(.42)}24%,to{opacity:1;transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) scale(1)}
}
@keyframes preview-layer-shake-eb38d16c{
0%{transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) rotate(0deg)}8%{transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) rotate(-8deg)}16%{transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) rotate(8deg)}24%{transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) rotate(-6deg)}32%{transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) rotate(6deg)}44%,to{transform:translate(var(--preview-layer-x,-50%), var(--preview-layer-y,-50%)) rotate(0deg)}
}
@keyframes preview-layer-word-eb38d16c{
0%{opacity:.18;clip-path:inset(0 100% 0 0)}34%,to{opacity:1;clip-path:inset(0)}
}
#aiShell .pip-preview-overlay{
z-index:4;border:2px solid var(--accent);cursor:grab;touch-action:none;border-radius:6px;position:absolute;overflow:hidden;box-shadow:0 4px 16px #00000059
}
#aiShell .pip-preview-overlay.dragging{
cursor:grabbing;opacity:.92
}
#aiShell .pip-preview-media{
object-fit:cover;pointer-events:none;width:100%;height:auto;display:block
}
#aiShell .cover-editor-card{
--range-track:var(--surface-muted-strong);gap:8px;max-width:100%;overflow:hidden visible
}
#aiShell .cover-editor-card>.card-head, #aiShell .cover-editor-card>.cover-editor-layout, #aiShell .cover-editor-card>.cover-path-field{
min-width:0
}
#aiShell .cover-home-layout{
align-items:center;gap:12px;min-width:0;display:flex;position:relative;overflow:hidden
}
#aiShell .cover-home-preview{
aspect-ratio:3/4;border:1px solid var(--border-subtle);background:var(--bg-preview);width:180px;box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 8%, transparent);border-radius:8px;flex:0 0 180px;position:relative;overflow:hidden
}
#aiShell .cover-home-preview img{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .cover-home-empty{
width:100%;height:100%;color:var(--text-muted);background:linear-gradient(135deg, color-mix(in srgb, var(--bg-preview) 88%, var(--accent) 12%), var(--bg-preview));text-align:center;place-items:center;padding:16px;font-size:13px;font-weight:700;display:grid
}
#aiShell .cover-home-actions{
border-left:1px solid var(--border-subtle);flex:auto;align-self:stretch;min-width:0;padding-left:12px
}
#aiShell .cover-edit-options{
min-height:100%
}
#aiShell .cover-status{
max-width:calc(100% - 24px);color:var(--text-muted);text-align:right;margin:0;font-size:12px;font-weight:700;position:absolute;bottom:10px;right:12px
}
#aiShell .cover-preview{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:8px;align-self:center;width:min(100%,180px);max-height:220px;overflow:hidden
}
#aiShell .cover-head-actions{
flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex
}
#aiShell .cover-editor-layout{
grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 12px;min-width:0;display:grid
}
#aiShell .cover-preview-stage{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .cover-live-preview, #aiShell .cover-result-preview{
width:min(100%,168px);aspect-ratio:var(--cover-aspect,9 / 16);border:1px solid var(--border-subtle);background:#000;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 12px 28px #0f172a24
}
#aiShell .cover-result-preview{
aspect-ratio:3/4
}
#aiShell .cover-live-video, #aiShell .cover-result-preview img{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .cover-preview-caption{
width:min(100%,168px);color:var(--text-muted);text-align:center;font-size:12px;font-weight:800;display:block
}
#aiShell .cover-live-empty{
box-sizing:border-box;color:#ffffffb8;text-align:center;place-items:center;width:100%;height:100%;padding:14px;font-size:12px;display:grid
}
#aiShell .cover-title-layer{
z-index:2;box-sizing:border-box;text-align:center;white-space:pre;word-break:keep-all;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;outline-offset:3px;outline:1px dashed #ffffff61;padding:2px 6px;font-family:Microsoft YaHei,PingFang SC,Noto Sans CJK SC,sans-serif;font-weight:900;line-height:1.18;position:absolute;transform:translate(-50%,-50%)
}
#aiShell .cover-title-layer:active{
cursor:grabbing
}
#aiShell .cover-title-line{
white-space:pre;display:block
}
#aiShell .cover-subtitle-layer{
white-space:pre;word-break:keep-all;margin-top:3px;font-family:Microsoft YaHei,PingFang SC,Noto Sans CJK SC,sans-serif;font-weight:800;line-height:1.25
}
#aiShell .cover-control-panel{
grid-column:1/-1;grid-template-columns:minmax(0,1fr);gap:7px;min-width:0;display:grid
}
#aiShell .cover-title-field, #aiShell .cover-control-panel>.button-row{
grid-column:1/-1
}
#aiShell .cover-row{
gap:8px;min-width:0;display:grid
}
#aiShell .cover-row-time{
grid-template-columns:minmax(0,1fr);align-items:end
}
#aiShell .cover-row-colors, #aiShell .cover-row-sliders{
grid-template-columns:repeat(2,minmax(0,1fr))
}
#aiShell .cover-row-colors label, #aiShell .cover-row-sliders label{
flex-direction:column;gap:4px;min-width:0;display:flex
}
#aiShell .cover-subtitle-field{
min-width:0
}
#aiShell .cover-title-row, #aiShell .cover-snapshot-row{
grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:6px;min-width:0;display:grid
}
#aiShell .cover-ai-btn{
white-space:nowrap;min-width:66px
}
#aiShell .cover-control-panel .input{
min-height:34px;padding-top:7px;padding-bottom:7px
}
#aiShell .cover-control-panel .mini{
min-height:32px;padding:6px 9px
}
#aiShell .cover-control-panel input[type=range]{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px
}
#aiShell .cover-control-panel input[type=range]::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}
#aiShell .cover-control-panel input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;background:var(--accent);border:2px solid #fff;border-radius:999px;width:16px;height:16px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}
#aiShell .cover-control-panel input[type=range]::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}
#aiShell .cover-control-panel input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}
#aiShell .cover-control-panel input[type=range]::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:999px;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}
#aiShell .cover-path-field{
margin-top:0
}
#aiShell .publish-platform-list{
flex-direction:column;gap:8px;min-width:0;display:flex
}
#aiShell .publish-platform-row{
box-sizing:border-box;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent) 5%, var(--bg-input));min-width:0;max-width:100%;min-height:50px;box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 8%, transparent);cursor:pointer;border-radius:12px;grid-template-columns:14px 32px minmax(0,1fr);align-items:center;gap:8px;padding:8px 10px;display:grid
}
#aiShell .publish-platform-row:hover:not(.unavailable){
border-color:var(--accent-border);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent) 9%, var(--bg-card-hover));box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent)
}
#aiShell .publish-platform-row.unavailable{
cursor:not-allowed;opacity:.62
}
#aiShell .publish-platform-row input{
width:13px;height:13px;accent-color:var(--accent)
}
#aiShell .publish-platform-name{
min-width:0;color:var(--text-primary);font-size:13px;font-weight:800
}
#aiShell .publish-platform-icon-wrap{
border:1px solid var(--border-subtle);background:var(--bg-card);width:32px;height:32px;box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:8px;overflow:hidden
}
#aiShell .publish-platform-icon{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .publish-platform-main{
flex-direction:column;gap:2px;min-width:0;display:flex
}
#aiShell .publish-account-note{
min-width:0;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;overflow:hidden
}
#aiShell .publish-account-pill{
border:1px solid var(--success-border);background:var(--success-soft);max-width:100%;color:var(--success);white-space:nowrap;border-radius:999px;grid-column:3;justify-self:start;padding:4px 8px;font-size:11px;font-weight:800
}
#aiShell .publish-account-pill.muted{
border-color:var(--border-subtle);background:var(--surface-muted);color:var(--text-muted)
}
#aiShell .status-pill{
background:var(--surface-muted);color:var(--text-muted);border-radius:999px;padding:2px 7px;font-size:11px;font-weight:700
}
#aiShell .asset-loading-pill{
background:0 0;padding:0
}
#aiShell .picker-trigger{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);width:100%;min-height:36px;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;font-size:13px;display:flex;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .picker-trigger:hover{
border-color:var(--border-hover);background:var(--surface-sheen-soft), var(--bg-card-hover)
}
#aiShell .rewrite-card-head{
flex-wrap:wrap;align-items:center;gap:10px
}
#aiShell .copy-mode-tabs{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;display:grid
}
#aiShell .copy-mode-tab{
min-height:38px;color:var(--text-muted);cursor:pointer;font:inherit;background:0 0;border:0;border-radius:9px;font-size:14px;font-weight:800
}
#aiShell .copy-mode-tab.active{
background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent)
}
#aiShell .rewrite-target-field{
color:var(--text-secondary);align-items:center;gap:9px;font-size:12px;font-weight:800;display:flex
}
#aiShell .rewrite-target-field input{
border:1px solid var(--border-subtle);background:var(--bg-input);width:96px;min-height:34px;color:var(--text-primary);font:inherit;border-radius:8px;padding:4px 8px
}
#aiShell .rewrite-target-field em{
color:var(--text-muted);font-style:normal;font-weight:600
}
#aiShell .rewrite-card-head h3{
flex:auto;min-width:0
}
#aiShell .rewrite-head-actions{
flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;display:flex
}
#aiShell .rewrite-meta-grid.full{
border-top:1px solid var(--border-subtle);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding-top:2px;display:grid
}
@media(width<=900px){
#aiShell .rewrite-meta-grid.full{
grid-template-columns:1fr
}

}
#aiShell .legal-btn{
border-color:var(--accent-border);color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 45%, var(--bg-card));font-weight:700
}
#aiShell .legal-btn:hover:not(:disabled){
background:var(--accent-soft);border-color:var(--accent)
}
#aiShell .picker-trigger-text{
text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0
}
#aiShell .modal-backdrop{
z-index:10001;background:var(--overlay-modal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;padding:24px;display:grid;position:fixed;inset:0
}
#aiShell .modal-card{
border:1px solid var(--border-strong);background:var(--bg-elevated);width:min(100%,480px);max-height:min(90vh,720px);box-shadow:var(--shadow-glow);border-radius:14px;flex-direction:column;padding:18px 20px 14px;display:flex
}
#aiShell .modal-card-wide{
width:min(100%,560px)
}
#aiShell .modal-title{
color:var(--text-primary);margin:0 0 6px;font-size:17px;font-weight:900
}
#aiShell .modal-desc{
color:var(--text-muted);margin:0 0 12px;font-size:13px;line-height:1.45
}
#aiShell .modal-scroll{
flex-direction:column;flex:1;gap:8px;min-height:0;padding-right:4px;display:flex;overflow:auto
}
#aiShell .modal-empty{
border:1px dashed var(--border-subtle);color:var(--text-muted);text-align:center;border-radius:8px;margin:0;padding:12px;font-size:13px
}
#aiShell .modal-loading{
color:var(--text-muted);margin:0;font-size:13px
}
#aiShell .pick-row{
border:1px solid var(--border-subtle);background:var(--surface-muted);width:100%;min-width:0;color:var(--text-primary);cursor:pointer;text-align:left;font:inherit;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex
}
#aiShell .pick-row:hover{
border-color:var(--border-hover)
}
#aiShell .pick-row:focus-visible{
outline:2px solid var(--input-focus-border);outline-offset:2px
}
#aiShell .pick-row.on{
border-color:var(--input-focus-border);background:var(--accent-soft)
}
#aiShell .pick-row-av{
align-items:flex-start
}
#aiShell .pick-radio-dot{
border:2px solid var(--border-hover);background:var(--bg-card);border-radius:999px;flex:0 0 14px;width:14px;height:14px;margin-top:2px
}
#aiShell .pick-row.on .pick-radio-dot{
border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--bg-card);background:var(--accent)
}
#aiShell .pick-main{
flex-direction:column;flex:1;gap:2px;min-width:0;display:flex
}
#aiShell .pick-name{
color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800;overflow:hidden
}
#aiShell .pick-sub{
color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden
}
#aiShell .pick-audio{
flex-shrink:0;justify-content:flex-end;align-items:center;gap:8px;width:260px;min-height:42px;display:flex
}
#aiShell .pick-audio-btn{
width:34px;height:34px;color:var(--text-primary);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:0 0 34px;justify-content:center;align-items:center;padding:0;line-height:0;display:inline-flex
}
#aiShell .pick-audio-btn:hover{
background:var(--surface-muted)
}
#aiShell .pick-audio-btn.danger{
color:var(--danger)
}
#aiShell .pick-audio-btn.danger:hover{
background:var(--danger-soft)
}
#aiShell .pick-audio-btn svg{
fill:currentColor;flex-shrink:0;width:20px;height:20px;display:block
}
#aiShell .pick-audio-mid{
flex-direction:column;flex:0 0 58px;align-items:stretch;gap:4px;width:58px;display:flex
}
#aiShell .pick-audio-time{
color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:center;font-size:12px
}
#aiShell .pick-progress{
background:var(--border-subtle);border-radius:999px;height:3px;overflow:hidden
}
#aiShell .pick-progress-fill{
border-radius:inherit;background:var(--accent);height:100%;display:block
}
#aiShell .pick-rate-wrap{
flex:0 0 54px;width:54px;position:relative
}
#aiShell .pick-rate{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:54px;height:28px;color:var(--text-secondary);cursor:pointer;font:inherit;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .pick-rate:hover, #aiShell .pick-rate.on{
color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-soft-strong) 36%, transparent)
}
#aiShell .pick-rate-menu{
z-index:13000;border:1px solid var(--accent-border);background:var(--surface-sheen-soft), var(--bg-elevated);border-radius:8px;min-width:72px;padding:5px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 16px 36px #00000047,inset 0 1px #ffffff29
}
#aiShell .pick-rate-option{
width:100%;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;background:0 0;border:0;border-radius:6px;padding:6px 8px;font-size:12px;font-weight:700;display:block
}
#aiShell .pick-rate-option:hover, #aiShell .pick-rate-option.active{
background:var(--accent-soft);color:var(--accent)
}
#aiShell .av-thumb{
border:1px solid var(--border-subtle);object-fit:cover;background:#000;border-radius:8px;flex:0 0 66px;width:66px;height:88px
}
#aiShell .av-thumb.ph{
color:var(--text-muted);place-items:center;font-size:12px;display:grid
}
#aiShell .modal-pager{
border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:10px;display:flex
}
#aiShell .pager-meta{
color:var(--text-muted);font-size:12px
}
#aiShell .modal-actions{
border-top:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:12px;display:flex
}
#aiShell .project-entry{
flex-direction:column;gap:10px;display:flex
}
#aiShell .entry-label{
color:var(--text-muted);font-size:12px;font-weight:700
}
#aiShell .project-name-trigger{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;min-height:42px;color:var(--text-primary);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-weight:800;display:flex
}
#aiShell .project-name-trigger:hover:not(:disabled){
border-color:var(--border-hover);background:var(--bg-card-hover)
}
#aiShell .project-name-trigger span:first-child{
text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden
}
#aiShell .chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex-shrink:0;width:0;height:0
}
#aiShell .manage-btn{
width:100%;min-height:38px
}
#aiShell .project-entry--sidebar{
border-top:1px solid var(--border-subtle);flex-shrink:0;gap:8px;margin-top:8px;padding-top:10px
}
#aiShell .entry-label-sidebar{
text-align:center;font-size:11px
}
#aiShell .project-entry--sidebar .project-name-trigger{
border-radius:8px;min-height:36px;padding:6px 8px;font-size:11px;font-weight:800
}
#aiShell .project-entry--sidebar .project-name-trigger span:first-child{
white-space:normal;text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;display:-webkit-box;overflow:hidden
}
#aiShell .project-entry--sidebar .manage-btn{
border-radius:8px;min-height:32px;padding:5px 6px;font-size:11px;font-weight:700
}
#aiShell .project-entry--header{
border:0;flex-direction:row;flex-shrink:0;align-items:center;gap:8px;margin:0;padding:0
}
#aiShell .entry-label-header{
color:var(--text-muted);white-space:nowrap;font-size:12px;font-weight:700
}
#aiShell .project-entry--header .project-name-trigger{
width:auto;min-width:120px;max-width:200px;min-height:32px;padding:4px 10px;font-size:13px
}
#aiShell .project-entry--header .manage-btn{
white-space:nowrap;width:auto;min-width:0;min-height:32px;padding:5px 14px;font-size:13px;font-weight:700
}
#aiShell .modal-backdrop{
z-index:10000;background:var(--overlay-modal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;padding:24px;display:grid;position:fixed;inset:0
}
#aiShell .modal-card{
border-radius:var(--radius-xl);background:var(--bg-elevated);border:1px solid var(--border-strong);width:min(100%,440px);box-shadow:var(--shadow-glow);padding:22px 24px 20px
}
#aiShell .modal-card-wide{
width:min(100%,640px)
}
#aiShell .modal-title{
margin:0 0 8px;font-size:18px;font-weight:800
}
#aiShell .modal-desc{
color:var(--text-muted);margin:0 0 16px;line-height:1.5
}
#aiShell .modal-err{
color:var(--danger-text);margin:10px 0 0
}
#aiShell .project-list, #aiShell .manage-list{
flex-direction:column;gap:8px;max-height:min(52vh,440px);display:flex;overflow:auto
}
#aiShell .project-row{
border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-muted);width:100%;min-height:46px;color:var(--text-primary);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:14px;padding:10px 12px;display:flex
}
#aiShell .project-row:hover:not(:disabled){
border-color:var(--border-hover);background:var(--bg-card-hover)
}
#aiShell .project-row.active{
border-color:var(--border-strong);background:var(--accent-soft)
}
#aiShell .project-row:disabled{
cursor:default
}
#aiShell .project-row-name{
text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:800;overflow:hidden
}
#aiShell .project-row-state{
color:var(--text-muted);flex-shrink:0;font-size:12px
}
#aiShell .create-row{
grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:12px;display:grid
}
#aiShell .manage-row{
border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-muted);grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px;display:grid
}
#aiShell .manage-name{
min-width:0
}
#aiShell .current-pill{
background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800
}
#aiShell .btn-sm{
padding:8px 12px;font-size:12px
}
#aiShell .empty{
border:1px dashed var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);text-align:center;margin:0;padding:16px
}
#aiShell .modal-actions{
flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px;display:flex
}
@media(width<=560px){
#aiShell .create-row, #aiShell .manage-row{
grid-template-columns:1fr
}

}
#aiShell .strip{
min-height:calc(var(--step-count) * var(--step-item-height));flex-direction:column;flex:1;gap:0;padding:10px 4px 10px 2px;display:flex;position:relative;overflow:visible
}
#aiShell .strip:before{
content:"";left:7px;top:var(--step-node-center-y);height:calc((var(--step-count) - 1) * var(--step-item-height));background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, transparent), color-mix(in srgb, var(--accent-2) 44%, transparent), var(--border-subtle));width:3px;box-shadow:0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:999px;position:absolute
}
#aiShell .current-indicator{
z-index:0;border:1px solid var(--accent-border);background:var(--surface-sheen-soft), linear-gradient(135deg, color-mix(in srgb, var(--accent-soft-strong) 72%, var(--bg-card)), color-mix(in srgb, var(--accent-soft) 62%, var(--bg-card)) 58%, var(--bg-card));height:78px;box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 #ffffff59;transform:translateY(var(--active-step-y));pointer-events:none;border-radius:10px;transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .18s,background .18s,box-shadow .18s;position:absolute;top:23px;left:28px;right:0
}
#aiShell .step{
z-index:1;flex:0 0 var(--step-item-height);width:100%;height:var(--step-item-height);color:inherit;text-align:left;background:0 0;border:0;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:14px;padding:8px 0;transition:color .18s;display:grid;position:relative
}
#aiShell .step:hover .step-title{
color:var(--accent)
}
#aiShell .step:hover .step-subtitle{
color:var(--accent);opacity:.72
}
#aiShell .step-node{
border:2px solid var(--border-hover);background:var(--bg-card);width:18px;height:18px;box-shadow:0 0 0 5px color-mix(in srgb, var(--bg-card) 88%, transparent), 0 8px 18px #0f172a1a;border-radius:50%;transition:border-color .18s,background .18s,box-shadow .18s
}
#aiShell .step.reached .step-node{
border-color:var(--accent);background:radial-gradient(circle at 35% 28%, #ffffffe6, transparent 22%), linear-gradient(145deg, var(--accent), var(--accent-2));box-shadow:0 0 0 5px color-mix(in srgb, var(--bg-card) 88%, transparent), 0 0 0 9px color-mix(in srgb, var(--accent-soft-strong) 62%, transparent), 0 12px 24px color-mix(in srgb, var(--accent) 24%, transparent)
}
#aiShell .step-body{
width:100%;min-width:0;min-height:72px;color:inherit;cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;display:flex;position:relative
}
#aiShell .step-num{
border:1px solid var(--border-subtle);background:var(--surface-muted);width:34px;height:34px;color:var(--text-muted);border-radius:999px;flex:0 0 34px;place-items:center;font-size:13px;font-weight:900;line-height:1;display:grid;box-shadow:inset 0 1px #ffffff47
}
#aiShell .step-title{
text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;color:var(--text-secondary);font-size:18px;font-weight:800;line-height:1.25;transition:color .18s,font-size .18s;display:block;overflow:hidden
}
#aiShell .step-copy{
flex-direction:column;flex:auto;gap:4px;min-width:0;display:flex
}
#aiShell .step-subtitle{
min-width:0;color:var(--text-muted);opacity:1;-webkit-line-clamp:2;overflow-wrap:anywhere;white-space:normal;-webkit-box-orient:vertical;font-size:13px;font-weight:600;line-height:1.3;transition:color .18s,opacity .18s;display:-webkit-box;overflow:hidden
}
#aiShell .step.reached .step-num, #aiShell .step.reached .step-title{
color:var(--accent)
}
#aiShell .step.reached .step-num{
border-color:var(--accent-border);background:var(--accent-soft)
}
#aiShell .step.reached .step-subtitle{
color:var(--accent);opacity:.72
}
#aiShell .step.reached .step-title{
font-size:18px;font-weight:900
}
#aiShell .step.current .step-body{
background:0 0;border-color:#0000
}
#aiShell .step.current .step-title{
font-size:19px;font-weight:900
}
#aiShell .step.current .step-subtitle{
color:var(--accent);opacity:.72
}
#aiShell .tutorial-btn{
width:fit-content;min-height:22px;color:var(--accent);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;margin-top:2px;padding:1px 0;font-size:13px;font-weight:900;line-height:1.2;text-decoration:none;display:none
}
#aiShell .step.current .tutorial-btn{
justify-content:center;align-items:center;margin-top:2px;display:inline-flex
}
#aiShell .tutorial-btn:hover{
text-decoration:underline
}
#aiShell .placeholder{
max-width:560px;padding:28px
}
#aiShell h2{
margin:0 0 10px;font-size:20px
}
#aiShell p{
color:var(--text-secondary);margin:0 0 8px;line-height:1.55
}
#aiShell .muted{
color:var(--text-muted)
}
#aiShell .voice-root{
flex-direction:column;gap:16px;padding:16px 28px;display:flex
}
#aiShell .hero{
align-items:center;gap:14px;display:flex
}
#aiShell .hero-title{
margin:0;font-size:22px;font-weight:800
}
#aiShell .hero-desc{
color:var(--text-muted);margin:6px 0 0
}
#aiShell .panel{
padding:18px 20px
}
#aiShell .panel-head{
flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex
}
#aiShell .panel-head h3{
margin:0;font-size:15px;font-weight:800
}
#aiShell .hint{
color:var(--text-muted);font-size:12px
}
#aiShell .upload-row{
flex-wrap:wrap;align-items:center;gap:10px;display:flex
}
#aiShell .input{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);min-width:200px;color:var(--text-primary);flex:1;padding:10px 12px
}
#aiShell .input-inline{
flex:0 220px;min-width:140px
}
#aiShell .hidden{
opacity:0;pointer-events:none;width:0;height:0;position:absolute
}
#aiShell .err{
color:var(--danger-text);margin:8px 0 0
}
#aiShell .muted{
color:var(--text-muted);margin:0
}
#aiShell .muted-sm{
color:var(--text-muted);font-size:12px
}
#aiShell .table-wrap{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);overflow:auto
}
#aiShell .data-table{
border-collapse:collapse;width:100%
}
#aiShell .data-table th, #aiShell .data-table td{
text-align:left;border-bottom:1px solid var(--border-subtle);padding:10px 12px
}
#aiShell .data-table th{
color:var(--text-muted);background:var(--surface-muted);font-weight:700
}
#aiShell .data-table tr:last-child td{
border-bottom:none
}
#aiShell .data-table tr.is-default-row td{
background:color-mix(in srgb, var(--accent-soft) 52%, transparent)
}
#aiShell .mono{
font-family:var(--font-sans);color:var(--text-secondary);word-break:break-all;font-size:12px
}
#aiShell .cell-title{
margin-right:6px;font-weight:600
}
#aiShell .default-badge{
border:1px solid var(--accent-border);background:var(--accent-soft);min-height:22px;color:var(--accent);white-space:nowrap;border-radius:999px;align-items:center;padding:2px 8px;font-size:12px;font-weight:700;display:inline-flex
}
#aiShell .col-actions{
text-align:center;white-space:nowrap;width:88px;min-width:88px;max-width:88px
}
#aiShell .data-table td.actions{
text-align:center;vertical-align:middle
}
#aiShell .actions{
justify-content:center;align-items:center;gap:8px;display:flex
}
#aiShell .actions .btn-danger{
white-space:nowrap;box-sizing:border-box;min-width:56px;padding:6px 14px;line-height:1.4
}
#aiShell .voice-play-btn{
border:1px solid var(--border-subtle);background:var(--bg-input);width:32px;height:32px;color:var(--accent);cursor:pointer;border-radius:999px;place-items:center;padding:0;display:grid
}
#aiShell .voice-play-btn:hover, #aiShell .voice-play-btn.playing{
border-color:var(--accent);background:#5caaf81f
}
#aiShell .voice-play-icon{
border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0;margin-left:3px
}
#aiShell .voice-play-icon.stop{
background:currentColor;border:0;border-radius:2px;width:10px;height:10px;margin-left:0
}
#aiShell .btn-sm{
padding:8px 12px;font-size:12px
}
#aiShell .btn-xs{
padding:4px 8px;font-size:11px
}
#aiShell .pager{
flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;display:flex
}
#aiShell .pager-btns{
flex-wrap:wrap;align-items:center;gap:10px;display:flex
}
#aiShell .select-inline{
border:1px solid var(--border-subtle);background:var(--bg-input);color:var(--text-primary);border-radius:8px;margin-left:4px;padding:4px 8px
}
#aiShell .hidden-player{
display:none
}
#aiShell .dh-root{
flex-direction:column;gap:16px;padding:16px 28px;display:flex
}
#aiShell .hero{
align-items:center;gap:14px;display:flex
}
#aiShell .hero-title{
margin:0;font-size:22px;font-weight:800
}
#aiShell .hero-desc{
color:var(--text-muted);margin:6px 0 0
}
#aiShell .panel{
padding:18px 20px
}
#aiShell .panel-head{
flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex
}
#aiShell .panel-head h3{
margin:0;font-size:15px;font-weight:800
}
#aiShell .hint{
color:var(--text-muted);font-size:12px
}
#aiShell .upload-row{
flex-wrap:wrap;align-items:center;gap:10px;display:flex
}
#aiShell .input{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);min-width:200px;color:var(--text-primary);flex:1;padding:10px 12px
}
#aiShell .input-inline{
flex:0 220px;min-width:140px
}
#aiShell .hidden{
opacity:0;pointer-events:none;width:0;height:0;position:absolute
}
#aiShell .err{
color:var(--danger-text);margin:8px 0 0
}
#aiShell .muted{
color:var(--text-muted);margin:0
}
#aiShell .muted-sm{
color:var(--text-muted);font-size:12px
}
#aiShell .table-wrap{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);overflow:auto
}
#aiShell .data-table{
table-layout:fixed;border-collapse:collapse;width:100%
}
#aiShell .col-name{
width:22%
}
#aiShell .col-filename{
width:28%
}
#aiShell .col-size{
width:10%
}
#aiShell .col-time{
width:18%
}
#aiShell .data-table th, #aiShell .data-table td{
text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:middle;padding:10px 12px
}
#aiShell .data-table th{
color:var(--text-muted);background:var(--surface-muted);font-weight:700
}
#aiShell .data-table tr:last-child td{
border-bottom:none
}
#aiShell .data-table tr.is-default-row td{
background:color-mix(in srgb, var(--accent-soft) 52%, transparent)
}
#aiShell .col-thumb, #aiShell .thumb-cell{
width:100px
}
#aiShell .thumb{
object-fit:cover;border:1px solid var(--border-subtle);background:var(--bg-input);border-radius:10px;width:72px;height:72px
}
#aiShell .thumb-v{
object-fit:cover;border:1px solid var(--border-subtle);background:#000;border-radius:10px;width:72px;height:72px;display:block
}
#aiShell .thumb-video-wrap{
vertical-align:middle;width:72px;height:72px;display:inline-block;position:relative
}
#aiShell .thumb-play-btn{
color:#fff;cursor:pointer;background:#00000085;border:1px solid #ffffffb8;border-radius:999px;place-items:center;width:32px;height:32px;padding:0;transition:background .16s,transform .16s;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
}
#aiShell .thumb-play-btn:hover{
background:#000000ad;transform:translate(-50%,-50%)scale(1.05)
}
#aiShell .thumb-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid;width:0;height:0;margin-left:3px
}
#aiShell .thumb-fallback{
width:72px;height:72px;color:var(--text-muted);border:1px dashed var(--border-subtle);border-radius:10px;justify-content:center;align-items:center;font-size:12px;display:inline-flex
}
#aiShell .mono{
font-family:var(--font-sans);color:var(--text-secondary);word-break:break-all;font-size:12px
}
#aiShell .cell-title{
margin-right:6px;font-weight:600
}
#aiShell .default-badge{
border:1px solid var(--accent-border);background:var(--accent-soft);min-height:22px;color:var(--accent);white-space:nowrap;border-radius:999px;align-items:center;padding:2px 8px;font-size:12px;font-weight:700;display:inline-flex
}
#aiShell .col-actions{
text-align:center;white-space:nowrap;width:88px;min-width:88px;max-width:88px
}
#aiShell .data-table td.actions{
text-align:center;vertical-align:middle
}
#aiShell .actions{
white-space:nowrap
}
#aiShell .actions .btn+.btn{
margin-left:8px
}
#aiShell .actions .btn-danger{
white-space:nowrap;box-sizing:border-box;min-width:56px;padding:6px 14px;line-height:1.4
}
#aiShell .btn-sm{
padding:8px 12px;font-size:12px
}
#aiShell .btn-xs{
padding:4px 8px;font-size:11px
}
#aiShell .pager{
flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;display:flex
}
#aiShell .pager-btns{
flex-wrap:wrap;align-items:center;gap:10px;display:flex
}
#aiShell .select-inline{
border:1px solid var(--border-subtle);background:var(--bg-input);color:var(--text-primary);border-radius:8px;margin-left:4px;padding:4px 8px
}
#aiShell .account-root{
flex-direction:column;gap:16px;padding:16px 28px;display:flex
}
#aiShell .hero{
justify-content:space-between;align-items:center;gap:14px;display:flex
}
#aiShell .hero-copy{
min-width:0
}
#aiShell .hero-title{
margin:0;font-size:22px;font-weight:800
}
#aiShell .hero-desc{
color:var(--text-muted);margin:6px 0 0
}
#aiShell .summary{
flex-shrink:0;gap:8px;margin-left:auto;display:flex
}
#aiShell .summary-item{
border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--surface-muted);min-width:78px;color:var(--text-muted);flex-direction:column;gap:2px;padding:7px 10px;font-size:12px;display:flex
}
#aiShell .summary-item strong{
color:var(--text-primary);font-size:18px;line-height:1
}
#aiShell .summary-item.ok{
border-color:var(--success-border);background:var(--success-soft)
}
#aiShell .platform-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid
}
#aiShell .card{
background:var(--card-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px
}
#aiShell .platform-card{
flex-direction:column;gap:14px;min-width:0;display:flex
}
#aiShell .platform-card.disabled{
background:var(--surface-muted)
}
#aiShell .platform-card.disabled .platform-icon{
filter:grayscale(.75);opacity:.72
}
#aiShell .platform-head{
align-items:flex-start;gap:12px;display:flex
}
#aiShell .platform-mark{
border-radius:var(--radius-md);border:1px solid var(--accent-border);background:var(--accent-soft);width:40px;height:40px;color:var(--accent);flex-shrink:0;place-items:center;font-weight:900;display:grid
}
#aiShell .platform-icon{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-muted);object-fit:cover;flex-shrink:0;width:40px;height:40px;display:block
}
#aiShell .platform-meta{
flex:1;min-width:0
}
#aiShell .platform-title{
margin:0;font-size:16px;font-weight:800
}
#aiShell .platform-desc{
color:var(--text-muted);margin:4px 0 0;font-size:12px;line-height:1.45
}
#aiShell .account-count{
background:var(--surface-muted);color:var(--text-secondary);border-radius:999px;flex-shrink:0;padding:4px 8px;font-size:12px;font-weight:800
}
#aiShell .bind-panel{
grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;display:grid
}
#aiShell .field{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .field-label{
color:var(--text-secondary);font-weight:600
}
#aiShell .bind-btn{
white-space:nowrap;min-height:42px
}
#aiShell .bind-hint{
color:var(--accent);margin:-4px 0 0;font-size:12px
}
#aiShell .disabled-hint{
color:var(--text-muted);margin:-4px 0 0;font-size:12px
}
#aiShell .error-text{
color:var(--danger-text);margin:-4px 0 0;font-size:12px
}
#aiShell .account-list{
flex-direction:column;gap:8px;display:flex
}
#aiShell .account-item{
border-radius:var(--radius-md);background:var(--bg-input);border:1px solid var(--border-subtle);align-items:center;gap:10px;padding:10px 12px;display:flex
}
#aiShell .account-item.invalid{
border-color:var(--danger-border);background:var(--danger-soft)
}
#aiShell .account-main{
flex-direction:column;flex:1;gap:2px;min-width:0;display:flex
}
#aiShell .account-name{
text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-primary);font-weight:700;overflow:hidden
}
#aiShell .account-meta{
color:var(--text-muted);font-size:12px
}
#aiShell .empty-hint{
border:1px dashed var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);text-align:center;padding:16px
}
#aiShell .status-dot{
border-radius:50%;flex-shrink:0;width:8px;height:8px
}
#aiShell .dot-green{
background:var(--success)
}
#aiShell .dot-red{
background:var(--danger)
}
#aiShell .btn-sm{
padding:8px 12px;font-size:12px
}
@media(width<=1040px){
#aiShell .platform-grid{
grid-template-columns:1fr
}

}
@media(width<=720px){
#aiShell .account-root{
padding:14px 16px
}
#aiShell .hero{
flex-direction:column;align-items:flex-start
}
#aiShell .summary{
width:100%;margin-left:0
}
#aiShell .summary-item{
flex:1
}
#aiShell .bind-panel{
grid-template-columns:1fr
}
#aiShell .bind-btn{
width:100%
}

}
#aiShell .themed-audio-player{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));width:min(640px,100%);min-height:48px;color:var(--text-primary);box-shadow:inset 0 1px 0 #ffffff29, 0 12px 28px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:999px;grid-template-columns:auto auto minmax(150px,1fr) auto;align-items:center;gap:12px;margin-top:12px;padding:10px 14px;display:grid
}
#aiShell .audio-play-btn{
border:1px solid var(--accent-border);background:var(--button-primary-bg);width:32px;height:32px;color:var(--accent-contrast);cursor:pointer;box-shadow:var(--button-primary-shadow);border-radius:50%;place-items:center;display:inline-grid
}
#aiShell .audio-play-btn:disabled{
opacity:.55;cursor:not-allowed
}
#aiShell .audio-icon{
display:block
}
#aiShell .audio-icon.play{
border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:10px solid;width:0;height:0;margin-left:2px
}
#aiShell .audio-icon.pause{
border-left:3px solid;border-right:3px solid;width:10px;height:13px
}
#aiShell .audio-spinner{
border:2px solid color-mix(in srgb, currentColor 32%, transparent);border-top-color:currentColor;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite audio-spin-2dce2a1a
}
#aiShell .audio-time{
color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:800
}
#aiShell .audio-time.total{
color:var(--text-muted)
}
#aiShell .audio-range-wrap{
min-width:0
}
#aiShell .audio-range{
cursor:pointer;appearance:none;background:0 0;width:100%;height:18px;margin:0;display:block
}
#aiShell .audio-range:disabled{
cursor:not-allowed;opacity:.6
}
#aiShell .audio-range::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--audio-progress) 100% no-repeat, var(--surface-muted-strong);border-radius:999px;height:6px
}
#aiShell .audio-range::-webkit-slider-thumb{
border:2px solid var(--bg-elevated);background:var(--accent);width:16px;height:16px;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);appearance:none;border-radius:50%;margin-top:-5px
}
#aiShell .audio-range::-moz-range-track{
background:var(--surface-muted-strong);border-radius:999px;height:6px
}
#aiShell .audio-range::-moz-range-progress{
background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;height:6px
}
#aiShell .audio-range::-moz-range-thumb{
border:2px solid var(--bg-elevated);background:var(--accent);width:14px;height:14px;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);border-radius:50%
}
#aiShell .audio-error{
color:var(--danger-text);grid-column:1/-1;font-size:12px;font-weight:700
}
@keyframes audio-spin-2dce2a1a{
to{transform:rotate(360deg)}
}
@media(width<=620px){
#aiShell .themed-audio-player{
grid-template-columns:auto auto 1fr auto;gap:9px;padding:10px 12px
}

}
#aiShell .task-center{
min-height:100%;color:var(--text-primary);padding:28px
}
#aiShell .task-center-head, #aiShell .task-toolbar, #aiShell .task-card, #aiShell .task-actions, #aiShell .task-pagination{
align-items:center;display:flex
}
#aiShell .task-center-head{
justify-content:space-between;gap:20px;margin-bottom:22px
}
#aiShell .task-center-head h2{
margin:0 0 6px;font-size:24px
}
#aiShell .task-center-head p, #aiShell .task-summary, #aiShell .task-hint, #aiShell .task-error{
margin:0
}
#aiShell .task-center-head p, #aiShell .task-toolbar{
justify-content:space-between;gap:16px;margin-bottom:16px
}
#aiShell .task-tabs{
gap:8px;display:flex
}
#aiShell .task-tabs button{
border:1px solid var(--border-subtle);background:var(--bg-elevated);min-height:38px;color:var(--text-primary);cursor:pointer;border-radius:8px;padding:0 16px
}
#aiShell .task-tabs button.active{
border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)
}
#aiShell .task-filter{
flex:0 0 180px;width:180px
}
#aiShell .task-list{
gap:12px;display:grid
}
#aiShell .task-card{
border:1px solid var(--border-subtle);background:var(--bg-elevated);border-radius:12px;align-items:stretch;gap:12px;padding:18px;display:grid
}
#aiShell .task-card-top{
align-items:flex-start;gap:14px;display:flex
}
#aiShell .task-summary-wrap{
flex:1;min-width:0;position:relative
}
#aiShell .task-status{
background:var(--surface-muted);color:var(--text-muted);border-radius:999px;flex:none;padding:3px 8px;font-size:12px
}
#aiShell .status-success{
color:#15803d;background:#16a34a24
}
#aiShell .status-failed{
color:#dc2626;background:#dc26261f
}
#aiShell .status-running, #aiShell .status-queued{
background:var(--accent-soft);color:var(--accent)
}
#aiShell .task-created-at{
color:var(--text-muted);margin:0;font-size:12px
}
#aiShell .task-summary{
color:var(--text-secondary);-webkit-line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;margin:0;font-size:15px;line-height:1.6;display:-webkit-box;overflow:hidden
}
#aiShell .task-summary-wrap.overflow .task-summary{
padding-right:86px
}
#aiShell .task-read-more{
background:linear-gradient(90deg, transparent, var(--bg-elevated) 18px, var(--bg-elevated));color:var(--accent);cursor:pointer;font:inherit;border:0;padding:0 0 0 20px;font-weight:800;line-height:1.6;position:absolute;bottom:0;right:0
}
#aiShell .task-card-bottom{
justify-content:space-between;align-items:center;gap:18px;display:flex
}
#aiShell .task-result-area{
flex:1;min-width:0
}
#aiShell .task-hint, #aiShell .task-error, #aiShell .task-muted{
margin:0;font-size:13px
}
#aiShell .task-hint{
color:var(--accent)
}
#aiShell .task-hint.ok{
color:var(--success)
}
#aiShell .task-error{
color:var(--danger-text)
}
#aiShell .task-muted{
color:var(--text-muted)
}
#aiShell .task-actions{
flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px
}
#aiShell .task-audio{
margin-top:0
}
#aiShell .task-empty{
border:1px dashed var(--border-subtle);color:var(--text-muted);text-align:center;border-radius:12px;padding:60px 20px
}
#aiShell .task-pagination{
justify-content:center;gap:14px;margin-top:20px
}
#aiShell .task-preview-mask{
z-index:1000;background:#0f172ab8;place-items:center;padding:30px;display:grid;position:fixed;inset:0
}
#aiShell .task-detail-dialog{
border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-sheen-soft), var(--bg-elevated);width:min(720px,92vw);max-height:82vh;color:var(--text-primary);box-shadow:var(--shadow-panel);grid-template-rows:auto auto minmax(0,1fr);display:grid;position:relative;overflow:hidden
}
#aiShell .task-detail-head{
border-bottom:1px solid var(--border-subtle);background:var(--surface-muted);justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;display:flex
}
#aiShell .task-detail-head h3, #aiShell .task-detail-meta{
margin:0
}
#aiShell .task-detail-close{
border:1px solid var(--border-subtle);background:var(--bg-elevated);width:32px;height:32px;color:var(--text-primary);cursor:pointer;border-radius:50%;flex:none;place-items:center;font-size:22px;line-height:1;display:grid
}
#aiShell .task-detail-close:hover{
border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)
}
#aiShell .task-detail-meta{
color:var(--text-muted);padding:12px 22px 0;font-size:13px
}
#aiShell .task-detail-content{
color:var(--text-secondary);white-space:pre-wrap;padding:16px 22px 22px;font-size:15px;line-height:1.8;overflow:auto
}
@media(width<=760px){
#aiShell .task-center{
padding:16px
}
#aiShell .task-center-head, #aiShell .task-toolbar, #aiShell .task-card-bottom{
flex-direction:column;align-items:stretch
}
#aiShell .task-actions{
justify-content:flex-start
}

}
#aiShell .step-loading-host{
flex-direction:column;flex:1;min-height:0;display:flex
}
#aiShell .step-root{
overscroll-behavior:contain;flex-direction:column;gap:18px;min-height:100%;display:flex;overflow-y:auto
}
#aiShell .hero-desc-only{
color:var(--text-primary);max-width:720px;margin:0;font-size:16px;font-weight:700;line-height:1.55
}
#aiShell .copy-mode-tabs{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;display:grid
}
#aiShell .copy-mode-tab{
min-height:40px;color:var(--text-muted);cursor:pointer;font:inherit;background:0 0;border:0;border-radius:9px;font-size:14px;font-weight:800
}
#aiShell .copy-mode-tab.active{
background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent)
}
#aiShell .pin-grid{
flex:none;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px;min-height:320px;display:grid
}
@media(width<=1024px){
#aiShell .pin-grid{
grid-template-columns:1fr
}

}
#aiShell .panel{
flex-direction:column;gap:14px;min-height:320px;display:flex
}
#aiShell .quick-module-panel{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;border:1px solid #0000;border-radius:10px;position:relative;overflow:hidden
}
#aiShell .quick-module-panel:before{
content:"";z-index:-1;background:radial-gradient(circle at 18% 0, color-mix(in srgb, var(--panel-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0f, transparent 32%);pointer-events:none;position:absolute;inset:0
}
#aiShell .quick-module-panel:after{
content:"";z-index:1;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 66%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.78;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}
#aiShell .quick-module-panel>*{
z-index:2;position:relative
}
#aiShell .quick-panel-extract, #aiShell .quick-panel-rewrite{
--panel-accent:var(--accent);--panel-accent-2:var(--warning)
}
#aiShell .quick-panel-original{
--panel-accent:var(--success);--panel-accent-2:var(--accent)
}
#aiShell .extract-panel{
flex:none;min-height:0
}
#aiShell .pin-grid>.panel{
min-height:320px
}
#aiShell .panel-head{
justify-content:space-between;align-items:flex-start;gap:12px;display:flex
}
#aiShell .panel-head>div:first-child{
flex:auto;min-width:0
}
#aiShell .head-text-action{
color:var(--text-muted);cursor:pointer;text-underline-offset:3px;white-space:nowrap;background:0 0;border:0;flex-shrink:0;margin-top:2px;padding:0;font-size:13px;font-weight:600;text-decoration:underline
}
#aiShell .head-text-action:hover{
color:var(--text-secondary)
}
#aiShell .copy-btn, #aiShell .rewrite-btn{
flex-shrink:0;margin-top:4px
}
#aiShell .copy-hint{
color:var(--accent);margin:-6px 0 0;font-size:12px;line-height:1.4
}
#aiShell .kicker{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);width:100%;padding:7px 12px;font-size:18px;font-weight:800;line-height:1.25;display:flex
}
#aiShell .hint{
color:var(--text-muted);margin:8px 0 0;font-size:14px;line-height:1.6
}
#aiShell .extract-row{
grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;display:grid
}
#aiShell .extract-main{
flex-direction:column;gap:10px;min-width:0;display:flex
}
#aiShell .extract-input{
resize:vertical;min-height:78px;max-height:120px
}
#aiShell .extract-btn{
width:108px;min-height:42px
}
#aiShell .extract-actions{
flex-direction:column;gap:10px;display:flex
}
#aiShell .paste-hint{
color:var(--accent);margin:-6px 0 0;font-size:12px;line-height:1.4
}
#aiShell .progress-block{
flex-direction:column;gap:8px;display:flex
}
#aiShell .progress-row{
color:var(--text-secondary);justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex
}
#aiShell .progress-track{
background:var(--surface-muted);border-radius:2px;flex:1;height:4px;overflow:hidden
}
#aiShell .progress-fill{
background:var(--accent);border-radius:2px;height:100%;transition:width .3s
}
#aiShell .pct{
font-variant-numeric:tabular-nums;color:var(--accent);text-align:right;min-width:40px;font-weight:700
}
#aiShell .status-line{
color:var(--text-muted);margin:0;font-size:12px
}
#aiShell .error-line{
color:var(--danger-text);margin:0;font-size:12px;line-height:1.45
}
#aiShell .original-script-area{
box-sizing:border-box;resize:none;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;flex:1;height:auto;min-height:0;line-height:1.6;overflow:auto
}
#aiShell .btn-sm{
padding:6px 12px;font-size:12px
}
#aiShell .rewrite{
flex-direction:column;flex:1;gap:14px;min-height:0;display:flex
}
#aiShell .field{
flex-direction:column;flex:1;gap:8px;min-height:0;display:flex
}
#aiShell .rewrite-meta-grid{
flex:none;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:12px;display:grid
}
#aiShell .rewrite-meta-grid .meta-select{
flex-direction:row;align-items:center;gap:10px;width:fit-content;max-width:100%
}
#aiShell .rewrite-meta-grid .meta-select-label{
white-space:nowrap;flex:none
}
#aiShell .rewrite-meta-grid .meta-select-anchor{
flex:0 0 128px;width:128px
}
#aiShell .rewrite-meta-grid .meta-select-trigger{
min-height:34px;padding:0 10px
}
#aiShell .rewrite-output-head{
flex:none
}
#aiShell .pin-grid.viral-copy{
grid-template-columns:1fr;min-height:520px
}
#aiShell .pin-grid.viral-copy>.quick-panel-rewrite{
min-height:520px
}
#aiShell .rewrite-target-field{
min-width:0;color:var(--text-secondary);align-items:center;gap:9px;font-size:12px;font-weight:800;display:flex
}
#aiShell .rewrite-target-field input{
border:1px solid var(--border-subtle);background:var(--bg-input);width:96px;min-height:34px;color:var(--text-primary);font:inherit;border-radius:8px;padding:4px 8px
}
#aiShell .rewrite-target-field em{
min-width:0;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:600;overflow:hidden
}
#aiShell .rewrite-output-head .kicker{
color:var(--text-secondary);font-size:12px;font-weight:800
}
@media(width<=1100px){
#aiShell .rewrite-meta-grid{
grid-template-columns:max-content minmax(0,1fr)
}

}
#aiShell .rewrite-actions{
flex-wrap:wrap;justify-content:flex-end
}
#aiShell .legal-btn{
border-color:var(--accent-border);min-width:108px;min-height:42px;color:var(--accent);font-weight:700
}
#aiShell .legal-btn:hover:not(:disabled){
background:var(--accent-soft)
}
#aiShell .legal-full-row{
flex:none;min-width:0
}
#aiShell .legal-full-row .legal-panel{
height:220px;min-height:220px;margin-top:0
}
#aiShell .legal-full-row .legal-panel--loading{
height:92px;min-height:92px
}
#aiShell .legal-full-row .legal-body{
flex:auto
}
#aiShell .legal-full-row .legal-preview, #aiShell .legal-full-row .legal-advice{
max-height:none
}
#aiShell .legal-error{
margin-top:8px
}
#aiShell .rewrite-area{
resize:none;flex:1;min-width:0;height:auto;min-height:220px;overflow:auto
}
#aiShell .pin-grid.viral-copy .rewrite-area{
min-height:280px
}
#aiShell .row-actions{
flex-wrap:wrap;gap:10px;display:flex
}
#aiShell .rewrite-action{
white-space:nowrap;min-width:108px;min-height:42px
}
#aiShell .next-hint.subtle{
background:var(--surface-muted);align-items:center;gap:12px;padding:14px 18px;display:flex
}
#aiShell .next-label{
color:var(--text-muted);font-size:12px
}
#aiShell .next-val{
color:var(--accent);font-weight:800
}
@media(width<=720px){
#aiShell .extract-row{
grid-template-columns:1fr
}
#aiShell .extract-btn{
width:100%;min-height:44px
}
#aiShell .extract-actions{
width:100%
}

}
@media(width>=1600px) and (height>=850px){
#aiShell .kicker{
font-size:20px
}
#aiShell .hint{
font-size:15px
}

}
#aiShell .step-loading-host{
flex-direction:column;flex:1;min-height:0;display:flex
}
#aiShell .step-root{
flex-direction:column;gap:18px;display:flex
}
#aiShell .main-card{
--panel-accent:var(--accent);--panel-accent-2:var(--warning);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;border:1px solid #0000;border-radius:10px;flex-direction:column;gap:16px;display:flex;position:relative;overflow:hidden
}
#aiShell .main-card:before{
content:"";z-index:-1;background:radial-gradient(circle at 18% 0, color-mix(in srgb, var(--panel-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0f, transparent 32%);pointer-events:none;position:absolute;inset:0
}
#aiShell .main-card:after{
content:"";z-index:1;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 66%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.78;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}
#aiShell .main-card>*{
z-index:2;position:relative
}
#aiShell .head-row{
flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex
}
#aiShell .card-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:7px 12px;font-size:18px;font-weight:800;display:flex
}
#aiShell .subtitle{
color:var(--text-primary)
}
#aiShell .title-row{
flex-wrap:wrap;gap:10px;display:flex
}
#aiShell .title-row .input{
flex:1;min-width:200px
}
#aiShell .shrink{
white-space:nowrap;flex-shrink:0
}
#aiShell .topic{
min-height:100px
}
#aiShell .foot-note{
color:var(--text-muted);max-width:520px;margin:0;font-size:12px;line-height:1.5
}
#aiShell .error-line{
color:var(--danger-text);margin:0;font-size:12px;line-height:1.45
}
#aiShell .step-loading-host{
flex-direction:column;flex:1;min-width:0;min-height:0;display:flex
}
#aiShell .step-av-shell{
width:100%;display:block
}
#aiShell .step-root{
flex-direction:column;gap:18px;display:flex
}
#aiShell .hero-desc-only{
color:var(--text-primary);max-width:720px;margin:0;font-size:16px;font-weight:700;line-height:1.55
}
#aiShell .layout{
grid-template-columns:minmax(320px,1.1fr) minmax(240px,.9fr);align-items:start;gap:16px;min-width:576px;display:grid
}
#aiShell .controls{
flex-direction:column;gap:14px;min-width:0;display:flex;overflow:auto
}
#aiShell .block{
flex-direction:column;gap:12px;display:flex;position:relative
}
#aiShell .av-panel{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;border:1px solid #0000;border-radius:10px;position:relative;overflow:hidden
}
#aiShell .av-panel:before{
content:"";z-index:-1;background:radial-gradient(circle at 18% 0, color-mix(in srgb, var(--panel-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0f, transparent 32%);pointer-events:none;position:absolute;inset:0
}
#aiShell .av-panel:after{
content:"";z-index:1;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 66%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.78;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}
#aiShell .av-panel>*{
z-index:2;position:relative
}
#aiShell .av-panel-audio{
--panel-accent:var(--success);--panel-accent-2:var(--accent)
}
#aiShell .av-panel-video{
--panel-accent:var(--accent);--panel-accent-2:var(--warning)
}
#aiShell .av-panel-preview{
--panel-accent:var(--accent-2);--panel-accent-2:var(--success)
}
#aiShell .block-head{
justify-content:space-between;align-items:center;gap:10px;display:flex
}
#aiShell .block-head h3{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:7px 12px;font-size:16px;font-weight:800;display:flex
}
#aiShell .block-head-actions{
align-items:center;gap:10px;min-width:0;display:inline-flex
}
#aiShell .field-row-head, #aiShell .video-template-field .field-row-head{
align-items:center;gap:8px;display:flex
}
#aiShell .field-row-head{
justify-content:space-between
}
#aiShell .hidden-file-input{
display:none
}
#aiShell .upload-inline-btn{
border-color:var(--accent-border);color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 55%, var(--bg-card));flex-shrink:0
}
#aiShell .upload-inline-btn:hover:not(:disabled){
border-color:var(--accent);background:var(--accent-soft)
}
#aiShell .head-text-action{
color:var(--text-muted);cursor:pointer;text-underline-offset:3px;white-space:nowrap;background:0 0;border:0;padding:0;font-size:13px;font-weight:600;text-decoration:underline
}
#aiShell .head-text-action:hover:not(:disabled){
color:var(--text-secondary)
}
#aiShell .head-text-action:disabled{
opacity:.55;cursor:not-allowed
}
#aiShell .tag{
background:var(--surface-muted-strong);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 8px;font-size:14px
}
#aiShell .tag.ok{
background:var(--success-soft);color:var(--success);border-color:var(--success-border)
}
#aiShell .btn-sm{
padding:8px 12px;font-size:14px
}
#aiShell .mini{
white-space:nowrap;min-height:30px;padding:6px 10px;font-size:12px
}
#aiShell .picker-row{
grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;display:grid
}
#aiShell .refresh-btn{
box-sizing:border-box;white-space:nowrap;justify-content:center;align-items:center;height:40px;min-height:40px;line-height:1
}
#aiShell .full{
width:100%
}
#aiShell .task-action-row, #aiShell .video-bottom-actions{
align-items:center;gap:10px;display:flex
}
#aiShell .task-action-row{
justify-content:flex-start
}
#aiShell .task-action-row .full{
flex:auto
}
#aiShell .task-list-link{
color:var(--accent);cursor:pointer;font:inherit;white-space:nowrap;background:0 0;border:0;flex:none;padding:0;font-size:14px;font-weight:800
}
#aiShell .task-list-link:hover{
color:color-mix(in srgb, var(--accent) 72%, var(--text-primary));text-underline-offset:3px;text-decoration:underline
}
#aiShell .video-bottom-actions{
border-top:1px solid var(--border-subtle);justify-content:flex-end;margin-top:auto;padding-top:10px
}
#aiShell .video-bottom-actions .full{
flex:auto
}
#aiShell .preview-history-panel{
border-top:1px solid var(--border-subtle);flex-direction:column;gap:10px;margin-top:8px;padding-top:12px;display:flex
}
#aiShell .preview-history-actions{
justify-content:flex-start;align-items:center;min-height:32px;display:flex
}
#aiShell .preview-history-panel #aiVideoTask:empty,
#aiShell .preview-history-panel #aiVideoResult:empty{
display:none
}
#aiShell .preview-history-panel #aiVideoTask,
#aiShell .preview-history-panel #aiVideoResult{
min-width:0;margin-top:0
}
#aiShell .av-panel-preview .phone{
align-items:center
}
#aiShell .av-panel-preview .phone-inner{
flex:none;margin-inline:auto
}
#aiShell .preview-history-panel #aiVideoResult:not(:empty){
width:100%;flex-direction:column;align-items:center;display:flex
}
#aiShell .preview-history-panel #aiVideoResult:not(:empty)>video{
display:block;margin-inline:auto
}
#aiShell .error-line{
color:var(--danger-text);margin:0;font-size:14px;line-height:1.45
}
#aiShell .inline-link{
color:var(--accent);text-underline-offset:2px;text-decoration:underline
}
#aiShell .audio-preview{
flex-direction:column;gap:8px;display:flex
}
#aiShell .media-audio-player{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent) 8%, var(--bg-input));min-height:54px;box-shadow:inset 0 1px 0 #ffffff42, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);border-radius:10px;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;display:grid
}
#aiShell .media-audio-play{
border:1px solid var(--accent-border);background:linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, var(--bg-card))), var(--bg-card);width:38px;height:38px;color:var(--accent);cursor:pointer;box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .media-audio-play:hover{
border-color:var(--accent);background:var(--accent-soft)
}
#aiShell .media-audio-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid;width:0;height:0;margin-left:3px
}
#aiShell .media-audio-play-icon.pause{
background:linear-gradient(90deg,currentColor 0 36%,#0000 36% 64%,currentColor 64% 100%);border:0;width:12px;height:14px;margin-left:0
}
#aiShell .media-audio-main{
flex-direction:column;gap:7px;min-width:0;display:flex
}
#aiShell .media-audio-meta{
min-width:0;color:var(--text-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:800;display:flex
}
#aiShell .media-audio-meta span:first-child{
min-width:0;color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden
}
#aiShell .media-audio-range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:14px
}
#aiShell .media-audio-range::-webkit-slider-runnable-track{
border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), var(--surface-muted-strong) var(--range-fill), var(--surface-muted-strong) 100%);border-radius:999px;height:6px
}
#aiShell .media-audio-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:14px;height:14px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px;margin-top:-5px
}
#aiShell .media-audio-range::-moz-range-track{
border:1px solid var(--border-subtle);background:var(--surface-muted-strong);border-radius:999px;height:6px
}
#aiShell .media-audio-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}
#aiShell .media-audio-range::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);width:10px;height:10px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px
}
#aiShell .media-audio-native{
display:none
}
#aiShell .mono-inline{
font-family:var(--font-sans);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 6px;font-size:12px
}
#aiShell .hint-line{
color:var(--text-muted);margin:0;font-size:12px;line-height:1.45
}
#aiShell .submitted-task-hint{
width:fit-content;max-width:100%;color:var(--accent);background:linear-gradient(105deg, var(--accent) 0%, var(--accent) 36%, var(--accent-contrast) 48%, var(--accent-2) 56%, var(--accent) 68%, var(--accent) 100%);-webkit-text-fill-color:transparent;background-position:140% 0;background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:2.4s linear infinite submitted-task-wave-50195aa2
}
#aiShell .submitted-task-status{
gap:6px;display:grid
}
#aiShell .generation-progress-panel{
border:1px solid color-mix(in srgb, var(--panel-accent) 26%, var(--border-subtle));background:linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 13%, transparent), color-mix(in srgb, var(--panel-accent-2) 9%, transparent)), color-mix(in srgb, var(--bg-card) 94%, transparent);border-radius:10px;margin-top:4px;padding:12px 14px
}
#aiShell .generation-progress-panel .hint-line{
color:var(--text-primary);margin:0;font-weight:700
}
#aiShell .submitted-task-progress{
grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;display:grid
}
#aiShell .submitted-task-progress-track{
background:#3b82f624;border:1px solid #3b82f62e;border-radius:999px;height:11px;overflow:hidden
}
#aiShell .submitted-task-progress-fill{
border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .45s
}
#aiShell .submitted-task-progress-text{
text-align:right;min-width:34px;color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px
}
@keyframes submitted-task-wave-50195aa2{
0%{background-position:140% 0}to{background-position:-140% 0}
}
#aiShell .wait-hint{
width:fit-content;max-width:100%;color:var(--accent);margin-top:-4px;position:relative;overflow:hidden
}
#aiShell .wait-hint:after{
content:"";pointer-events:none;mix-blend-mode:screen;background:linear-gradient(100deg,#0000 0%,#fff0 35%,#ffffffbf 50%,#fff0 65%,#0000 100%);animation:3s ease-in-out infinite wait-hint-shine-50195aa2;position:absolute;inset:0;transform:translate(-120%)
}
@keyframes wait-hint-shine-50195aa2{
0%{transform:translate(-120%)}80%,to{transform:translate(120%)}
}
#aiShell .picker-trigger{
text-align:left;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;color:var(--text-primary);cursor:pointer;font:inherit;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;display:flex
}
#aiShell .picker-trigger:disabled{
opacity:.55;cursor:not-allowed
}
#aiShell .picker-trigger:hover:not(:disabled){
border-color:var(--accent-border)
}
#aiShell .language-select{
cursor:pointer;width:100%
}
#aiShell .picker-trigger-text{
text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex-shrink:0;width:0;height:0
}
#aiShell .upload-zone{
border-radius:var(--radius-md);background:var(--surface-muted);border:1px dashed var(--border-hover);flex-direction:column;align-items:flex-start;gap:8px;padding:12px;display:flex
}
#aiShell .loop-mode-options{
grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid
}
@media(width<=700px){
#aiShell .loop-mode-options{
grid-template-columns:1fr
}

}
#aiShell .loop-mode-option{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-muted);cursor:pointer;align-items:flex-start;gap:9px;min-width:0;padding:10px 12px;display:flex
}
#aiShell .loop-mode-option.on{
border-color:var(--input-focus-border);background:var(--accent-soft)
}
#aiShell .loop-mode-option input{
accent-color:var(--accent);flex-shrink:0;margin-top:3px
}
#aiShell .loop-mode-main{
flex-direction:column;gap:3px;min-width:0;display:flex
}
#aiShell .loop-mode-title{
color:var(--text-primary);font-size:13px;font-weight:800
}
#aiShell .loop-mode-desc{
color:var(--text-muted);font-size:11px;line-height:1.45
}
#aiShell .tiny{
color:var(--text-muted);font-size:12px
}
/* 音视频步骤右栏原来 sticky top:12px：一进页面就比左栏低 12px（卡片顶边不齐），
   滚动时还吸顶悬浮。业主要求对齐且跟着滚 —— 改为普通文档流。 */
#aiShell .preview{
min-width:0;position:static;top:auto
}
#aiShell .preview-card{
flex-direction:column;gap:10px;display:flex
}
#aiShell .preview-top{
justify-content:space-between;align-items:center;gap:10px;display:flex
}
#aiShell .icon-btn{
border:1px solid var(--border-subtle);background:var(--surface-muted);color:var(--text-secondary);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:12px
}
#aiShell .icon-btn:hover{
color:var(--text-primary)
}
#aiShell .pv-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);width:100%;margin:0;padding:7px 12px;font-size:16px;font-weight:800;display:flex
}
#aiShell .pv-desc{
color:var(--text-muted);margin:0;font-size:12px;line-height:1.5
}
#aiShell .phone{
justify-content:center;margin-top:8px;display:flex
}
#aiShell .phone-inner{
aspect-ratio:9/16;background:radial-gradient(circle at 30% 15%,#5eead41f,#0000 45%),#05080d;border:1px solid #ffffff1a;border-radius:20px;place-items:center;width:min(100%,280px);display:grid;position:relative;overflow:hidden
}
#aiShell .wait{
color:var(--text-muted);font-size:14px
}
#aiShell .fake-thumb{
background:linear-gradient(160deg,#1a2e28,#0a1018);position:absolute;inset:0
}
#aiShell .pv-video{
object-fit:cover;border-radius:inherit;width:100%;height:100%
}

/* 竖屏预览进入浏览器原生全屏后，始终保持 9:16 画面并居中留黑边。 */
#aiShell .pv-video:fullscreen,
#aiShell .pv-video:-webkit-full-screen{
aspect-ratio:9/16!important;
object-fit:contain!important;
object-position:center center!important;
background:#000!important;
border-radius:0!important;
width:100vw!important;
height:100vh!important;
max-width:none!important;
max-height:none!important;
}

#aiShell .phone-inner:fullscreen,
#aiShell .phone-inner:-webkit-full-screen{
box-sizing:border-box!important;
background:#000!important;
border:0!important;
border-radius:0!important;
width:100vw!important;
height:100vh!important;
display:grid!important;
place-items:center!important;
}

#aiShell .phone-inner:fullscreen .pv-video,
#aiShell .phone-inner:-webkit-full-screen .pv-video{
aspect-ratio:9/16!important;
object-fit:contain!important;
object-position:center center!important;
background:#000!important;
border-radius:0!important;
width:min(100vw,56.25vh)!important;
height:min(100vh,177.7778vw)!important;
}
#aiShell .modal-backdrop{
z-index:10001;background:var(--overlay-modal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;padding:24px;display:grid;position:fixed;inset:0
}
#aiShell .modal-card{
border-radius:var(--radius-xl);background:var(--bg-elevated);border:1px solid var(--border-strong);width:min(100%,480px);max-height:min(90vh,720px);box-shadow:var(--shadow-glow);flex-direction:column;padding:20px 22px 16px;display:flex
}
#aiShell .modal-card-wide{
width:min(100%,560px)
}
#aiShell .modal-title{
margin:0 0 6px;font-size:17px;font-weight:800
}
#aiShell .modal-desc{
color:var(--text-muted);margin:0 0 12px;font-size:14px;line-height:1.45
}
#aiShell .modal-scroll{
flex-direction:column;flex:1;gap:8px;min-height:0;padding-right:4px;display:flex;overflow:auto
}
#aiShell .modal-empty{
color:var(--text-muted);text-align:center;border:1px dashed var(--border-subtle);border-radius:var(--radius-md);margin:0;padding:12px;font-size:14px
}
#aiShell .pick-row{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-muted);cursor:pointer;align-items:center;gap:12px;padding:10px 12px;display:flex
}
#aiShell .pick-row:hover{
border-color:var(--border-hover)
}
#aiShell .pick-row.on{
border-color:var(--input-focus-border);background:var(--accent-soft)
}
#aiShell .pick-row-av{
align-items:flex-start
}
#aiShell .pick-radio{
accent-color:var(--accent);flex-shrink:0;margin-top:4px
}
#aiShell .pick-main{
flex-direction:column;flex:auto;gap:2px;min-width:0;display:flex
}
#aiShell .pick-name{
text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;line-height:1.35;overflow:hidden
}
#aiShell .pick-sub{
color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;overflow:hidden
}
#aiShell .mono{
font-family:var(--font-sans);word-break:normal
}
#aiShell .pick-audio{
flex-shrink:0;justify-content:flex-end;align-items:center;gap:8px;width:260px;min-height:42px;display:flex
}
#aiShell .pick-audio-btn{
width:34px;height:34px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:0 0 34px;justify-content:center;align-items:center;padding:0;line-height:0;display:inline-flex
}
#aiShell .pick-audio-btn:hover{
background:var(--surface-muted)
}
#aiShell .pick-audio-btn.danger{
color:var(--danger)
}
#aiShell .pick-audio-btn.danger:hover{
background:var(--danger-soft)
}
#aiShell .pick-audio-btn svg{
fill:currentColor;flex-shrink:0;width:20px;height:20px;display:block
}
#aiShell .pick-audio-mid{
flex-direction:column;flex:0 0 58px;align-items:stretch;gap:4px;width:58px;display:flex
}
#aiShell .pick-audio-time{
text-align:center;font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:12px
}
#aiShell .pick-rate-wrap{
flex:0 0 54px;width:54px;position:relative
}
#aiShell .pick-rate{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:54px;height:28px;color:var(--text-secondary);font:inherit;text-align:center;cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .pick-rate:hover, #aiShell .pick-rate.on{
color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-soft-strong) 36%, transparent)
}
#aiShell .pick-rate:focus{
outline:2px solid var(--input-focus-border);outline-offset:1px
}
#aiShell .pick-rate-menu{
z-index:13000;border:1px solid var(--accent-border);background:var(--surface-sheen-soft), var(--bg-elevated);border-radius:8px;min-width:72px;padding:5px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 16px 36px #00000047,inset 0 1px #ffffff29
}
#aiShell .pick-rate-option{
width:100%;min-height:28px;color:var(--text-secondary);cursor:pointer;font:inherit;text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;padding:5px 8px;font-size:12px;font-weight:800
}
#aiShell .pick-rate-option:hover, #aiShell .pick-rate-option.active{
border-color:color-mix(in srgb, var(--accent-border) 60%, transparent);background:var(--accent-soft);color:var(--accent)
}
#aiShell .pick-progress{
background:var(--surface-muted-strong);border-radius:999px;width:100%;height:3px;overflow:hidden
}
#aiShell .pick-progress-fill{
border-radius:inherit;background:var(--accent);height:100%;transition:width .12s linear
}
#aiShell .av-thumb{
object-fit:cover;border:1px solid var(--border-subtle);background:#000;border-radius:10px;flex-shrink:0;width:72px;height:96px
}
#aiShell .av-thumb.ph{
color:var(--text-muted);place-items:center;font-size:12px;display:grid
}
#aiShell .modal-loading{
color:var(--text-muted);margin:0 0 8px;font-size:12px
}
#aiShell .modal-pager{
border-top:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:4px;padding:10px 0 4px;display:flex
}
#aiShell .pager-meta{
color:var(--text-muted);text-align:center;flex:1;min-width:0;font-size:12px
}
#aiShell .modal-actions{
border-top:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:12px;display:flex
}
#aiShell .step-loading-host{
min-height:max-content;display:block
}
#aiShell .step-root{
flex-direction:column;gap:16px;min-height:max-content;display:flex
}
#aiShell .hero-desc-only{
color:var(--text-primary);max-width:720px;margin:0;font-size:16px;font-weight:700;line-height:1.55
}
#aiShell .layout-grid{
grid-template-columns:minmax(520px,1.42fr) minmax(320px,.88fr);align-items:stretch;gap:14px;min-width:720px;display:grid
}
#aiShell .overlay-style-sections{
border-top:1px solid var(--border-subtle);flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;display:flex
}
#aiShell .video-edit-panel-head{
align-items:center
}
#aiShell .template-settings-section{
flex:none
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .template-head-select-btn:hover{
border-color:var(--accent-border);background:color-mix(in srgb, var(--accent-soft) 62%, var(--bg-card-hover))
}
#aiShell .template-card-body{
min-width:0;padding-top:2px
}
#aiShell .template-selected-line{
border:1px solid color-mix(in srgb, var(--accent-border) 45%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 84%, var(--surface-muted-strong));border-radius:8px;align-items:center;gap:8px;min-width:0;min-height:22px;padding:2px 7px;display:flex
}
#aiShell .template-selected-label{
color:var(--text-secondary);flex:none;font-size:12px;font-weight:700
}
#aiShell .template-selected-name{
text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-primary);flex:auto;font-size:12px;font-weight:800;overflow:hidden
}
#aiShell .template-trash-btn{
border:1px solid color-mix(in srgb, var(--danger) 38%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 90%, var(--danger) 6%);width:24px;height:24px;color:var(--danger);cursor:pointer;border-radius:50%;flex:none;place-items:center;padding:0;display:inline-grid
}
#aiShell .template-trash-btn:hover{
background:color-mix(in srgb, var(--danger) 14%, var(--bg-card))
}
#aiShell .template-trash-btn svg{
width:14px;height:14px
}
#aiShell .template-dialog-empty, #aiShell .template-dialog-error{
min-height:86px;color:var(--text-secondary);flex:1;place-items:center;margin:0;font-size:13px;display:grid
}
#aiShell .template-dialog-error{
color:var(--danger)
}
#aiShell .subtitle-title-template-grid{
grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-right:4px;display:grid;overflow:auto
}
#aiShell .subtitle-title-template-card{
text-align:left;color:var(--text-primary);background:color-mix(in srgb, var(--bg-card) 88%, var(--surface-muted-strong));border:1px solid color-mix(in srgb, var(--accent-border) 42%, var(--border-subtle));cursor:pointer;border-radius:8px;gap:8px;padding:10px;display:grid;position:relative
}
#aiShell .subtitle-title-template-card.active, #aiShell .subtitle-title-template-card:hover{
border-color:var(--warning)
}
#aiShell .subtitle-title-template-card.active{
box-shadow:0 0 0 3px color-mix(in srgb, var(--warning) 30%, transparent), 0 12px 28px color-mix(in srgb, var(--accent-2) 12%, transparent);border-width:2px;padding:9px
}
#aiShell .subtitle-title-template-card.active:before{
content:"已选";z-index:2;background:var(--warning);color:var(--accent-contrast);border-radius:6px 0 8px;padding:3px 8px 4px;font-size:12px;font-weight:900;line-height:1;position:absolute;top:0;left:0
}
#aiShell .subtitle-title-template-card.applied:not(.active){
border-color:color-mix(in srgb, var(--warning) 42%, var(--border-subtle))
}
#aiShell .subtitle-title-template-card strong{
font-size:14px
}
#aiShell .subtitle-title-template-card>span:last-child{
min-height:34px;color:var(--text-secondary);font-size:12px;line-height:1.45
}
#aiShell .template-dialog-footnote{
color:var(--text-secondary);margin-right:auto;font-size:12px
}
#aiShell .template-dialog-cancel, #aiShell .template-dialog-apply{
cursor:pointer;border:0;border-radius:14px;min-height:48px;padding:0 20px;font-size:15px;font-weight:900
}
#aiShell .template-dialog-cancel{
color:var(--text-primary);background:color-mix(in srgb, var(--accent-soft-strong) 42%, var(--bg-card-hover))
}
#aiShell .template-dialog-apply{
color:var(--accent-contrast);background:var(--button-primary-bg);box-shadow:var(--button-primary-shadow)
}
#aiShell .template-dialog-apply:disabled{
cursor:not-allowed;opacity:.52;box-shadow:none
}
#aiShell .template-preview-canvas{
aspect-ratio:9/16;background:linear-gradient(180deg, color-mix(in srgb, var(--accent-contrast) 6%, transparent), color-mix(in srgb, var(--bg-preview) 16%, transparent)), var(--bg-preview);background-position:50%;background-size:cover;border-radius:8px;display:block;position:relative;overflow:hidden;container-type:inline-size
}
@media(width<=860px){
#aiShell .subtitle-title-template-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

}
#aiShell .template-preview-title, #aiShell .template-preview-subtitle{
--anim-x:-50%;--anim-y:-50%;width:86%;transform:translate(var(--anim-x), var(--anim-y));text-align:center;font-weight:900;line-height:1.16;position:absolute
}
#aiShell .overlay-preview.animation-fade, #aiShell .template-preview-title.animation-fade, #aiShell .template-preview-subtitle.animation-fade{
animation:1.8s ease-out infinite quick-smart-fade-637e0029
}
#aiShell .overlay-preview.animation-pop, #aiShell .template-preview-title.animation-pop, #aiShell .template-preview-subtitle.animation-pop{
animation:1.8s ease-out infinite quick-smart-pop-637e0029
}
#aiShell .overlay-preview.animation-slideUp, #aiShell .template-preview-title.animation-slideUp, #aiShell .template-preview-subtitle.animation-slideUp{
animation:1.8s ease-out infinite quick-smart-slide-up-637e0029
}
#aiShell .overlay-preview.animation-slideRight, #aiShell .template-preview-title.animation-slideRight, #aiShell .template-preview-subtitle.animation-slideRight{
animation:1.8s ease-out infinite quick-smart-slide-right-637e0029
}
#aiShell .overlay-preview.animation-slideLeft, #aiShell .template-preview-title.animation-slideLeft, #aiShell .template-preview-subtitle.animation-slideLeft{
animation:1.8s ease-out infinite quick-template-slide-left-637e0029
}
#aiShell .overlay-preview.animation-slideDown, #aiShell .template-preview-title.animation-slideDown, #aiShell .template-preview-subtitle.animation-slideDown{
animation:1.8s ease-out infinite quick-template-slide-down-637e0029
}
#aiShell .overlay-preview.animation-zoom, #aiShell .template-preview-title.animation-zoom, #aiShell .template-preview-subtitle.animation-zoom{
animation:1.8s ease-out infinite quick-template-zoom-637e0029
}
#aiShell .overlay-preview.animation-shake, #aiShell .template-preview-title.animation-shake, #aiShell .template-preview-subtitle.animation-shake{
animation:1.8s ease-out infinite quick-template-shake-637e0029
}
#aiShell .overlay-preview.animation-wordByWord, #aiShell .template-preview-title.animation-wordByWord, #aiShell .template-preview-subtitle.animation-wordByWord{
animation:1.8s steps(5,end) infinite quick-template-word-637e0029
}
#aiShell .pip-anchor-grid{
margin-top:8px
}
#aiShell .pip-settings-section{
padding-top:4px
}
#aiShell .pip-enable-check{
cursor:pointer;align-items:center;gap:8px;display:inline-flex
}
#aiShell .pip-hint{
color:var(--text-muted);margin:6px 0 0;font-size:11px;line-height:1.45
}
#aiShell .pip-preview-overlay{
z-index:4;border:2px solid var(--accent);cursor:grab;touch-action:none;border-radius:6px;position:absolute;overflow:hidden;box-shadow:0 4px 16px #00000059
}
#aiShell .pip-preview-overlay.dragging{
cursor:grabbing;opacity:.92
}
#aiShell .pip-preview-media{
object-fit:cover;pointer-events:none;width:100%;height:auto;max-height:100%;display:block
}
#aiShell .stack{
flex-direction:column;gap:14px;display:flex
}
#aiShell .preview-col{
flex-direction:column;align-self:stretch;gap:14px;height:100%;min-height:0;display:flex
}
#aiShell .settings-col{
min-width:0
}
#aiShell .quick-module-panel{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;border:1px solid #0000;border-radius:10px;position:relative;overflow:hidden
}
#aiShell .quick-module-panel:before{
content:"";z-index:-1;background:radial-gradient(circle at 18% 0, color-mix(in srgb, var(--panel-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0f, transparent 32%);pointer-events:none;position:absolute;inset:0
}
#aiShell .quick-module-panel:after{
content:"";z-index:1;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 66%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.78;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}
#aiShell .quick-module-panel>*{
z-index:2;position:relative
}
#aiShell .quick-panel-overlay{
--panel-accent:var(--accent);--panel-accent-2:var(--warning)
}
#aiShell .quick-panel-smart, #aiShell .quick-panel-smart-preview{
--panel-accent:var(--accent);--panel-accent-2:var(--success)
}
#aiShell .quick-panel-bgm{
--panel-accent:var(--success);--panel-accent-2:var(--accent)
}
#aiShell .quick-panel-final{
--panel-accent:var(--accent-2);--panel-accent-2:var(--success)
}
#aiShell .settings-panel-card{
flex-direction:column;gap:10px;padding:16px;display:flex
}
#aiShell .settings-section{
flex-direction:column;gap:6px;display:flex
}
#aiShell .settings-section+.settings-section{
border-top:1px solid var(--border-subtle);padding-top:10px
}
#aiShell .settings-section-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .settings-section-title-check{
min-width:0;color:var(--text-primary);cursor:pointer;flex:auto;align-items:center;gap:8px;display:inline-flex
}
#aiShell .settings-section-title-check input{
flex:none
}
#aiShell .font-only-settings{
padding-top:4px
}
#aiShell .font-only-settings-title{
color:var(--text-primary);margin:0 0 8px;font-size:14px;font-weight:900
}
#aiShell .font-only-setting-row{
margin:0
}
#aiShell .sec-head{
justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex
}
#aiShell .sec-head h3{
margin:0;font-size:15px
}
#aiShell .sec-title{
margin:0 0 12px;font-size:15px
}
#aiShell .mini{
color:var(--text-muted);font-size:13px
}
#aiShell .mini-line{
color:var(--text-secondary);margin:0 0 10px;font-size:14px
}
#aiShell .hint-mini{
color:var(--text-muted);margin:10px 0 0;font-size:13px;line-height:1.45
}
#aiShell .hint-mini code{
word-break:break-all;font-size:12px
}
#aiShell .check{
color:var(--text-secondary);align-items:center;gap:8px;margin-bottom:10px;display:flex
}
#aiShell .file-hidden{
opacity:0;pointer-events:none;width:1px;height:1px;position:absolute
}
#aiShell .bgm-picker-row{
align-items:center;gap:8px;min-width:0;display:flex
}
#aiShell .bgm-picker-row .select-shell{
flex:1;min-width:0
}
#aiShell .bgm-time{
font-variant-numeric:tabular-nums;min-width:72px;color:var(--text-secondary);text-align:center;white-space:nowrap;flex:none;font-size:14px;line-height:18px
}
#aiShell .bgm-play-btn{
flex:none;width:32px;min-width:32px;min-height:32px;padding:0
}
#aiShell .bgm-play-icon{
border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0;margin-left:2px;display:block
}
#aiShell .bgm-play-icon.pause{
border:0;border-left:3px solid;border-right:3px solid;width:10px;height:12px;margin-left:0
}
#aiShell .bgm-panel audio{
display:none
}
#aiShell .volume-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid
}
#aiShell .slider-row{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .slider-head{
justify-content:space-between;align-items:center;gap:12px;display:flex
}
#aiShell .slider-value{
color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto;font-size:14px;font-weight:800
}
#aiShell .range{
--range-fill:0%;appearance:none;width:100%;height:28px;accent-color:var(--accent);cursor:pointer;background:0 0
}
#aiShell .range::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}
#aiShell .range::-webkit-slider-thumb{
appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}
#aiShell .range::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}
#aiShell .range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}
#aiShell .range::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}
#aiShell .progress-block{
align-items:center;gap:8px;width:100%;max-width:320px;margin:-2px auto 0;display:flex
}
#aiShell .progress-block .progress-track{
border:1px solid var(--border-subtle);background:#fff;border-radius:999px;flex:1;height:5px;overflow:hidden
}
#aiShell .progress-fill{
border-radius:inherit;background:var(--accent);height:100%;transition:width .3s
}
#aiShell .progress-fill--active{
background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2,#7c8cff) 42%, var(--accent) 84%);background-size:200% 100%;animation:1.6s ease-in-out infinite render-progress-shimmer-637e0029
}
@keyframes render-progress-shimmer-637e0029{
0%{background-position:100% 0}to{background-position:-100% 0}
}
#aiShell .pct{
text-align:right;font-variant-numeric:tabular-nums;min-width:34px;color:var(--accent);flex:none;font-size:12px;font-weight:700
}
#aiShell .err-banner{
border-radius:var(--radius-md);background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--danger-text);margin:0 0 10px;padding:10px 12px;font-size:12px;line-height:1.45
}
#aiShell .mid-col{
flex-direction:column;gap:14px;min-width:0;display:flex
}
#aiShell .settings-section .fieldset{
gap:6px
}
#aiShell .settings-section .field{
gap:4px
}
#aiShell .settings-section .setting-row{
gap:8px;min-height:28px
}
#aiShell .settings-panel-card .select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:15px;line-height:18px
}
#aiShell .settings-panel-card .select-chev{
right:12px
}
#aiShell .bgm-select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:15px;line-height:18px
}
#aiShell .bgm-select-shell .select-chev{
right:12px
}
#aiShell .title-preview-input{
box-sizing:border-box;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;color:var(--text-primary);padding:10px 12px;font-size:16px
}
#aiShell .bgm-panel{
flex-direction:column;min-height:0;padding:14px;display:flex
}
#aiShell .preview-panel{
flex-direction:column;gap:10px;width:100%;min-height:0;padding:14px;display:flex;overflow:hidden
}
#aiShell .preview-panel-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .preview-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:6px 10px;font-size:15px;font-weight:800;display:flex
}
#aiShell .preview-frame{
border-radius:8px;width:100%;min-height:130px
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-height:250px;color:var(--text-primary);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff3d, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);background:#000;border-radius:8px;margin:0 auto;padding:0;display:block;position:relative;overflow:hidden
}
#aiShell .final-preview-entry:hover{
border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff3d, 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent)
}
#aiShell .final-preview-thumb{
background:#000;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:hidden
}
#aiShell .final-preview-thumb-video{
object-fit:contain;background:#000;width:100%;height:100%;display:block
}
#aiShell .final-preview-thumb:after{
content:"";z-index:1;-webkit-backdrop-filter:grayscale(.05);backdrop-filter:grayscale(.05);pointer-events:none;background:#1c1e241f;position:absolute;inset:0
}
#aiShell .final-preview-play{
z-index:2;border:3px solid color-mix(in srgb, var(--accent) 72%, transparent);background:color-mix(in srgb, var(--bg-base) 58%, var(--accent) 28%);width:36px;height:36px;color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--bg-base) 35%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 46%, transparent);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
}
#aiShell .final-preview-play-icon{
border-top:8px solid #0000;border-bottom:8px solid #0000;border-left:13px solid;width:0;height:0;margin-left:4px
}
#aiShell .final-preview-copy{
z-index:3;color:#fff;pointer-events:auto;background:0 0;justify-content:space-between;align-items:center;gap:8px;max-width:calc(100% - 16px);padding:0;display:flex;position:absolute;bottom:8px;left:8px;right:8px
}
#aiShell .final-preview-time{
color:#ffffffeb;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;background:#000000ad;border-radius:6px;align-items:center;min-height:24px;padding:3px 8px;font-size:11px;font-weight:800;line-height:1.2;display:inline-flex
}
#aiShell .final-preview-download{
border:1px solid color-mix(in srgb, var(--accent) 66%, transparent);background:color-mix(in srgb, var(--accent) 84%, #111);color:#fff;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-height:24px;padding:3px 8px;font-size:11px;font-weight:900;line-height:1.2;display:inline-flex;box-shadow:0 6px 14px #00000038
}
#aiShell .final-preview-download:hover{
filter:brightness(1.08)
}
#aiShell .preview-empty{
box-sizing:border-box;text-align:center;width:100%;min-height:96px;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;padding:18px 16px;font-size:14px;display:flex
}
#aiShell .preview-empty p{
margin:0 0 8px
}
#aiShell .preview-empty-hint{
opacity:.85;font-size:12px
}
#aiShell .preview-panel-actions{
flex:none;align-items:center;gap:8px;display:flex
}
#aiShell .compare-action{
min-width:54px;min-height:28px;padding:5px 9px;font-size:12px
}
#aiShell .render-action{
flex:none;min-width:84px;min-height:28px;padding:5px 9px;font-size:12px
}
#aiShell .panel-head{
z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex;position:relative
}
#aiShell .quick-panel-overlay>.panel-head{
z-index:50
}
#aiShell .quick-panel-overlay>.overlay-preview-layout{
z-index:1
}
#aiShell .smart-edit-panel{
flex-direction:column;flex:none;gap:12px;padding:14px;display:flex
}
#aiShell .smart-mode-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid
}
#aiShell .smart-mode-card{
border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg-card) 82%, transparent);min-width:0;min-height:58px;color:inherit;cursor:pointer;font:inherit;text-align:left;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex
}
#aiShell .smart-mode-card.active{
border-color:var(--accent);background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 48%, transparent), color-mix(in srgb, var(--success) 30%, transparent)), var(--bg-card);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 14px 28px color-mix(in srgb, var(--accent) 16%, transparent)
}
#aiShell .smart-mode-icon{
border:1px solid color-mix(in srgb, var(--accent) 52%, transparent);background:color-mix(in srgb, var(--accent-soft) 62%, transparent);width:34px;height:34px;color:var(--accent);border-radius:8px;flex:none;place-items:center;font-size:12px;font-weight:900;display:grid
}
#aiShell .smart-mode-card.active .smart-mode-icon{
color:#fff;background:#ffffff29;border-color:#fff6
}
#aiShell .smart-mode-icon.sliders:before{
content:"";opacity:.95;background:linear-gradient(currentColor,currentColor) 0 2px/18px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 7px/18px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/18px 2px no-repeat;width:18px;height:14px
}
#aiShell .smart-mode-copy{
gap:2px;min-width:0;display:grid
}
#aiShell .smart-mode-title{
min-width:0;color:var(--text-primary);align-items:center;gap:6px;font-size:15px;font-weight:900;display:flex
}
#aiShell .smart-mode-title b{
background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);border-radius:999px;flex:none;padding:2px 6px;font-size:10px;line-height:1.2
}
#aiShell .smart-mode-card.active .smart-mode-title, #aiShell .smart-mode-card.active .smart-mode-desc{
color:#fff
}
#aiShell .smart-mode-card.active .smart-mode-title b{
color:#fff;background:#ffffff38
}
#aiShell .smart-mode-desc{
color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;overflow:hidden
}
#aiShell .smart-template-row{
border:1px solid color-mix(in srgb, var(--accent-border) 70%, transparent);background:color-mix(in srgb, var(--accent-soft) 24%, transparent);border-radius:8px;grid-template-columns:minmax(0,1fr) minmax(180px,260px);align-items:center;gap:14px;padding:12px;display:grid
}
#aiShell .smart-workspace{
min-height:420px;display:block
}
#aiShell .smart-template-list, #aiShell .smart-template-preview{
border:1px solid color-mix(in srgb, var(--accent-border) 66%, transparent);background:color-mix(in srgb, var(--bg-card) 78%, transparent);border-radius:8px;min-width:0
}
#aiShell .smart-template-list{
flex-direction:column;gap:12px;min-height:420px;padding:16px;display:flex;overflow:hidden
}
#aiShell .smart-template-grid{
grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px;padding:2px;display:grid;overflow:auto
}
#aiShell .smart-template-card{
border:1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);background:color-mix(in srgb, var(--bg-card) 82%, var(--accent-soft) 18%);min-width:0;box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 8%, transparent);color:var(--text-primary);cursor:pointer;font:inherit;text-align:center;-webkit-user-select:none;user-select:none;border-radius:8px;padding:9px 8px;transition:border-color .18s,box-shadow .18s,transform .18s;display:block;position:relative
}
#aiShell .smart-template-check{
z-index:6;accent-color:#21e0c2;cursor:pointer;filter:drop-shadow(0 2px 5px #0f172a3d);width:18px;height:18px;margin:0;position:absolute;top:8px;left:8px
}
#aiShell .smart-template-card:hover, #aiShell .smart-template-card.active{
border-color:var(--accent);background:color-mix(in srgb, var(--bg-card) 74%, var(--accent-soft) 26%);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 16px 32px color-mix(in srgb, var(--accent) 16%, transparent);transform:translateY(-3px)
}
#aiShell .smart-template-thumb{
aspect-ratio:9/16;background:#07111f;border-radius:6px;width:min(116px,100%);margin:0 auto 8px;display:block;position:relative;overflow:hidden;container-type:inline-size
}
#aiShell .smart-template-thumb img, #aiShell .smart-preview-frame img, #aiShell .smart-preview-video{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .smart-template-thumb img{
transition:filter .18s,transform .18s
}
#aiShell .smart-template-thumb:before{
content:"↗";z-index:4;color:#111827;opacity:0;pointer-events:none;background:#ffffffeb;border-radius:999px;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;font-weight:900;transition:opacity .18s,transform .18s;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.86);box-shadow:0 10px 24px #0f172a3d
}
#aiShell .smart-template-card:hover .smart-template-thumb img{
filter:brightness(.72)saturate(1.04);transform:scale(1.035)
}
#aiShell .smart-template-card:hover .smart-template-thumb:before{
opacity:1;transform:translate(-50%,-50%)scale(1)
}
#aiShell .smart-template-thumb:after{
content:"";z-index:1;background:linear-gradient(#0000 35%,#00000094);position:absolute;inset:0
}
#aiShell .smart-template-thumb.has-scene-preview:after{
background:linear-gradient(#00000005 0%,#00000008 62%,#0000002e 100%)
}
#aiShell .smart-template-thumb-title{
z-index:2;color:#fff;text-shadow:0 1px 3px #0000008c;font-size:9px;font-weight:900;line-height:1.15;position:absolute;bottom:5px;left:5px;right:5px
}
#aiShell .smart-template-scene-preview, #aiShell .smart-preview-scene-layer{
z-index:2;pointer-events:none;position:absolute;inset:0;container-type:inline-size
}
#aiShell .smart-template-scene-text, #aiShell .smart-preview-scene-text{
text-align:center;text-overflow:ellipsis;white-space:pre-line;position:absolute;overflow:hidden;transform:translate(-50%,-50%)
}
#aiShell .smart-template-scene-text{
max-width:92%
}
#aiShell .smart-template-scene-text--card{
-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box
}
#aiShell .smart-preview-scene-text{
max-width:90%
}
#aiShell .smart-template-scene-highlight{
font-weight:900
}
#aiShell .smart-template-scene-text.animation-pop, #aiShell .smart-preview-scene-text.animation-pop{
animation:1.8s ease-out infinite quick-smart-pop-637e0029
}
#aiShell .smart-template-scene-text.animation-slideUp, #aiShell .smart-preview-scene-text.animation-slideUp{
animation:1.8s ease-out infinite quick-smart-slide-up-637e0029
}
#aiShell .smart-template-scene-text.animation-slideRight, #aiShell .smart-preview-scene-text.animation-slideRight{
animation:1.8s ease-out infinite quick-smart-slide-right-637e0029
}
#aiShell .smart-template-scene-text.animation-fade, #aiShell .smart-preview-scene-text.animation-fade{
animation:1.8s ease-out infinite quick-smart-fade-637e0029
}
@keyframes quick-smart-pop-637e0029{
0%{opacity:.32;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(.72)}16%{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(1.12)}28%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(1)}
}
@keyframes quick-smart-slide-up-637e0029{
0%{opacity:.24;transform:translate(var(--anim-x,-50%), calc(var(--anim-y,-50%) + 20px))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes quick-smart-slide-right-637e0029{
0%{opacity:.24;transform:translate(calc(var(--anim-x,-50%) - 28px), var(--anim-y,-50%))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes quick-smart-fade-637e0029{
0%{opacity:0}24%,to{opacity:1}
}
@keyframes quick-template-slide-left-637e0029{
0%{opacity:.24;transform:translate(calc(var(--anim-x,-50%) + 28px), var(--anim-y,-50%))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes quick-template-slide-down-637e0029{
0%{opacity:.24;transform:translate(var(--anim-x,-50%), calc(var(--anim-y,-50%) - 20px))}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%))}
}
@keyframes quick-template-zoom-637e0029{
0%{opacity:.2;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(.42)}24%,to{opacity:1;transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) scale(1)}
}
@keyframes quick-template-shake-637e0029{
0%{transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) rotate(0deg)}8%{transform:translate(calc(var(--anim-x,-50%) - 4px), var(--anim-y,-50%)) rotate(-2deg)}16%{transform:translate(calc(var(--anim-x,-50%) + 4px), var(--anim-y,-50%)) rotate(2deg)}28%,to{transform:translate(var(--anim-x,-50%), var(--anim-y,-50%)) rotate(0deg)}
}
@keyframes quick-template-word-637e0029{
0%{opacity:.15;clip-path:inset(0 100% 0 0)}34%,to{opacity:1;clip-path:inset(0)}
}
#aiShell .smart-template-card strong{
text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900;display:block;overflow:hidden
}
#aiShell .smart-template-card>span:last-child{
color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:10px;display:block;overflow:hidden
}
#aiShell .smart-loading-line{
border:1px dashed color-mix(in srgb, var(--accent-border) 68%, transparent);color:var(--text-muted);text-align:center;border-radius:8px;margin-top:auto;padding:7px 10px;font-size:12px;font-weight:800
}
#aiShell .smart-template-preview{
flex-direction:column;align-items:center;gap:0;padding:10px;display:flex;overflow:hidden
}
#aiShell .smart-preview-frame{
aspect-ratio:9/16;border:1px solid var(--border-subtle);background:#020617;border-radius:8px;align-self:center;width:min(100%,220px);position:relative;overflow:hidden;box-shadow:0 10px 22px #0003
}
#aiShell .smart-preview-frame:after{
content:"";z-index:1;pointer-events:none;background:linear-gradient(#00000042,#0000 30%),linear-gradient(#0000 64%,#0000007a);position:absolute;inset:0
}
#aiShell .smart-preview-title, #aiShell .smart-preview-subtitle{
z-index:2;color:#fff;text-align:center;text-shadow:1px 0 #111827,-1px 0 #111827,0 1px #111827,0 -1px #111827,0 3px 8px #00000080;font-weight:900;line-height:1.18;position:absolute;left:8%;right:8%
}
#aiShell .smart-preview-title{
font-size:24px;top:14%
}
#aiShell .smart-preview-subtitle{
font-size:17px;bottom:16%
}
#aiShell .smart-preview-frame strong{
font-size:20px;bottom:5%
}
#aiShell .smart-preview-meta{
flex-direction:column;align-items:stretch;gap:8px;min-width:0;display:flex
}
#aiShell .smart-preview-meta h3, #aiShell .smart-preview-meta p{
margin:0
}
#aiShell .smart-preview-meta h3{
color:var(--text-primary);font-size:16px;font-weight:900
}
#aiShell .smart-preview-meta p{
color:var(--text-secondary);font-size:12px
}
#aiShell .smart-start-btn, #aiShell .smart-manual-btn{
justify-content:center;width:100%
}
#aiShell .smart-start-btn{
margin-top:4px
}
#aiShell .smart-template-copy{
min-width:0
}
#aiShell .smart-template-copy h3{
color:var(--text-primary);margin:0;font-size:16px;font-weight:900
}
#aiShell .smart-template-copy p{
color:var(--text-muted);margin:4px 0 0;font-size:13px;line-height:1.45
}
#aiShell .smart-template-picker{
justify-self:end
}
#aiShell .smart-edit-bar{
flex-wrap:wrap;gap:7px;margin-top:-4px;display:flex
}
#aiShell .smart-edit-bar span{
border:1px solid color-mix(in srgb, var(--accent-border) 72%, transparent);background:color-mix(in srgb, var(--accent-soft) 48%, transparent);color:var(--accent);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;line-height:1.2
}
#aiShell .panel-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:7px 12px;font-size:17px;font-weight:800;display:flex
}
#aiShell .btn-sm{
padding:6px 12px;font-size:14px
}
#aiShell .bgm-refresh{
white-space:nowrap;flex-shrink:0
}
#aiShell .fieldset{
border:none;flex-direction:column;gap:12px;margin:0;padding:0;display:flex
}
#aiShell .fieldset:disabled{
opacity:.45;pointer-events:none
}
#aiShell .field{
flex-direction:column;gap:6px;display:flex
}
#aiShell .field-label{
color:var(--text-secondary);font-size:14px;font-weight:600
}
#aiShell .select-shell{
width:100%;display:block;position:relative
}
#aiShell .style-select-shell{
flex-shrink:0;align-self:stretch;width:100%;margin-left:0
}
#aiShell .custom-select-wrap{
width:100%;min-width:0;display:block;position:relative
}
#aiShell .custom-select-wrap.open{
z-index:1000;position:relative
}
#aiShell .custom-select-trigger{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 38%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:100%;min-height:38px;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in srgb, var(--accent) 6%, transparent);background-size:auto,240% 100%;border:1px solid #0000;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;font-size:13px;font-weight:800;animation:8s linear infinite quick-select-border-flow-637e0029;display:flex
}
#aiShell .custom-select-trigger:hover:not(:disabled), #aiShell .custom-select-trigger.on{
box-shadow:inset 0 1px 0 #fff3, 0 0 0 3px color-mix(in srgb, var(--accent-soft-strong) 38%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent)
}
#aiShell .custom-select-trigger:disabled{
cursor:not-allowed;opacity:.58
}
#aiShell .custom-select-trigger.on .picker-chev{
transform:rotate(180deg)
}
#aiShell .custom-select-text{
text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0;transition:transform .18s
}
#aiShell .custom-select-menu{
z-index:9999;border:1px solid var(--accent-border);background:var(--surface-sheen-soft), var(--bg-elevated);max-height:220px;box-shadow:0 18px 42px #00000057, 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 #ffffff29;border-radius:8px;padding:6px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto
}
#aiShell .custom-select-menu-inline-hidden{
display:none
}
#aiShell .custom-select-menu-portal{
z-index:2147483647;box-sizing:border-box;position:fixed;right:auto
}
#aiShell .custom-select-option{
width:100%;min-height:30px;color:var(--text-secondary);cursor:pointer;font:inherit;text-align:left;background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;padding:6px 10px;font-size:13px;font-weight:800;line-height:1.3;display:flex
}
#aiShell .custom-select-option:hover, #aiShell .custom-select-option.active{
border-color:color-mix(in srgb, var(--accent-border) 60%, transparent);background:var(--surface-sheen-soft), var(--accent-soft);color:var(--accent)
}
#aiShell .custom-select-option.active{
font-weight:900
}
@keyframes quick-select-border-flow-637e0029{
0%{background-position:0 0,0%}to{background-position:0 0,240%}
}
#aiShell .style-select-shell .custom-select-trigger{
min-height:44px;padding:10px 12px;font-size:14px;line-height:20px
}
#aiShell .select-shell .select{
appearance:none;padding-right:34px
}
#aiShell .select-shell .select::-ms-expand{
display:none
}
#aiShell .select-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);pointer-events:none;width:0;height:0;position:absolute;top:50%;right:14px;transform:translateY(-50%)
}
#aiShell .select-shell .select:disabled+.select-chev{
opacity:.55
}
#aiShell .field-err{
color:var(--danger-text);margin:0;font-size:14px
}
#aiShell .field-hint{
color:var(--text-muted);margin:0;font-size:14px;line-height:1.5
}
#aiShell .field-hint code{
word-break:break-all;font-size:13px
}
#aiShell .row-2{
grid-template-columns:120px 1fr;align-items:end;gap:12px;display:grid
}
#aiShell .setting-row{
grid-template-columns:minmax(96px,124px) minmax(0,1fr);align-items:center;gap:10px;min-height:36px;display:grid
}
#aiShell .setting-row .field-label{
line-height:1.25
}
#aiShell .setting-row .range{
min-width:0
}
#aiShell .setting-row .color-inp{
justify-self:end
}
#aiShell .field.tight{
max-width:160px
}
#aiShell .field.grow{
min-width:0
}
#aiShell .color-inp{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:48px;height:36px;padding:0
}
#aiShell .overlay-editor{
flex-direction:column;gap:12px;min-width:0;padding:16px;display:flex;overflow:hidden auto;container-type:inline-size
}
#aiShell .overlay-preview-layout{
z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;gap:12px;min-width:0;display:grid;position:relative
}
#aiShell .overlay-preview-pane, #aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-preview-pane{
z-index:0;justify-content:flex-start;gap:10px;position:relative
}
#aiShell .overlay-controls-pane{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--surface-muted) 86%, var(--bg-card))) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 46%, transparent), color-mix(in srgb, var(--panel-accent-2) 34%, transparent) 44%, color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 30px color-mix(in srgb, var(--panel-accent) 11%, transparent), inset 0 1px 0 #ffffff38;border:1px solid #0000;border-radius:10px;justify-content:flex-start;gap:8px;padding:9px;position:relative;overflow:hidden
}
#aiShell .overlay-controls-pane:before{
content:"";z-index:-1;background:radial-gradient(circle at 14% 0, color-mix(in srgb, var(--panel-accent) 14%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0d, transparent 30%);pointer-events:none;position:absolute;inset:0
}
#aiShell .overlay-controls-pane:after{
content:"";z-index:0;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 62%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.75;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}
#aiShell .overlay-controls-pane>*{
z-index:1;position:relative
}
#aiShell .edit-preview-stage{
aspect-ratio:9/16;z-index:0;isolation:isolate;border:1px solid var(--border-subtle);touch-action:none;background:#0b0d10;border-radius:8px;align-self:center;width:min(100%,220px);max-width:100%;position:relative;overflow:hidden
}
#aiShell .edit-preview-empty{
box-sizing:border-box;background:radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%), #0b0d10;display:block;position:absolute;inset:0
}
#aiShell .edit-preview-video{
z-index:1;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0b0d10;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .overlay-preview{
z-index:2;box-sizing:border-box;cursor:grab;-webkit-user-select:none;user-select:none;letter-spacing:0;text-align:center;white-space:pre;word-break:keep-all;font-weight:900;line-height:1.14;font-family:var(--font-sans);border:0;border-radius:0;margin:0;position:absolute;transform:none
}
#aiShell .overlay-preview.dragging{
cursor:grabbing;outline:2px solid var(--accent);outline-offset:3px
}
#aiShell .overlay-preview.editing{
cursor:text;outline:2px solid var(--accent);outline-offset:3px
}
#aiShell .title-overlay-preview{
min-height:var(--title-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .subtitle-overlay-preview{
min-height:var(--subtitle-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .title-overlay-preview:before{
content:"";z-index:0;border-radius:inherit;background:var(--title-box-bg,transparent);position:absolute;inset:0
}
#aiShell .overlay-text{
box-sizing:border-box;width:100%;min-height:1.1em;padding:var(--overlay-pad-y,0) var(--overlay-pad-x,0);background:var(--overlay-bg,transparent);white-space:pre;overflow-wrap:normal;word-break:keep-all;-webkit-box-decoration-break:clone;box-decoration-break:clone;outline:none;display:block
}
#aiShell .title-overlay-preview .overlay-text{
z-index:1;padding:var(--title-box-pad,0);background:0 0;position:relative
}
#aiShell .title-overlay-preview .overlay-line{
height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex
}
#aiShell .overlay-line{
white-space:pre;display:block
}
#aiShell .overlay-text[contenteditable=true]{
cursor:text;-webkit-user-select:text;user-select:text
}
#aiShell .resize-handle{
background:var(--accent);cursor:nwse-resize;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-8px;right:-8px;box-shadow:0 1px 5px #00000059
}
#aiShell .subtitle-overlay-preview{
background:0 0
}
#aiShell .subtitle-overlay-preview .overlay-text{
white-space:nowrap
}
#aiShell .title-overlay-preview{
white-space:pre-line;word-break:keep-all
}
#aiShell .template-title-overlay-preview{
cursor:default;pointer-events:none
}
#aiShell .anchor-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;display:grid
}
#aiShell .overlay-position-grid{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 16%, var(--surface-muted));border-radius:10px;padding:9px
}
#aiShell .overlay-controls-pane .field, #aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-controls-pane .field-label, #aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-controls-pane .range, #aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .inline-style-sections{
flex:auto;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;display:grid
}
#aiShell .style-card{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 20%, var(--surface-muted));border-radius:8px;flex:1 1 0;gap:8px;min-width:0;padding:9px
}
#aiShell .style-card-head{
border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:10px;min-height:28px;padding-bottom:7px;display:flex
}
#aiShell .inline-style-sections .fieldset{
gap:7px
}
#aiShell .style-control-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 9px;min-width:0;display:grid
}
#aiShell .compact-color-field{
min-height:46px
}
#aiShell .compact-color-field .color-inp{
width:100%;height:30px
}
#aiShell .title-bg-setting-row, #aiShell .subtitle-bg-setting-row{
grid-column:1/-1
}
#aiShell .title-bg-row{
flex-direction:row;justify-content:space-between;align-items:center;gap:8px;min-height:46px
}
#aiShell .title-bg-toggle{
color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.25;display:inline-flex
}
#aiShell .title-bg-row .color-inp{
flex:0 0 64px;width:64px
}
#aiShell .transparent-color-picker{
flex:0 0 64px;width:64px;height:30px;position:relative
}
#aiShell .transparent-color-picker .color-inp{
width:64px;height:30px
}
#aiShell .transparent-color-picker.is-transparent .color-inp{
opacity:0
}
#aiShell .transparent-color-picker.is-disabled{
opacity:.55
}
#aiShell .transparent-color-swatch{
z-index:1;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);pointer-events:none;background:0 0;position:absolute;inset:0
}
#aiShell .transparent-color-swatch:before{
content:"";border-radius:calc(var(--radius-sm) - 1px);background-color:#fff;background-image:linear-gradient(45deg,#cfd6df 25%,#0000 25%),linear-gradient(-45deg,#cfd6df 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#cfd6df 75%),linear-gradient(-45deg,#0000 75%,#cfd6df 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0
}
#aiShell .transparent-color-label{
z-index:2;color:var(--text-primary);pointer-events:none;background:color-mix(in srgb, var(--bg-card) 48%, transparent);place-items:center;font-size:12px;font-weight:800;display:grid;position:absolute;inset:0
}
#aiShell .inline-style-sections .select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:13px
}
#aiShell .inline-style-sections .font-only-settings-title{
margin:0;font-size:13px
}
#aiShell .style-full-field{
gap:0
}
#aiShell .compact-check{
flex:none;align-items:center;gap:5px;font-size:12px;line-height:1;display:inline-flex
}
#aiShell .compact-check input{
flex:none;margin:0
}
#aiShell .title-preview-input{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:13px
}
#aiShell .title-box-check{
min-height:36px;margin:0
}
#aiShell .title-size-range{
cursor:pointer;min-height:28px
}
#aiShell .step-root{
flex-direction:column;gap:14px;display:flex
}
#aiShell .hero-desc-only{
color:var(--text-primary);max-width:720px;margin:0;font-size:16px;font-weight:700;line-height:1.55
}
#aiShell .hint{
color:var(--text-muted);margin:0;font-size:12px
}
#aiShell .hint.busy{
color:var(--accent)
}
#aiShell .cover-layout{
grid-template-columns:minmax(570px,1fr);align-items:stretch;gap:16px;display:grid
}
@media(width<=900px){
#aiShell .cover-preview-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,320px))
}

}
#aiShell .phone{
--panel-accent:var(--accent);--panel-accent-2:var(--warning);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;box-sizing:border-box;border:1px solid #0000;border-radius:10px;flex-direction:column;gap:14px;min-width:0;height:100%;padding:18px;display:flex;position:relative;overflow:hidden
}
#aiShell .phone:before, #aiShell .side:before{
content:"";z-index:-1;background:radial-gradient(circle at 18% 0, color-mix(in srgb, var(--panel-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0f, transparent 32%);pointer-events:none;position:absolute;inset:0
}
#aiShell .phone:after, #aiShell .side:after{
content:"";z-index:1;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 66%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.78;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}
#aiShell .phone>*, #aiShell .side>*{
z-index:2;position:relative
}
#aiShell .card-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);width:100%;margin:0;padding:7px 12px;font-size:16px;font-weight:700;display:flex
}
#aiShell .cover-preview-grid{
grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;align-items:start;gap:14px;display:none
}
#aiShell .cover-flow-panel{
gap:14px;display:grid
}
#aiShell .cover-flow-tabs{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-input);grid-template-columns:repeat(2,minmax(120px,1fr));justify-self:start;gap:6px;padding:4px;display:inline-grid
}
#aiShell .cover-flow-tab{
min-height:34px;color:var(--text-secondary);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:7px;font-weight:800
}
#aiShell .cover-flow-tab.active{
background:var(--button-primary-bg,var(--accent));color:var(--accent-contrast);box-shadow:var(--button-primary-shadow,none)
}
#aiShell .cover-template-grid{
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:min(58vh,560px);padding:2px;display:grid;overflow:auto
}
#aiShell .cover-template-card{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);background:var(--bg-card);min-width:0;color:var(--text-primary);text-align:left;cursor:pointer;gap:8px;padding:8px;transition:border-color .15s,background .15s,box-shadow .15s;display:grid
}
#aiShell .cover-template-card:hover{
background:var(--bg-card-hover);border-color:var(--border-hover)
}
#aiShell .cover-template-card.selected{
border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft-strong)
}
#aiShell .cover-template-thumb{
aspect-ratio:3/4;background:var(--surface-muted);border-radius:7px;width:100%;position:relative;overflow:hidden
}
#aiShell .cover-template-thumb img{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .cover-template-thumb>svg{
pointer-events:none;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .cover-template-copy{
gap:5px;min-width:0;display:grid
}
#aiShell .cover-template-copy strong{
color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;overflow:hidden
}
#aiShell .cover-template-copy small{
color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;overflow:hidden
}
#aiShell .cover-flow-actions{
justify-content:flex-end;display:flex
}
#aiShell .cover-flow-actions .btn, #aiShell .cover-custom-flow .btn{
justify-content:center;min-width:150px
}
#aiShell .cover-custom-flow{
min-width:0
}
#aiShell .cover-custom-flow p{
color:var(--text-secondary);margin:0;font-size:13px;font-weight:700
}
#aiShell .preview-column{
flex-direction:column;align-items:center;min-width:0;display:flex
}
#aiShell .preview-label{
width:100%;max-width:320px;color:var(--text-secondary);text-align:center;margin:0 0 8px;font-size:12px;font-weight:700
}
#aiShell .frame{
width:100%;max-width:320px;aspect-ratio:var(--cover-aspect,9 / 16);border:1px solid var(--border-subtle);box-shadow:var(--shadow-panel);touch-action:none;border-radius:22px;margin:0 auto;position:relative;overflow:hidden
}
#aiShell .bg-video{
object-fit:cover;pointer-events:auto;background:#000;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .thumb{
background:linear-gradient(165deg,#1f3d32,#0b1218 55%,#05070a),radial-gradient(circle at 50% 20%,#facc151f,#0000 50%);position:absolute;inset:0
}
#aiShell .frame-foot{
max-width:320px;color:var(--text-muted);text-align:center;margin:10px auto 0;font-size:11px;line-height:1.45
}
#aiShell .generated-cover-frame{
aspect-ratio:3/4;border:1px solid var(--border-subtle);width:100%;max-width:320px;box-shadow:var(--shadow-panel);background:#000;border-radius:22px;margin:0 auto;overflow:hidden
}
#aiShell .cover-result{
object-fit:cover;object-position:center;width:100%;height:100%;display:block
}
#aiShell .generated-cover-placeholder{
box-sizing:border-box;color:#ffffffb8;text-align:center;background:#000;justify-content:center;align-items:center;width:100%;height:100%;padding:16px;font-size:14px;font-weight:700;display:flex
}
#aiShell .cover-quick-actions{
grid-template-columns:minmax(0,1fr);gap:10px;width:100%;max-width:320px;margin-top:16px;display:grid
}
#aiShell .cover-quick-actions>.btn:not(.cover-flow-primary){
display:none
}
#aiShell .cover-quick-actions .btn{
white-space:nowrap;justify-content:center;min-height:42px
}
#aiShell .cover-quick-actions:after{
content:"先选择封面模板，再截取视频帧作为背景图，最后进入封面编辑。";color:var(--text-muted);text-align:center;font-size:12px;font-weight:700;line-height:1.5
}
#aiShell .side{
--panel-accent:var(--success);--panel-accent-2:var(--accent);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;box-sizing:border-box;border:1px solid #0000;border-radius:10px;flex-direction:column;place-self:stretch stretch;gap:14px;width:100%;height:100%;display:flex;position:relative;overflow:hidden
}
#aiShell .side h3{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);width:100%;margin:0;padding:7px 12px;font-size:16px;display:flex
}
#aiShell .field{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .field-label{
color:var(--text-muted);font-size:12px
}
#aiShell .field-hint{
color:var(--text-muted);margin:-4px 0 0;font-size:12px;line-height:1.5
}
#aiShell .input{
box-sizing:border-box;border-radius:var(--radius-sm,8px);border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;color:var(--text-primary);padding:10px 12px;font-size:14px
}
#aiShell .title-input-row{
align-items:stretch;gap:8px;width:100%;display:flex
}
#aiShell .title-input{
flex:1;min-width:0
}
#aiShell .btn-ai-title{
white-space:nowrap;border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:var(--button-primary-bg);color:var(--accent-contrast);box-shadow:var(--button-primary-shadow);flex:0 0 124px;justify-content:center
}
#aiShell .btn-ai-title:hover:not(:disabled){
filter:brightness(1.05);transform:translateY(-1px)
}
#aiShell .btn-ai-title:disabled{
opacity:.72;cursor:wait
}
#aiShell .field-error{
color:#dc2626;margin:0;font-size:12px;line-height:1.4
}
#aiShell .snapshot-row{
flex-wrap:wrap;align-items:stretch;gap:8px;width:100%;display:flex
}
#aiShell .snapshot-inp{
flex:1;min-width:140px
}
#aiShell .snapshot-btn{
white-space:nowrap;flex-shrink:0;align-self:center;padding:8px 12px
}
#aiShell .tight-hint{
margin-top:4px
}
#aiShell .range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px
}
#aiShell .range::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}
#aiShell .range::-webkit-slider-thumb{
appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}
#aiShell .range::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}
#aiShell .range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}
#aiShell .range::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}
#aiShell .title-size-range{
height:28px
}
#aiShell .row-2{
grid-template-columns:120px 1fr;align-items:end;gap:12px;display:grid
}
#aiShell .field.tight{
max-width:160px
}
#aiShell .field.grow{
min-width:0
}
#aiShell .color-inp{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);cursor:pointer;background:0 0;width:48px;height:36px;padding:0
}
#aiShell .row{
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:4px;display:grid
}
#aiShell .row .btn{
width:100%
}
#aiShell .btn-ghost{
border:1px solid var(--border-subtle);color:var(--text-primary);background:0 0
}
#aiShell .step-root{
flex-direction:column;min-height:0;display:flex
}
#aiShell .quick-publish-step{
box-sizing:border-box;gap:12px;width:min(100%,1320px);margin:0 auto;padding:8px 8px 18px 0
}
#aiShell .publish-ready-banner{
box-sizing:border-box;text-align:center;justify-items:center;gap:10px;width:min(100%,520px);margin:0 auto 2px;padding:12px 18px;display:none
}
#aiShell .ready-icon{
background:color-mix(in srgb, var(--success) 18%, var(--accent-soft));border-radius:999px;width:42px;height:42px;position:relative
}
#aiShell .ready-icon:before{
content:"";background:color-mix(in srgb, var(--success) 72%, var(--accent));border-radius:999px;position:absolute;inset:10px
}
#aiShell .ready-icon:after{
content:"";border:3px solid #fff;border-width:0 3px 3px 0;width:8px;height:14px;position:absolute;top:13px;left:16px;transform:rotate(45deg)
}
#aiShell .publish-ready-banner h3, #aiShell .publish-ready-banner p{
margin:0
}
#aiShell .publish-ready-banner h3{
color:var(--text-primary);font-size:18px;font-weight:900
}
#aiShell .publish-ready-banner p{
color:var(--text-muted);margin-top:4px;font-size:13px
}
#aiShell .publish-dashboard{
grid-template-columns:minmax(280px,.78fr) minmax(430px,1.22fr) minmax(340px,1fr);align-items:start;gap:14px;min-width:1050px;display:grid
}
#aiShell .publish-left{
align-self:start;gap:14px;min-width:0;display:grid
}
#aiShell .publish-hero, #aiShell .publish-card{
border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 94%, var(--accent-soft));box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 #ffffff73;border-radius:8px
}
#aiShell .publish-hero{
box-sizing:border-box;height:148px;min-height:148px;color:var(--text-primary);background:radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 46%, var(--bg-card)) 0%, color-mix(in srgb, var(--accent-2) 38%, var(--bg-card)) 52%, color-mix(in srgb, var(--surface-muted) 82%, var(--bg-card)) 100%);border-color:color-mix(in srgb, var(--accent) 52%, var(--border-subtle));align-content:center;justify-items:center;gap:14px;padding:16px;display:grid
}
#aiShell .publish-hero>div:not(.hero-ready-copy), #aiShell .publish-hero .publish-stats{
display:none
}
#aiShell .hero-ready-copy{
text-align:center
}
#aiShell .publish-hero h3, #aiShell .publish-hero p{
margin:0
}
#aiShell .publish-hero h3{
font-size:18px;font-weight:900
}
#aiShell .publish-hero p{
color:color-mix(in srgb, var(--text-secondary) 84%, var(--accent));font-size:12px;line-height:1.55
}
#aiShell .publish-stats{
grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid
}
#aiShell .publish-stats span{
background:color-mix(in srgb, var(--bg-card) 72%, var(--accent-soft));border:1px solid color-mix(in srgb, var(--accent) 26%, var(--border-subtle));color:var(--text-secondary);border-radius:7px;gap:2px;padding:10px;font-size:11px;display:grid
}
#aiShell .publish-stats strong{
color:var(--text-primary);font-size:18px
}
#aiShell .publish-card{
flex-direction:column;gap:12px;min-width:0;min-height:0;padding:14px;display:flex
}
#aiShell .section-head{
justify-content:space-between;align-items:flex-start;gap:12px;display:flex
}
#aiShell .platform-card>.section-head, #aiShell .asset-card>.section-head{
display:none
}
#aiShell .section-title-main{
align-items:center;gap:8px;display:flex
}
#aiShell .section-title-main h4{
color:var(--text-primary);margin:0;font-size:20px;font-weight:900
}
#aiShell .section-title-icon{
background:color-mix(in srgb, var(--accent-soft) 72%, var(--bg-card));border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border-subtle));border-radius:8px;place-items:center;width:28px;height:28px;display:inline-grid;position:relative
}
#aiShell .platform-title-icon:before{
content:"";border:2px solid var(--accent);width:14px;height:10px;box-shadow:0 -5px 0 -2px var(--accent), 0 5px 0 -2px var(--accent);border-radius:3px
}
#aiShell .preview-title-icon:before{
content:"";border:2px solid var(--accent);border-radius:4px;width:14px;height:16px
}
#aiShell .preview-title-icon:after{
content:"";border-left:6px solid var(--accent);border-top:4px solid #0000;border-bottom:4px solid #0000;position:absolute;top:9px;left:11px
}
#aiShell .section-head h4{
color:var(--text-primary);margin:2px 0 0;font-size:16px;font-weight:900
}
#aiShell .section-kicker{
color:var(--text-muted);font-size:12px;font-weight:700
}
#aiShell .status-pill, #aiShell .mini-pill, #aiShell .mini-action{
border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);border-radius:999px;flex:none;font-size:12px;font-weight:800
}
#aiShell .status-pill, #aiShell .mini-pill{
padding:5px 10px
}
#aiShell .status-pill.ready{
border-color:color-mix(in srgb, var(--success) 40%, var(--accent-border));background:color-mix(in srgb, var(--success) 14%, var(--bg-card));color:var(--success)
}
#aiShell .mini-action{
cursor:pointer;height:30px;padding:0 12px
}
#aiShell .mini-action:disabled{
cursor:not-allowed;opacity:.55
}
#aiShell .publish-form-fields{
gap:10px;display:grid
}
#aiShell .field{
gap:6px;display:grid
}
#aiShell .field-label{
color:var(--text-secondary);font-size:13px;font-weight:800
}
#aiShell .platform-card{
gap:16px
}
#aiShell .legacy-platform-list{
display:none!important
}
#aiShell .platform-stack{
gap:16px;padding:3px 5px 4px 2px;display:grid;overflow:auto
}
#aiShell .platform-group{
border:1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, var(--accent-soft)), color-mix(in srgb, var(--bg-card) 92%, var(--surface-muted)));box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 5%, transparent), inset 0 1px 0 #ffffff52;border-radius:8px;gap:14px;padding:16px;display:grid
}
#aiShell .platform-group.selected{
border-color:color-mix(in srgb, var(--accent) 56%, var(--border-subtle));background:linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 58%, var(--bg-card)), color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft)));box-shadow:0 14px 28px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 #ffffff61
}
#aiShell .platform-group.unavailable{
opacity:.66
}
#aiShell .platform-group-head{
grid-template-columns:54px 38px minmax(0,1fr) max-content;align-items:center;gap:14px;display:grid
}
#aiShell .platform-group.selected .platform-group-head{
grid-template-columns:54px minmax(0,1fr) max-content
}
#aiShell .platform-group.selected>.platform-group-head>.platform-icon-wrap{
display:none
}
#aiShell .platform-select{
place-items:center;width:54px;height:54px;display:grid;position:relative
}
#aiShell .platform-select input, #aiShell .account-row input{
opacity:0;pointer-events:none;position:absolute
}
#aiShell .platform-check-large{
border:2px solid color-mix(in srgb, var(--accent) 42%, var(--border-subtle));background:var(--bg-card);width:44px;height:44px;box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--bg-card) 78%, transparent);border-radius:12px;position:relative
}
#aiShell .platform-group.selected .platform-check-large{
border-color:var(--accent);background:linear-gradient(135deg, var(--accent), var(--accent-2))
}
#aiShell .platform-group.selected .platform-check-large:after{
content:"";border:3px solid #fff;border-width:0 3px 3px 0;width:10px;height:18px;position:absolute;top:9px;left:15px;transform:rotate(45deg)
}
#aiShell .platform-title-row{
flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex
}
#aiShell .platform-main{
gap:6px
}
#aiShell .platform-title-row em{
background:color-mix(in srgb, var(--accent-soft) 68%, var(--bg-card));color:var(--accent);border-radius:999px;padding:4px 8px;font-size:12px;font-style:normal;font-weight:800
}
#aiShell .platform-manage-btn, #aiShell .change-account-btn{
border:1px solid var(--accent-border);background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;cursor:pointer;border-radius:8px;font-weight:800
}
#aiShell .platform-manage-btn{
min-width:82px;height:38px;padding:0 16px
}
#aiShell .change-account-btn{
height:30px;color:var(--accent);background:var(--bg-card);padding:0 12px
}
#aiShell .account-row-list{
gap:10px;padding-left:0;display:grid
}
#aiShell .account-row{
border:1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent);background:color-mix(in srgb, var(--bg-card) 96%, var(--accent-soft));border-radius:8px;grid-template-columns:22px minmax(0,1fr) max-content max-content;align-items:center;gap:12px;min-height:56px;padding:11px 12px;display:grid;box-shadow:inset 0 1px #ffffff42
}
#aiShell .account-check{
border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border-subtle));background:var(--bg-card);border-radius:5px;width:18px;height:18px;position:relative
}
#aiShell .account-row input:checked+.account-check{
border-color:var(--accent);background:var(--accent)
}
#aiShell .account-row input:checked+.account-check:after{
content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;position:absolute;top:2px;left:5px;transform:rotate(45deg)
}
#aiShell .account-copy{
gap:2px;min-width:0;display:grid
}
#aiShell .account-copy strong, #aiShell .account-copy small{
text-overflow:ellipsis;white-space:nowrap;overflow:hidden
}
#aiShell .account-copy strong{
color:var(--text-primary);font-size:14px;font-weight:900
}
#aiShell .account-copy small{
color:var(--text-muted);font-size:12px
}
#aiShell .auth-pill{
background:color-mix(in srgb, var(--success) 14%, var(--bg-card));color:var(--success);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800
}
#aiShell .platform-empty{
color:var(--text-muted);margin:0;padding-left:66px;font-size:12px
}
#aiShell .platform-list{
gap:9px;padding-right:2px;display:grid;overflow:auto
}
#aiShell .platform-row{
border:1px solid var(--border-subtle);background:var(--bg-card);cursor:pointer;border-radius:8px;grid-template-columns:24px 36px minmax(0,1fr) max-content;align-items:center;gap:10px;min-height:62px;padding:10px;transition:border-color .16s,background .16s,box-shadow .16s;display:grid
}
#aiShell .platform-row:hover:not(.unavailable), #aiShell .platform-row.selected{
border-color:color-mix(in srgb, var(--accent) 52%, var(--border-subtle));background:color-mix(in srgb, var(--accent-soft) 62%, var(--bg-card));box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 10%, transparent)
}
#aiShell .platform-row.unavailable{
cursor:not-allowed;opacity:.58
}
#aiShell .platform-row input{
opacity:0;pointer-events:none;position:absolute
}
#aiShell .platform-check{
border:2px solid color-mix(in srgb, var(--accent) 34%, var(--border-subtle));background:var(--bg-card);border-radius:6px;width:22px;height:22px;position:relative
}
#aiShell .platform-row.selected .platform-check{
border-color:var(--accent);background:linear-gradient(135deg, var(--accent), var(--accent-2))
}
#aiShell .platform-row.selected .platform-check:after{
content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:6px;height:11px;position:absolute;top:3px;left:6px;transform:rotate(45deg)
}
#aiShell .platform-icon-wrap{
background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:8px;place-items:center;width:36px;height:36px;display:grid
}
#aiShell .platform-icon{
object-fit:contain;border-radius:6px;width:24px;height:24px
}
#aiShell .platform-main{
gap:3px;min-width:0;display:grid
}
#aiShell .platform-main strong, #aiShell .platform-main small{
text-overflow:ellipsis;white-space:nowrap;overflow:hidden
}
#aiShell .platform-main strong{
color:var(--text-primary);font-size:14px;font-weight:900
}
#aiShell .platform-main small{
color:var(--text-muted);font-size:12px
}
#aiShell .platform-action{
background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800
}
#aiShell .platform-row.unavailable .platform-action{
background:var(--bg-input);color:var(--text-muted)
}
#aiShell .asset-card{
align-items:stretch
}
#aiShell .asset-card .mini-action{
display:none
}
#aiShell .phone-preview-shell{
aspect-ratio:9/16;border:1px solid color-mix(in srgb, var(--accent) 22%, #1f2937);width:min(100%,240px);box-shadow:0 18px 34px #0f172a33, 0 0 0 7px color-mix(in srgb, var(--accent-soft) 42%, transparent);background:linear-gradient(#ffffff2e,#0000 22%),#111;border-radius:22px;align-self:center;position:relative;overflow:hidden
}
#aiShell .publish-video{
object-fit:cover;background:#000;width:100%;height:100%;display:block
}
#aiShell .preview-empty{
box-sizing:border-box;color:#ffffffc7;text-align:center;align-content:center;place-items:center;gap:8px;width:100%;height:100%;padding:24px;display:grid
}
#aiShell .preview-empty strong{
color:#fff;font-size:15px
}
#aiShell .preview-empty small{
line-height:1.5
}
#aiShell .upload-icon{
background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-radius:14px;place-items:center;width:44px;height:44px;font-size:24px;font-weight:900;display:grid
}
#aiShell .asset-summary{
gap:8px;display:grid
}
#aiShell .asset-summary>div, #aiShell .cover-strip{
border:1px solid var(--border-subtle);background:var(--bg-input);border-radius:8px;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px;display:grid
}
#aiShell .asset-summary span, #aiShell .cover-strip span{
color:var(--text-muted);font-size:12px
}
#aiShell .asset-summary strong, #aiShell .cover-strip strong{
min-width:0;color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;overflow:hidden
}
#aiShell .cover-strip{
grid-template-columns:48px minmax(0,1fr);align-items:center
}
#aiShell .cover-thumb{
object-fit:cover;border-radius:6px;width:48px;height:64px
}
@media(width<=980px){
#aiShell .publish-dashboard{
grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);min-width:0
}
#aiShell .asset-card{
grid-column:1/-1
}

}
@media(width<=760px){
#aiShell .publish-dashboard, #aiShell .publish-left{
grid-template-columns:1fr
}

}
#aiShell .app-shell{
--human-workspace-zoom:1;--human-content-gap:16px;--human-workspace-pad-x:20px;--human-preview-max:320px;flex-direction:column;height:100%;min-height:100%;display:flex
}
#aiShell .top-nav{
z-index:10;border:1px solid var(--border-subtle);background:var(--surface-sheen), var(--bg-elevated);height:64px;box-shadow:var(--shadow-panel);border-width:0 0 1px;flex-shrink:0;align-items:center;gap:16px;padding:0 20px;display:flex;position:relative
}
#aiShell .nav-spacer{
flex:1;min-width:0
}
#aiShell .app-version{
color:var(--text-secondary);letter-spacing:.02em;-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:12px
}
#aiShell .company-block{
width:fit-content;min-width:0;max-width:280px;color:inherit;text-align:left;background:0 0;border:0;flex-shrink:0;align-items:center;gap:12px;padding:0;display:flex
}
#aiShell .company-logo{
border:1px solid var(--accent-border);background:var(--accent-soft);width:38px;height:38px;color:var(--accent);border-radius:10px;justify-content:center;align-items:center;font-size:11px;font-weight:800;display:flex
}
#aiShell .company-name{
text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:18px;font-weight:800;overflow:hidden
}
#aiShell .top-nav-project{
flex-shrink:0;max-width:min(420px,42vw);margin-left:clamp(12px,2vw,28px)
}
#aiShell .nav-actions{
flex-shrink:0;align-items:center;gap:12px;display:flex
}
#aiShell .top-nav-link{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm);height:36px;color:var(--text-primary);background:var(--bg-elevated);white-space:nowrap;justify-content:center;align-items:center;padding:0 12px;font-size:12px;font-weight:800;display:inline-flex
}
#aiShell .top-nav-link:hover{
border-color:var(--accent-border);color:var(--accent);background:var(--accent-soft)
}
#aiShell .local-status{
border-radius:var(--radius-sm);border:1px solid var(--success-border);background:var(--success-soft);height:36px;color:var(--text-secondary);white-space:nowrap;align-items:center;gap:8px;padding:0 12px;font-size:12px;font-weight:700;display:inline-flex
}
#aiShell .local-status.warn{
border-color:var(--danger-border);background:var(--danger-soft)
}
#aiShell .pulse{
background:var(--text-muted);border-radius:50%;width:9px;height:9px
}
#aiShell .pulse.on{
background:var(--success);box-shadow:0 0 0 5px var(--success-soft)
}
#aiShell .pulse.pending{
background:var(--warning);box-shadow:0 0 0 5px var(--warning-soft)
}
#aiShell .main{
gap:var(--human-content-gap);flex:1;min-width:0;min-height:0;display:flex;overflow:hidden
}
#aiShell .module-sidebar{
border:1px solid var(--border-subtle);background:var(--bg-elevated);border-width:0 1px 0 0;flex-direction:column;flex:0 0 66px;align-items:stretch;gap:6px;width:66px;min-height:0;padding:12px 6px;transition:width .18s,flex-basis .18s,padding .18s;display:flex;position:relative;overflow:visible;box-shadow:8px 0 24px #3341550d
}
#aiShell .module-sidebar.collapsed{
border-right-color:var(--border-subtle);background:var(--surface-muted);flex-basis:10px;align-items:center;width:10px;padding:0
}
#aiShell .module-sidebar-toggle{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--surface-muted);width:100%;min-height:28px;color:var(--text-muted);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;display:inline-flex;box-shadow:inset 0 1px #ffffff59,0 8px 18px #0f172a14
}
#aiShell .module-sidebar-toggle:hover{
border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)
}
#aiShell .module-sidebar-toggle span{
border:2px solid;border-width:0 2px 2px 0;width:10px;height:10px;transform:rotate(135deg)
}
#aiShell .module-sidebar-toggle b{
font:inherit;font-weight:900;display:none
}
#aiShell .module-sidebar.collapsed .module-sidebar-toggle{
z-index:30;border-color:var(--accent-border);background:radial-gradient(circle at 65% 18%, #ffffff73, transparent 38%), linear-gradient(180deg, var(--accent-soft-strong), var(--accent-soft)), var(--bg-elevated);width:46px;min-height:98px;color:var(--accent);border-radius:0 18px 18px 0;flex-direction:column;gap:7px;padding:0;position:absolute;top:50%;left:0;transform:translateY(-50%);box-shadow:inset 0 1px #ffffff73,8px 12px 24px #0f172a29
}
#aiShell .module-sidebar.collapsed .module-sidebar-toggle span{
transform:rotate(-45deg)
}
#aiShell .module-sidebar.collapsed .module-sidebar-toggle b{
writing-mode:vertical-rl;letter-spacing:2px;display:block
}
#aiShell .module-sidebar-spacer{
flex:auto;min-height:12px
}
#aiShell .module-sidebar-item{
min-height:58px;color:var(--text-muted);cursor:pointer;text-align:center;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:7px 4px;font-size:12px;font-weight:700;line-height:1.15;transition:background .18s,border-color .18s,color .18s;display:flex;position:relative
}
#aiShell .module-sidebar-item:hover{
background:var(--accent-soft);color:var(--text-primary)
}
#aiShell .module-sidebar-item.active{
border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)
}
#aiShell .module-sidebar-item.active:before{
content:"";background:var(--accent);border-radius:0 999px 999px 0;width:3px;position:absolute;top:8px;bottom:8px;left:-6px
}
#aiShell .module-sidebar-item:focus-visible{
outline:3px solid var(--accent-soft-strong);outline-offset:2px
}
#aiShell .module-sidebar-icon{
color:currentColor;border:1px solid color-mix(in srgb, currentColor 18%, transparent);background:radial-gradient(circle at 30% 20%, #ffffff5c, transparent 42%), color-mix(in srgb, currentColor 10%, transparent);border-radius:9px;flex:0 0 30px;width:30px;height:30px;display:block;position:relative;box-shadow:inset 0 1px #ffffff59,0 6px 14px #0f172a14
}
#aiShell .module-sidebar-icon:before, #aiShell .module-sidebar-icon:after{
content:"";box-sizing:border-box;position:absolute
}
#aiShell .module-icon-home .module-sidebar-icon:before{
border:2px solid;border-top:0;border-radius:3px;width:16px;height:10px;top:13px;left:7px
}
#aiShell .module-icon-home .module-sidebar-icon:after{
border:0;border-top:2px solid;border-left:2px solid;width:14px;height:14px;top:7px;left:8px;transform:rotate(45deg)
}
#aiShell .module-icon-bolt .module-sidebar-icon:before{
display:none
}
#aiShell .module-icon-bolt .module-sidebar-icon:after{
clip-path:polygon(56% 0,16% 48%,48% 48%,34% 100%,84% 40%,52% 40%);background:currentColor;width:13px;height:20px;top:5px;left:9px
}
#aiShell .module-icon-workspace .module-sidebar-icon:before{
border:2px solid;border-radius:4px;width:18px;height:16px;top:7px;left:6px
}
#aiShell .module-icon-workspace .module-sidebar-icon:after{
background:currentColor;border-radius:1px;width:4px;height:4px;top:11px;left:10px;box-shadow:7px 0,0 6px,7px 6px
}
#aiShell .module-icon-avatar .module-sidebar-icon:before{
border:2px solid;border-radius:50%;width:8px;height:8px;top:6px;left:10px
}
#aiShell .module-icon-avatar .module-sidebar-icon:after{
border:2px solid;border-radius:9px 9px 4px 4px;width:16px;height:9px;bottom:5px;left:7px
}
#aiShell .module-icon-voice .module-sidebar-icon:before{
clip-path:polygon(0 30%,38% 30%,100% 0,100% 100%,38% 70%,0 70%);background:currentColor;width:11px;height:9px;top:11px;left:7px
}
#aiShell .module-icon-voice .module-sidebar-icon:after{
border:2px solid #0000;border-left:0;border-right-color:currentColor;border-radius:0 999px 999px 0;width:6px;height:13px;top:9px;left:18px;box-shadow:3px 0 0 -1px
}
#aiShell .module-icon-account .module-sidebar-icon:before{
border:2px solid;border-radius:3px;width:18px;height:14px;top:8px;left:6px
}
#aiShell .module-icon-account .module-sidebar-icon:after{
background:currentColor;width:10px;height:2px;top:13px;left:10px;box-shadow:0 4px
}
#aiShell .module-sidebar-title{
overflow-wrap:anywhere;width:100%;display:block
}
#aiShell .module-task-badge{
color:#fff;background:#dc2626;border-radius:999px;place-items:center;min-width:18px;height:18px;padding:0 4px;font-size:11px;line-height:1;display:grid;position:absolute;top:4px;right:5px
}
#aiShell .module-icon-tasks .module-sidebar-icon:before{
border:2px solid;border-radius:50%;width:18px;height:18px;top:6px;left:6px
}
#aiShell .module-icon-tasks .module-sidebar-icon:after{
clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;width:8px;height:10px;top:10px;left:13px
}
#aiShell .workflow-sidebar{
box-sizing:border-box;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 52%, var(--bg-card)), color-mix(in srgb, var(--surface-muted) 72%, var(--bg-card)));width:clamp(220px,20vw,318px);min-height:0;box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 16px 38px #0f172a1f, inset 0 1px 0 #ffffff57;zoom:var(--human-workspace-zoom);border-radius:10px;flex-direction:column;flex:0 0 clamp(220px,20vw,318px);gap:16px;margin:10px 0 12px;padding:16px 14px;display:flex;overflow:visible
}
#aiShell .workspace-main{
flex:1;min-width:0;min-height:0;padding:10px 0 0;overflow:auto
}
#aiShell .content-workspace-main{
flex-direction:column;display:flex;overflow:hidden
}
#aiShell .content-workspace{
zoom:var(--human-workspace-zoom);flex-direction:column;flex:1;min-height:0;display:flex
}
#aiShell .workspace{
min-height:0;padding:0 var(--human-workspace-pad-x) 10px 0;flex-direction:column;flex:1;display:flex;overflow:auto
}
#aiShell .workspace>*{
flex:1
}
#aiShell .content-workspace .input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]), #aiShell .content-workspace .textarea, #aiShell .content-workspace .select, #aiShell .content-workspace .picker-trigger, #aiShell .content-workspace .select-like, #aiShell .content-workspace .title-preview-input{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 78%, transparent), color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--accent-2) 38%, transparent), color-mix(in srgb, var(--success) 32%, transparent), color-mix(in srgb, var(--border-subtle) 78%, transparent)) border-box;box-shadow:inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in srgb, var(--accent) 6%, transparent);background-size:auto,260% 100%;border:1px solid #0000;transition:box-shadow .18s,background-color .18s,filter .18s;animation:8s linear infinite quick-input-border-flow-c5a99627
}
#aiShell .content-workspace .input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):hover, #aiShell .content-workspace .textarea:hover, #aiShell .content-workspace .select:hover, #aiShell .content-workspace .picker-trigger:hover, #aiShell .content-workspace .select-like:hover, #aiShell .content-workspace .title-preview-input:hover, #aiShell .content-workspace .input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):focus, #aiShell .content-workspace .textarea:focus, #aiShell .content-workspace .select:focus, #aiShell .content-workspace .picker-trigger:focus-visible, #aiShell .content-workspace .select-like:focus-visible, #aiShell .content-workspace .title-preview-input:focus{
box-shadow:inset 0 1px 0 #fff3, 0 0 0 3px color-mix(in srgb, var(--accent-soft-strong) 44%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent);filter:saturate(1.04)
}
@keyframes quick-input-border-flow-c5a99627{
0%{background-position:0 0,0%}to{background-position:0 0,260%}
}
#aiShell .home-empty{
min-height:100%
}
#aiShell .workflow-footer{
min-height:62px;margin:0 var(--human-workspace-pad-x) 10px 0;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 24%, var(--bg-card));border-radius:8px;flex:none;justify-content:flex-end;align-items:center;gap:12px;padding:10px 12px;display:flex;box-shadow:0 8px 20px #0f172a14,inset 0 1px #ffffff52
}
#aiShell .footer-nav-btn{
min-width:124px;min-height:38px
}
#aiShell .publish-footer-options{
align-items:center;gap:14px;display:flex
}
#aiShell .publish-platform-option{
cursor:pointer;align-items:center;gap:8px;display:inline-flex
}
#aiShell .publish-platform-option.unavailable{
cursor:not-allowed
}
#aiShell .publish-platform-check{
appearance:none;border:1px solid var(--border-subtle);background:var(--bg-input);cursor:pointer;border-radius:4px;place-content:center;width:16px;height:16px;margin:0;display:grid
}
#aiShell .publish-platform-check:checked{
border-color:var(--accent);background:var(--accent)
}
#aiShell .publish-platform-check:checked:after{
content:"";border:solid var(--accent-contrast);border-width:0 2px 2px 0;width:4px;height:8px;margin-top:-1px;transform:rotate(45deg)
}
#aiShell .publish-platform-check:disabled{
cursor:not-allowed;opacity:.55
}
#aiShell .publish-platform-icon-wrap{
border:1px solid var(--border-subtle);background:var(--card-bg);border-radius:10px;flex:none;width:38px;height:38px;position:relative;overflow:hidden
}
#aiShell .publish-platform-icon{
object-fit:cover;width:100%;height:100%;display:block
}
#aiShell .publish-platform-option.unavailable .publish-platform-icon{
opacity:.82
}
#aiShell .publish-platform-option.unavailable .publish-platform-icon-wrap:after{
content:"";background:var(--overlay-strong);position:absolute;inset:0
}
#aiShell .footer-publish-btn{
min-width:118px;min-height:38px
}
#aiShell .fade-enter-active, #aiShell .fade-leave-active{
transition:opacity .16s,transform .16s
}
#aiShell .fade-enter-from, #aiShell .fade-leave-to{
opacity:0;transform:translateY(4px)
}
@media(width<=620px){
#aiShell .local-status span:last-child{
display:none
}

}
@media(width>=1600px) and (height>=850px){
#aiShell .app-shell{
--human-workspace-zoom:1.08;--human-content-gap:18px;--human-workspace-pad-x:24px;--human-preview-max:360px
}

}
@media(width>=1920px) and (height>=980px){
#aiShell .app-shell{
--human-workspace-zoom:1.16;--human-content-gap:20px;--human-workspace-pad-x:28px;--human-preview-max:410px
}

}
@media(width>=2400px) and (height>=1200px){
#aiShell .app-shell{
--human-workspace-zoom:1.24;--human-content-gap:24px;--human-workspace-pad-x:32px;--human-preview-max:460px
}

}

/* ---------- 数字人外壳 v2 补充（缺失的少量布局类） ---------- */
#aiShell .publish-platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
#aiShell .publish-platform-grid label{display:flex;align-items:center;gap:6px;border:1px solid var(--border-subtle);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--text-secondary);cursor:pointer;background:var(--bg-card)}
#aiShell .publish-platform-grid label:has(input:checked){border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)}
#aiShell .publish-platform-grid input{accent-color:var(--accent)}
#aiShell .edit-layout{display:flex;gap:18px;min-height:0}
#aiShell .edit-layout .col.controls{flex:1.15;min-width:0}
#aiShell .edit-layout .col.preview{flex:1;min-width:0}
#aiShell .cover-layout{display:flex;gap:18px;min-height:0}
#aiShell .cover-layout .col.controls{flex:1;min-width:0}
#aiShell .cover-layout .col.preview{flex:1;min-width:0}
#aiShell select.select,#aiShell .select{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);font-size:13px;height:36px;padding:0 12px;outline:none;font-family:var(--font-sans)}
#aiShell select.select:focus,#aiShell .select:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)}
#aiShell select.select option{background:#0d1117;color:#f0f4f8}
#aiShell .field .input,#aiShell .field input.input,#aiShell .head-row .input{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);font-size:13px;height:36px;padding:0 12px;outline:none;width:100%;font-family:var(--font-sans)}
#aiShell .field .input:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)}
#aiShell .textarea{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);font-size:13px;padding:10px 12px;line-height:1.65;outline:none;width:100%;resize:vertical;font-family:var(--font-sans)}
#aiShell .textarea:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--accent-soft)}
#aiShell .card-title{margin:0;font-size:16px;font-weight:900;color:var(--text-primary)}
#aiShell .hidden-file-input{display:none}
#aiShell .block-head .tag,#aiShell .tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:700;background:var(--surface-muted);color:var(--text-secondary)}
#aiShell .tag.ok{background:var(--success-soft);color:var(--success);border:1px solid var(--success-border)}
#aiShell .upload-zone{border:1px dashed var(--border-strong);border-radius:10px;padding:12px;text-align:center;color:var(--text-muted);margin-top:10px;background:var(--surface-active)}
#aiShell .upload-zone .field-label{display:block;color:var(--accent);font-weight:700;margin-bottom:2px}
#aiShell .upload-zone .tiny{font-size:11px;color:var(--text-muted)}
#aiShell .spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--accent-border);border-top-color:var(--accent);border-radius:50%;animation:aiRefSpin .7s linear infinite;vertical-align:-2px;margin-right:4px}
#aiShell .media-audio-player{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card)}
#aiShell .media-audio-player audio{flex:1;min-width:0}
#aiShell .dh-table{width:100%;border-collapse:collapse;font-size:12px}
#aiShell .dh-table th{color:var(--text-muted);font-weight:700;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-subtle)}
#aiShell .dh-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
#aiShell .dh-table video{height:52px;border-radius:8px;background:#000}
#aiShell .dh-empty{color:var(--text-muted);font-size:12px;padding:14px;text-align:center;border:1px dashed var(--border-subtle);border-radius:10px;margin:8px 0}
#aiShell .dh-err{color:var(--danger);font-size:12px;padding:8px 12px;border:1px solid var(--danger-border);border-radius:10px;background:var(--danger-soft);margin:8px 0}
#aiShell .dh-task{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);padding:8px 12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card)}
#aiShell .dh-pager{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:12px;color:var(--text-muted)}
#aiShell .dh-pager button{height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);font-size:12px;cursor:pointer}
#aiShell .dh-pager button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 主题切换（参考应用原始三主题：暗夜科技/霓虹矩阵/清新信号） ---------- */
.ai-shell[data-theme="signal-light"]{
  --bg-root:#f3f8f7; --bg-elevated:rgba(250,253,252,.9); --bg-card:rgba(255,255,255,.88); --bg-card-hover:rgba(235,249,246,.98);
  --bg-input:rgba(255,255,255,.94); --bg-preview:#09120f;
  --border-subtle:rgba(18,94,78,.14); --border-hover:rgba(0,150,126,.26); --border-strong:rgba(0,150,126,.42);
  --text-primary:#10231f; --text-secondary:#425f59; --text-muted:#6d817d;
  --accent:#00967e; --accent-2:#f47b3f; --accent-contrast:#fff;
  --accent-soft:rgba(0,150,126,.11); --accent-soft-strong:rgba(0,150,126,.18); --accent-border:rgba(0,150,126,.3);
  --success:#18a058; --success-soft:rgba(24,160,88,.11); --success-border:rgba(24,160,88,.25);
  --danger:#d83b54; --danger-soft:rgba(216,59,84,.1); --danger-border:rgba(216,59,84,.28); --danger-text:#a81f36;
  --warning:#c87900; --warning-soft:rgba(200,121,0,.13); --warning-border:rgba(200,121,0,.26);
  --surface-sheen:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0) 52%);
  --surface-sheen-soft:linear-gradient(150deg,rgba(255,255,255,.78),rgba(0,150,126,.06) 58%,rgba(255,255,255,0) 76%);
  --surface-muted:rgba(18,94,78,.055); --surface-muted-strong:rgba(18,94,78,.095); --surface-active:rgba(0,150,126,.1);
  --overlay-strong:rgba(16,35,31,.32); --overlay-modal:rgba(16,35,31,.42);
  --button-primary-bg:linear-gradient(135deg,#00b89a 0%,#00967e 54%,#f47b3f 100%);
  --button-primary-shadow:0 12px 30px rgba(0,150,126,.22); --button-secondary-hover:rgba(229,247,243,.98);
  --input-focus-border:rgba(0,150,126,.48);
  --body-bg:radial-gradient(880px 460px at 9% -10%,rgba(0,184,154,.18),transparent 62%),radial-gradient(680px 420px at 96% 0%,rgba(244,123,63,.13),transparent 58%),linear-gradient(180deg,#fbfdfc 0%,#f3f8f7 48%,#eaf5f1 100%);
  --card-bg:var(--surface-sheen-soft),var(--bg-card);
  --shadow-panel:0 16px 42px rgba(31,75,66,.12); --shadow-glow:0 0 0 1px rgba(0,150,126,.12),0 18px 48px rgba(31,75,66,.14);
  --scrollbar-thumb:rgba(66,95,89,.24);
}
.ai-shell[data-theme="tech-neon"]{
  --bg-root:#080b10; --bg-elevated:rgba(13,18,24,.92); --bg-card:rgba(16,23,31,.86); --bg-card-hover:rgba(20,32,42,.96);
  --bg-input:rgba(5,9,14,.72); --bg-preview:#020408;
  --border-subtle:rgba(140,255,238,.11); --border-hover:rgba(35,211,238,.28); --border-strong:rgba(163,230,53,.36);
  --text-primary:#edf7f5; --text-secondary:#a7bbb8; --text-muted:#708884;
  --accent:#23d3ee; --accent-2:#a3e635; --accent-contrast:#041014;
  --accent-soft:rgba(35,211,238,.12); --accent-soft-strong:rgba(35,211,238,.2); --accent-border:rgba(35,211,238,.34);
  --success:#7ddf64; --success-soft:rgba(125,223,100,.1); --success-border:rgba(125,223,100,.28);
  --danger:#ff5f7e; --danger-soft:rgba(255,95,126,.11); --danger-border:rgba(255,95,126,.32); --danger-text:#ff91a8;
  --warning:#f8c14a; --warning-soft:rgba(248,193,74,.13); --warning-border:rgba(248,193,74,.3);
  --surface-sheen:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 44%);
  --surface-sheen-soft:linear-gradient(150deg,rgba(35,211,238,.11),rgba(163,230,53,.035) 48%,rgba(255,255,255,0) 72%);
  --surface-muted:rgba(140,255,238,.055); --surface-muted-strong:rgba(140,255,238,.095); --surface-active:rgba(35,211,238,.14);
  --overlay-strong:rgba(0,0,0,.68); --overlay-modal:rgba(0,0,0,.7);
  --button-primary-bg:linear-gradient(135deg,#23d3ee 0%,#7ddf64 62%,#f8c14a 100%);
  --button-primary-shadow:0 0 0 1px rgba(35,211,238,.2),0 14px 36px rgba(35,211,238,.22); --button-secondary-hover:rgba(22,38,45,.98);
  --input-focus-border:rgba(35,211,238,.52);
  --body-bg:radial-gradient(900px 420px at 8% -8%,rgba(35,211,238,.13),transparent 62%),radial-gradient(760px 460px at 94% 4%,rgba(163,230,53,.1),transparent 58%),linear-gradient(180deg,#080b10 0%,#0b1114 48%,#07100d 100%);
  --card-bg:var(--surface-sheen-soft),var(--bg-card);
  --shadow-panel:0 0 0 1px rgba(140,255,238,.08),0 16px 44px rgba(0,0,0,.38);
  --shadow-glow:0 0 0 1px rgba(35,211,238,.16),0 18px 52px rgba(0,0,0,.5);
  --scrollbar-thumb:rgba(35,211,238,.28);
}
/* 主题选择下拉 */
#aiShell .ai-ref-theme-wrap{position:relative}
#aiShell .ai-ref-theme-pill{display:flex;align-items:center;gap:6px;border:1px solid var(--border-subtle);border-radius:8px;height:28px;padding:0 10px;font-size:11px;color:var(--text-secondary);cursor:pointer;background:var(--bg-card)}
#aiShell .ai-ref-theme-pill:hover{border-color:var(--border-hover);color:var(--text-primary)}
#aiShell .ai-ref-theme-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:var(--shadow-glow);padding:6px;z-index:30}
#aiShell .ai-ref-theme-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:12px;color:var(--text-secondary);cursor:pointer;border:1px solid transparent}
#aiShell .ai-ref-theme-item:hover{background:var(--surface-muted);color:var(--text-primary)}
#aiShell .ai-ref-theme-item.on{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)}
#aiShell .ai-ref-theme-dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px;border:1px solid var(--border-hover)}
/* 创建视频任务 CTA */
#aiShell .ai-ref-cta{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border:none;border-radius:10px;
  background:var(--button-primary-bg);color:var(--accent-contrast);font-size:12px;font-weight:900;cursor:pointer;box-shadow:var(--button-primary-shadow)}
#aiShell .ai-ref-cta:hover{filter:brightness(1.06)}
/* 步骤4 控件 */
#aiShell .range-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}
#aiShell .range-row input[type=range]{flex:1;accent-color:var(--accent);height:4px}
#aiShell .range-row b{min-width:40px;text-align:right;color:var(--text-secondary)}
#aiShell .switch-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);cursor:pointer}
#aiShell .switch-check input{accent-color:var(--accent)}
/* 发布平台行 */
#aiShell .publish-row{display:flex;align-items:center;gap:12px;border:1px solid var(--border-subtle);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--bg-card)}
#aiShell .publish-row .plogo{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 38px}
#aiShell .publish-row .pinfo{flex:1;min-width:0}
#aiShell .publish-row .pname{font-size:13px;font-weight:800;color:var(--text-primary)}
#aiShell .publish-row .pstate{font-size:11px;color:var(--text-muted);margin-top:2px}
#aiShell .publish-row .add-account{height:28px;padding:0 12px;border-radius:8px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800;cursor:pointer}
#aiShell .publish-row .add-account:hover{background:var(--accent-soft-strong)}
#aiShell .upload-bar{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-card)}
#aiShell .upload-bar .up-icon{width:34px;height:34px;border-radius:9px;background:var(--button-primary-bg);color:var(--accent-contrast);display:flex;align-items:center;justify-content:center;font-size:18px}
#aiShell .upload-bar b{font-size:13px;color:var(--text-primary)}
#aiShell .upload-bar small{display:block;font-size:10px;color:var(--text-muted)}

/* 步骤4 视频预览叠加 */
#aiShell .edit-preview-video{width:100%;height:100%;object-fit:cover;border-radius:0;display:block;background:#000}
#aiShell .overlay-text{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.85);max-width:86%;text-align:center;pointer-events:none;z-index:5}
#aiShell .phone .phone-inner{position:relative;overflow:hidden;background:#000}

/* 封面模板库补充 */
#aiShell .cover-flow-layout{display:flex;gap:18px;min-height:0}
#aiShell .cover-flow-layout .col.controls{flex:1.2;min-width:0}
#aiShell .cover-flow-layout .col.preview{flex:1;min-width:0}
#aiShell .cover-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:14px 18px}
#aiShell .cover-template-card{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--bg-card);padding:0;text-align:left;transition:border-color .15s,box-shadow .15s}
#aiShell .cover-template-card:hover{border-color:var(--border-hover)}
#aiShell .cover-template-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
#aiShell .cover-template-thumb{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;width:100%;font-weight:900}
#aiShell .cover-template-meta{display:flex;flex-direction:column;gap:2px;padding:8px 10px}
#aiShell .cover-template-meta strong{font-size:12px;font-weight:800;color:var(--text-primary)}
#aiShell .cover-template-meta small{font-size:10px;color:var(--text-muted);line-height:1.4}
#aiShell .cover-flow-tabs{display:flex;gap:6px;padding:12px 18px 0;border-bottom:1px solid var(--border-subtle)}

/* ---------- 音色/形象选择弹窗（复刻原版 pick 模态框） ---------- */
#aiShell .ai-pick-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:900;display:flex;align-items:center;justify-content:center;padding:30px}
#aiShell .ai-pick-card{width:min(720px,94vw);max-height:82vh;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:18px;box-shadow:var(--shadow-glow);display:flex;flex-direction:column;overflow:hidden}
#aiShell .ai-pick-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border-subtle)}
#aiShell .ai-pick-head h3{font-size:15px;font-weight:900;color:var(--text-primary);margin:0;flex:1}
#aiShell .ai-pick-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-subtle);background:var(--surface-muted);color:var(--text-secondary);cursor:pointer;font-size:15px}
#aiShell .ai-pick-list{overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
#aiShell .ai-pick-item{display:flex;align-items:center;gap:12px;border:1px solid var(--border-subtle);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--bg-card);transition:border-color .15s,background .15s}
#aiShell .ai-pick-item:hover{border-color:var(--border-hover)}
#aiShell .ai-pick-item.on{border-color:var(--accent-border);background:var(--accent-soft)}
#aiShell .ai-pick-item .pick-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--text-muted);flex:0 0 16px;position:relative}
#aiShell .ai-pick-item.on .pick-radio{border-color:var(--accent)}
#aiShell .ai-pick-item.on .pick-radio::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--accent)}
#aiShell .ai-pick-item .pick-main{flex:1;min-width:0}
#aiShell .ai-pick-item .pick-name{font-size:13px;font-weight:800;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiShell .ai-pick-item .pick-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
#aiShell .ai-pick-item video{width:56px;height:80px;object-fit:cover;border-radius:8px;background:#000;flex:0 0 56px}
#aiShell .ai-pick-item audio{height:28px;width:160px}
#aiShell .ai-pick-item .pick-play{width:30px;height:30px;border-radius:8px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);cursor:pointer;font-size:13px;flex:0 0 30px}
#aiShell .ai-pick-foot{padding:12px 18px;border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;gap:8px}

/* 集中模式六列看板补充 */
#aiShell .module-card--step-1{grid-template-rows:auto 1fr}
#aiShell .compact-card{display:flex;flex-direction:column;gap:6px}
#aiShell .copy-rewrite-textarea{min-height:120px}
#aiShell .full-model .full-column{flex:0 0 360px}
#aiShell .full-model{display:flex;gap:14px;align-items:stretch;overflow-x:auto;padding-bottom:12px}
#aiShell .full-model .module-card{display:flex;flex-direction:column;height:100%}
#aiShell .full-model .module-content{flex:1;display:flex;flex-direction:column;gap:10px}
#aiShell .full-model .full-card{flex:1}
#aiShell .full-model .module-card--step-1 .module-content{display:flex;flex-direction:column;gap:10px}

/* 覆盖平台全局 .btn 蓝色：外壳内按钮统一用主题青绿 */
#aiShell .btn-primary{background:var(--button-primary-bg);color:var(--accent-contrast);box-shadow:var(--button-primary-shadow);border:1px solid transparent}
#aiShell .btn-primary:hover{filter:brightness(1.06);transform:none}
#aiShell .btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle);box-shadow:none}
#aiShell .btn-secondary{background:var(--bg-card-hover);color:var(--text-primary);box-shadow:none;border:1px solid var(--border-subtle)}

/* 步骤条"使用教程"按钮 */
#aiShell .tutorial-btn{margin-left:8px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);border-radius:6px;font-size:10px;font-weight:800;padding:2px 8px;cursor:pointer;display:inline-flex;align-items:center}
#aiShell .tutorial-btn:hover{background:var(--accent-soft-strong)}

/* 修复：平台全局 input 规则把 radio/checkbox 拉伸成巨型按钮 */
#aiShell input[type="radio"],#aiShell input[type="checkbox"]{
  width:auto;height:auto;flex:0 0 auto;margin:3px 7px 3px 0;padding:0;
  border:none;background:transparent;box-shadow:none;appearance:auto;
  -webkit-appearance:auto;-moz-appearance:auto;min-width:0;min-height:0
}
#aiShell input[type="radio"]:focus,#aiShell input[type="checkbox"]:focus{
  box-shadow:none;border:none
}
#aiShell input[type="file"]{width:auto;height:auto;border:none;background:transparent;padding:0;box-shadow:none}
#aiShell .loop-mode-option{flex:1}

/* 项目管理弹窗 */
#aiShell .ai-proj-create{display:flex;gap:8px}
#aiShell .ai-proj-create .input{flex:1}
#aiShell .ai-proj-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border-subtle);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:var(--bg-card)}
#aiShell .ai-proj-row .input{flex:1;min-width:0}
#aiShell .ai-proj-row .tag{margin-left:auto}

/* ---------- 账号管理（复刻原版：两列四块卡片网格） ---------- */
#aiShell .account-stats{display:flex;gap:8px;margin-top:8px}
#aiShell .account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(width<=980px){ #aiShell .account-grid{grid-template-columns:1fr} }
#aiShell .account-card{border:1px solid var(--border-subtle);border-radius:16px;background:var(--bg-card);padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-panel)}
#aiShell .account-card-head{display:flex;align-items:center;gap:10px}
#aiShell .account-card-head .plogo{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 38px}
#aiShell .account-card-head .ac-main{flex:1;min-width:0}
#aiShell .account-card-head .ac-main b{font-size:14px;font-weight:900;color:var(--text-primary);display:block}
#aiShell .account-card-head .ac-main small{font-size:11px;color:var(--text-muted);line-height:1.4;display:block;margin-top:2px}
#aiShell .account-card-head .tag{margin-left:auto}
#aiShell .ac-name{height:36px}
#aiShell .ac-bind{height:36px;border:none;border-radius:10px;background:var(--button-primary-bg);color:var(--accent-contrast);font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--button-primary-shadow)}
#aiShell .ac-bind:hover{filter:brightness(1.06)}
#aiShell .ac-state{font-size:12px;color:var(--text-muted)}
#aiShell .ac-state.warn{color:var(--warning);font-size:11px;line-height:1.5}

/* 封面模板：真实封面预览（主标题/副标题/角标/价格） */
#aiShell .cover-template-thumb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 10px;text-align:center}
#aiShell .tpl-badge{position:absolute;top:8px;right:-8px;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;font-size:10px;font-weight:900;padding:3px 8px;border-radius:6px;box-shadow:0 4px 10px rgba(225,29,72,.4);font-style:normal;letter-spacing:1px}
#aiShell .tpl-title{line-height:1.25;font-weight:900;font-style:normal;text-shadow:0 2px 10px rgba(0,0,0,.45);word-break:break-word}
#aiShell .tpl-sub{font-style:normal;font-size:9.5px;line-height:1.4;opacity:.92;padding:0 6px}
#aiShell .tpl-price{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.55);color:#ffe08a;font-size:10px;font-weight:900;padding:2px 6px;border-radius:5px;font-style:normal}
#aiShell .cover-template-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(width>=1200px){ #aiShell .cover-template-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* 标题话题候选（复刻原版可选方案） */
#aiShell .title-candidate{border:1px solid var(--border-subtle);border-radius:10px;padding:8px 12px;margin-bottom:6px;cursor:pointer;background:var(--bg-card);transition:border-color .15s,background .15s}
#aiShell .title-candidate:hover{border-color:var(--accent-border);background:var(--accent-soft)}
#aiShell .title-candidate b{display:block;font-size:13px;font-weight:800;color:var(--text-primary)}
#aiShell .title-candidate small{font-size:11px;color:var(--accent-2);line-height:1.6}

/* 字幕/标题颜色选择 */
#aiShell .color-row{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
#aiShell .color-row input[type=color]{width:34px;height:26px;border:1px solid var(--border-subtle);border-radius:7px;background:var(--bg-input);padding:2px;cursor:pointer}

/* 音色管理：卡片网格 */
#aiShell .voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
#aiShell .voice-card{border:1px solid var(--border-subtle);border-radius:16px;background:var(--bg-card);padding:14px;box-shadow:var(--shadow-panel);display:flex;flex-direction:column;gap:10px}
#aiShell .voice-card-head{display:flex;align-items:center;gap:10px}
#aiShell .voice-plogo{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:19px;display:flex;align-items:center;justify-content:center;flex:0 0 38px}
#aiShell .vc-main{flex:1;min-width:0}
#aiShell .vc-name{font-size:13.5px;font-weight:800;color:var(--text-primary);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiShell .vc-main small{font-size:11px;color:var(--text-muted)}
#aiShell .voice-card audio{width:100%;height:34px}
#aiShell .voice-card audio::-webkit-media-controls-panel{background:var(--bg-elevated)}
#aiShell .voice-actions{display:flex;gap:8px}
#aiShell .voice-actions .btn{flex:1}

/* 文案历史记录 */
#aiShell .history-row{border:1px solid var(--border-subtle);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--bg-card)}
#aiShell .hr-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#aiShell .hr-time{font-size:11px;color:var(--text-muted)}
#aiShell .hr-text{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:8px}
#aiShell .hr-actions{display:flex;gap:8px}

/* 弹窗进度条（百分比进展） */
.op-progress{width:100%;display:flex;align-items:center;gap:8px;margin-top:-2px}
.op-progress-track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.op-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6);box-shadow:0 0 10px rgba(167,139,250,.6);transition:width .25s ease}
.op-progress-pct{font-size:12px;font-weight:900;color:#a78bfa;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* 应用此文案配音（勾选式） */
#aiShell .voice-confirm{display:flex;align-items:center;gap:8px;margin:8px 0 2px;border:1px solid var(--border-subtle);border-radius:10px;padding:9px 12px;background:var(--bg-card);cursor:pointer;transition:border-color .15s,background .15s}
#aiShell .voice-confirm:hover{border-color:var(--border-hover)}
#aiShell .voice-confirm.on{border-color:var(--accent-border);background:var(--accent-soft)}
#aiShell .voice-confirm input{width:auto;height:auto;flex:0 0 auto;accent-color:var(--accent)}
#aiShell .voice-confirm .vc-label{font-size:13px;font-weight:800;color:var(--text-primary)}
#aiShell .voice-confirm .vc-hint{font-size:11px;color:var(--text-muted);margin-left:auto}
#aiShell .voice-confirm-hint{border:1px solid var(--success-border);background:var(--success-soft);color:var(--success);font-size:12px;font-weight:700;border-radius:9px;padding:7px 10px;margin-bottom:10px}

/* 文案历史记录（链接/原文/改后 三要素） */
#aiShell .history-row{border:1px solid var(--border-subtle);border-radius:12px;padding:11px 13px;margin-bottom:9px;background:var(--bg-card)}
#aiShell .hr-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#aiShell .hr-time{font-size:11px;color:var(--text-muted)}
#aiShell .hr-url{font-size:11.5px;color:var(--accent-2);margin-bottom:4px;word-break:break-all}
#aiShell .hr-orig{font-size:12px;color:var(--text-muted);line-height:1.55;margin-bottom:3px}
#aiShell .hr-orig b{color:var(--text-secondary);font-weight:700}
#aiShell .hr-text{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:8px}
#aiShell .hr-text b{color:var(--text-primary);font-weight:700}
#aiShell .hr-actions{display:flex;gap:8px}

/* 应用此文案配音（按钮式 + 打勾选中态） */
#aiShell .voice-confirm-bar{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
#aiShell .voice-confirm-bar .vc-hint{font-size:11px;color:var(--text-muted)}
#aiShell .voice-confirm-btn{border:2px solid transparent}
#aiShell .voice-confirm-btn.on{background:var(--success);box-shadow:0 8px 20px rgba(52,211,153,.35);border-color:rgba(255,255,255,.35)}

/* 配音类型胶囊 + 语调/语速/音量 */
#aiShell .voice-style-tags{display:flex;gap:6px;flex-wrap:wrap}
#aiShell .vs-tag{border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;transition:all .15s}
#aiShell .vs-tag:hover{border-color:var(--border-hover);color:var(--text-primary)}
#aiShell .vs-tag.on{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
#aiShell .voice-params{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
#aiShell .ai-clone-panel{border:1px solid var(--accent-border);border-radius:12px;padding:12px;background:linear-gradient(135deg,rgba(94,234,212,.08),rgba(18,24,32,.2) 52%)}
#aiShell .ai-clone-engine-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
#aiShell .ai-clone-engine{height:36px;padding:0 18px;border:1px solid #f59e0b;border-radius:10px;background:var(--bg-card);color:var(--text-primary);font-weight:800}
#aiShell .ai-clone-engine small{color:var(--text-muted);font-size:11px}
#aiShell .ai-clone-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
#aiShell .ai-clone-line .btn,#aiShell .ai-clone-engine,#aiShell .ai-emotion-line .emotion-toggle{white-space:nowrap;word-break:keep-all;flex-shrink:0}
#aiShell .ai-emotion-inline .btn{min-width:132px;padding-left:14px;padding-right:14px}
#aiShell .ai-emotion-inline .ai-clone-select{min-width:220px}
#aiShell .ai-clone-line>.field-label{min-width:118px;margin:0}
#aiShell .ai-clone-select{flex:1;min-width:260px}
#aiShell .ai-emotion-inline{flex:1;align-items:center;gap:10px;min-width:340px}
#aiShell .ai-genre-line .voice-style-tags{flex:1}
#aiShell .ai-clone-panel .voice-params>.field-label{display:flex;align-items:center;min-width:118px;margin:0}
#aiShell .ai-clone-panel .voice-params{align-items:center;border-top:1px solid var(--border-subtle);padding-top:10px}
#aiShell .ai-clone-panel input[type=range]{--fill:50%;-webkit-appearance:none;appearance:none;height:14px;background:transparent}
#aiShell .ai-clone-panel input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,var(--accent) 0 var(--fill),rgba(255,255,255,.12) var(--fill) 100%)}
#aiShell .ai-clone-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);margin-top:-4.5px;box-shadow:0 0 0 3px rgba(0,0,0,.45)}
#aiShell .vp-item{flex:1;min-width:150px;display:flex;align-items:center;gap:7px;border:1px solid var(--border-subtle);border-radius:11px;padding:8px 10px;background:var(--bg-card)}
#aiShell .vp-ico{font-size:15px}
#aiShell .vp-name{font-size:11px;color:var(--text-muted);flex:0 0 auto}
#aiShell .vp-item input[type=range]{flex:1;min-width:50px;accent-color:var(--accent)}
#aiShell .vp-item b{font-size:11px;color:var(--accent);min-width:18px;text-align:right}

/* 情感参考音频（可选） */
#aiShell .emotion-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-primary);cursor:pointer;border:1px solid var(--border-subtle);border-radius:10px;padding:8px 12px;background:var(--bg-card)}
#aiShell .emotion-toggle input{width:auto;height:auto;flex:0 0 auto;accent-color:var(--accent)}
#aiShell .emotion-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#aiShell .emotion-row .picker-trigger{flex:1;min-width:150px}
#aiShell .emotion-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border-subtle);border-radius:10px;padding:7px 10px;margin-bottom:6px;background:var(--bg-card);cursor:pointer}
#aiShell .emotion-item:hover{border-color:var(--border-hover)}
#aiShell .emotion-item.sel{border-color:var(--accent-border);background:var(--accent-soft)}
#aiShell .emotion-item .en-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiShell .emotion-item audio{height:26px;width:130px}

/* 数字人管理（复刻参考软件：hero + 上传素材区 + 素材列表区） */
#aiShell .dm-manage{display:flex;flex-direction:column;gap:14px}
#aiShell .hero{padding:6px 2px 2px}
#aiShell .hero-title{font-size:19px;font-weight:900;color:var(--text-primary);margin:0 0 4px}
#aiShell .hero-desc{font-size:12.5px;color:var(--text-muted);margin:0}
#aiShell .dm-manage .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border-subtle);padding:14px 18px}
#aiShell .dm-manage .panel-head h3{font-size:14.5px;font-weight:800;color:var(--text-primary);margin:0}
#aiShell .dm-manage .panel-head .hint{font-size:11px;color:var(--text-muted);margin:0}
#aiShell .dm-upload-row{display:flex;gap:10px;align-items:center;padding:14px 18px;flex-wrap:wrap}
#aiShell .dm-upload-row .input{flex:1;min-width:220px}
#aiShell .dm-upload-row .btn{flex:0 0 auto}
#aiShell .dm-upload-hint{font-size:11px;color:var(--text-muted)}
#aiShell .av-thumb-wrap{position:relative;width:88px;height:52px;border-radius:8px;overflow:hidden;background:#000}
#aiShell .av-thumb-wrap video{width:100%;height:100%;object-fit:cover;display:block}
#aiShell .av-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#aiShell .av-name{color:var(--text-primary);cursor:pointer}
#aiShell .av-name:hover{color:var(--accent)}
#aiShell .hint.tiny{font-size:10px;color:var(--text-muted);display:block;margin-top:2px}
#aiShell .dh-btn-danger{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff}

/* 数字人管理（复刻参考软件：hero + 上传素材区 + 素材列表区） */
#aiShell .dm-manage{display:flex;flex-direction:column;gap:14px}
#aiShell .hero{padding:6px 2px 2px}
#aiShell .hero-title{font-size:19px;font-weight:900;color:var(--text-primary);margin:0 0 4px}
#aiShell .hero-desc{font-size:12.5px;color:var(--text-muted);margin:0}
#aiShell .dm-manage .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border-subtle);padding:14px 18px}
#aiShell .dm-manage .panel-head h3{font-size:14.5px;font-weight:800;color:var(--text-primary);margin:0}
#aiShell .dm-manage .panel-head .hint{font-size:11px;color:var(--text-muted);margin:0}
#aiShell .dm-upload-row{display:flex;gap:10px;align-items:center;padding:14px 18px;flex-wrap:wrap}
#aiShell .dm-upload-row .input{flex:1;min-width:220px}
#aiShell .dm-upload-row .btn{flex:0 0 auto}
#aiShell .dm-upload-hint{font-size:11px;color:var(--text-muted)}
#aiShell .av-thumb-wrap{position:relative;width:88px;height:52px;border-radius:8px;overflow:hidden;background:#000}
#aiShell .av-thumb-wrap video{width:100%;height:100%;object-fit:cover;display:block}
#aiShell .av-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#aiShell .av-name{color:var(--text-primary);cursor:pointer}
#aiShell .av-name:hover{color:var(--accent)}
#aiShell .hint.tiny{font-size:10px;color:var(--text-muted);display:block;margin-top:2px}
#aiShell .dh-btn-danger{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff}

/* 修复：内层 .controls 的 overflow:auto 拦截滚轮，导致外层滑不动 —— 改由外层统一滚动 */
#aiShell .controls{overflow:visible}
#aiShell .scroll-thin{overflow:visible}
#aiShell .ai-ref-workspace{overflow-y:auto}

/* 修复：av-panel overflow:hidden 拦截滚轮，导致卡片区域滑不动 —— 改 visible，光效用伪元素自带裁剪 */
#aiShell .av-panel{overflow:visible}
#aiShell .av-panel:after{border-radius:10px 10px 0 0}

/* ============ 视频剪辑步骤4（复刻原版 StepVideoEdit 布局：预览左 + 参数右 + 位置下 + 右侧栏） ============ */
#aiShell .main-edit{
flex:1;min-width:0;display:flex;flex-direction:column
}
#aiShell .preview-side{
flex:none;width:300px;min-width:0;display:flex;flex-direction:column;gap:14px
}
#aiShell .video-edit-panel{
flex-direction:column;gap:12px;min-height:0;padding:12px 14px;display:flex;position:relative;overflow:visible
}
#aiShell .video-edit-panel .video-edit-panel-head{
justify-content:flex-start;align-items:center;display:flex
}
#aiShell .video-edit-body{
flex:1;min-width:0;gap:16px;align-items:flex-start;display:flex
}
#aiShell .edit-settings{
flex:1;min-width:0;flex-direction:column;gap:12px;display:flex
}
#aiShell .fieldset-head{
justify-content:space-between;align-items:center;gap:10px;display:flex
}
#aiShell .fieldset-head .field-label{
font-size:15px;font-weight:800;color:var(--text-primary)
}
#aiShell .position-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;display:grid
}
#aiShell .bgm-row{
gap:6px;align-items:center;display:flex
}
#aiShell .bgm-row .select{
flex:1;min-width:0
}
#aiShell .template-settings-section{
gap:10px;align-items:center;display:flex
}
#aiShell .template-selected-label{
color:var(--text-muted);font-size:11.5px
}
#aiShell .edit-preview-stage{
flex:none;margin:0 auto
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);border-radius:8px;background:#0b0d10;align-self:center;width:min(100%,220px);max-width:100%;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden
}
#aiShell .final-preview-entry .preview-empty-hint{
color:var(--text-muted);font-size:12px;text-align:center;padding:0 10px
}
#aiShell .final-preview-entry video{
object-fit:contain;width:100%;height:100%;display:block
}
#aiShell .render-action{
width:100%
}
#aiShell .overlay-text{
z-index:3;box-sizing:border-box;cursor:grab;text-align:center;white-space:pre-wrap;word-break:break-word;font-weight:900;line-height:1.2;position:absolute;transform:translate(-50%,-50%);padding:2px 6px
}
#aiShell .overlay-text.dragging{
cursor:grabbing;outline:2px solid var(--accent);outline-offset:3px
}
@media(max-width:1180px){
#aiShell .video-edit-body{
flex-direction:column;align-items:center
}
#aiShell .preview-side{
width:100%
}
}

/* 视频编辑舞台叠加：允许拖动（覆盖全局 overlay-text pointer-events:none） */
#aiShell #aiEditStage .overlay-text{
pointer-events:auto;cursor:grab
}
#aiShell #aiEditStage .overlay-text.dragging{
cursor:grabbing;outline:2px solid var(--accent);outline-offset:3px
}

/* 视频剪辑：预览舞台顶部对齐（视频预览在编辑区上方，不被参数区挤到中间） */
#aiShell .video-edit-panel .edit-preview-stage{
align-self:flex-start
}

/* 视频剪辑：预览视频可播放（覆盖 edit-preview-video 的 pointer-events:none） */
#aiShell #aiEditStage .edit-preview-video{
pointer-events:auto;cursor:pointer
}
#aiShell #aiEditStage .edit-preview-video::-webkit-media-controls-panel{
pointer-events:auto
}

/* ============ 视频剪辑步骤4：预览固定上方 + 参数下方滚动（即调即看） ============ */

#aiShell .preview-top{
flex:none;flex-direction:column;align-items:center;gap:10px;display:flex
}
#aiShell .preview-top .position-grid{
width:100%
}
#aiShell .edit-settings-scroll{
flex:1;min-height:0;flex-direction:column;gap:12px;padding:2px 4px 10px 2px;display:flex;overflow-y:auto
}
#aiShell .preview-side{
height:100%;min-height:0;overflow-y:auto
}
#aiShell .preview-side .panel{
flex:none
}
@media(max-width:1180px){

}

/* 步骤4：内容高度固定，预览固定 + 参数区内部滚动 */
#aiShell .ai-ref-content.step4-content{
height:100%;min-height:0
}

/* ============ 视频剪辑步骤4（复刻原版：预览+位置滑块 | 模板+字幕/标题样式 | 右侧栏） ============ */

#aiShell .video-edit-panel{
height:100%;min-height:0;flex-direction:column;gap:12px;padding:12px 14px;display:flex;overflow:hidden
}
#aiShell .video-edit-panel .video-edit-panel-head{
justify-content:flex-start;align-items:center;display:flex
}
#aiShell .video-edit-body{
flex:1;min-width:0;gap:16px;align-items:flex-start;display:flex
}
#aiShell .preview-block{
flex:none;width:260px;min-width:0;flex-direction:column;align-items:center;gap:10px;display:flex
}
#aiShell .preview-block .edit-preview-stage{
flex:none;margin:0
}
#aiShell .preview-block .position-grid{
width:100%
}
#aiShell .position-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;display:grid
}
#aiShell .range-field{
flex-direction:column;gap:2px;min-width:0;display:flex
}
#aiShell .range-label{
justify-content:space-between;align-items:center;gap:8px;color:var(--text-muted);font-size:11.5px;font-weight:700;display:flex
}
#aiShell .range-label b{
color:var(--text-secondary);font-variant-numeric:tabular-nums
}
#aiShell .color-row-wrap{
flex-wrap:wrap;gap:14px 20px;margin-top:8px;display:flex
}
#aiShell .color-row{
align-items:center;gap:6px;color:var(--text-muted);font-size:11.5px;display:flex
}
#aiShell .color-row .color-inp{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:8px;width:34px;height:26px;padding:2px;cursor:pointer
}
#aiShell .edit-settings-scroll{
flex:1;min-height:0;flex-direction:column;gap:14px;padding:2px 4px 10px 2px;display:flex;overflow-y:auto
}
#aiShell .edit-settings-scroll .fieldset{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), linear-gradient(180deg, #ffffff0a, transparent 28%), var(--surface-muted);border-radius:10px;flex:none;flex-direction:column;gap:8px;padding:10px 12px 12px;display:flex
}
#aiShell .edit-settings-scroll .font-only-settings-title{
justify-content:space-between;align-items:center;display:flex
}
#aiShell .template-settings-section{
gap:10px;align-items:center;display:flex
}
#aiShell .template-selected-label{
color:var(--text-muted);font-size:11.5px
}
#aiShell .preview-side{
height:100%;min-height:0;overflow-y:auto
}
#aiShell .preview-side .panel{
flex:none
}
@media(max-width:1180px){
#aiShell .video-edit-body{
flex-direction:column;align-items:center
}
#aiShell .preview-block{
width:100%
}
#aiShell .preview-side{
height:auto;overflow:visible
}
}

/* ============ 视频剪辑步骤4（复刻原版：左=预览+滑块固定 | 右=模板/字幕/标题/BGM/成片滚动） ============ */

#aiShell .range-field{
flex-direction:column;gap:2px;min-width:0;display:flex
}
#aiShell .range-label{
justify-content:space-between;align-items:center;gap:8px;color:var(--text-muted);font-size:11.5px;font-weight:700;display:flex
}
#aiShell .range-label b{
color:var(--text-secondary);font-variant-numeric:tabular-nums
}
#aiShell .color-row-wrap{
flex-wrap:wrap;gap:14px 20px;margin-top:8px;display:flex
}
#aiShell .color-row{
align-items:center;gap:6px;color:var(--text-muted);font-size:11.5px;display:flex
}
#aiShell .color-row .color-inp{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:8px;width:34px;height:26px;padding:2px;cursor:pointer
}

#aiShell .template-settings-section{
margin:-6px 0 4px
}
#aiShell .bgm-row{
gap:6px;align-items:center;display:flex
}
#aiShell .bgm-row .select{
flex:1;min-width:0
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);border-radius:8px;background:#0b0d10;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;margin:0 auto
}
#aiShell .final-preview-entry video{
object-fit:contain;width:100%;height:100%;display:block
}
#aiShell .preview-empty-hint{
color:var(--text-muted);font-size:12px;text-align:center;padding:0 10px
}
#aiShell .render-action{
width:100%
}
/* 字幕/标题字体库（复刻原版 subtitle_fonts） */
@font-face{font-family:"阿里巴巴普惠体 105 特重";src:url("/static/fonts/AlibabaPuHuiTi-3-105-Heavy.ttf") format("truetype");font-display:swap}
@font-face{font-family:"阿里巴巴普惠体 95 特粗";src:url("/static/fonts/AlibabaPuHuiTi-3-95-ExtraBold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"阿里妈妈数黑体 加粗";src:url("/static/fonts/AlimamaShuHeiTi-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"胡晓波南神体";src:url("/static/fonts/HuXiaobo-NanshenTi.otf") format("truetype");font-display:swap}
@font-face{font-family:"华光俊秀体";src:url("/static/fonts/Huaguang-JunxiuTi.ttf") format("truetype");font-display:swap}
@font-face{font-family:"江城律动宋";src:url("/static/fonts/Jiangcheng-LvdongSong.ttf") format("truetype");font-display:swap}
@font-face{font-family:"联想小新超酷体";src:url("/static/fonts/Lenovo-Xiaoxin-ChaokuTi.ttf") format("truetype");font-display:swap}
@font-face{font-family:"猫啃食金黑";src:url("/static/fonts/Maoken-ShijinHei.ttf") format("truetype");font-display:swap}
@font-face{font-family:"思源黑体 中等";src:url("/static/fonts/NotoSansSC-Medium.otf") format("truetype");font-display:swap}
@font-face{font-family:"锐字真言黑体";src:url("/static/fonts/REEJI-ZhenyanGB2.0-Black.ttf") format("truetype");font-display:swap}
@font-face{font-family:"得意黑";src:url("/static/fonts/SmileySans-Oblique.otf") format("truetype");font-display:swap}
@font-face{font-family:"思源宋体 加粗";src:url("/static/fonts/SourceHanSerifCN-Bold.otf") format("truetype");font-display:swap}
@font-face{font-family:"思源宋体 特粗";src:url("/static/fonts/SourceHanSerifCN-Heavy.otf") format("truetype");font-display:swap}
@font-face{font-family:"字幕模板字体";src:url("/static/fonts/SubtitleTemplate1.ttf") format("truetype");font-display:swap}
@font-face{font-family:"新宇工拼搏体";src:url("/static/fonts/Xinyugong-PinboTi.ttf") format("truetype");font-display:swap}
@font-face{font-family:"岩石斜黑体";src:url("/static/fonts/Yanshi-XieheiTi.otf") format("truetype");font-display:swap}
/* ============ 视频剪辑步骤4（复刻原版三栏：中=预览上+样式下 | 右=背景音乐+成片预览） ============ */

#aiShell .preview-top{
flex:none;flex-direction:column;align-items:center;gap:10px;display:flex
}
#aiShell .preview-top .edit-preview-stage{
flex:none;margin:0 auto
}
#aiShell .preview-top .position-grid{
width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;display:grid
}
#aiShell .edit-settings-scroll{
flex:1;min-height:0;flex-direction:column;gap:12px;padding:2px 4px 10px 2px;display:flex;overflow-y:auto
}

#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);border-radius:8px;background:#0b0d10;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;margin:0 auto;max-width:260px
}
#aiShell .final-preview-entry video{
object-fit:contain;width:100%;height:100%;display:block
}
#aiShell .render-action{
white-space:nowrap
}

/* ============ 视频剪辑步骤4（复刻原版真实三栏：预览+滑块 | 模板+字幕+标题 | 音乐+成片） ============ */

#aiShell .video-edit-head,.style-panel-head{
justify-content:space-between;align-items:center;display:flex
}
#aiShell .video-edit-head .panel-title,.style-panel-head .panel-title{
margin:0
}
#aiShell .edit-preview-stage{
flex:none;margin:0 auto
}
#aiShell .pos-sliders{
flex-direction:column;gap:6px;display:flex
}
#aiShell .style-head{
justify-content:space-between;align-items:center;gap:8px;display:flex
}
#aiShell .style-head h4{
color:var(--text-primary);margin:0;font-size:14px;font-weight:900
}
#aiShell .style-group{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), linear-gradient(180deg, #ffffff0a, transparent 28%), var(--surface-muted);border-radius:10px;flex-direction:column;gap:8px;padding:10px 12px 12px;display:flex
}
#aiShell .style-group .range-field{
flex-direction:column;gap:2px;display:flex
}
#aiShell .range-field .range-label{
justify-content:space-between;align-items:center;gap:8px;color:var(--text-muted);font-size:11.5px;font-weight:700;display:flex
}
#aiShell .range-field .range-label b{
color:var(--text-secondary);font-variant-numeric:tabular-nums
}
#aiShell .color-row-wrap{
flex-wrap:wrap;gap:14px 20px;display:flex
}
#aiShell .color-row{
align-items:center;gap:6px;color:var(--text-muted);font-size:11.5px;display:flex
}
#aiShell .color-row .color-inp{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:8px;width:34px;height:26px;padding:2px;cursor:pointer
}
#aiShell .template-selected-label{
color:var(--text-muted);font-size:11.5px;margin:-6px 0 2px
}
#aiShell .bgm-row{
gap:6px;align-items:center;display:flex
}
#aiShell .bgm-row .select{
flex:1;min-width:0
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);border-radius:8px;background:#0b0d10;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;margin:0 auto;max-width:240px
}
#aiShell .final-preview-entry video{
object-fit:contain;width:100%;height:100%;display:block
}
#aiShell .render-action{
white-space:nowrap
}
#aiShell .compare-action{
white-space:nowrap
}
@media(max-width:1320px){

}

/* ============ 视频剪辑步骤4（复刻原版两栏：主编辑区 + 右侧工具栏） ============ */

#aiShell .preview-top{
flex:none;flex-direction:column;align-items:center;gap:10px;display:flex
}
#aiShell .preview-top .edit-preview-stage{
flex:none;margin:0 auto
}
#aiShell .preview-top .pos-sliders{
width:100%
}
#aiShell .edit-settings-scroll{
flex:1;min-height:0;flex-direction:column;gap:12px;padding:2px 4px 10px 2px;display:flex;overflow-y:auto
}

/* 封面模板卡片：背景图 + 文字叠加（复刻原版） */
#aiShell .cover-template-thumb{
background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden
}
#aiShell .cover-template-thumb .cover-overlay{
position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.35));z-index:1
}
#aiShell .cover-template-thumb .tpl-title,#aiShell .cover-template-thumb .tpl-sub,#aiShell .cover-template-thumb .tpl-badge,#aiShell .cover-template-thumb .tpl-price{
position:relative;z-index:2
}

/* ============ 发布平台（复刻原版：发布信息 | 发布平台卡片 | 发布预览 + 一键上传） ============ */
#aiShell .step6-root .layout{
grid-template-columns:minmax(300px,1fr) minmax(300px,1.1fr) minmax(280px,1fr);align-items:start;gap:14px;display:grid
}
#aiShell .step6-root .layout>.col{
min-width:0
}
#aiShell .step6-root .edit-panel{
flex-direction:column;gap:12px;padding:14px;display:flex
}
#aiShell .hero-publish{
border:1px solid var(--accent-border);background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%, transparent), transparent);border-radius:12px;padding:16px
}
#aiShell .hero-publish h3{
color:var(--text-primary);margin:0 0 6px;font-size:18px;font-weight:900
}
#aiShell .hero-publish p{
color:var(--text-muted);margin:0;font-size:12.5px;line-height:1.5
}
#aiShell .pub-section-head{
justify-content:space-between;align-items:center;gap:8px;display:flex
}
#aiShell .pub-section-head h4{
color:var(--text-primary);margin:0;font-size:15px;font-weight:900
}
#aiShell .pb-platform-card{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--surface-muted);border-radius:10px;align-items:center;gap:10px;padding:10px 12px;display:flex
}
#aiShell .pb-platform-card.sel{
border-color:var(--accent-border);background:color-mix(in srgb,var(--accent-soft) 55%, var(--surface-muted))
}
#aiShell .pb-pf-check input{
accent-color:var(--accent);width:16px;height:16px;cursor:pointer
}
#aiShell .pb-pf-logo{
width:38px;height:38px;border-radius:10px;justify-content:center;align-items:center;font-size:19px;display:flex;flex:none
}
#aiShell .pb-pf-info{
flex:1;min-width:0
}
#aiShell .pb-pf-name{
align-items:center;gap:8px;display:flex
}
#aiShell .pb-pf-name strong{
color:var(--text-primary);font-size:14px
}
#aiShell .pb-pf-name span{
color:var(--text-muted);font-size:11px
}
#aiShell .pb-pf-state{
color:var(--text-muted);font-size:11px;margin-top:2px
}
#aiShell .pb-pf-sel{
color:var(--accent);font-size:11px;font-weight:700
}
#aiShell .pb-pf-btn{
border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;white-space:nowrap;flex:none
}
#aiShell .pb-pf-btn:hover{
background:var(--accent);color:var(--accent-contrast)
}
#aiShell .pb-preview-video{
aspect-ratio:9/16;border:1px dashed var(--border-subtle);border-radius:10px;background:#0b0d10;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:relative;overflow:hidden
}
#aiShell .pb-pv-icon{
color:var(--text-muted);font-size:26px
}
#aiShell .pb-preview-video strong{
color:var(--text-secondary);font-size:13px
}
#aiShell .pb-preview-video small{
color:var(--text-muted);font-size:11px;text-align:center;padding:0 12px
}
#aiShell .pb-preview-meta{
flex-direction:column;gap:6px;display:flex
}
#aiShell .pb-pm-row{
justify-content:space-between;align-items:center;color:var(--text-muted);font-size:12px;display:flex
}
#aiShell .pb-pm-row strong{
color:var(--text-secondary);font-size:12px
}
#aiShell .pb-cover-item{
align-items:center;gap:8px;font-size:12px;color:var(--text-muted);display:flex
}
@media(max-width:1280px){
#aiShell .step6-root .layout{
grid-template-columns:1fr
}
}

/* 视频编辑：生成成片按钮（跟随主题色，统一全局） */

/* 封面制作（对齐参考：tab 粉色选中、4列网格、卡片选中高亮） */
#aiShell .cover-flow-tab.active{
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast)
}
#aiShell .cover-template-grid{
gap:12px;display:grid
}
#aiShell .cover-template-card.selected{
border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%, transparent)
}
#aiShell .cover-template-card{
border:1px solid var(--border-subtle);background:var(--surface-muted);border-radius:12px;overflow:hidden;cursor:pointer;padding:0;display:flex;flex-direction:column;transition:border-color .15s, box-shadow .15s
}
#aiShell .cover-template-card:hover{
border-color:var(--accent-border)
}
#aiShell .cover-template-thumb{
width:100%;aspect-ratio:3/4;border-radius:0
}
#aiShell .cover-template-meta{
flex-direction:column;gap:3px;padding:8px 10px 10px;display:flex
}
#aiShell .cover-template-meta strong{
color:var(--text-primary);font-size:13.5px
}
#aiShell .cover-template-meta small{
color:var(--text-muted);font-size:11px;line-height:1.4
}

/* ============ 视频编辑/封面/发布：面板标题与控件统一青绿主题（对齐参考） ============ */

/* 视频编辑/封面/发布：面板大标题（panel-title）青绿文字，对齐参考 */

/* ============ 内容区容器化：居中 + 左右留白（对齐参考软件的居中卡片布局） ============ */

#aiShell .ai-ref-content{
width:100%
}

/* 内容区容器化：最大宽度 + 居中留白（对齐参考软件） */

#aiShell .cover-flow-layout{
max-width:1400px;margin:0 auto;width:100%
}

/* 步骤容器占满宽度，内部 layout 居中限宽 */

#aiShell .cover-flow-layout{
max-width:1400px;margin:0 auto;width:100%
}

/* 之前硬编码青绿的地方统一改用主题变量 */

/* 视频编辑：右侧栏加宽到参考比例（mid:preview ≈ 881:546） */

/* 视频编辑右侧栏宽度跟随 grid 列宽（去掉固定 300px） */

/* 视频编辑主区：左右两栏（预览+滑块 | 模板+字幕样式+标题样式），对齐参考一屏显示 */

/* 位置滑块：两列3行（标题X/Y、字幕X/Y、标题宽/字幕宽），对齐参考 */

/* 预览框：去掉边框/发光，对齐参考（无边框、纯圆角） */

/* 步骤4内容区：占满 workspace 剩余高度（减去 footer），一屏显示不溢出 */
#aiShell .ai-ref-content.step4-content{
  flex:1;min-height:0;height:auto;min-width:0;gap:12px
}
#aiShell .ai-ref-workspace{
  overflow-y:auto
}

/* ============ 视频编辑/封面/发布：只读取当前主题 token ============ */

/* 成片预览按钮：避免贴边截断，加大内边距/间距 */

#aiShell .overlay-editor{
flex-direction:column;gap:12px;min-width:0;padding:16px;display:flex;overflow:hidden auto;container-type:inline-size
}
#aiShell .overlay-preview-layout{
z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;gap:12px;min-width:0;display:grid;position:relative
}
#aiShell .overlay-preview-pane, #aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-preview-pane{
z-index:0;justify-content:flex-start;gap:10px;position:relative
}
#aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-controls-pane{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--surface-muted) 86%, var(--bg-card))) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 46%, transparent), color-mix(in srgb, var(--panel-accent-2) 34%, transparent) 44%, color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 30px color-mix(in srgb, var(--panel-accent) 11%, transparent), inset 0 1px 0 #ffffff38;border:1px solid #0000;border-radius:10px;justify-content:flex-start;gap:8px;padding:9px;position:relative;overflow:hidden
}
#aiShell .overlay-controls-pane .field, #aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-controls-pane .field-label, #aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-controls-pane .range, #aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .edit-preview-stage{
aspect-ratio:9/16;z-index:0;isolation:isolate;border:1px solid var(--border-subtle);touch-action:none;background:#0b0d10;border-radius:8px;align-self:center;width:min(100%,220px);max-width:100%;position:relative;overflow:hidden
}
#aiShell .edit-preview-video{
z-index:0;object-fit:cover;pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .edit-preview-video{
z-index:1;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0b0d10;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .overlay-preview{
z-index:2;box-sizing:border-box;cursor:grab;-webkit-user-select:none;user-select:none;letter-spacing:0;text-align:center;white-space:pre;word-break:keep-all;font-weight:900;line-height:1.14;font-family:var(--font-sans);border:0;border-radius:0;margin:0;position:absolute;transform:none
}
#aiShell .title-overlay-preview{
min-height:var(--title-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .title-overlay-preview .overlay-text{
z-index:1;padding:var(--title-box-pad,0);background:0 0;position:relative
}
#aiShell .title-overlay-preview .overlay-line{
height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex
}
#aiShell .title-overlay-preview{
white-space:pre-line;word-break:keep-all
}
#aiShell .subtitle-overlay-preview{
min-height:var(--subtitle-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .subtitle-overlay-preview{
background:0 0
}
#aiShell .subtitle-overlay-preview .overlay-text{
white-space:nowrap
}
#aiShell .overlay-text{
box-sizing:border-box;width:100%;min-height:1.1em;padding:var(--overlay-pad-y,0) var(--overlay-pad-x,0);background:var(--overlay-bg,transparent);white-space:pre;overflow-wrap:normal;word-break:keep-all;-webkit-box-decoration-break:clone;box-decoration-break:clone;outline:none;display:block
}
#aiShell .overlay-line{
white-space:pre;display:block
}
#aiShell .resize-handle{
background:var(--accent);cursor:nwse-resize;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-8px;right:-8px;box-shadow:0 1px 5px #00000059
}
#aiShell .anchor-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;display:grid
}
#aiShell .overlay-position-grid{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 16%, var(--surface-muted));border-radius:10px;padding:9px
}
#aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .inline-style-sections{
flex:auto;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;display:grid
}
#aiShell .inline-style-sections .fieldset{
gap:7px
}
#aiShell .inline-style-sections .select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:13px
}
#aiShell .inline-style-sections .font-only-settings-title{
margin:0;font-size:13px
}
#aiShell .style-card{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 20%, var(--surface-muted));border-radius:8px;flex:1 1 0;gap:8px;min-width:0;padding:9px
}
#aiShell .style-card-head{
border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:10px;min-height:28px;padding-bottom:7px;display:flex
}
#aiShell .fieldset{
border:none;flex-direction:column;gap:12px;margin:0;padding:0;display:flex
}
#aiShell .style-control-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 9px;min-width:0;display:grid
}
#aiShell .compact-color-field{
min-height:46px
}
#aiShell .compact-color-field .color-inp{
width:100%;height:30px
}
#aiShell .title-bg-setting-row{
grid-column:1/-1
}
#aiShell .title-bg-setting-row, #aiShell .subtitle-bg-setting-row{
grid-column:1/-1
}
#aiShell .subtitle-bg-setting-row{
grid-column:1/-1
}
#aiShell .compact-check{
flex:none;align-items:center;gap:5px;font-size:12px;line-height:1;display:inline-flex
}
#aiShell .compact-check input{
flex:none;margin:0
}
#aiShell .settings-section{
flex-direction:column;gap:6px;display:flex
}
#aiShell .settings-section .fieldset{
gap:6px
}
#aiShell .settings-section .field{
gap:4px
}
#aiShell .settings-section .setting-row{
gap:8px;min-height:28px
}
#aiShell .settings-section-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .settings-section-title-check{
min-width:0;color:var(--text-primary);cursor:pointer;flex:auto;align-items:center;gap:8px;display:inline-flex
}
#aiShell .settings-section-title-check input{
flex:none
}
#aiShell .bgm-panel audio{
display:none
}
#aiShell .bgm-panel{
flex-direction:column;min-height:0;padding:14px;display:flex
}
#aiShell .bgm-panel-head{
border:0;align-items:center;gap:8px;min-height:0;margin:0;padding:0;display:flex
}
#aiShell .bgm-panel-head-actions{
flex-wrap:wrap;flex:1;justify-content:space-between;align-items:center;gap:8px;display:flex
}
#aiShell .preview-panel{
flex-direction:column;gap:10px;width:100%;min-height:0;padding:14px;display:flex;overflow:hidden
}
#aiShell .preview-panel-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .preview-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:6px 10px;font-size:15px;font-weight:800;display:flex
}
#aiShell .preview-frame{
border-radius:8px;width:100%;min-height:130px
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-height:250px;color:var(--text-primary);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff3d, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);background:#000;border-radius:8px;margin:0 auto;padding:0;display:block;position:relative;overflow:hidden
}
#aiShell .preview-empty-hint{
opacity:.85;font-size:12px
}
#aiShell .bgm-play-btn{
background:var(--success-soft);width:34px;height:34px;color:var(--success);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .bgm-play-btn{
flex:none;width:32px;min-width:32px;min-height:32px;padding:0
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;justify-self:end;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .template-selected-label{
color:var(--text-secondary);flex:none;font-size:12px;font-weight:700
}
#aiShell .font-only-settings-title{
color:var(--text-primary);margin:0 0 8px;font-size:14px;font-weight:900
}
/* 布局列宽对齐参考：左 min520px / 右 min320px，比例 1.42fr:.88fr */

#aiShell .mid-col{
flex-direction:column;gap:14px;min-width:0;display:flex
}
#aiShell .card{
background:var(--card-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px
}
#aiShell .overlay-editor{
flex-direction:column;gap:12px;min-width:0;padding:16px;display:flex;overflow:hidden auto;container-type:inline-size
}
#aiShell .quick-module-panel{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 44%, transparent), color-mix(in srgb, var(--panel-accent-2) 32%, transparent) 42%, color-mix(in srgb, var(--border-subtle) 84%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--panel-accent) 12%, transparent), inset 0 1px 0 #ffffff47;border:1px solid #0000;border-radius:10px;position:relative;overflow:hidden
}
#aiShell .quick-panel-overlay{
--panel-accent:var(--accent);--panel-accent-2:var(--warning)
}
#aiShell .panel-head{
flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex
}
#aiShell .panel-head h3{
margin:0;font-size:15px;font-weight:800
}
#aiShell .panel-head{
justify-content:space-between;align-items:flex-start;gap:12px;display:flex
}
#aiShell .panel-head{
z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex;position:relative
}
#aiShell .video-edit-panel-head{
align-items:center
}
#aiShell .panel-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:7px 12px;font-size:17px;font-weight:800;display:flex
}
#aiShell .overlay-preview-layout{
z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;gap:12px;min-width:0;display:grid;position:relative
}
#aiShell .overlay-preview-pane, #aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-preview-pane{
z-index:0;justify-content:flex-start;gap:10px;position:relative
}
#aiShell .edit-preview-stage{
aspect-ratio:9/16;z-index:0;isolation:isolate;border:1px solid var(--border-subtle);touch-action:none;background:#0b0d10;border-radius:8px;align-self:center;width:min(100%,220px);max-width:100%;position:relative;overflow:hidden
}
#aiShell .edit-preview-video{
z-index:0;object-fit:cover;pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .edit-preview-video{
z-index:1;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0b0d10;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .overlay-preview{
z-index:2;box-sizing:border-box;cursor:grab;-webkit-user-select:none;user-select:none;letter-spacing:0;text-align:center;white-space:pre;word-break:keep-all;font-weight:900;line-height:1.14;font-family:var(--font-sans);border:0;border-radius:0;margin:0;position:absolute;transform:none
}
#aiShell .title-overlay-preview{
min-height:var(--title-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .title-overlay-preview .overlay-text{
z-index:1;padding:var(--title-box-pad,0);background:0 0;position:relative
}
#aiShell .title-overlay-preview .overlay-line{
height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex
}
#aiShell .title-overlay-preview{
white-space:pre-line;word-break:keep-all
}
#aiShell .overlay-text{
box-sizing:border-box;width:100%;min-height:1.1em;padding:var(--overlay-pad-y,0) var(--overlay-pad-x,0);background:var(--overlay-bg,transparent);white-space:pre;overflow-wrap:normal;word-break:keep-all;-webkit-box-decoration-break:clone;box-decoration-break:clone;outline:none;display:block
}
#aiShell .overlay-line{
white-space:pre;display:block
}
#aiShell .resize-handle{
background:var(--accent);cursor:nwse-resize;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-8px;right:-8px;box-shadow:0 1px 5px #00000059
}
#aiShell .subtitle-overlay-preview{
min-height:var(--subtitle-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .subtitle-overlay-preview{
background:0 0
}
#aiShell .subtitle-overlay-preview .overlay-text{
white-space:nowrap
}
#aiShell .anchor-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;display:grid
}
#aiShell .overlay-position-grid{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 16%, var(--surface-muted));border-radius:10px;padding:9px
}
#aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .field{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .field{
flex-direction:column;flex:1;gap:8px;min-height:0;display:flex
}
#aiShell .field{
flex-direction:column;gap:6px;display:flex
}
#aiShell .field{
gap:6px;display:grid
}
#aiShell .field-label{
color:var(--text-muted);margin-bottom:0;font-size:12px;font-weight:700;line-height:1.25;display:block
}
#aiShell .field-label{
color:var(--text-secondary);font-weight:600
}
#aiShell .field-label{
color:var(--text-secondary);font-size:14px;font-weight:600
}
#aiShell .field-label{
color:var(--text-muted);font-size:12px
}
#aiShell .field-label{
color:var(--text-secondary);font-size:13px;font-weight:800
}
#aiShell .range{
--range-fill:0%;appearance:none;width:100%;height:28px;accent-color:var(--accent);cursor:pointer;background:0 0
}
#aiShell .range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px
}
#aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-controls-pane{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--surface-muted) 86%, var(--bg-card))) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 46%, transparent), color-mix(in srgb, var(--panel-accent-2) 34%, transparent) 44%, color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 30px color-mix(in srgb, var(--panel-accent) 11%, transparent), inset 0 1px 0 #ffffff38;border:1px solid #0000;border-radius:10px;justify-content:flex-start;gap:8px;padding:9px;position:relative;overflow:hidden
}
#aiShell .overlay-controls-pane .field, #aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-controls-pane .field-label, #aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-controls-pane .range, #aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .inline-style-sections{
flex:auto;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;display:grid
}
#aiShell .inline-style-sections .fieldset{
gap:7px
}
#aiShell .inline-style-sections .select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:13px
}
#aiShell .inline-style-sections .font-only-settings-title{
margin:0;font-size:13px
}
#aiShell .settings-section{
flex-direction:column;gap:6px;display:flex
}
#aiShell .settings-section .fieldset{
gap:6px
}
#aiShell .settings-section .field{
gap:4px
}
#aiShell .settings-section .setting-row{
gap:8px;min-height:28px
}
#aiShell .template-settings-section{
flex:none
}
#aiShell .font-only-settings{
padding-top:4px
}
#aiShell .style-card{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 20%, var(--surface-muted));border-radius:8px;flex:1 1 0;gap:8px;min-width:0;padding:9px
}
#aiShell .style-card-head{
border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:10px;min-height:28px;padding-bottom:7px;display:flex
}
#aiShell .font-only-settings-title{
color:var(--text-primary);margin:0 0 8px;font-size:14px;font-weight:900
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;justify-self:end;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .check-row{
min-width:0;color:var(--text-secondary);cursor:pointer;flex:none;align-items:center;gap:6px;font-size:12px;line-height:1;display:inline-flex
}
#aiShell .check-row input{
flex:0 0 14px;width:14px;height:14px;margin:0
}
#aiShell .check-row{
color:var(--text-secondary);white-space:nowrap;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex
}
#aiShell .compact-check{
flex:none;align-items:center;gap:5px;font-size:12px;line-height:1;display:inline-flex
}
#aiShell .compact-check input{
flex:none;margin:0
}
#aiShell .fieldset{
border:none;flex-direction:column;gap:12px;margin:0;padding:0;display:flex
}
#aiShell .style-full-field{
gap:0
}
#aiShell .custom-select-wrap{
width:100%;min-width:0;display:block;position:relative
}
#aiShell .custom-select-trigger{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 38%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:100%;min-height:38px;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in srgb, var(--accent) 6%, transparent);background-size:auto,240% 100%;border:1px solid #0000;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;font-size:13px;font-weight:800;animation:8s linear infinite quick-select-border-flow-637e0029;display:flex
}
#aiShell .custom-select-text{
text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex-shrink:0;width:0;height:0
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0;transition:transform .18s
}
#aiShell .style-control-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 9px;min-width:0;display:grid
}
#aiShell .compact-color-field{
min-height:46px
}
#aiShell .compact-color-field .color-inp{
width:100%;height:30px
}
#aiShell .color-inp{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:48px;height:36px;padding:0
}
#aiShell .color-inp{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);cursor:pointer;background:0 0;width:48px;height:36px;padding:0
}
#aiShell .title-bg-row{
flex-direction:row;justify-content:space-between;align-items:center;gap:8px;min-height:46px
}
#aiShell .title-bg-row .color-inp{
flex:0 0 64px;width:64px
}
#aiShell .subtitle-bg-setting-row{
grid-column:1/-1
}
#aiShell .title-bg-toggle{
color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.25;display:inline-flex
}
#aiShell .transparent-color-picker{
width:100%;height:34px;position:relative
}
#aiShell .transparent-color-picker .text-bg-color{
width:100%;height:34px
}
#aiShell .transparent-color-picker{
flex:0 0 64px;width:64px;height:30px;position:relative
}
#aiShell .transparent-color-picker .color-inp{
width:64px;height:30px
}
#aiShell .transparent-color-swatch{
z-index:1;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);pointer-events:none;border-radius:8px;display:block;position:absolute;inset:0;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .transparent-color-swatch{
z-index:1;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);pointer-events:none;background:0 0;position:absolute;inset:0
}
#aiShell .transparent-color-label{
z-index:2;color:var(--text-primary);pointer-events:none;background:color-mix(in srgb, var(--bg-card) 48%, transparent);place-items:center;font-size:12px;font-weight:800;display:grid;position:absolute;inset:0
}
#aiShell .input{
box-sizing:border-box;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);width:100%;min-width:0;min-height:36px;color:var(--text-primary);font:inherit;border-radius:8px;padding:7px 10px;font-size:14px;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .input{
border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);min-width:200px;color:var(--text-primary);flex:1;padding:10px 12px
}
#aiShell .input{
box-sizing:border-box;border-radius:var(--radius-sm,8px);border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;color:var(--text-primary);padding:10px 12px;font-size:14px
}
#aiShell .title-preview-input{
box-sizing:border-box;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-input);width:100%;color:var(--text-primary);padding:10px 12px;font-size:16px
}
#aiShell .title-preview-input{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:13px
}
#aiShell .preview-col{
flex-direction:column;align-self:stretch;gap:14px;height:100%;min-height:0;display:flex
}
#aiShell .stack{
flex-direction:column;gap:14px;display:flex
}
#aiShell .bgm-panel audio{
display:none
}
#aiShell .bgm-panel{
flex-direction:column;min-height:0;padding:14px;display:flex
}
#aiShell .quick-panel-bgm{
--panel-accent:var(--success);--panel-accent-2:var(--accent)
}
#aiShell .settings-section-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .settings-section-title-check{
min-width:0;color:var(--text-primary);cursor:pointer;flex:auto;align-items:center;gap:8px;display:inline-flex
}
#aiShell .settings-section-title-check input{
flex:none
}
#aiShell .btn{
border-radius:var(--radius-sm,8px);border:1px solid var(--border-subtle);cursor:pointer;min-height:36px;padding:0 14px;font-weight:700;transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}
#aiShell .btn{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);cursor:pointer;min-height:36px;padding:0 14px;font-weight:700
}
#aiShell .btn-sm{
padding:8px 12px;font-size:12px
}
#aiShell .btn-sm{
padding:6px 12px;font-size:12px
}
#aiShell .btn-sm{
padding:8px 12px;font-size:14px
}
#aiShell .btn-sm{
padding:6px 12px;font-size:14px
}
#aiShell .file-hidden{
opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden
}
#aiShell .file-hidden{
opacity:0;pointer-events:none;width:1px;height:1px;position:absolute
}
#aiShell .bgm-picker-row{
grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:10px;display:grid
}
#aiShell .bgm-picker-row{
align-items:center;gap:8px;min-width:0;display:flex
}
#aiShell .bgm-picker-row .select-shell{
flex:1;min-width:0
}
#aiShell .bgm-select-shell{
min-width:0;display:block
}
#aiShell .bgm-select-shell .select-chev{
right:12px
}
#aiShell .bgm-select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:15px;line-height:18px
}
#aiShell .bgm-time{
color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px
}
#aiShell .bgm-time{
font-variant-numeric:tabular-nums;min-width:72px;color:var(--text-secondary);text-align:center;white-space:nowrap;flex:none;font-size:14px;line-height:18px
}
#aiShell .bgm-play-btn{
background:var(--success-soft);width:34px;height:34px;color:var(--success);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .bgm-play-btn{
flex:none;width:32px;min-width:32px;min-height:32px;padding:0
}
#aiShell .bgm-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid;width:0;height:0;margin-left:2px
}
#aiShell .bgm-play-icon{
border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0;margin-left:2px;display:block
}
#aiShell .volume-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid
}
#aiShell .slider-row{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .slider-head{
justify-content:space-between;align-items:center;gap:12px;display:flex
}
#aiShell .slider-value{
color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto;font-size:14px;font-weight:800
}
#aiShell .preview-panel{
flex-direction:column;gap:10px;width:100%;min-height:0;padding:14px;display:flex;overflow:hidden
}
#aiShell .preview-panel-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .preview-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:6px 10px;font-size:15px;font-weight:800;display:flex
}
#aiShell .preview-panel-actions{
flex:none;align-items:center;gap:8px;display:flex
}
#aiShell .preview-frame{
border-radius:8px;width:100%;min-height:130px
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-height:250px;color:var(--text-primary);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff3d, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);background:#000;border-radius:8px;margin:0 auto;padding:0;display:block;position:relative;overflow:hidden
}
#aiShell .preview-empty-hint{
opacity:.85;font-size:12px
}
#aiShell .render-action{
flex:none;min-width:84px;min-height:28px;padding:5px 9px;font-size:12px
}
#aiShell .compare-action{
min-width:54px;min-height:28px;padding:5px 9px;font-size:12px
}
#aiShell .text-bg-toggle{
min-width:0;color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex
}
#aiShell .text-bg-toggle{
white-space:nowrap
}
#aiShell .text-bg-toggle input{
width:14px;height:14px;accent-color:var(--accent)
}#aiShell .overlay-editor{
flex-direction:column;gap:12px;min-width:0;padding:16px;display:flex;overflow:hidden auto;container-type:inline-size
}
#aiShell .quick-panel-overlay{
--panel-accent:var(--accent);--panel-accent-2:var(--warning)
}
#aiShell .overlay-preview-layout{
z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;gap:12px;min-width:0;display:grid;position:relative
}
#aiShell .overlay-preview-pane, #aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-preview-pane{
z-index:0;justify-content:flex-start;gap:10px;position:relative
}
#aiShell .edit-preview-stage{
aspect-ratio:9/16;z-index:0;isolation:isolate;border:1px solid var(--border-subtle);touch-action:none;background:#0b0d10;border-radius:8px;align-self:center;width:min(100%,220px);max-width:100%;position:relative;overflow:hidden
}
#aiShell .edit-preview-video{
z-index:0;object-fit:cover;pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .edit-preview-video{
z-index:1;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0b0d10;width:100%;height:100%;position:absolute;inset:0
}
#aiShell .overlay-preview{
z-index:2;box-sizing:border-box;cursor:grab;-webkit-user-select:none;user-select:none;letter-spacing:0;text-align:center;white-space:pre;word-break:keep-all;font-weight:900;line-height:1.14;font-family:var(--font-sans);border:0;border-radius:0;margin:0;position:absolute;transform:none
}
#aiShell .title-overlay-preview{
min-height:var(--title-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .title-overlay-preview .overlay-text{
z-index:1;padding:var(--title-box-pad,0);background:0 0;position:relative
}
#aiShell .title-overlay-preview .overlay-line{
height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex
}
#aiShell .title-overlay-preview{
white-space:pre-line;word-break:keep-all
}
#aiShell .overlay-text{
box-sizing:border-box;width:100%;min-height:1.1em;padding:var(--overlay-pad-y,0) var(--overlay-pad-x,0);background:var(--overlay-bg,transparent);white-space:pre;overflow-wrap:normal;word-break:keep-all;-webkit-box-decoration-break:clone;box-decoration-break:clone;outline:none;display:block
}
#aiShell .overlay-line{
white-space:pre;display:block
}
#aiShell .subtitle-overlay-preview{
min-height:var(--subtitle-box-height,auto);justify-content:center;align-items:center;display:flex
}
#aiShell .subtitle-overlay-preview{
background:0 0
}
#aiShell .subtitle-overlay-preview .overlay-text{
white-space:nowrap
}
#aiShell .anchor-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;display:grid
}
#aiShell .overlay-position-grid{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 16%, var(--surface-muted));border-radius:10px;padding:9px
}
#aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}
#aiShell .overlay-controls-pane{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--surface-muted) 86%, var(--bg-card))) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 46%, transparent), color-mix(in srgb, var(--panel-accent-2) 34%, transparent) 44%, color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 30px color-mix(in srgb, var(--panel-accent) 11%, transparent), inset 0 1px 0 #ffffff38;border:1px solid #0000;border-radius:10px;justify-content:flex-start;gap:8px;padding:9px;position:relative;overflow:hidden
}
#aiShell .overlay-controls-pane .field, #aiShell .overlay-position-grid .field{
gap:4px
}
#aiShell .overlay-controls-pane .field-label, #aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}
#aiShell .overlay-controls-pane .range, #aiShell .overlay-position-grid .range{
height:16px
}
#aiShell .inline-style-sections{
flex:auto;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;display:grid
}
#aiShell .inline-style-sections .fieldset{
gap:7px
}
#aiShell .inline-style-sections .select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:13px
}
#aiShell .inline-style-sections .font-only-settings-title{
margin:0;font-size:13px
}
#aiShell .settings-section{
flex-direction:column;gap:6px;display:flex
}
#aiShell .settings-section .fieldset{
gap:6px
}
#aiShell .settings-section .field{
gap:4px
}
#aiShell .settings-section .setting-row{
gap:8px;min-height:28px
}
#aiShell .template-settings-section{
flex:none
}
#aiShell .font-only-settings{
padding-top:4px
}
#aiShell .style-card{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 20%, var(--surface-muted));border-radius:8px;flex:1 1 0;gap:8px;min-width:0;padding:9px
}
#aiShell .style-card-head{
border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:10px;min-height:28px;padding-bottom:7px;display:flex
}
#aiShell .font-only-settings-title{
color:var(--text-primary);margin:0 0 8px;font-size:14px;font-weight:900
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;justify-self:end;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;padding:0 12px;font-size:12px;font-weight:800
}
#aiShell .check-row{
min-width:0;color:var(--text-secondary);cursor:pointer;flex:none;align-items:center;gap:6px;font-size:12px;line-height:1;display:inline-flex
}
#aiShell .check-row input{
flex:0 0 14px;width:14px;height:14px;margin:0
}
#aiShell .check-row{
color:var(--text-secondary);white-space:nowrap;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex
}
#aiShell .fieldset{
border:none;flex-direction:column;gap:12px;margin:0;padding:0;display:flex
}
#aiShell .custom-select-wrap{
width:100%;min-width:0;display:block;position:relative
}
#aiShell .custom-select-trigger{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 38%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:100%;min-height:38px;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in srgb, var(--accent) 6%, transparent);background-size:auto,240% 100%;border:1px solid #0000;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;font-size:13px;font-weight:800;animation:8s linear infinite quick-select-border-flow-637e0029;display:flex
}
#aiShell .custom-select-text{
text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex-shrink:0;width:0;height:0
}
#aiShell .picker-chev{
border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--text-muted);flex:none;width:0;height:0;transition:transform .18s
}
#aiShell .style-control-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 9px;min-width:0;display:grid
}
#aiShell .title-bg-row{
flex-direction:row;justify-content:space-between;align-items:center;gap:8px;min-height:46px
}
#aiShell .title-bg-row .color-inp{
flex:0 0 64px;width:64px
}
#aiShell .subtitle-bg-setting-row{
grid-column:1/-1
}
#aiShell .title-bg-toggle{
color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.25;display:inline-flex
}
#aiShell .transparent-color-picker{
width:100%;height:34px;position:relative
}
#aiShell .transparent-color-picker .text-bg-color{
width:100%;height:34px
}
#aiShell .transparent-color-picker{
flex:0 0 64px;width:64px;height:30px;position:relative
}
#aiShell .transparent-color-picker .color-inp{
width:64px;height:30px
}
#aiShell .transparent-color-swatch{
z-index:1;border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), var(--bg-input);pointer-events:none;border-radius:8px;display:block;position:absolute;inset:0;box-shadow:0 8px 20px #2563eb0f
}
#aiShell .transparent-color-swatch{
z-index:1;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);pointer-events:none;background:0 0;position:absolute;inset:0
}
#aiShell .transparent-color-label{
z-index:2;color:var(--text-primary);pointer-events:none;background:color-mix(in srgb, var(--bg-card) 48%, transparent);place-items:center;font-size:12px;font-weight:800;display:grid;position:absolute;inset:0
}
#aiShell .bgm-panel audio{
display:none
}
#aiShell .bgm-panel{
flex-direction:column;min-height:0;padding:14px;display:flex
}
#aiShell .quick-panel-bgm{
--panel-accent:var(--success);--panel-accent-2:var(--accent)
}
#aiShell .settings-section-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .settings-section-title-check{
min-width:0;color:var(--text-primary);cursor:pointer;flex:auto;align-items:center;gap:8px;display:inline-flex
}
#aiShell .settings-section-title-check input{
flex:none
}
#aiShell .bgm-picker-row{
grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:10px;display:grid
}
#aiShell .bgm-picker-row{
align-items:center;gap:8px;min-width:0;display:flex
}
#aiShell .bgm-picker-row .select-shell{
flex:1;min-width:0
}
#aiShell .bgm-select-shell{
min-width:0;display:block
}
#aiShell .bgm-select-shell .select-chev{
right:12px
}
#aiShell .bgm-select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:15px;line-height:18px
}
#aiShell .bgm-time{
color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px
}
#aiShell .bgm-time{
font-variant-numeric:tabular-nums;min-width:72px;color:var(--text-secondary);text-align:center;white-space:nowrap;flex:none;font-size:14px;line-height:18px
}
#aiShell .bgm-play-btn{
background:var(--success-soft);width:34px;height:34px;color:var(--success);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}
#aiShell .bgm-play-btn{
flex:none;width:32px;min-width:32px;min-height:32px;padding:0
}
#aiShell .bgm-play-icon{
border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid;width:0;height:0;margin-left:2px
}
#aiShell .bgm-play-icon{
border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0;margin-left:2px;display:block
}
#aiShell .volume-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid
}
#aiShell .slider-row{
flex-direction:column;gap:6px;min-width:0;display:flex
}
#aiShell .slider-head{
justify-content:space-between;align-items:center;gap:12px;display:flex
}
#aiShell .slider-value{
color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto;font-size:14px;font-weight:800
}
#aiShell .preview-panel{
flex-direction:column;gap:10px;width:100%;min-height:0;padding:14px;display:flex;overflow:hidden
}
#aiShell .preview-panel-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}
#aiShell .preview-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:6px 10px;font-size:15px;font-weight:800;display:flex
}
#aiShell .preview-panel-actions{
flex:none;align-items:center;gap:8px;display:flex
}
#aiShell .preview-frame{
border-radius:8px;width:100%;min-height:130px
}
#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-height:250px;color:var(--text-primary);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff3d, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);background:#000;border-radius:8px;margin:0 auto;padding:0;display:block;position:relative;overflow:hidden
}
/* 第 4 步：仅保留版式适配；视觉直接沿用参考组件与当前主题 token */
#aiShell .ai-ref-content.step4-content,

#aiShell .step4-panel-note,
#aiShell .step4-card-note,
#aiShell .step4-bgm-meta{
  display:block;
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:11px;
  font-weight:500;
  line-height:1.35;
}

#aiShell .step4-position-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  align-self:stretch;
  padding:0 2px 5px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:13px;
  font-weight:800;
}
#aiShell .step4-position-head small{
  color:var(--text-muted);
  font-size:10px;
  font-weight:600;
}

@media (max-width:1450px){

}
@media (max-width:1050px){

}
@media (max-width:760px){

  #aiShell .step4-volume-grid{grid-template-columns:1fr}
}

/* 第 5 步：沿用 StepCover 模板库结构，真实缩略图与主题 token */
#aiShell .step5-root{
  width:100%;
  height:100%;
  min-height:0;
  max-width:none;
  margin:0;
  overflow:hidden;
}
#aiShell .ai-ref-content.step5-content,
#aiShell .ai-ref-content.step6-content{
  flex:1 1 0;
  height:100%;
  min-height:0;
  overflow:hidden;
}
#aiShell .step5-root .cover-library-panel{
  width:100%;
  height:100%;
  min-height:0;
  padding:14px 18px 16px;
}
#aiShell .step5-root .card-title{flex:0 0 auto}
#aiShell .step5-root .cover-flow-panel{
  flex:1;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  min-height:0;
  overflow:hidden;
}
#aiShell .step5-root .cover-flow-tabs{
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  justify-self:start;
  gap:6px;
  padding:4px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
}
#aiShell .step5-root .cover-template-grid{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  grid-auto-rows:max-content;
  align-content:start;
  gap:12px;
  max-height:none;
  min-height:0;
  padding:2px;
  overflow:auto;
}
#aiShell .step5-root .cover-template-card{
  display:grid;
  gap:8px;
  min-width:0;
  padding:8px;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
}
#aiShell .step5-root .cover-template-thumb{
  aspect-ratio:3/4;
  padding:0;
  border-radius:7px;
}
#aiShell .step5-root .cover-template-thumb img{
  position:absolute;
  inset:0;
  z-index:0;
  object-fit:cover;
  width:100%;
  height:100%;
}
#aiShell .step5-root .cover-template-thumb .cover-overlay{
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.24));
}
#aiShell .step5-root .cover-template-thumb .tpl-title,
#aiShell .step5-root .cover-template-thumb .tpl-sub,
#aiShell .step5-root .cover-template-thumb .tpl-badge,
#aiShell .step5-root .cover-template-thumb .tpl-price{z-index:2}
#aiShell .step5-root .cover-flow-actions{padding-top:2px}
#aiShell .step5-root .cover-custom-flow{
  display:grid;
  gap:12px;
  max-width:760px;
}
#aiShell .step5-root .cover-snapshot-stage{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,320px));
  justify-content:center;
  align-items:start;
  gap:28px;
  min-height:0;
  overflow:auto;
}
#aiShell .step5-root .cover-snapshot-column{min-width:0}
#aiShell .step5-root .generated-cover-frame{position:relative}
#aiShell .step5-root .cover-template-live-copy{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.78);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.2));
}
#aiShell .step5-root .cover-template-live-copy b{font-size:24px;line-height:1.2}
#aiShell .step5-root .cover-template-live-copy span{font-size:13px;font-weight:800}
#aiShell .step5-root .cover-snapshot-actions{gap:10px}

/* 第5步自有封面模板：素材未放入 custom 目录前，使用可辨识的 CSS 占位，不回退旧人物图。 */
#aiShell .step5-root .cover-category-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:2px 0 18px;
}
#aiShell .step5-root .cover-category-chip{
  min-height:40px;
  padding:0 18px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--bg-input);
  color:var(--text-muted);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
#aiShell .step5-root .cover-category-chip:hover,
#aiShell .step5-root .cover-category-chip.active{
  border-color:var(--accent);
  color:var(--accent-contrast);
  background:var(--button-primary-bg);
}
#aiShell .step5-root .cover-generated-placeholder{
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 18%,color-mix(in srgb,var(--cover-accent,#38bdf8) 58%,transparent),transparent 38%),
    linear-gradient(145deg,#101d29 0%,#0a1119 55%,color-mix(in srgb,var(--cover-accent,#38bdf8) 32%,#0a1119) 100%);
}
#aiShell .step5-root .cover-generated-placeholder::after{
  content:'自有模板素材待入库';
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:2;
  padding:4px 6px;
  border:1px solid color-mix(in srgb,var(--cover-accent,#38bdf8) 65%,transparent);
  border-radius:999px;
  color:#fff;
  background:rgba(5,12,18,.58);
  font-size:9px;
  font-style:normal;
  font-weight:800;
}
#aiShell .step5-root .cover-template-thumb .cover-template-image{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
#aiShell .step5-root .generated-cover-frame.cover-generated-placeholder{
  min-height:320px;
}

/* 第4步成片预览：结果始终在右卡可用区域内居中展示完整 9:16 画面。 */

#aiShell .step5-root .cover-ai-workbench{display:grid;gap:10px;margin:16px auto 0;max-width:860px;padding:14px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-muted)}
#aiShell .step5-root .cover-frame-status{margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}
#aiShell .step5-root .cover-ai-msg{min-height:18px;color:var(--accent);font-size:12px;font-weight:700}
#aiShell .step5-root .cover-ai-output{min-height:0}
#aiShell .step5-root .cover-ai-result{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:10px;border-radius:10px;background:var(--bg-preview)}
#aiShell .step5-root .cover-ai-result img{width:180px;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
#aiShell .step5-root .cover-ai-result div{display:grid;gap:8px;align-content:start;max-width:320px}
#aiShell .step5-root .cover-ai-result small{color:var(--text-muted);line-height:1.5}

/* ===== 第5步封面 · 三栏布局（左参考大图 / 中提示词框 / 右生成结果）===== */
#aiShell .step5-root .cover-library-panel:has(.cover-2col){display:flex;flex-direction:column;gap:8px}
#aiShell .step5-root .cover-2col{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(360px,1.15fr) minmax(300px,1fr);gap:14px;align-items:start;overflow:auto;padding:2px}
#aiShell .step5-root .cover-col{display:flex;flex-direction:column;gap:10px;min-width:0}
#aiShell .step5-root .cover-col-ref .cover-ref-big{aspect-ratio:3/4;width:100%;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--border-subtle)}
#aiShell .step5-root .cover-ref-big img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
#aiShell .step5-root .cover-ref-big .cover-template-live-copy{z-index:2}
#aiShell .step5-root .cover-ref-big.cover-generated-placeholder{min-height:260px}
#aiShell .step5-root .cover-col-prompt .cover-prompt-card{border:1px solid var(--border-subtle);border-radius:12px;padding:14px;background:var(--surface-muted);display:flex;flex-direction:column;gap:12px}
#aiShell .step5-root .cover-ref-thumbs{display:flex;gap:10px}
#aiShell .step5-root .cover-ref-thumbs .ref-thumb{flex:1;min-width:0}
#aiShell .step5-root .cover-ref-thumbs .ref-thumb span{display:block;font-size:11px;color:var(--text-muted);margin-bottom:4px;font-weight:700}
#aiShell .step5-root .cover-ref-thumbs .ref-thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--border-subtle);background:#000}
#aiShell .step5-root .cover-col-result .cover-ai-output{min-height:320px;display:flex;flex-direction:column;gap:10px}
#aiShell .step5-root .cover-col-result .cover-result-empty{min-height:320px;display:grid;place-content:center;text-align:center;color:var(--text-muted);border:1px dashed var(--border-subtle);border-radius:12px;padding:16px}
#aiShell .step5-root .cover-col-result .cover-result-empty strong{display:block;color:var(--text-secondary);font-size:14px;margin-bottom:6px}
#aiShell .step5-root .cover-col-result .cover-result-empty small{font-size:12px;line-height:1.6}
#aiShell .step5-root .cover-col-result .cover-ai-result{flex-direction:column;align-items:stretch}
#aiShell .step5-root .cover-col-result .cover-ai-result img{width:100%;max-width:260px;margin:0 auto}

/* ===== 第5步封面 · 左生成框 / 右结果（仿短视频霸屏 AI 封面）===== */
#aiShell .step5-root .cover-col-gen .cover-gen-box{border:1px solid var(--border-subtle);border-radius:12px;padding:14px;background:var(--surface-muted);display:flex;flex-direction:column;gap:12px}
#aiShell .step5-root .cover-generation-reference{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#aiShell .step5-root .cover-generation-reference .cover-reference-item{min-width:0}
#aiShell .step5-root .cover-generation-reference .cover-reference-label{display:block;margin:0 0 4px;color:var(--text-muted);font-size:11px;line-height:1.35;font-weight:700}
#aiShell .step5-root .cover-generation-reference .cover-reference-preview{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;background:#000;border:1px solid var(--border-subtle)}
#aiShell .step5-root .cover-generation-reference .cover-reference-loading{display:grid;place-content:center;height:96px;border:1px dashed var(--border-subtle);border-radius:9px;color:var(--text-muted);font-size:11px;text-align:center;padding:8px}
#aiShell .step5-root .cover-col-gen .cover-frame-tools{margin:0}
#aiShell .step5-root .cover-col-gen .cover-frame-dots{margin-top:0}

@media (max-width:960px){
  #aiShell .step5-root .cover-2col{grid-template-columns:1fr}
}

/* 第4步画面位置：标题与字幕分别成组，避免 X/Y 控件交叉阅读。 */

/* 第4步：逐句字幕校对时间轴。保持与 9:16 预览同一工作台，而不是另开表单。 */

@media(max-width:980px){}
@media (max-width:700px){
  
}

/* 第4步重构：参数 / 预览 / 音乐与成片 + 底部剪映式时间轴。 */
#aiShell .ai-ref-content.step4-content,

@media(max-width:1050px){}

/* 第4步拖动对齐：仅在拖动中显示画布中心十字线。 */
#aiShell .edit-align-guide{
  display:none;
  z-index:8;
  pointer-events:none;
  position:absolute;
  background:color-mix(in srgb,var(--accent) 86%,#fff);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 58%,transparent);
  opacity:.92;
}
#aiShell .edit-align-guide-v{
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
}
#aiShell .edit-align-guide-h{
  left:0;
  right:0;
  height:1px;
  transform:translateY(-50%);
}
#aiShell .edit-align-hint{
  display:none;
  z-index:9;
  pointer-events:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--accent) 68%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--bg-preview) 82%,transparent);
  color:#fff;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

/* 字幕样式预览：背景只随实际文字边界渲染，不再填满定位框。 */
#aiShell #aiEditOverlaySub{
  width:fit-content;
  max-width:var(--subtitle-preview-max-width,100%);
  background:transparent!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  /* aiSubX 是字幕视觉中心；覆盖旧版 overlay 的 transform:none。 */
  transform:translate(-50%,-50%)!important;
}
#aiShell #aiEditOverlaySub .overlay-text{
  /* 必须参与外层 fit-content 宽度计算，不能作为绝对定位的独立图层。 */
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:inline-block;
  width:auto!important;
  max-width:100%;
  padding:2px 6px;
  border-radius:4px;
  /* 每个 cue 以当前字幕宽度换行，绝不把整行文字推出 9:16 舞台。 */
  box-sizing:border-box;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
  line-height:1.25;
}
#aiShell #aiEditOverlayTitle{
  width:fit-content;
  max-width:var(--title-preview-max-width,100%);
  background:transparent!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
}
#aiShell #aiEditOverlayTitle .overlay-text{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:inline-block;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
  white-space:pre-line;
}
#aiShell .subtitle-bg-controls .color-inp{
  flex:0 0 34px;
  width:34px;
  height:30px;
  padding:2px;
}

/* 右侧成片卡：窄桌面下按钮组可收缩/换行，避免主操作被裁掉。 */

@media (max-width:1450px){
  
}

/* 成片预览标题与两枚紧凑操作始终同行；宽度问题由工作台列收缩解决。 */

/* 第4步最终工作台：不再为一屏硬塞内容。画布保持真实 9:16，页面整体向下延展滚动。 */

body.cue-editing{cursor:ew-resize!important;user-select:none!important}

@media(max-width:1180px){

}
@media(max-width:780px){

}

/* 第4步内容较长，导航跟在完整时间轴之后；不要用全局 sticky 覆盖编辑画布。 */
#aiShell .ai-ref-workspace.step4-flow .ai-ref-footer{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  margin-top:18px!important;
  background:var(--bg-elevated)!important;
  backdrop-filter:none!important;
}

/* 字幕始终单行显示：预览舞台不因定位框宽度自动折行。 */
#aiShell .step4-root #aiEditOverlaySub,
#aiShell .step4-root #aiEditOverlaySub .overlay-text,
#aiShell .step4-root #aiEditOverlaySub .overlay-line{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
}

/* 第4步字幕/标题开关：关闭时预览层立即隐藏，设置卡同步呈现禁用状态。 */
#aiShell .step4-root .overlay-preview[hidden],
#aiShell .step4-root .overlay-preview[aria-hidden="true"]{
  display:none!important;
}

#aiShell .step4-root .style-card.style-disabled fieldset{
  opacity:.38;
  filter:saturate(.35);
  pointer-events:none;
}

#aiShell .step4-root .style-card.style-disabled .style-card-head{
  border-bottom-color:transparent;
}

#aiShell .step4-root .compact-check input[type="checkbox"]{
  cursor:pointer;
  accent-color:var(--accent-2);
}

#aiShell .step4-root .overlay-text{
  paint-order:stroke fill;
}

#aiShell .step4-root .title-overlay-preview .overlay-text{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* 字幕模板弹窗按桌面软件的宽幅四列模板库呈现。 */
#aiShell .subtitle-template-dialog{
  max-height:min(88vh,920px);
  overflow:hidden;
  border-color:rgba(250,204,21,.58);
}

#aiShell .subtitle-template-dialog-head{
  padding:22px 24px 20px;
  background:linear-gradient(105deg,rgba(250,204,21,.13),rgba(45,212,191,.11));
}

#aiShell .subtitle-template-dialog-head>div{
  display:grid;
  gap:7px;
}

#aiShell .subtitle-template-dialog-head small{
  color:#facc15;
  font-size:12px;
  font-weight:800;
}

#aiShell .subtitle-template-dialog-head h3{
  margin:0;
  font-size:20px;
}

#aiShell .subtitle-template-dialog-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:13px;
}

#aiShell .subtitle-template-dialog .ai-pick-list{
  padding:22px 24px;
}

#aiShell .subtitle-template-dialog .subtitle-title-template-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

#aiShell .subtitle-template-dialog .ai-pick-foot{
  padding:16px 24px;
}

@media(max-width:1000px){
  #aiShell .subtitle-template-dialog .subtitle-title-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:720px){
  #aiShell .subtitle-template-dialog .subtitle-title-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 第4步最终分组：位置不是独立模块，而是各自字幕/标题样式的一部分。 */

@media(max-width:760px){
  
}

/* 第4步编辑台：保留左右栏的原位置，由整个工作台外框统一包住。
   不能将右栏塞进中间编辑列，否则会造成横向溢出。 */

/* 已确认成片只保留历史记录，不能再显示编辑画布中的标题/字幕默认节点。 */

@media(max-width:1180px){

}
@media(max-width:780px){

}

/* ===== .dh-root（嵌入数字人工作台）跟随全站主题 ===== */
body[data-theme="tech-dark"] .dh-root{
  --bg-root:#070a0f; --bg-card:#121820; --bg-input:rgba(0,0,0,.35); --bg-preview:#05080d;
  --border-subtle:rgba(255,255,255,.06); --border-hover:rgba(255,255,255,.12); --border-strong:rgba(79,209,197,.35);
  --text-primary:#f0f4f8; --text-secondary:#94a3b8; --text-muted:#64748b;
  --accent:#5eead4; --accent-soft:rgba(94,234,212,.12); --accent-border:rgba(94,234,212,.28); --accent-2:#2dd4bf;
  --success:#34d399; --success-soft:rgba(52,211,153,.08); --success-border:rgba(52,211,153,.22);
  --danger:#f87171; --danger-soft:rgba(248,113,113,.1); --danger-border:rgba(248,113,113,.3);
  --warning:#facc15; --warning-soft:rgba(250,204,21,.12); --warning-border:rgba(250,204,21,.25);
  --surface-muted:rgba(0,0,0,.22); --surface-muted-strong:rgba(0,0,0,.35); --surface-active:rgba(94,234,212,.12);
  --button-primary-bg:linear-gradient(180deg,#7ff0df 0%,#5eead4 100%);
  --button-primary-shadow:0 8px 24px rgba(45,212,191,.25);
  --body-bg:radial-gradient(1200px 600px at 10% -10%,rgba(45,212,191,.08),transparent),radial-gradient(900px 500px at 90% 0%,rgba(56,189,248,.06),transparent),var(--bg-root);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--bg-card);
  --shadow-panel:0 16px 42px rgba(0,0,0,.32); --radius-sm:10px; --radius-md:14px;
}
body[data-theme="tech-neon"] .dh-root{
  --bg-root:#080b10; --bg-card:rgba(16,23,31,.86); --bg-input:rgba(5,9,14,.72); --bg-preview:#020408;
  --border-subtle:rgba(140,255,238,.11); --border-hover:rgba(35,211,238,.28); --border-strong:rgba(163,230,53,.36);
  --text-primary:#edf7f5; --text-secondary:#a7bbb8; --text-muted:#708884;
  --accent:#23d3ee; --accent-soft:rgba(35,211,238,.12); --accent-border:rgba(35,211,238,.34); --accent-2:#a3e635;
  --success:#7ddf64; --success-soft:rgba(125,223,100,.1); --success-border:rgba(125,223,100,.28);
  --danger:#ff5f7e; --danger-soft:rgba(255,95,126,.11); --danger-border:rgba(255,95,126,.32);
  --warning:#f8c14a; --warning-soft:rgba(248,193,74,.13); --warning-border:rgba(248,193,74,.3);
  --surface-muted:rgba(140,255,238,.055); --surface-muted-strong:rgba(140,255,238,.095); --surface-active:rgba(35,211,238,.14);
  --button-primary-bg:linear-gradient(135deg,#23d3ee 0%,#7ddf64 62%,#f8c14a 100%);
  --button-primary-shadow:0 0 0 1px rgba(35,211,238,.2),0 14px 36px rgba(35,211,238,.22);
  --body-bg:radial-gradient(900px 420px at 8% -8%,rgba(35,211,238,.13),transparent 62%),radial-gradient(760px 460px at 94% 4%,rgba(163,230,53,.1),transparent 58%),linear-gradient(180deg,#080b10 0%,#0b1114 48%,#07100d 100%);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--bg-card);
  --shadow-panel:0 0 0 1px rgba(140,255,238,.08),0 16px 44px rgba(0,0,0,.38); --radius-sm:10px; --radius-md:14px;
}
body[data-theme="signal-light"] .dh-root{
  --bg-root:#f3f8f7; --bg-card:rgba(255,255,255,.88); --bg-input:rgba(255,255,255,.94); --bg-preview:#09120f;
  --border-subtle:rgba(18,94,78,.14); --border-hover:rgba(0,150,126,.26); --border-strong:rgba(0,150,126,.42);
  --text-primary:#10231f; --text-secondary:#425f59; --text-muted:#6d817d;
  --accent:#00967e; --accent-soft:rgba(0,150,126,.11); --accent-border:rgba(0,150,126,.3); --accent-2:#f47b3f;
  --success:#18a058; --success-soft:rgba(24,160,88,.11); --success-border:rgba(24,160,88,.25);
  --danger:#d83b54; --danger-soft:rgba(216,59,84,.1); --danger-border:rgba(216,59,84,.28);
  --warning:#c87900; --warning-soft:rgba(200,121,0,.13); --warning-border:rgba(200,121,0,.26);
  --surface-muted:rgba(18,94,78,.055); --surface-muted-strong:rgba(18,94,78,.095); --surface-active:rgba(0,150,126,.1);
  --button-primary-bg:linear-gradient(135deg,#00b89a 0%,#00967e 54%,#f47b3f 100%);
  --button-primary-shadow:0 12px 30px rgba(0,150,126,.22);
  --body-bg:radial-gradient(880px 460px at 9% -10%,rgba(0,184,154,.18),transparent 62%),radial-gradient(680px 420px at 96% 0%,rgba(244,123,63,.13),transparent 58%),linear-gradient(180deg,#fbfdfc 0%,#f3f8f7 48%,#eaf5f1 100%);
  --card-bg:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.55) 100%),var(--bg-card);
  --shadow-panel:0 16px 42px rgba(31,75,66,.12); --radius-sm:10px; --radius-md:14px;
}

/* ===== 数字人口播·第5步 封面制作：移植短视频霸屏获客第8步模板体系 + 截帧固定 ===== */
#aiShell .step5-root .cover-work-detect{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--accent-border);border-radius:12px;background:var(--accent-soft);margin-bottom:12px}
#aiShell .step5-root .cover-work-detect .chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(16,185,129,.14);color:#10b981;border:1px solid rgba(16,185,129,.32)}
#aiShell .step5-root .cover-work-detect .chip.warn{background:var(--warning-soft);color:var(--warning);border:1px solid var(--warning-border)}
#aiShell .step5-root .cover-frame-picker{margin-top:12px}
#aiShell .step5-root .cover-frame-picker .preview-label{font-size:12px;color:var(--text-muted);margin-bottom:8px}
#aiShell .step5-root .cover-frame-main{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:14px;align-items:start;padding:12px;border:1px solid var(--border-subtle);border-radius:14px;background:var(--bg-card)}
#aiShell .step5-root .cover-frame-main img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--border-subtle);background:#000}
#aiShell .step5-root .cover-frame-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:2px}
#aiShell .step5-root .cover-frame-index{font-size:12px;color:var(--text-muted);font-weight:800;min-width:42px;text-align:center}
#aiShell .step5-root .cover-frame-dots{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#aiShell .step5-root .cover-frame-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-input);cursor:pointer;padding:0}
#aiShell .step5-root .cover-frame-dot.active{background:var(--accent);border-color:var(--accent)}

/* ===== 数字人口播·第5步 生成框：模板参考图 + 视频截图 双参考图 ===== */
#aiShell .step5-root .cover-refs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
#aiShell .step5-root .cover-ref-item{min-width:0}
#aiShell .step5-root .cover-ref-frame{aspect-ratio:3/4;border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;background:#000;display:grid;place-items:center}
#aiShell .step5-root .cover-ref-frame img{width:100%;height:100%;object-fit:cover;display:block}
#aiShell .step5-root .cover-video-preview{margin-top:14px}
#aiShell .step5-root .cover-video-preview .frame{border-radius:12px;overflow:hidden;background:#000}
#aiShell .step5-root .cover-video-preview video{width:100%;max-height:260px;display:block;background:#000}
#aiShell .step5-root .cover-frame-tools{margin:2px 0 12px}

/* 第5步生成框：模板参考图下方放「换模板」，视频截图下方放「换帧」按钮组 */
#aiShell .step5-root .cover-generation-reference .cover-reference-item{display:flex;flex-direction:column;gap:8px}
#aiShell .step5-root .cover-generation-reference .cover-ref-action{align-self:flex-start;margin-top:2px}
#aiShell .step5-root .cover-generation-reference .cover-frame-tools{margin:2px 0 0}
#aiShell .step5-root .cover-generation-reference .cover-frame-dots{margin-top:8px}

/* 第5步模板卡片：去掉悬浮标题/蒙版/下方说明，只留干净模板图 */
#aiShell .step5-root .cover-template-card{padding:4px;gap:0;background:transparent}
#aiShell .step5-root .cover-template-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--border-subtle)}
#aiShell .step5-root .cover-template-card.selected img{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-border)}

/* ===== 数字人口播·第4步 悦哥式三栏布局（预览+时间轴在左，设置在右） ===== */
#aiShell .step4-root .step4-workbench{display:grid!important;grid-template-columns:minmax(0,1fr) 360px!important;gap:16px!important;align-items:start!important;min-height:0!important}
#aiShell .step4-root .step4-main-col{grid-column:1!important;grid-row:1!important;min-width:0;display:grid;gap:12px;align-self:start}
#aiShell .step4-root .step4-settings-col{grid-column:2!important;grid-row:1!important;min-width:0;display:grid;gap:12px;position:sticky!important;top:8px;max-height:calc(100vh - 130px);overflow:auto;padding-right:2px;align-self:start}
#aiShell .step4-root .step4-settings-col .card,#aiShell .step4-root .step4-settings-col .settings-section{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);padding:12px}
#aiShell .step4-root .overlay-position-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px 10px!important}

/* 修复：历史 display:contents 导致第4步主列内部面板错乱 */
#aiShell .step4-root .step4-main-col>.overlay-editor{display:block!important}
#aiShell .step4-root .step4-main-col>.overlay-editor>.overlay-preview-layout{display:block!important}
#aiShell .step4-root .step4-main-col>.settings-section{display:block!important;width:100%!important;box-sizing:border-box!important}
#aiShell .step4-root .overlay-position-grid{width:min(100%,340px)!important;align-self:center!important}


/* ===== 从悦哥AI智能体完整提取的视频剪辑样式（video-edit scoped） ===== */
#aiShell .themed-video-range{
appearance:none;cursor:pointer;background:0 0;width:100%;min-width:0;height:18px;margin:0
}

#aiShell .themed-video-range:disabled{
cursor:not-allowed;opacity:.55
}

#aiShell .themed-video-range::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent) 0 var(--range-fill,0%), color-mix(in srgb, var(--text-secondary) 22%, transparent) var(--range-fill,0%) 100%);border-radius:999px;height:6px
}

#aiShell .themed-video-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-input);background:var(--accent);width:14px;height:14px;box-shadow:0 0 12px color-mix(in srgb, var(--accent) 42%, transparent);border-radius:50%;margin-top:-4px
}

#aiShell .themed-video-range::-moz-range-track{
background:color-mix(in srgb, var(--text-secondary) 22%, transparent);border-radius:999px;height:6px
}

#aiShell .themed-video-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}

#aiShell .themed-video-range::-moz-range-thumb{
border:2px solid var(--bg-input);background:var(--accent);border-radius:50%;width:14px;height:14px
}

#aiShell .preview-empty{
color:var(--text-muted);text-align:center;background:linear-gradient(#10141d,#07090d);place-items:center;padding:16px;font-size:13px;line-height:1.45;display:grid;position:absolute;inset:0
}

#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;justify-self:end;padding:0 12px;font-size:12px;font-weight:800
}

#aiShell .template-head-select-btn:hover{
border-color:var(--accent-border);background:color-mix(in srgb, var(--accent-soft) 62%, var(--bg-card-hover))
}

#aiShell .template-selected-label{
color:var(--text-secondary);flex:none;font-size:12px;font-weight:700
}

#aiShell .field-label{
color:var(--text-muted);margin-bottom:0;font-size:12px;font-weight:700;line-height:1.25;display:block
}

#aiShell .style-range-field{
grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;display:grid
}

#aiShell .range-control{
grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;min-width:0;display:grid
}

#aiShell .range-value{
color:var(--text-secondary);text-align:right;white-space:nowrap;font-size:12px;font-weight:800;line-height:1
}

#aiShell .style-range-field input[type=range]{
appearance:none;background:var(--range-track,var(--surface-muted-strong));width:100%;height:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 55%, transparent);cursor:pointer;border-radius:999px;margin:0
}

#aiShell .style-range-field input[type=range]:disabled{
filter:grayscale(.7);opacity:.58;cursor:not-allowed
}

#aiShell .style-range-field input[type=range]:disabled::-webkit-slider-thumb{
background:color-mix(in srgb, var(--text-muted) 58%, #fff);box-shadow:none
}

#aiShell .style-range-field input[type=range]:disabled::-moz-range-thumb{
background:color-mix(in srgb, var(--text-muted) 58%, #fff);box-shadow:none
}

#aiShell .style-range-field input[type=range]::-webkit-slider-runnable-track{
background:0 0;border-radius:999px;height:6px
}

#aiShell .style-range-field input[type=range]::-webkit-slider-thumb{
appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:15px;height:15px;margin-top:-4.5px;box-shadow:0 2px 8px #00000059
}

#aiShell .style-range-field input[type=range]::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:50%;width:15px;height:15px;box-shadow:0 2px 8px #00000059
}

#aiShell .style-range-field input[type=range]::-moz-range-track{
background:0 0;border-radius:999px;height:6px
}

#aiShell .step-panel-heading{
box-sizing:border-box;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 72%), color-mix(in srgb, var(--bg-card) 96%, var(--surface-muted));min-height:50px;color:var(--text-primary);align-items:center;gap:10px;padding:12px 16px;display:flex
}

#aiShell .step-panel-heading span{
border:1px solid var(--accent-border);background:var(--accent-soft);width:28px;height:24px;color:var(--accent);font-variant-numeric:tabular-nums;border-radius:7px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex
}

#aiShell .step-panel-heading strong{
font-size:14px;font-weight:800
}

#aiShell .frame-control-range{
width:100%;min-width:0;accent-color:var(--accent);appearance:none;background:0 0;height:16px
}

#aiShell .frame-control-range::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent) 0 var(--frame-progress,0%), var(--border-subtle) var(--frame-progress,0%) 100%);border-radius:999px;height:6px
}

#aiShell .frame-control-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px;margin-top:-5px
}

#aiShell .frame-control-range::-moz-range-track{
background:var(--border-subtle);border-radius:999px;height:6px
}

#aiShell .frame-control-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}

#aiShell .frame-control-range::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:14px;height:14px
}

#aiShell .editor-pending .step-panel-heading{
text-align:left;align-self:stretch;margin:0 -24px auto
}

#aiShell .editor-preview-pane .step-panel-heading{
align-self:stretch;margin:0 -18px 28px
}

#aiShell .editor-controls .step-panel-heading{
flex:none
}

#aiShell .control-section input[type=range]{
width:100%;accent-color:var(--accent);appearance:none;background:0 0;height:16px
}

#aiShell .control-section input[type=range]::-webkit-slider-runnable-track{
background:var(--border-subtle);border-radius:999px;height:6px
}

#aiShell .control-section input[type=range]::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px;margin-top:-5px
}

#aiShell .control-section input[type=range]::-moz-range-track{
background:var(--border-subtle);border-radius:999px;height:6px
}

#aiShell .control-section input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}

#aiShell .control-section input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:14px;height:14px
}

#aiShell .step-panel-heading{
box-sizing:border-box;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 72%), color-mix(in srgb, var(--bg-card) 96%, var(--surface-muted));min-height:50px;color:var(--text-primary);align-items:center;gap:10px;padding:12px 16px;display:flex
}

#aiShell .step-panel-heading span{
border:1px solid var(--accent-border);background:var(--accent-soft);width:28px;height:24px;color:var(--accent);font-variant-numeric:tabular-nums;border-radius:7px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex
}

#aiShell .step-panel-heading strong{
font-size:14px;font-weight:800
}

#aiShell .preview-pane .step-panel-heading{
align-self:stretch;margin:0 -18px 28px
}

#aiShell input[type=range]{
appearance:none;width:100%;height:16px;accent-color:var(--accent);cursor:pointer;background:0 0
}

#aiShell input[type=range]::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill,0%), var(--border-subtle) var(--range-fill,0%), var(--border-subtle) 100%);border-radius:999px;height:6px
}

#aiShell input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px;margin-top:-5px
}

#aiShell input[type=range]::-moz-range-track{
background:var(--border-subtle);border-radius:999px;height:6px
}

#aiShell input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}

#aiShell input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);width:14px;height:14px;box-shadow:0 0 0 1px var(--accent-border);border-radius:999px
}

#aiShell input[type=range]:focus-visible{
box-shadow:0 0 0 3px var(--accent-soft);outline:none
}

#aiShell .module-content--video-edit{
gap:12px
}

#aiShell .module-content--video-edit>.edit-panel{
box-sizing:border-box;flex-shrink:0;width:100%;min-width:0;overflow:visible
}

#aiShell .module-edit>.module-loading-wrap .module-content.module-content--video-edit{
overscroll-behavior:contain;overflow:hidden visible
}

#aiShell .edit-panel{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), linear-gradient(180deg, #ffffff0a, transparent 28%), var(--surface-muted);border-radius:10px;flex-direction:column;gap:10px;padding:10px 12px 12px;display:flex
}

#aiShell .smart-edit-panel{
border-color:color-mix(in srgb, var(--accent) 46%, var(--border-subtle));gap:12px
}

#aiShell .smart-preview-frame{
aspect-ratio:9/16;width:min(220px,100%);box-shadow:none;background:0 0;border:0;border-radius:8px;position:relative;overflow:hidden
}

#aiShell .smart-preview-frame:after{
content:"";z-index:1;pointer-events:none;background:linear-gradient(#00000042,#0000 30%),linear-gradient(#0000 64%,#0000007a);position:absolute;inset:0
}

#aiShell .smart-preview-title{
font-size:24px;top:14%
}

#aiShell .edit-panel-title{
color:var(--text-primary);margin:0;font-size:14px;font-weight:900
}

#aiShell .edit-panel--preview{
padding:10px
}

#aiShell .manual-template-selected-label{
color:var(--text-secondary);white-space:nowrap;font-size:12px;font-weight:800
}

#aiShell .edit-panel--styles .style-settings-bottom{
gap:10px
}

#aiShell .edit-panel--bgm{
gap:12px
}

#aiShell .media-audio-range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:14px
}

#aiShell .media-audio-range::-webkit-slider-runnable-track{
border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), var(--surface-muted-strong) var(--range-fill), var(--surface-muted-strong) 100%);border-radius:999px;height:6px
}

#aiShell .media-audio-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:14px;height:14px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px;margin-top:-5px
}

#aiShell .media-audio-range::-moz-range-track{
border:1px solid var(--border-subtle);background:var(--surface-muted-strong);border-radius:999px;height:6px
}

#aiShell .media-audio-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}

#aiShell .media-audio-range::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);width:10px;height:10px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px
}

#aiShell .style-range-field{
flex-direction:column;gap:6px;min-width:0;display:flex
}

#aiShell .style-range-field input[type=range]{
appearance:none;border:1px solid var(--border-subtle);border-radius:999px;width:100%;height:7px
}

#aiShell .style-range-field input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:13px;height:13px;box-shadow:0 2px 7px #2563eb3d
}

#aiShell .style-range-field input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);border-radius:999px;width:12px;height:12px
}

#aiShell .edit-preview-empty{
z-index:2;color:var(--text-muted);text-align:center;place-items:center;padding:16px;font-size:12px;font-weight:800;line-height:1.45;display:grid;position:absolute;inset:0
}

#aiShell .edit-preview-video{
z-index:0;object-fit:cover;pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0
}

#aiShell .style-panel-head{
z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative
}

#aiShell .style-panel-head h3{
margin:0;font-size:16px;font-weight:900
}

#aiShell .position-controls{
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;display:grid
}

#aiShell .position-controls-side{
flex-direction:column;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;display:flex
}

#aiShell .position-controls label{
min-width:0;color:var(--text-secondary);flex-direction:column;gap:7px;font-size:12px;font-weight:800;display:flex
}

#aiShell .position-controls input[type=range]{
appearance:none;border:1px solid var(--border-subtle);width:100%;height:6px;accent-color:var(--accent);cursor:pointer;border-radius:999px;box-shadow:inset 0 1px 2px #0f172a14,0 6px 14px #2563eb14
}

#aiShell .position-controls input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;border:2px solid var(--bg-card);background:linear-gradient(135deg, var(--accent), var(--accent-2));width:15px;height:15px;box-shadow:0 5px 12px #2563eb47, 0 0 0 3px var(--accent-soft);border-radius:999px
}

#aiShell .position-controls input[type=range]::-moz-range-thumb{
border:2px solid var(--bg-card);background:linear-gradient(135deg, var(--accent), var(--accent-2));width:13px;height:13px;box-shadow:0 5px 12px #2563eb47, 0 0 0 3px var(--accent-soft);border-radius:999px
}

#aiShell .position-controls .text-bg-row{
grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;min-width:0;min-height:34px;margin-top:2px;display:grid
}

#aiShell .position-controls .text-bg-toggle{
min-width:0;color:var(--text-secondary);flex-direction:row;align-self:center;align-items:center;gap:8px;font-size:12px;font-weight:800;display:inline-flex
}

#aiShell .clip-preview-section>.style-panel-head{
z-index:120
}

#aiShell .bgm-panel-head{
border:0;align-items:center;gap:8px;min-height:0;margin:0;padding:0;display:flex
}

#aiShell .edit-panel--pip{
gap:10px
}

#aiShell .edit-panel--pip .style-setting-title-row{
border-bottom:1px solid var(--border-subtle);min-height:30px;padding-bottom:8px
}

#aiShell .bgm-panel-head-actions{
flex-wrap:wrap;flex:1;justify-content:space-between;align-items:center;gap:8px;display:flex
}

#aiShell .bgm-fieldset{
border:0;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0;display:flex
}

#aiShell .bgm-fieldset:disabled{
opacity:.55;pointer-events:none
}

#aiShell .edit-panel--bgm .bgm-fieldset{
flex-direction:column;gap:10px;display:flex
}

#aiShell .bgm-picker-row{
grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:10px;display:grid
}

#aiShell .bgm-select-shell{
min-width:0;display:block
}

#aiShell .bgm-time{
color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px
}

#aiShell .bgm-play-btn{
background:var(--success-soft);width:34px;height:34px;color:var(--success);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;display:inline-flex
}

#aiShell .bgm-play-btn:disabled{
cursor:not-allowed;opacity:.45
}

#aiShell .bgm-volume-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid
}

#aiShell .bgm-slider-row input[type=range]{
--range-fill:0%;appearance:none;width:100%;height:28px;accent-color:var(--accent);cursor:pointer;background:0 0
}

#aiShell .bgm-slider-row input[type=range]::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}

#aiShell .bgm-slider-row input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;background:var(--accent);border:2px solid #fff;border-radius:999px;width:14px;height:14px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}

#aiShell .bgm-slider-row input[type=range]::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}

#aiShell .bgm-slider-row input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}

#aiShell .bgm-slider-row input[type=range]::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:999px;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}

#aiShell .bgm-select-trigger{
min-height:34px
}

#aiShell .bgm-select-trigger{
border-radius:999px
}

#aiShell .edit-style-preview:has(.edit-preview-video):before{
content:"";z-index:1;pointer-events:none;background:linear-gradient(#03071233,#03071208 38%,#0307125c),radial-gradient(circle at 50% 70%,#ffffff1f,#0000 44%);position:absolute;inset:0
}

#aiShell .preview-title-text{
min-height:var(--title-box-height,auto);padding:var(--title-box-pad,0);flex-direction:column;justify-content:center;align-items:center;display:flex
}

#aiShell .preview-title-text:before{
content:"";z-index:0;border-radius:inherit;background:var(--title-box-bg,transparent);position:absolute;inset:0
}

#aiShell .preview-title-text .preview-text-line{
z-index:1;height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex;position:relative
}

#aiShell .cover-control-panel input[type=range]{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px
}

#aiShell .cover-control-panel input[type=range]::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}

#aiShell .cover-control-panel input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;background:var(--accent);border:2px solid #fff;border-radius:999px;width:16px;height:16px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}

#aiShell .cover-control-panel input[type=range]::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}

#aiShell .cover-control-panel input[type=range]::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}

#aiShell .cover-control-panel input[type=range]::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:999px;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}

#aiShell .panel-head{
flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex
}

#aiShell .panel-head h3{
margin:0;font-size:15px;font-weight:800
}

#aiShell .panel-head{
flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex
}

#aiShell .panel-head h3{
margin:0;font-size:15px;font-weight:800
}

#aiShell .field-label{
color:var(--text-secondary);font-weight:600
}

#aiShell .audio-range-wrap{
min-width:0
}

#aiShell .audio-range{
cursor:pointer;appearance:none;background:0 0;width:100%;height:18px;margin:0;display:block
}

#aiShell .audio-range:disabled{
cursor:not-allowed;opacity:.6
}

#aiShell .audio-range::-webkit-slider-runnable-track{
background:linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--audio-progress) 100% no-repeat, var(--surface-muted-strong);border-radius:999px;height:6px
}

#aiShell .audio-range::-webkit-slider-thumb{
border:2px solid var(--bg-elevated);background:var(--accent);width:16px;height:16px;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);appearance:none;border-radius:50%;margin-top:-5px
}

#aiShell .audio-range::-moz-range-track{
background:var(--surface-muted-strong);border-radius:999px;height:6px
}

#aiShell .audio-range::-moz-range-progress{
background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;height:6px
}

#aiShell .audio-range::-moz-range-thumb{
border:2px solid var(--bg-elevated);background:var(--accent);width:14px;height:14px;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);border-radius:50%
}

#aiShell .panel-head{
justify-content:space-between;align-items:flex-start;gap:12px;display:flex
}

#aiShell .panel-head>div:first-child{
flex:auto;min-width:0
}

#aiShell .media-audio-range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:14px
}

#aiShell .media-audio-range::-webkit-slider-runnable-track{
border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), var(--surface-muted-strong) var(--range-fill), var(--surface-muted-strong) 100%);border-radius:999px;height:6px
}

#aiShell .media-audio-range::-webkit-slider-thumb{
appearance:none;border:2px solid var(--bg-card);background:var(--accent);width:14px;height:14px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px;margin-top:-5px
}

#aiShell .media-audio-range::-moz-range-track{
border:1px solid var(--border-subtle);background:var(--surface-muted-strong);border-radius:999px;height:6px
}

#aiShell .media-audio-range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:6px
}

#aiShell .media-audio-range::-moz-range-thumb{
border:2px solid var(--bg-card);background:var(--accent);width:10px;height:10px;box-shadow:0 2px 7px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px
}

#aiShell .video-edit-panel-head{
align-items:center
}

#aiShell .template-head-select-btn{
border:1px solid color-mix(in srgb, var(--accent-border) 58%, var(--border-subtle));background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-soft));min-height:28px;color:var(--text-primary);cursor:pointer;border-radius:999px;flex:none;padding:0 12px;font-size:12px;font-weight:800
}

#aiShell .template-head-select-btn:hover{
border-color:var(--accent-border);background:color-mix(in srgb, var(--accent-soft) 62%, var(--bg-card-hover))
}

#aiShell .template-selected-label{
color:var(--text-secondary);flex:none;font-size:12px;font-weight:700
}

#aiShell .quick-panel-bgm{
--panel-accent:var(--success);--panel-accent-2:var(--accent)
}

#aiShell .font-only-settings-title{
color:var(--text-primary);margin:0 0 8px;font-size:14px;font-weight:900
}

#aiShell .bgm-picker-row{
align-items:center;gap:8px;min-width:0;display:flex
}

#aiShell .bgm-picker-row .select-shell{
flex:1;min-width:0
}

#aiShell .bgm-time{
font-variant-numeric:tabular-nums;min-width:72px;color:var(--text-secondary);text-align:center;white-space:nowrap;flex:none;font-size:14px;line-height:18px
}

#aiShell .bgm-play-btn{
flex:none;width:32px;min-width:32px;min-height:32px;padding:0
}

#aiShell .bgm-panel audio{
display:none
}

#aiShell .range{
--range-fill:0%;appearance:none;width:100%;height:28px;accent-color:var(--accent);cursor:pointer;background:0 0
}

#aiShell .range::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}

#aiShell .range::-webkit-slider-thumb{
appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}

#aiShell .range::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}

#aiShell .range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}

#aiShell .range::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}

#aiShell .settings-section .fieldset{
gap:6px
}

#aiShell .bgm-select{
min-height:32px;padding-top:6px;padding-bottom:6px;font-size:15px;line-height:18px
}

#aiShell .bgm-select-shell .select-chev{
right:12px
}

#aiShell .bgm-panel{
flex-direction:column;min-height:0;padding:14px;display:flex
}

#aiShell .preview-panel{
flex-direction:column;gap:10px;width:100%;min-height:0;padding:14px;display:flex;overflow:hidden
}

#aiShell .preview-panel-head{
justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex
}

#aiShell .preview-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:6px 10px;font-size:15px;font-weight:800;display:flex
}

#aiShell .preview-frame{
border-radius:8px;width:100%;min-height:130px
}

#aiShell .final-preview-entry{
aspect-ratio:9/16;border:1px solid var(--border-subtle);width:100%;max-height:250px;color:var(--text-primary);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff3d, 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);background:#000;border-radius:8px;margin:0 auto;padding:0;display:block;position:relative;overflow:hidden
}

#aiShell .final-preview-entry:hover{
border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff3d, 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent)
}

#aiShell .final-preview-thumb{
background:#000;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:hidden
}

#aiShell .final-preview-thumb-video{
object-fit:contain;background:#000;width:100%;height:100%;display:block
}

#aiShell .final-preview-thumb:after{
content:"";z-index:1;-webkit-backdrop-filter:grayscale(.05);backdrop-filter:grayscale(.05);pointer-events:none;background:#1c1e241f;position:absolute;inset:0
}

#aiShell .final-preview-play{
z-index:2;border:3px solid color-mix(in srgb, var(--accent) 72%, transparent);background:color-mix(in srgb, var(--bg-base) 58%, var(--accent) 28%);width:36px;height:36px;color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--bg-base) 35%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 46%, transparent);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
}

#aiShell .final-preview-play-icon{
border-top:8px solid #0000;border-bottom:8px solid #0000;border-left:13px solid;width:0;height:0;margin-left:4px
}

#aiShell .final-preview-copy{
z-index:3;color:#fff;pointer-events:auto;background:0 0;justify-content:space-between;align-items:center;gap:8px;max-width:calc(100% - 16px);padding:0;display:flex;position:absolute;bottom:8px;left:8px;right:8px
}

#aiShell .final-preview-time{
color:#ffffffeb;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;background:#000000ad;border-radius:6px;align-items:center;min-height:24px;padding:3px 8px;font-size:11px;font-weight:800;line-height:1.2;display:inline-flex
}

#aiShell .final-preview-download{
border:1px solid color-mix(in srgb, var(--accent) 66%, transparent);background:color-mix(in srgb, var(--accent) 84%, #111);color:#fff;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-height:24px;padding:3px 8px;font-size:11px;font-weight:900;line-height:1.2;display:inline-flex;box-shadow:0 6px 14px #00000038
}

#aiShell .final-preview-download:hover{
filter:brightness(1.08)
}

#aiShell .preview-empty{
box-sizing:border-box;text-align:center;width:100%;min-height:96px;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;padding:18px 16px;font-size:14px;display:flex
}

#aiShell .preview-empty p{
margin:0 0 8px
}

#aiShell .preview-empty-hint{
opacity:.85;font-size:12px
}

#aiShell .preview-panel-actions{
flex:none;align-items:center;gap:8px;display:flex
}

#aiShell .compare-action{
min-width:54px;min-height:28px;padding:5px 9px;font-size:12px
}

#aiShell .render-action{
flex:none;min-width:84px;min-height:28px;padding:5px 9px;font-size:12px
}

#aiShell .panel-head{
z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex;position:relative
}

#aiShell .quick-panel-overlay>.panel-head{
z-index:50
}

#aiShell .quick-panel-overlay>.overlay-preview-layout{
z-index:1
}

#aiShell .smart-edit-panel{
flex-direction:column;flex:none;gap:12px;padding:14px;display:flex
}

#aiShell .smart-preview-frame{
aspect-ratio:9/16;border:1px solid var(--border-subtle);background:#020617;border-radius:8px;align-self:center;width:min(100%,220px);position:relative;overflow:hidden;box-shadow:0 10px 22px #0003
}

#aiShell .smart-preview-frame:after{
content:"";z-index:1;pointer-events:none;background:linear-gradient(#00000042,#0000 30%),linear-gradient(#0000 64%,#0000007a);position:absolute;inset:0
}

#aiShell .smart-preview-title{
font-size:24px;top:14%
}

#aiShell .smart-preview-frame strong{
font-size:20px;bottom:5%
}

#aiShell .panel-title{
box-sizing:border-box;border:1px solid var(--accent-border);border-radius:var(--radius-sm);background:var(--accent-soft);flex:auto;width:auto;min-width:0;margin:0;padding:7px 12px;font-size:17px;font-weight:800;display:flex
}

#aiShell .fieldset{
border:none;flex-direction:column;gap:12px;margin:0;padding:0;display:flex
}

#aiShell .fieldset:disabled{
opacity:.45;pointer-events:none
}

#aiShell .field-label{
color:var(--text-secondary);font-size:14px;font-weight:600
}

#aiShell .custom-select-wrap{
width:100%;min-width:0;display:block;position:relative
}

#aiShell .custom-select-wrap.open{
z-index:1000;position:relative
}

#aiShell .custom-select-trigger{
background:linear-gradient(var(--bg-input), var(--bg-input)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 82%, transparent), color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 38%, transparent), color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;width:100%;min-height:38px;color:var(--text-primary);cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 1px 0 #ffffff29, 0 6px 16px color-mix(in srgb, var(--accent) 6%, transparent);background-size:auto,240% 100%;border:1px solid #0000;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;font-size:13px;font-weight:800;animation:8s linear infinite quick-select-border-flow-637e0029;display:flex
}

#aiShell .custom-select-trigger.on{
box-shadow:inset 0 1px 0 #fff3, 0 0 0 3px color-mix(in srgb, var(--accent-soft-strong) 38%, transparent), 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent)
}

#aiShell .custom-select-trigger:disabled{
cursor:not-allowed;opacity:.58
}

#aiShell .custom-select-trigger.on .picker-chev{
transform:rotate(180deg)
}

#aiShell .custom-select-text{
text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden
}

#aiShell .custom-select-menu{
z-index:9999;border:1px solid var(--accent-border);background:var(--surface-sheen-soft), var(--bg-elevated);max-height:220px;box-shadow:0 18px 42px #00000057, 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 #ffffff29;border-radius:8px;padding:6px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto
}

#aiShell .custom-select-menu-inline-hidden{
display:none
}

#aiShell .custom-select-menu-portal{
z-index:2147483647;box-sizing:border-box;position:fixed;right:auto
}

#aiShell .custom-select-option{
width:100%;min-height:30px;color:var(--text-secondary);cursor:pointer;font:inherit;text-align:left;background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;padding:6px 10px;font-size:13px;font-weight:800;line-height:1.3;display:flex
}

#aiShell .custom-select-option.active{
border-color:color-mix(in srgb, var(--accent-border) 60%, transparent);background:var(--surface-sheen-soft), var(--accent-soft);color:var(--accent)
}

#aiShell .custom-select-option.active{
font-weight:900
}

#aiShell .style-select-shell .custom-select-trigger{
min-height:44px;padding:10px 12px;font-size:14px;line-height:20px
}

#aiShell .setting-row .field-label{
line-height:1.25
}

#aiShell .setting-row .range{
min-width:0
}

#aiShell .setting-row .color-inp{
justify-self:end
}

#aiShell .color-inp{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:48px;height:36px;padding:0
}

#aiShell .overlay-preview-layout{
z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;gap:12px;min-width:0;display:grid;position:relative
}

#aiShell .overlay-controls-pane{
flex-direction:column;min-width:0;max-width:100%;display:flex
}

#aiShell .overlay-preview-pane{
z-index:0;justify-content:flex-start;gap:10px;position:relative
}

#aiShell .overlay-controls-pane{
--panel-accent:var(--accent);--panel-accent-2:var(--accent-2);isolation:isolate;background:linear-gradient(color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--surface-muted) 86%, var(--bg-card))) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 46%, transparent), color-mix(in srgb, var(--panel-accent-2) 34%, transparent) 44%, color-mix(in srgb, var(--border-subtle) 82%, transparent)) border-box;box-shadow:0 0 0 1px color-mix(in srgb, var(--panel-accent) 8%, transparent), 0 14px 30px color-mix(in srgb, var(--panel-accent) 11%, transparent), inset 0 1px 0 #ffffff38;border:1px solid #0000;border-radius:10px;justify-content:flex-start;gap:8px;padding:9px;position:relative;overflow:hidden
}

#aiShell .overlay-controls-pane:before{
content:"";z-index:-1;background:radial-gradient(circle at 14% 0, color-mix(in srgb, var(--panel-accent) 14%, transparent), transparent 34%), linear-gradient(180deg, #ffffff0d, transparent 30%);pointer-events:none;position:absolute;inset:0
}

#aiShell .overlay-controls-pane:after{
content:"";z-index:0;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 62%, transparent), color-mix(in srgb, var(--panel-accent-2) 54%, transparent), transparent);opacity:.75;pointer-events:none;height:2px;position:absolute;inset:0 0 auto
}

#aiShell .overlay-controls-pane>*{
z-index:1;position:relative
}

#aiShell .edit-preview-stage{
aspect-ratio:9/16;z-index:0;isolation:isolate;border:1px solid var(--border-subtle);touch-action:none;background:#0b0d10;border-radius:8px;align-self:center;width:min(100%,220px);max-width:100%;position:relative;overflow:hidden
}

#aiShell .edit-preview-empty{
box-sizing:border-box;background:radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%), #0b0d10;display:block;position:absolute;inset:0
}

#aiShell .edit-preview-video{
z-index:1;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0b0d10;width:100%;height:100%;position:absolute;inset:0
}

#aiShell .overlay-preview{
z-index:2;box-sizing:border-box;cursor:grab;-webkit-user-select:none;user-select:none;letter-spacing:0;text-align:center;white-space:pre;word-break:keep-all;font-weight:900;line-height:1.14;font-family:var(--font-sans);border:0;border-radius:0;margin:0;position:absolute;transform:none
}

#aiShell .overlay-preview.dragging{
cursor:grabbing;outline:2px solid var(--accent);outline-offset:3px
}

#aiShell .overlay-preview.editing{
cursor:text;outline:2px solid var(--accent);outline-offset:3px
}

#aiShell .title-overlay-preview{
min-height:var(--title-box-height,auto);justify-content:center;align-items:center;display:flex
}

#aiShell .subtitle-overlay-preview{
min-height:var(--subtitle-box-height,auto);justify-content:center;align-items:center;display:flex
}

#aiShell .title-overlay-preview:before{
content:"";z-index:0;border-radius:inherit;background:var(--title-box-bg,transparent);position:absolute;inset:0
}

#aiShell .overlay-text{
box-sizing:border-box;width:100%;min-height:1.1em;padding:var(--overlay-pad-y,0) var(--overlay-pad-x,0);background:var(--overlay-bg,transparent);white-space:pre;overflow-wrap:normal;word-break:keep-all;-webkit-box-decoration-break:clone;box-decoration-break:clone;outline:none;display:block
}

#aiShell .title-overlay-preview .overlay-text{
z-index:1;padding:var(--title-box-pad,0);background:0 0;position:relative
}

#aiShell .title-overlay-preview .overlay-line{
height:var(--title-line-height,1.35em);justify-content:center;align-items:center;line-height:1;display:flex
}

#aiShell .overlay-line{
white-space:pre;display:block
}

#aiShell .overlay-text[contenteditable=true]{
cursor:text;-webkit-user-select:text;user-select:text
}

#aiShell .resize-handle{
background:var(--accent);cursor:nwse-resize;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-8px;right:-8px;box-shadow:0 1px 5px #00000059
}

#aiShell .subtitle-overlay-preview{
background:0 0
}

#aiShell .subtitle-overlay-preview .overlay-text{
white-space:nowrap
}

#aiShell .title-overlay-preview{
white-space:pre-line;word-break:keep-all
}

#aiShell .template-title-overlay-preview{
cursor:default;pointer-events:none
}

#aiShell .overlay-position-grid{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 16%, var(--surface-muted));border-radius:10px;padding:9px
}

#aiShell .overlay-position-grid .field{
gap:4px
}

#aiShell .overlay-position-grid .field-label{
font-size:12px;line-height:1.25
}

#aiShell .overlay-position-grid .range{
height:16px
}

#aiShell .style-card{
border:1px solid var(--border-subtle);background:var(--surface-sheen-soft), color-mix(in srgb, var(--accent-soft) 20%, var(--surface-muted));border-radius:8px;flex:1 1 0;gap:8px;min-width:0;padding:9px
}

#aiShell .style-card-head{
border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:10px;min-height:28px;padding-bottom:7px;display:flex
}

#aiShell .inline-style-sections .fieldset{
gap:7px
}

#aiShell .style-control-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 9px;min-width:0;display:grid
}

#aiShell .compact-color-field .color-inp{
width:100%;height:30px
}

#aiShell .title-bg-row .color-inp{
flex:0 0 64px;width:64px
}

#aiShell .transparent-color-picker .color-inp{
width:64px;height:30px
}

#aiShell .transparent-color-picker.is-transparent .color-inp{
opacity:0
}

#aiShell .inline-style-sections .font-only-settings-title{
margin:0;font-size:13px
}

#aiShell .compact-check{
flex:none;align-items:center;gap:5px;font-size:12px;line-height:1;display:inline-flex
}

#aiShell .compact-check input{
flex:none;margin:0
}

#aiShell .title-size-range{
cursor:pointer;min-height:28px
}

#aiShell .field-label{
color:var(--text-muted);font-size:12px
}

#aiShell .range{
--range-fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px
}

#aiShell .range::-webkit-slider-runnable-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--range-fill), #fff var(--range-fill), #fff 100%);border-radius:999px;height:8px
}

#aiShell .range::-webkit-slider-thumb{
appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:0 1px 4px #1020332e
}

#aiShell .range::-moz-range-track{
box-sizing:border-box;border:1px solid var(--border-subtle);background:#fff;border-radius:999px;height:8px
}

#aiShell .range::-moz-range-progress{
background:var(--accent);border-radius:999px;height:8px
}

#aiShell .range::-moz-range-thumb{
background:var(--accent);border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 4px #1020332e
}

#aiShell .title-size-range{
height:28px
}

#aiShell .color-inp{
border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);cursor:pointer;background:0 0;width:48px;height:36px;padding:0
}

#aiShell .preview-title-icon:before{
content:"";border:2px solid var(--accent);border-radius:4px;width:14px;height:16px
}

#aiShell .preview-title-icon:after{
content:"";border-left:6px solid var(--accent);border-top:4px solid #0000;border-bottom:4px solid #0000;position:absolute;top:9px;left:11px
}

#aiShell .field-label{
color:var(--text-secondary);font-size:13px;font-weight:800
}

#aiShell .preview-empty{
box-sizing:border-box;color:#ffffffc7;text-align:center;align-content:center;place-items:center;gap:8px;width:100%;height:100%;padding:24px;display:grid
}

#aiShell .preview-empty strong{
color:#fff;font-size:15px
}

#aiShell .preview-empty small{
line-height:1.5
}
#aiShell .step4-root .edit-preview-video{object-fit:contain!important}

/* ===== 数字人口播·第4步：按桌面端软件重建的视频剪辑三栏工作台 ===== */
#aiShell .step4-root{
  min-width:0;
}

#aiShell .step4-root .step4-workbench{
  display:grid!important;
  grid-template-columns:minmax(740px,1.62fr) minmax(400px,1fr)!important;
  align-items:start!important;
  gap:16px!important;
}

#aiShell .step4-root .step4-main-col{
  grid-column:1!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.98fr) minmax(380px,1.02fr)!important;
  grid-template-rows:auto 1fr!important;
  align-items:start!important;
  gap:14px!important;
  min-width:0!important;
  padding:14px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-lg)!important;
  background:var(--surface-sheen-soft),var(--bg-card)!important;
  box-shadow:var(--shadow-panel)!important;
}

#aiShell .step4-root .step4-main-col>.overlay-editor{
  display:contents!important;
}

#aiShell .step4-root .video-edit-panel-head{
  grid-column:1/-1!important;
  min-height:48px!important;
  padding:0 14px!important;
  border:1px solid var(--accent-border)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--accent-soft)!important;
}

#aiShell .step4-root .video-edit-panel-head .panel-title{
  margin:0!important;
  font-size:18px!important;
  font-weight:900!important;
}

#aiShell .step4-root .overlay-preview-layout{
  grid-column:1!important;
  grid-row:2!important;
  display:block!important;
  min-width:0!important;
}

#aiShell .step4-root .overlay-preview-pane{
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  gap:12px!important;
  min-width:0!important;
}

#aiShell .step4-root .edit-preview-stage{
  display:block!important;
  width:min(100%,240px)!important;
  aspect-ratio:9/16!important;
  min-height:0!important;
  border-radius:10px!important;
  background:#000!important;
  box-shadow:0 12px 30px #0006!important;
}

#aiShell .step4-root .step4-position-head{
  width:min(100%,340px)!important;
  padding-top:2px!important;
}

#aiShell .step4-root .overlay-position-grid{
  box-sizing:border-box!important;
  width:min(100%,340px)!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px 14px!important;
  padding:12px!important;
}

#aiShell .step4-root .step4-style-col{
  grid-column:2!important;
  grid-row:2!important;
  display:grid!important;
  align-content:start!important;
  gap:12px!important;
  min-width:0!important;
}

#aiShell .step4-root .step4-style-col>.settings-section{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-md)!important;
  background:var(--surface-sheen-soft),color-mix(in srgb,var(--accent-soft) 20%,var(--surface-muted))!important;
}

#aiShell .step4-root .step4-style-col .style-card-head{
  min-height:36px!important;
  padding-bottom:9px!important;
}

#aiShell .step4-root .step4-style-col .font-only-settings-title{
  font-size:15px!important;
  font-weight:900!important;
}

#aiShell .step4-root .template-head-select-btn{
  min-height:32px!important;
  padding:0 14px!important;
  border-radius:999px!important;
}

#aiShell .step4-root .template-selected-label{
  margin-top:9px!important;
  padding:9px 11px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:9px!important;
  background:var(--bg-input)!important;
}

#aiShell .step4-root .style-control-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px 12px!important;
}

#aiShell .step4-root .step4-settings-col{
  grid-column:2!important;
  position:sticky!important;
  top:8px!important;
  display:grid!important;
  align-content:start!important;
  gap:14px!important;
  min-width:0!important;
  max-height:calc(100vh - 132px)!important;
  padding-right:2px!important;
  overflow:auto!important;
}

#aiShell .step4-root .step4-settings-col>.card{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:14px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-lg)!important;
  background:var(--surface-sheen-soft),var(--bg-card)!important;
  box-shadow:var(--shadow-panel)!important;
}

#aiShell .step4-root .bgm-settings-section{
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

#aiShell .step4-root .settings-section-head{
  min-height:50px!important;
}

#aiShell .step4-root .settings-section-title-check{
  font-size:16px!important;
  font-weight:900!important;
}

#aiShell .step4-root .bgm-row{
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:10px!important;
}

#aiShell .step4-root .step4-volume-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

#aiShell .step4-root .preview-panel{
  min-height:360px!important;
}

#aiShell .step4-root .preview-title{
  min-height:38px!important;
  align-items:center!important;
  padding:7px 12px!important;
  font-size:16px!important;
}

#aiShell .step4-root .preview-frame{
  display:grid!important;
  place-items:center!important;
  min-height:260px!important;
}

#aiShell .step4-root .final-preview-entry{
  width:min(100%,210px)!important;
  max-height:310px!important;
}

#aiShell .step4-root .step4-settings-col>.field{
  padding:10px 12px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-md)!important;
  background:var(--bg-card)!important;
}

@media (max-width:1500px){
  #aiShell .step4-root .step4-workbench{
    grid-template-columns:minmax(690px,1fr) minmax(330px,390px)!important;
  }
  #aiShell .step4-root .step4-main-col{
    grid-template-columns:minmax(290px,.82fr) minmax(380px,1.18fr)!important;
  }
  #aiShell .step4-root .edit-preview-stage,
  #aiShell .step4-root .step4-position-head{
    width:min(100%,240px)!important;
  }
  #aiShell .step4-root .overlay-position-grid{
    width:min(100%,300px)!important;
  }
}

@media (max-width:1180px){
  #aiShell .step4-root .step4-workbench{
    grid-template-columns:1fr!important;
  }
  #aiShell .step4-root .step4-settings-col{
    grid-column:1!important;
    position:static!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #aiShell .step4-root .step4-settings-col>.field{
    grid-column:1/-1!important;
  }
}

@media (max-width:820px){
  #aiShell .step4-root .step4-main-col{
    grid-template-columns:1fr!important;
  }
  #aiShell .step4-root .overlay-preview-layout,
  #aiShell .step4-root .step4-style-col{
    grid-column:1!important;
  }
  #aiShell .step4-root .step4-style-col{
    grid-row:3!important;
  }
  #aiShell .step4-root .step4-settings-col{
    grid-template-columns:1fr!important;
  }
}

/* ===== 第4步成片区修正：空状态不画黑色视频框，操作按钮保持参考软件紧凑尺寸 ===== */
#aiShell .step4-root .preview-panel-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
}

#aiShell .step4-root .preview-panel-actions{
  display:flex!important;
  flex:none!important;
  align-items:center!important;
  gap:8px!important;
  width:auto!important;
}

#aiShell .step4-root .preview-panel-actions .compare-action,
#aiShell .step4-root .preview-panel-actions .render-action{
  flex:none!important;
  width:auto!important;
  min-height:32px!important;
  padding:0 14px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}

#aiShell .step4-root .preview-panel-actions .compare-action{
  min-width:58px!important;
}

#aiShell .step4-root .preview-panel-actions .render-action{
  min-width:96px!important;
  max-width:104px!important;
}

#aiShell .step4-root .preview-panel-actions .btn{
  height:32px!important;
}

#aiShell .step4-root .preview-panel{
  min-height:230px!important;
}

#aiShell .step4-root .preview-frame{
  min-height:110px!important;
}

#aiShell .step4-root .final-preview-entry:has(> .preview-empty-hint){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:auto!important;
  min-height:105px!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:default!important;
  overflow:visible!important;
}

#aiShell .step4-root .final-preview-entry:has(> .preview-empty-hint):hover{
  border:0!important;
  box-shadow:none!important;
}

#aiShell .step4-root .final-preview-entry>.preview-empty-hint{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:20px!important;
  color:var(--text-muted)!important;
  text-align:center!important;
  opacity:1!important;
}

#aiShell .step4-root .final-preview-entry>.preview-empty-hint strong{
  color:var(--text-muted)!important;
  font-size:16px!important;
  font-weight:600!important;
}

#aiShell .step4-root .final-preview-entry>.preview-empty-hint small{
  color:var(--text-muted)!important;
  font-size:13px!important;
  line-height:1.5!important;
}

/* 第4步由工作区统一滚动；底栏必须排在全部编辑内容之后，不能盖住中间控件。 */
#aiShell .ai-ref-content.step4-content{
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:max-content!important;
  overflow:visible!important;
}

#aiShell .ai-ref-workspace.step4-flow{
  overflow-y:auto!important;
}

#aiShell .ai-ref-workspace.step4-flow .step4-settings-col{
  position:static!important;
  top:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

#aiShell .ai-ref-workspace.step4-flow .ai-ref-footer{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  width:auto!important;
  margin-top:18px!important;
  background:var(--bg-elevated)!important;
  backdrop-filter:none!important;
}

/* 顶部导航高度随宽度变化（大屏 76px、窄屏会换行变更高），
   单靠固定值必然在某个宽度上压住面板。这里用实测值覆盖：
   页面脚本把 .app>header 的真实高度写入 --ai-nav-h（见 aiShellSyncNavHeight）。
   未取到时回退 76px。 */
/* 面板内容与导航之间留出一个字的高度（--shell-gap），但左右两栏要各自把背景
   顶到导航下沿，否则中间那条缝会露出页面底色、看起来和导航"断层"。
   做法：外壳自己不留白（不加 padding），由两侧栏用 ::before 向上延伸
   var(--shell-gap) 高度补满；内容仍靠内边距保持留白。 */
/* 面板从导航正下方开始（不再留一条露出页面底色的黑缝），
   左右两栏各自把背景顶到导航下沿、连成一体；
   "一个字的留白"改由各栏自己的 padding-top 承担，视觉上仍然是呼吸感，
   不会出现"上面一块颜色、中间一条黑"的断层。 */
.ai-shell{top:var(--ai-nav-h, 76px);--shell-pt:20px}
#aiShell .ai-ref-main{padding-bottom:0}
#aiShell .ai-ref-modules{padding-top:calc(12px + var(--shell-pt))}
#aiShell .workflow-sidebar{margin-top:var(--shell-pt)}
#aiShell .ai-ref-workspace{padding-top:calc(22px + var(--shell-pt))}
/* 面板打开时去掉顶部导航下边框，避免把左右两栏"切"开 */
body[data-ai-shell="on"] .app>header{border-bottom-color:transparent}

/* 同一行两张卡片的标题区高度统一：左侧卡标题下有一行说明、右侧卡没有，
   会让正文输入框与按钮上下错位。这里给两张卡的标题区一个统一的最小高度，
   说明文字保持在不换行的一行内，视觉上齐平。 */
#aiShell .ai-ref-pin-grid > .ai-copy-panel{display:flex;flex-direction:column}
#aiShell .ai-ref-pin-grid > .ai-copy-panel > .ai-ref-panel-head{min-height:100px;box-sizing:border-box}
#aiShell .ai-ref-pin-grid > .ai-copy-panel > .ai-ref-panel-head .ai-ref-hint{
  margin-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical
}
#aiShell .ai-ref-pin-grid > .ai-copy-panel > .ai-ref-panel-body{flex:1;min-height:0}

/* 音视频步骤右侧的「竖屏预览舞台」卡片带内联 style="position:sticky;top:8px"，
   它一进页面就被往下推 8px 并吸顶，导致与左侧卡片顶边不齐、滚动时还悬浮。
   业主要求：与左卡对齐、跟着内容滚。这里用 CSS 覆盖内联值（无需改 index.html）。 */
#aiShell .dh-panel[style*="position:sticky"]{
  position:static!important;top:auto!important
}
/* 同一行卡片顶边对齐：卡片头高度取齐，避免"标题下有无说明"造成错位 */
#aiShell .dh-row > .dh-panel,
#aiShell .dh-grid > .dh-panel{align-self:start}
#aiShell .dh-panel-head{min-height:50px}

/* workbenchHTML() 的两栏：左栏是竖排卡片，右栏「竖屏预览舞台」内联了
   style="position:sticky;top:8px" → 一进页面就比左栏低 8px 且吸顶悬浮，
   导致业主看到的"卡片顶边不齐 + 悬浮"。这里覆盖内联值（只影响数字人工作台）。 */
#aiShell .dh-workspace [style*="position:sticky"]{position:static!important;top:auto!important}
/* 卡片顶边对齐：卡片头高度取齐，避免"标题带说明/不带说明"造成错位 */
#aiShell .dh-workspace .dh-panel-head{min-height:50px}