/* AI 短片工作室 · 公共样式（toby）。CSP default-src 'self'：样式只放这个文件，页面里不写 style 属性。 */
/* ---- 主题 token（B1，hudson #44477）。主题 = 一组 token；页面里不再出现写死的颜色 / 圆角 / 阴影。
   data-theme 没设 = 跟随系统（浅 → 纸色，深 → 墨夜）；js/theme.js 在 <head> 里先设好，避免闪一下。
   对比度：正文（--ink / --ink2 / --accent2 / --bad / --ok / --warn 对 --bg 和 --paper）每套都 ≥ 4.5:1，studio/web/mock/contrast_check.py 现算。 */
:root{--r-xs:4px;--r-sm:6px;--r:8px;--r-lg:11px;--r-pill:999px;
 --media:#111;--on-media:#fff;--overlay:rgba(0,0,0,.92);--backdrop:rgba(0,0,0,.45);--media-label:rgba(0,0,0,.6);
 --lbnav:rgba(255,255,255,.12);--lbnav-h:rgba(255,255,255,.25);--shadow-pop:0 8px 30px rgba(0,0,0,.18);--shadow-card:none;
 --mono:Consolas,"SF Mono",monospace;--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
/* 纸色：暖白纸 + 铜色（原浅色） */
:root,:root[data-theme="paper"]{--bg:#f3efe7;--paper:#fbf9f4;--ink:#241f1a;--ink2:#5c534a;--rule:#d9d0c2;--accent:#a8642a;--accent2:#8a4f1e;
 --ok:#2a7247;--bad:#b3261e;--warn:#8a5f00;--onaccent:#fff;color-scheme:light}
/* 墨夜：暖黑 + 亮铜（原深色）；跟随系统且系统是深色时也用它 */
:root[data-theme="ink"]{--bg:#1b1815;--paper:#26221e;--ink:#eee7dc;--ink2:#b3a897;--rule:#3d362f;--accent:#d59650;--accent2:#e8b273;
 --ok:#6cc08f;--bad:#ef6b62;--warn:#e0b44a;--onaccent:#1b1815;--shadow-pop:0 8px 30px rgba(0,0,0,.5);color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg:#1b1815;--paper:#26221e;--ink:#eee7dc;--ink2:#b3a897;--rule:#3d362f;--accent:#d59650;--accent2:#e8b273;
 --ok:#6cc08f;--bad:#ef6b62;--warn:#e0b44a;--onaccent:#1b1815;--shadow-pop:0 8px 30px rgba(0,0,0,.5);color-scheme:dark}}
/* 影院：纯黑高对比，看片用——没有阴影、圆角收小，画面四周不留灰 */
:root[data-theme="cinema"]{--bg:#000;--paper:#0d0d0d;--ink:#fff;--ink2:#cfcfcf;--rule:#3a3a3a;--accent:#ffb84d;--accent2:#ffcf85;
 --ok:#5fe08f;--bad:#ff7a73;--warn:#ffd24d;--onaccent:#000;--media:#000;--r-xs:2px;--r-sm:3px;--r:4px;--r-lg:6px;
 --shadow-pop:0 0 0 1px #3a3a3a;--backdrop:rgba(0,0,0,.7);color-scheme:dark}
/* 青瓷：冷灰绿、低饱和、圆角放大、卡片带一点阴影 */
:root[data-theme="celadon"]{--bg:#e8eeeb;--paper:#f6f9f7;--ink:#1c2a26;--ink2:#4a5c56;--rule:#c8d5d0;--accent:#3d7a6d;--accent2:#2c5e53;
 --ok:#2b7048;--bad:#a3302a;--warn:#7a5a00;--onaccent:#fff;--r-xs:5px;--r-sm:8px;--r:10px;--r-lg:14px;
 --shadow-card:0 1px 3px rgba(28,52,46,.08),0 4px 14px rgba(28,52,46,.06);--shadow-pop:0 10px 34px rgba(28,52,46,.18);color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);overflow-x:clip}
a{color:var(--accent2)}
button,input,textarea,select{font:inherit;color:inherit}
.hidden{display:none!important}
.mono{font-family:var(--mono)}
.muted{color:var(--ink2)}
.small{font-size:12px}

/* 顶栏 */
.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:2px solid var(--accent);padding:8px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.top .brand{font-weight:700;font-size:16px;text-decoration:none;color:var(--ink);white-space:nowrap}
.top .brand b{color:var(--accent2)}
.top .title{font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .sp{flex:1 1 auto}
.top .extra{display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap;min-width:0}
.top nav{display:flex;gap:6px;align-items:center}
.top .today{font:12px var(--mono);color:var(--ink2);white-space:nowrap}.top .today.low{color:var(--bad)}
.top nav a,.top nav button{font-size:13px;text-decoration:none;color:var(--accent2);border:1px solid var(--accent);border-radius:var(--r-sm);padding:2px 10px;background:none;cursor:pointer}

/* 按钮 */
.btn{border:1px solid var(--rule);background:var(--paper);border-radius:var(--r);padding:6px 14px;cursor:pointer;min-height:36px}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--onaccent);font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--accent2);border-color:var(--accent2)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{min-height:28px;padding:2px 10px;font-size:13px}

/* 状态徽标 */
.pill{display:inline-flex;align-items:center;gap:5px;font:12px var(--mono);border:1px solid var(--rule);border-radius:var(--r-pill);padding:1px 9px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink2)}
.pill.running::before{background:var(--accent);animation:blink 1s infinite}
.pill.waiting::before{background:var(--warn)}
.pill.done::before{background:var(--ok)}
.pill.failed::before,.pill.quota_paused::before{background:var(--bad)}
.pill.offline{border-color:var(--bad);color:var(--bad)}.pill.offline::before{background:var(--bad)}
@keyframes blink{50%{opacity:.25}}

/* 花费条 */
.spent{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.spent .v{font:700 18px var(--mono);color:var(--accent2);font-variant-numeric:tabular-nums}
.spent .v2{font:600 14px var(--mono);color:var(--ink)}
.spent .budget{font:12px var(--mono)}
.spent .budget.low{color:var(--bad)}

/* 页面布局 */
.page{max-width:1100px;margin:0 auto;padding:18px 16px 40px}
.card-box{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px 16px}
h2{font-size:16px;margin:22px 0 10px}
.err{color:var(--bad)}

/* 登录 */
.login{max-width:360px;margin:12vh auto 0;display:flex;flex-direction:column;gap:12px}
.login h1{font-size:20px;margin:0}
.login input{padding:9px 12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg);font-size:16px}

/* 首页：玩法 */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.skill{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.skill .media{aspect-ratio:16/10;background:var(--media);display:block;width:100%;object-fit:cover;cursor:pointer}
.skill .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.skill .name{font-weight:700;font-size:15px}
.skill .slug{font:11px var(--mono);color:var(--ink2);margin-top:-4px}
.tblwrap{overflow-x:auto;padding:6px 10px}
.projects{table-layout:auto}
.projects td:first-child{overflow-wrap:anywhere}
.skill .meta{display:flex;gap:10px;flex-wrap:wrap;font:12px var(--mono);color:var(--ink2)}
.skill .meta b{color:var(--accent2)}
.skill .go{margin-top:auto;align-self:flex-start}
.projects{width:100%;border-collapse:collapse}
.projects td,.projects th{border-bottom:1px solid var(--rule);padding:7px 8px;text-align:left}
.projects th{font-size:12px;color:var(--ink2);font-weight:600}
.projects td.n{font:12px var(--mono);white-space:nowrap}

/* 新建项目对话框 */
dialog{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);padding:18px;width:min(520px,calc(100vw - 32px))}
dialog::backdrop{background:var(--backdrop)}
dialog form{display:flex;flex-direction:column;gap:10px}
dialog label{font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:4px}
dialog input,dialog textarea,dialog select{padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg)}
dialog textarea{min-height:110px;resize:vertical}
dialog .row{display:flex;gap:8px;justify-content:flex-end}

/* 项目页：左对话右素材 */
.proj{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:calc(100vh - var(--toph,96px))}
.proj .left{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--rule)}
.proj .right{overflow-y:auto;padding:12px 14px;background:var(--paper)}
.tabs{display:none}
.feed{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.composer{border-top:1px solid var(--rule);padding:10px 14px;display:flex;gap:8px;background:var(--paper)}
.composer textarea{flex:1;resize:none;height:40px;max-height:140px;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg)}
.banner{padding:8px 18px;font-size:13px;border-bottom:1px solid var(--rule);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner.quota_paused,.banner.failed{background:color-mix(in srgb,var(--bad) 10%,var(--paper))}
.banner.waiting{background:color-mix(in srgb,var(--warn) 12%,var(--paper))}
.banner.done{background:color-mix(in srgb,var(--ok) 10%,var(--paper))}

/* 对话流条目 */
.msg{max-width:78%;padding:8px 12px;border-radius:var(--r-lg);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--rule))}
.msg.director{align-self:flex-start;background:var(--paper);border:1px solid var(--rule)}
.msg .who{display:block;font:11px var(--mono);color:var(--ink2);margin-bottom:2px}
.tool{align-self:flex-start;font:12px var(--mono);color:var(--ink2);display:flex;gap:8px;align-items:center;padding:2px 4px}
.tool .st.running{color:var(--accent)}.tool .st.ok{color:var(--ok)}.tool .st.error{color:var(--bad)}
.tool .errtext{color:var(--bad);white-space:pre-wrap;overflow-wrap:anywhere}
.notice{align-self:stretch;border:1px solid var(--bad);border-radius:var(--r);padding:8px 12px;color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--paper))}

/* 停点卡片 */
.scard{align-self:stretch;background:var(--paper);border:1.5px solid var(--accent);border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.scard.done{border-color:var(--rule);opacity:.82}
.scard .hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.scard .no{font:12px var(--mono);color:var(--ink2)}
.scard .tt{font-weight:700;font-size:15px}
.scard .stamp{margin-left:auto;font:700 12px var(--sans);border:1.5px solid currentColor;border-radius:var(--r-sm);padding:0 6px}
.stamp.approved{color:var(--ok)}.stamp.retried,.stamp.backed{color:var(--ink2)}.stamp.failed{color:var(--bad)}.stamp.pending{color:var(--warn)}
.scard .note{font-size:13px;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.scard .note .ntext{white-space:pre-wrap;overflow-wrap:anywhere}
.scard .note .ntext:empty{display:none}
.scard .note ul{margin:0;padding-left:1.3em}
.scard .note li{margin:1px 0}
.scard .note code{font:12px var(--mono);background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-xs);padding:0 4px}
.scard .note strong{font-weight:700;color:var(--ink)}
.scard .note.clamp{max-height:220px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.scard .ntbl{overflow-x:auto;max-width:100%}
.scard .ntbl table{border-collapse:collapse;font-size:12px;min-width:100%}
.scard .ntbl th,.scard .ntbl td{border:1px solid var(--rule);padding:3px 7px;text-align:left;vertical-align:top;white-space:nowrap}
.scard .ntbl td{white-space:normal;min-width:4em}
.scard .ntbl th{background:var(--bg);font-weight:600}
.scard .more{align-self:flex-start;margin-top:4px}
.scard .vids{display:flex;gap:10px;flex-wrap:wrap}
.scard .vids figure{margin:0;display:flex;flex-direction:column;gap:2px}
.scard .vids video{width:240px;max-width:100%;aspect-ratio:9/16;max-height:420px;background:var(--media);border-radius:var(--r-sm);object-fit:contain}
.scard .vids figcaption{font:11px var(--mono);color:var(--ink2)}
.scard .thumbs{display:flex;gap:8px;flex-wrap:wrap}
.scard .thumbs a{display:block;width:120px}
.scard .thumbs img,.scard .thumbs video{width:120px;height:auto;aspect-ratio:9/16;max-height:160px;object-fit:contain;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--media);display:block}
.scard .thumbs .cap{font:11px var(--mono);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard .pr label{font-size:12px;color:var(--ink2);display:flex;justify-content:space-between;gap:8px}
.scard textarea{width:100%;min-height:76px;resize:vertical;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg);font-size:13px;line-height:1.5}
.scard textarea.edited{border-color:var(--warn)}
.scard textarea[readonly]{opacity:.8}
.scard .cost{display:flex;gap:14px;flex-wrap:wrap;font:12px var(--mono);color:var(--ink2)}
.scard .cost b{color:var(--accent2);font-size:14px}
.scard .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.scard .acts select{padding:5px 8px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg)}
.scard .hint{font-size:12px;color:var(--warn)}
.scard .buy{font:600 13px var(--mono);color:var(--accent2);padding-right:4px}.scard .buy.err{color:var(--bad)}
.scard .params{display:flex;flex-wrap:wrap;gap:4px}
.chip{font:12px var(--mono);border:1px solid var(--rule);border-radius:var(--r-pill);padding:1px 9px;background:var(--bg);color:var(--ink2);white-space:nowrap}
.chip.ref{font-family:var(--sans)}
.tool .elapsed{color:var(--accent)}
.scard .foot{font:11px var(--mono);color:var(--ink2);border-top:1px dashed var(--rule);padding-top:6px}
.scard .frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px}
.scard .fr{padding:0;border:1px solid var(--rule);border-radius:var(--r-xs);background:var(--media);cursor:zoom-in;position:relative;overflow:hidden}
.scard .fr img{width:100%;aspect-ratio:9/16;object-fit:contain;display:block}
.scard .fr span{position:absolute;left:0;right:0;bottom:0;font:10px var(--mono);color:var(--on-media);background:var(--media-label);text-align:center}
.scard .fr:hover{border-color:var(--accent)}

.scard.flash{animation:flash 1.4s}
@keyframes flash{30%{box-shadow:0 0 0 4px var(--accent)}}

/* 素材库 */
.lib h3{font-size:13px;margin:14px 0 6px;color:var(--ink2);display:flex;justify-content:space-between}
.lib h3:first-child{margin-top:0}
.lib .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.asset{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--bg);display:flex;flex-direction:column;min-width:0;position:relative}
.asset.old{border-style:dashed}.asset.old .im{opacity:.35;filter:grayscale(1)}.asset.old .meta{opacity:.6}
.asset .void{position:absolute;top:10px;left:50%;transform:translateX(-50%) rotate(-10deg);z-index:1;font:700 14px var(--sans);color:var(--bad);border:2px solid var(--bad);border-radius:var(--r-sm);padding:0 8px;background:var(--paper);pointer-events:none}
.libbar{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2);margin:0 0 6px;cursor:pointer}
.asset .im{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:var(--media);border:0;cursor:zoom-in}
.asset.strip .im{aspect-ratio:auto;max-height:110px}
.asset .meta{padding:4px 6px;font:11px var(--mono);color:var(--ink2);display:flex;flex-direction:column;gap:1px;min-width:0}
.asset .meta .l{color:var(--ink);font-family:var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset .meta .x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset .meta a{color:inherit;text-decoration:underline dotted}
.lib .empty{font-size:12px;color:var(--ink2);padding:4px 0}

/* 大图 / 视频预览 */
#lb{position:fixed;inset:0;background:var(--overlay);display:none;z-index:50}
#lb.open{display:block}
#lb .stage{position:absolute;inset:0 0 40px;display:grid;place-items:center}
#lb .stage img,#lb .stage video{max-width:92vw;max-height:calc(100vh - 60px)}
#lb .lbcap{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:var(--on-media);font:13px var(--mono)}
#lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:var(--r);background:var(--lbnav);color:var(--on-media);font-size:32px;cursor:pointer}
#lb .nav:hover{background:var(--lbnav-h)}
#lb .prev{left:12px}#lb .next{right:12px}
#lb .close{top:28px;right:12px;transform:none;width:40px;height:40px;font-size:24px}

/* 成片页 */
.final{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
.final video{width:100%;border-radius:var(--r-lg);background:var(--media);display:block}
.dl{display:flex;flex-direction:column;gap:8px}
.dl a.btn{display:flex;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);align-items:center}
.dl .sz{font:12px var(--mono);color:var(--ink2)}
table.cost{border-collapse:collapse;width:100%;font-size:13px}
table.cost td,table.cost th{border-bottom:1px solid var(--rule);padding:5px 6px;text-align:left}
table.cost td.r,table.cost th.r{text-align:right;font-family:var(--mono)}

/* 手机：项目页改成上下两个 tab；输入框 16px 防 iOS 放大 */
@media(max-width:760px){
 input,textarea,select{font-size:16px!important}
 .top .today{display:none}
 .projects .c-skill,.projects .c-when{display:none}
 .top{padding:8px 12px;gap:8px}
 .proj{grid-template-columns:minmax(0,1fr);height:auto;min-height:calc(100vh - var(--toph,96px))}   /* 1fr 会被长内容撑宽，手机上横向溢出 */
 .top .extra{order:3;width:100%}.top .title{font-size:14px}.spent{gap:4px 12px}.spent .v{font-size:16px}
 .proj .left{border-right:0}
 .proj .right{display:none}
 .proj.show-lib .left{display:none}.proj.show-lib .right{display:block}
 .tabs{display:flex;border-bottom:1px solid var(--rule);background:var(--paper)}
 .tabs button{flex:1;border:0;background:none;padding:9px;cursor:pointer;border-bottom:2px solid transparent}
 .tabs button.on{border-bottom-color:var(--accent);font-weight:600}
 .feed{padding:12px}
 .msg{max-width:92%}
 .scard .thumbs a,.scard .thumbs img,.scard .thumbs video{width:96px}
 .final{grid-template-columns:1fr}
 .page{padding:14px 16px 32px}
}

/* ================= 项目页三栏（hudson #44436，参考 Flova 的布局，样式按我们自己的）：左 文档 + 素材 · 中 查看 · 右 对话 */
.proj3{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(360px,440px);height:calc(100vh - var(--toph,96px) - var(--tlh,38px));height:calc(100dvh - var(--toph,96px) - var(--tlh,38px))}   /* dvh：手机上 100vh 比可见高度大（地址栏），会被时间线压住 */
.proj3>.side,.proj3>.view,.proj3>.chat{min-height:0;min-width:0}
.side{overflow-y:auto;border-right:1px solid var(--rule);background:var(--paper);padding:10px 12px;display:flex;flex-direction:column;gap:14px}
.side h3{font-size:12px;color:var(--ink2);margin:0 0 6px;font-weight:600;letter-spacing:.5px}
.doclist{display:flex;flex-direction:column;gap:2px}
.docitem{display:flex;justify-content:space-between;gap:6px;align-items:baseline;width:100%;text-align:left;border:0;background:none;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer}
.docitem:hover{background:var(--bg)}.docitem.on{background:color-mix(in srgb,var(--accent) 15%,var(--paper));font-weight:600}
.docitem .dn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.docitem .dv{font:11px var(--mono);color:var(--ink2);white-space:nowrap}
.libhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px}.libhead .libbar{margin:0}
.lgrp{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin:10px 0 4px}
.side .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.side .asset{padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.side .asset.on{outline:2px solid var(--accent);outline-offset:1px}
.side .asset .meta{padding:3px 5px}
.view{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.vhead{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--rule);background:var(--paper)}
.vhead .vtitle{font-size:15px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vhead .sp{flex:1}
.vsub{font:11px var(--mono);color:var(--ink2);padding:6px 18px}
.vbody{flex:1;overflow:auto;padding:14px 22px 30px}
.vbody.empty{display:grid;place-items:center;color:var(--ink2)}
.vmedia{display:block;max-width:100%;max-height:calc(100vh - var(--toph,96px) - 150px);margin:0 auto;border-radius:var(--r);background:var(--media);object-fit:contain}
.vframes .frames{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.vmeta{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font:12px var(--mono);color:var(--ink2);margin-top:10px}
.segs{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.seg{border:0;background:var(--paper);padding:3px 12px;font-size:13px;cursor:pointer}.seg.on{background:var(--accent);color:var(--onaccent)}
.vbody.doc{max-width:860px}
.docmd{font-size:14px;line-height:1.75}
.raw{white-space:pre-wrap;font:13px/1.6 var(--mono);margin:0;overflow-wrap:anywhere}
.docedit{width:100%;min-height:calc(100vh - var(--toph,96px) - 170px);resize:vertical;font:13px/1.6 var(--mono);padding:12px;border:1px solid var(--warn);border-radius:var(--r);background:var(--paper)}
.md .md-h{margin:14px 0 6px;line-height:1.35}.md h3.md-h{font-size:18px}.md h4.md-h{font-size:15px}.md h5.md-h{font-size:14px}
.md .md-p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.md ul,.md ol{margin:4px 0;padding-left:1.4em}.md li{margin:2px 0}
.md blockquote{margin:6px 0;padding:4px 12px;border-left:3px solid var(--accent);color:var(--ink2);white-space:pre-wrap}
.md hr{border:0;border-top:1px solid var(--rule);margin:12px 0}
.md code{font:12px var(--mono);background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-xs);padding:0 4px}
.md .ntbl{overflow-x:auto;margin:6px 0}.md .ntbl table{border-collapse:collapse;font-size:13px}
.md .ntbl th,.md .ntbl td{border:1px solid var(--rule);padding:4px 8px;text-align:left;vertical-align:top}.md .ntbl th{background:var(--paper)}
.chat{display:flex;flex-direction:column;border-left:1px solid var(--rule)}
.chat .feed{padding:12px 14px}
.chat .msg{max-width:92%}
.msg.director .md .md-p:first-child{margin-top:0}.msg.director .md .md-p:last-child{margin-bottom:0}
/* 折叠条 */
.fold{align-self:stretch;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper)}
.fold>summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;cursor:pointer;font-size:13px}
.fold>summary .fthumbs{flex:1 0 100%;padding:2px 0 0 28px}
.fold>summary::-webkit-details-marker{display:none}
.fold .fico{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--on-media);background:var(--ok);flex:0 0 auto}
.fold .fico.backed,.fold .fico.retried{background:var(--ink2)}
.fold .ft{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold .fs{font-size:12px;color:var(--ink2);white-space:nowrap}.fold .fc{font:12px var(--mono);color:var(--accent2)}
.fold .fx{margin-left:auto;color:var(--ink2);transition:transform .15s}.fold[open] .fx{transform:rotate(90deg)}
.fold.backed,.fold.retried{opacity:.7}
.fold>.scard{border:0;border-top:1px dashed var(--rule);border-radius:0 0 var(--r-lg) var(--r-lg)}
.fthumbs{display:flex;gap:5px;padding:0 12px 9px;flex-wrap:wrap}
.msg .fthumbs{padding:6px 0 0}
.ft-im{padding:0;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;background:var(--media);cursor:pointer;width:46px;height:46px}
.ft-im img{width:100%;height:100%;object-fit:cover;display:block}
.tool.running{border:1px dashed var(--accent);border-radius:var(--r);padding:6px 10px;align-self:stretch}
.elapsed{font:12px var(--mono);color:var(--accent)}
.linkbtn{border:0;background:none;color:var(--accent2);cursor:pointer;padding:0;font:inherit;text-decoration:underline dotted}
.scard .buyline{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.scard .onlynote{flex-basis:100%}
.scard .msel{font:600 13px var(--mono);color:var(--accent2);padding:3px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--bg)}.scard .msel:disabled{opacity:.6;color:var(--ink2);cursor:not-allowed}.scard .msel.edited{border-color:var(--warn)}
/* 输入框 + 下面一排按钮 */
.chat .composer{flex-direction:column;align-items:stretch;gap:6px;position:relative}
.chat .composer textarea{height:64px;width:100%}
.attach{display:flex;flex-wrap:wrap;gap:4px}.attach:empty{display:none}
.ctools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ctools .sp{flex:1}
.tbtn{border:1px solid var(--rule);background:var(--bg);border-radius:var(--r-pill);padding:3px 11px;font-size:12px;cursor:pointer;color:var(--ink2);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbtn:hover{border-color:var(--accent);color:var(--ink)}
.pop{position:absolute;left:10px;right:10px;bottom:calc(100% + 6px);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:12px 14px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;z-index:20}
.phead{display:flex;justify-content:space-between;align-items:center}
.prow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.prow select{padding:4px 8px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg);max-width:240px}
.flow{margin:0;padding-left:1.4em;font-size:13px}.flow li{margin:3px 0}.flow li.done{color:var(--ink2)}.flow li.cur{font-weight:700;color:var(--accent2)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.pick{padding:0;border:2px solid transparent;border-radius:var(--r);background:var(--bg);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;font:inherit;color:inherit}
.pick img{width:100%;aspect-ratio:9/16;object-fit:contain;background:var(--media);display:block}.pick span{font-size:11px;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick.on{border-color:var(--accent)}
.chip .linkbtn{margin-left:4px;text-decoration:none}
@media(max-width:1100px){.proj3{grid-template-columns:210px minmax(0,1fr) minmax(330px,380px)}}
@media(max-width:760px){
 /* 手机：顶栏 + tab 条 + 底部时间线的真实高度都量出来减掉（原来按 tab 条 40px 估，时间线展开时把输入框压住了 55px） */
 .proj3{grid-template-columns:minmax(0,1fr);height:calc(100vh - var(--toph,96px) - var(--tabsh,40px) - var(--tlh,38px));height:calc(100dvh - var(--toph,96px) - var(--tabsh,40px) - var(--tlh,38px));min-height:0}
 .proj3>.side,.proj3>.view,.proj3>.chat{display:none}
 .proj3.tab-side>.side,.proj3.tab-view>.view,.proj3.tab-chat>.chat{display:flex;height:100%;min-height:0}
 .chat{border-left:0}.side{border-right:0}
 .vbody{padding:12px}
}

/* 主题阴影：卡片类元素（只有青瓷给了值，其余主题是 none） */
.card-box,.skill,.scard,.fold,.asset,dialog{box-shadow:var(--shadow-card)}
.themepick{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2)}
.themepick select{font-size:12px;padding:2px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--bg);color:var(--ink)}
.login .themepick{align-self:flex-end}
@media(max-width:760px){.top .themepick span{display:none}}

/* ================= 故事板（契约 v002 / B2）：左栏 元素 → 分镜 → 音频 → 未归类；中栏 对象详情 + 预览面板 */
.sbsec h3{display:flex;justify-content:space-between}
.sblist{display:flex;flex-direction:column;gap:2px}
.sbrow{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:0;background:none;padding:5px 6px;border-radius:var(--r-sm);cursor:pointer;font:inherit;color:inherit;min-width:0}
.sbrow:hover{background:var(--bg)}.sbrow.on{background:color-mix(in srgb,var(--accent) 15%,var(--paper))}
.sbrow.del{opacity:.55}.sbrow.del .sbn{text-decoration:line-through}
.sbrow .sbn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.sbk{font:11px var(--sans);border:1px solid var(--rule);border-radius:var(--r-pill);padding:0 6px;color:var(--ink2);white-space:nowrap}
.sbk.character{border-color:var(--accent);color:var(--accent2)}.sbk.scene{border-color:var(--ok);color:var(--ok)}
.sbi{display:inline-flex;flex-direction:column;align-items:center;min-width:30px;font:600 12px var(--mono);color:var(--accent2);line-height:1.1}
.sbi small{font:10px var(--mono);color:var(--ink2)}
.sbth{display:flex;gap:2px}
.mini{display:inline-block;width:22px;height:22px;border-radius:var(--r-xs);overflow:hidden;background:var(--media);border:1px solid var(--rule);flex:0 0 auto}
.mini img{width:100%;height:100%;object-fit:cover;display:block}.mini.fin{border-color:var(--accent);border-width:2px}.mini.del{opacity:.4}
.sbtag{font-size:11px;color:var(--bad)}
.libtog{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.allassets>summary{cursor:pointer;font-size:12px;color:var(--ink2);margin:6px 0}
.sbview .sbmeta{font:12px var(--mono);color:var(--ink2);margin-bottom:6px}
.sbdesc{white-space:pre-wrap;line-height:1.8;font-size:14px;margin:8px 0 12px;overflow-wrap:anywhere}
.mention{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;border:1px solid var(--accent);border-radius:var(--r-pill);padding:0 7px 0 2px;background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--accent2);font:inherit;font-size:13px;cursor:pointer;line-height:1.6}
.mention .mini{width:18px;height:18px;border-radius:50%}
.mention.unk{border-style:dashed;border-color:var(--rule);background:none;color:var(--ink2);padding:0 7px;cursor:help}
.sbfinal{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px}.sbfinal .vmedia.small{max-height:300px;margin:0}
.sbh{font-size:13px;color:var(--ink2);margin:12px 0 6px}
.sbtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.sbtile{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);border-radius:var(--r);padding:6px;background:var(--paper)}
.sbtile.fin{border-color:var(--accent);border-width:2px}.sbtile.del{opacity:.5}
.sbim{padding:0;border:0;background:var(--media);border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in}
.sbim img{width:100%;aspect-ratio:9/16;object-fit:contain;display:block}
.adjbox{margin-top:16px;border-top:1px dashed var(--rule);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.adjbox textarea.adj{width:100%;min-height:64px;resize:vertical;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);font-size:13px}
.adjbox .row{display:flex;align-items:center;gap:8px}.adjbox .row .sp{flex:1}
.vgen{display:flex;flex-wrap:wrap;gap:4px 18px;padding:6px 18px;font-size:12px;color:var(--ink2);border-bottom:1px solid var(--rule)}
.vgen b{font-family:var(--mono);color:var(--ink)}
.vsel{font-size:12px;padding:3px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);max-width:220px}
.params.bound{justify-content:center;margin-top:8px}
.center{text-align:center;margin-top:8px}
.vprompt{margin-top:10px}.vprompt summary{cursor:pointer;font-size:12px;color:var(--ink2)}
.vprompt .raw{margin-top:4px;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);font-size:12px}
.chip.tgt{display:inline-block;margin:2px 0 4px;font-size:12px;cursor:pointer;border-color:var(--accent);color:var(--accent2)}
.sbform{display:flex;flex-direction:column;gap:10px;max-width:760px}
.frow{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2)}
.frow input,.frow select{padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-size:14px}
.frow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sbedit{min-height:200px}
.chks{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--ink)}
.vhead{flex-wrap:wrap}

/* 上传参考图（契约 v002.2 §4b） */
.upbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
.uplist{display:flex;flex-direction:column;gap:3px;margin:4px 0 8px}
.uprow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;font-size:12px;padding:3px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--bg)}
.uprow.doing,.uprow.wait{grid-template-columns:minmax(0,1fr) 70px auto}
.uprow .un{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow progress{width:70px;height:8px;accent-color:var(--accent)}
.uprow .us{font:11px var(--mono);color:var(--ink2);white-space:nowrap}
.uprow.err{border-color:var(--bad);grid-template-columns:minmax(0,1fr) auto}.uprow.err .us{color:var(--bad);white-space:normal;font-family:var(--sans);grid-column:1/-1}
.uprow.done .us{color:var(--ok)}
.side.drop{outline:2px dashed var(--accent);outline-offset:-6px;background:color-mix(in srgb,var(--accent) 8%,var(--paper))}

/* ================= 底部时间线（契约 v003 / B3） */
.tl{position:fixed;left:0;right:0;bottom:0;height:var(--tlh,38px);background:var(--paper);border-top:2px solid var(--accent);z-index:8;display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}
.tlbar{display:flex;align-items:center;gap:8px;padding:4px 12px;min-height:36px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
.tlbar .sp{flex:1}.tlbar .warn{color:var(--warn)}.tlbar .ok{color:var(--ok)}
.tltog{border:0;background:none;font:600 13px var(--sans);color:var(--ink);cursor:pointer;padding:2px 4px}
.tlbody{flex:1;min-height:0;display:flex;position:relative}
.tllanes{position:relative;flex:1;overflow:auto;padding-bottom:4px}
.tlrow{display:flex;align-items:stretch;min-width:max-content}
.tllabel{position:sticky;left:0;z-index:3;width:96px;flex:0 0 96px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 8px;background:var(--paper);border-right:1px solid var(--rule);font-size:12px}
.tllabel .mute{border:0;background:none;cursor:pointer;font-size:13px;padding:0;opacity:.75}.tllabel .mute.on{opacity:1}
.tlruler{position:relative;height:20px;border-bottom:1px solid var(--rule);cursor:pointer;margin-left:0}
.tlruler .tick{position:absolute;top:2px;font:10px var(--mono);color:var(--ink2);padding-left:3px;border-left:1px solid var(--rule)}
.tllane{position:relative;height:50px;border-bottom:1px solid var(--rule);background:var(--bg)}
.tllane.a1,.tllane.a2{height:36px}
.tlclip{position:absolute;top:4px;bottom:4px;display:flex;align-items:center;gap:4px;padding:0 10px 0 4px;border:1px solid var(--accent);border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 18%,var(--paper));overflow:hidden;cursor:grab;user-select:none;touch-action:none;font-size:11px}
.tlclip:active{cursor:grabbing}.tlclip.sel{outline:2px solid var(--accent2);outline-offset:1px;z-index:2}
.tlclip.a1,.tlclip.a2{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--paper))}
.tlclip.missing{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--paper))}
.tlclip.muted{opacity:.6}
.tlclip img{height:100%;max-height:40px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-xs);flex:0 0 auto;pointer-events:none}
.tlclip .cl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;pointer-events:none}
.tlclip .badge{font-size:10px;border:1px solid var(--warn);color:var(--warn);border-radius:var(--r-pill);padding:0 4px;white-space:nowrap;pointer-events:none}
.tlclip .badge.bad{border-color:var(--bad);color:var(--bad)}
.tlclip .cm{border:0;background:none;padding:0;font-size:11px;cursor:pointer;margin-left:auto}
.tlclip .h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.tlclip .h.l{left:0}.tlclip .h.r{right:0}
.tlhead-line{position:absolute;top:0;bottom:0;left:96px;width:2px;background:var(--bad);pointer-events:none;z-index:4}
.tlzoom{position:absolute;right:8px;bottom:6px;display:flex;gap:4px;z-index:5}
.tlprev{display:flex;flex-direction:column;gap:8px;align-items:center}.tlprev .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
@media(max-width:760px){.tllabel{width:64px;flex-basis:64px}.tlhead-line{left:64px}.tlbar{gap:6px;padding:4px 8px}}

/* 项目页整页是一列弹性布局：顶栏 / tab 条 / 三栏 / 时间线 依次排，三栏吃掉剩下的高度——不再靠量出来的 --toph / --tabsh 去减
   （手机上顶栏会折成几行，量的值跟不上就把输入框压到时间线底下，2026-10-08 375 宽实测压住 52px） */
.projpage{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.projpage>.top{position:static;flex:0 0 auto}
.projpage>.tabs{flex:0 0 auto}
.projpage>.proj3{flex:1 1 auto;min-height:0;height:auto}
.projpage>.tl{position:static;flex:0 0 var(--tlh,38px)}
@media(max-width:760px){.projpage>.proj3{height:auto}}