/* ==== /css/base.css ==== */
/* 变量 / 主题 / reset / 表面 / 登录 / header / 页签 / 音频卡片外壳 / 布局 / 说明气泡。
 三个 css 按原单文件里的先后顺序切开，顺序不能换——层叠是按加载顺序算的。 */
/* 告诉浏览器当前是明还是暗：原生控件（audio/video 播放器、下拉、滚动条）
   靠这个跟随主题，不设的话暗色下播放器会是一块浅色。 */
:root{color-scheme:light;
  --bg:#f5f6f6; --surf:#ffffff; --fg:#242a28; --dim:#66716c; --line:#e0e5e2;
  --acc:#147d5c; --acc-d:#106348; --ok:#147d5c; --warn:#a76a13; --bad:#c44550;
  --lo:rgba(24,36,29,.055); --hi:transparent; --hole:#edf0ee; --ph:#66716c; --hint:#606c65;
  --soft:#e8f3ed; --on-accent:#ffffff; --grid:#d9dfdc;
  --shadow:0 2px 8px rgba(24,36,29,.04); --r:8px;
}
html[data-theme="dark"]{color-scheme:dark;
  --bg:#151818; --surf:#202423; --fg:#ecf0ed; --dim:#a3ada7; --line:#363e39;
  --acc:#68d5a9; --acc-d:#43bd8d; --ok:#68d5a9; --warn:#e0b05f; --bad:#f18992;
  --lo:rgba(0,0,0,.12); --hi:transparent; --hole:#2a302d; --ph:#939f97; --hint:#aeb8b1;
  --soft:#233c30; --on-accent:#102e21; --grid:#303934;
  --shadow:0 2px 8px rgba(0,0,0,.14);
}
*{box-sizing:border-box;min-width:0;letter-spacing:0}
/* 作者样式里的 display 会盖掉 [hidden] 的默认 display:none，必须显式压回去 */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  transition:background .2s,color .2s;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
button,input,select,textarea{font-family:inherit}
button{white-space:nowrap;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:3px}
button:disabled{cursor:default}
::selection{background:var(--soft);color:var(--fg)}
.ui-icon{width:17px;height:17px;display:block;flex:0 0 auto;pointer-events:none}

.out{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.sunk{background:var(--hole);border:1px solid var(--line)}

/* 删除确认使用站内对话框，原生 dialog 负责焦点约束和背景禁用。 */
.delete-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  margin:auto;padding:24px;border:1px solid var(--line);border-radius:8px;overflow-y:auto;
  background:var(--surf);color:var(--fg);font:inherit;box-shadow:0 20px 64px rgba(0,0,0,.22)}
.delete-dialog::backdrop{background:rgba(10,16,12,.55);backdrop-filter:blur(4px)}
.delete-dialog-heading{display:flex;align-items:center;gap:12px}
.delete-dialog-icon{width:38px;height:38px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--bad) 10%,var(--surf));color:var(--bad);border-radius:8px}
.delete-dialog-icon .ui-icon{width:20px;height:20px}
.delete-dialog h2{margin:0;flex:1;font-size:17px;font-weight:650}
.delete-dialog #delete-message{margin:18px 0 0;color:var(--dim);font-size:13px;line-height:1.75;overflow-wrap:anywhere}
.delete-dialog blockquote{margin:16px 0 0;padding:0 0 0 12px;border-left:2px solid var(--line);
  color:var(--fg);font-size:13px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.delete-dialog-error{margin:16px 0 0;color:var(--bad);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.delete-dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:24px}
.delete-dialog-actions button{height:38px;min-width:88px;border-radius:6px;font:inherit;font-size:13px}
.delete-dialog-confirm{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;
  border:1px solid transparent;background:var(--bad);color:#fff;cursor:pointer;font-weight:600}
.delete-dialog-confirm:hover:not(:disabled){filter:brightness(.94)}
.delete-dialog-confirm:disabled{opacity:.55;cursor:wait}
html[data-theme="dark"] .delete-dialog-confirm{color:#351219}
@media(max-width:480px){.delete-dialog{padding:20px}.delete-dialog-actions button{flex:1}}

/* ---------- 登录 ---------- */
/* 登录永远是浮在应用上面的弹窗：进站先进预览，点到要登录的功能才弹。
   以前那版是一整页登录页，进站就把人挡在外面，既难看也没法预览。 */
#login{position:fixed;inset:0;display:grid;place-items:center;z-index:99;
  background:rgba(8,12,10,.62);backdrop-filter:blur(6px);padding:24px;overflow-y:auto;overscroll-behavior:contain}
body.login-open{overflow:hidden}
#login .box{position:relative;width:min(420px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;
  padding:28px 32px;text-align:left;box-shadow:0 24px 80px rgba(0,0,0,.28)}
.loginbrand{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding-right:32px;font-size:14px;font-weight:650}
#login .logo{width:32px;height:32px;margin:0;background:var(--soft);color:var(--acc);border:1px solid var(--line)}
#login .logo .ui-icon{width:19px;height:19px}
#login h2{margin:0 0 6px;font-size:24px;line-height:1.35;font-weight:650}
#login p{margin:0 0 22px;font-size:13px;color:var(--dim);line-height:1.7;overflow-wrap:anywhere}
.loginx{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:6px;background:none;color:var(--dim);cursor:pointer;padding:0}
.loginx:hover{background:var(--hole);color:var(--fg)}
.loginx .ui-icon{width:16px;height:16px}
.logintabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 20px;padding:4px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.logintabs button{height:36px;border:0;border-radius:5px;background:transparent;color:var(--dim);font:inherit;font-weight:600;cursor:pointer}
.logintabs button[aria-selected="true"]{background:var(--surf);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.loginoauth{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surf);
  color:var(--fg);font:inherit;font-size:14px;cursor:pointer}
.loginoauth:hover{background:var(--bg);border-color:var(--dim)}
.loginor{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--dim);font-size:12px}
.loginor::before,.loginor::after{content:'';flex:1;height:1px;background:var(--line)}
#login .loginfield + .loginfield{margin-top:16px}
#login label{margin:0 0 6px;color:var(--fg);font-size:12px;font-weight:550}
#login input{width:100%;height:44px;background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:10px 12px;font:inherit;font-size:14px;text-align:left}
#login input:focus{border-color:var(--acc);outline:2px solid var(--soft);outline-offset:1px}
#login input::placeholder{color:var(--ph)}
#login input:autofill{box-shadow:0 0 0 100px var(--bg) inset;-webkit-text-fill-color:var(--fg)}
.loginpassword{position:relative}
#login .loginpassword input{padding-right:48px}
.loginreveal{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:38px;height:38px;
  border:0;border-radius:4px;background:transparent;color:var(--dim);cursor:pointer}
.loginreveal:hover{color:var(--fg);background:var(--hole)}
.loginverify{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.loginverify button{border:1px solid var(--line);border-radius:6px;padding:0 12px;background:var(--surf);color:var(--fg);font:inherit;font-size:12px;cursor:pointer}
#registersent{display:block;margin-top:6px;font-size:12px;color:var(--ok);overflow-wrap:anywhere}
#registersent:empty{display:none}
#login .loginnotice{padding:10px 12px;border-left:2px solid var(--warn);background:var(--bg)}
#login .err{color:var(--bad);font-size:12px;margin-top:12px;line-height:1.6;overflow-wrap:anywhere}
#login .err:empty{display:none}
#login .go{display:block;width:100%;min-height:44px;margin-top:22px;padding:10px 16px;border-radius:6px;
  font-size:14px;font-weight:600;letter-spacing:0;box-shadow:none}
#login button:disabled{opacity:.55;cursor:default}
@media(max-width:480px){
  #login{padding:12px}
  #login .box{padding:24px;max-height:calc(100dvh - 24px)}
  #login input{font-size:16px}
}
.guestbar{display:flex;align-items:center}
.guestbar .mini{padding:3px 10px}
/* 账户：顶栏一颗按钮，点开是余额 / 消费 / 充值的下拉面板 */
.acct{position:relative;flex-shrink:0}
.acctbtn{gap:9px;font:inherit;font-size:12px;cursor:pointer;border:1px solid transparent;border-radius:6px;background:none}
.acctbtn:hover,.acctbtn[aria-expanded="true"]{color:var(--fg)}
.acctbtn #acctbal{color:var(--fg);font-variant-numeric:tabular-nums}
.acctbtn .ui-icon{width:14px;height:14px;transition:transform .15s}
.acctbtn[aria-expanded="true"]>.ui-icon:last-child{transform:rotate(180deg)}
.acctpanel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:340px;max-height:min(560px,calc(100dvh - 90px));
  display:flex;flex-direction:column;padding:16px;background:var(--surf);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.22)}
.acctpanel[hidden]{display:none}
.ap-email{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-k{font-size:11px;color:var(--dim)}
.ap-bal{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 0 0}
.ap-v{font-size:26px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ap-redeem{display:flex;gap:8px;margin-top:12px}
.ap-redeem[hidden]{display:none}
.ap-redeem input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--hole);color:var(--fg);font:inherit;font-size:13px}
.ap-msg{font-size:12px;color:var(--bad);margin-top:8px;line-height:1.5}
.ap-msg.ok{color:var(--ok)}
.ap-msg:empty{display:none}
/* 去哪儿领积分（内核后台「客服联系方式」）；没余额时加重，二维码直接画出来 */
.ap-howto{margin-top:10px;font-size:12px;line-height:1.6;color:var(--dim);overflow-wrap:anywhere}
.ap-howto[hidden]{display:none}
.ap-howto p{margin:0}
.ap-howto a{color:var(--acc)}
.ap-howto.broke{padding:10px 12px;border:1px solid var(--acc);border-radius:8px;background:var(--soft);color:var(--fg);font-size:13px}
.ap-qr{display:block;width:132px;height:auto;margin-top:8px;border-radius:6px;background:#fff}
.nc-cost[data-topup],.quote-short[data-topup]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
button.nc-cost[data-topup]{border:0;background:none;font-family:inherit;line-height:inherit}
.ap-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0;padding:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ap-stats>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ap-stats b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.acctpanel .ap-tabs{margin:0 0 6px}
.ap-list{overflow-y:auto;min-height:60px;margin:0 -4px;padding:0 4px;scrollbar-width:thin}
.ap-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.ap-row:last-child{border-bottom:0}
.ap-main{flex:1;min-width:0}
.ap-title{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-sub{font-size:11px;color:var(--dim);margin-top:2px}
.ap-amt{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-amt.plus{color:var(--ok)}
.ap-empty{padding:20px 0;text-align:center;font-size:12px;color:var(--dim)}
@media(max-width:600px){
  .acctbtn #acctname{display:none}
  .acctpanel{position:fixed;top:calc(var(--hm-notice,0px) + 60px);left:12px;right:12px;width:auto}
}

header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  height:64px;padding:0 24px;background:var(--surf);border-bottom:1px solid var(--line)}
.logo{width:34px;height:34px;border-radius:8px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--acc);color:var(--on-accent)}
.logo .ui-icon{width:21px;height:21px}
header h1{margin:0;font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.chip{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
  padding:6px 10px;white-space:nowrap;flex-shrink:0}
.iconbtn{width:34px;height:34px;border-radius:6px;border:1px solid transparent;cursor:pointer;flex:0 0 auto;
  background:transparent;color:var(--dim);display:grid;place-items:center;padding:0;transition:background .15s,color .15s}
.iconbtn:hover{background:var(--hole);color:var(--fg)}
.iconbtn:active{background:var(--line)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.dot.busy{background:var(--warn)} .dot.off{background:var(--bad)}

/* ---------- 顶部页签（视频 / 音频） ---------- */
.tabbar{padding:0 24px;background:var(--surf);border-bottom:1px solid var(--line)}
.tabs{display:inline-flex;align-items:stretch;gap:24px}
.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 2px;font:inherit;font-size:13px;font-weight:550;transition:color .15s}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tabs.sm{width:100%;margin:0 0 20px;gap:4px;padding:4px;background:var(--hole);border-radius:6px}
.tabs.sm .tab{flex:1;padding:8px 6px;font-size:13px;border:0;border-radius:4px}
.tabs.sm .tab.on{background:var(--surf);box-shadow:var(--shadow)}
/* 音频卡片：Foley 出的可能是带画面的 mp4，配乐 / 纯音轨就只有一条波形条 */
/* align-items:start 不能省：瀑布流（html.mas）下 grid-auto-rows 只有 4px、由 JS 算 span，
   默认的 stretch 会把卡片拉到整格高度，fitCard 再去量就量到拉伸后的高度，
   span 一轮轮算错，卡片就叠在一起（2026-09-10 用户截图「坍塌在一起了」）。*/
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px;
  align-items:start}
.acard{overflow:hidden}
.acard .abody{padding:16px 18px 14px}
.acard .ap{font-size:13px;line-height:1.5;color:var(--fg);margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard audio{width:100%;height:36px;display:block;margin-bottom:10px}
.acard video{width:100%;border-radius:12px;display:block;margin-bottom:10px;background:#000}
.akind{display:inline-block;font-size:11px;padding:2px 9px;border-radius:99px;
  color:var(--dim);box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.await{padding:26px 18px;text-align:center;color:var(--dim);font-size:12.5px;
  line-height:1.5;word-break:break-word;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* 配音是同步出结果的，不进队列，所以单独一块播放区 */
.ttsout{margin-top:14px;padding:14px;border-radius:14px;
  box-shadow:inset 4px 4px 8px var(--lo), inset -4px -4px 8px var(--hi)}
.ttsout audio{width:100%;height:38px;display:block}
.ttsout .trow{display:flex;align-items:center;gap:10px;margin-top:10px;
  font-size:12px;color:var(--dim)}
.ttsout a{color:var(--acc);text-decoration:none;font-weight:600}
.warnbox{padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.6;
  color:var(--hint);margin-bottom:14px;
  box-shadow:inset 3px 3px 6px var(--lo), inset -3px -3px 6px var(--hi)}

.wrap{display:grid;grid-template-columns:352px minmax(0,1fr);gap:24px;
  padding:24px 24px 44px;align-items:start;max-width:1720px;margin:0 auto}
@media(max-width:1060px){.wrap{grid-template-columns:minmax(0,1fr)}}
/* 侧栏比屏幕高：sticky 钉住后下半截就滚不到了，得让它自己有一条滚动轴 */
.side{padding:0 24px 0 0;position:sticky;top:84px;
  max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--lo) transparent}
.side.out{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:var(--lo);border-radius:99px;
  border:2px solid var(--surf)}
@media(max-width:1060px){.side{position:static;max-height:none;overflow:visible;padding:0}
  .side.out{border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}}
@media(max-width:600px){
  header{height:56px;padding:0 12px;gap:8px}
  header h1{font-size:14px}
  header .logo{width:30px;height:30px}
  header .chip{padding:0;font-size:11px;gap:5px}
  header .iconbtn{width:30px;height:32px}
  header .spacer{display:none}
  header h1{flex:1}
  .tabbar{padding:0 12px}
  .tabbar .tabs{width:100%;gap:0}
  .tabbar .tab{flex:1;gap:6px;font-size:12px;padding:12px 0}
  .wrap{padding:20px 16px 32px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;animation:none !important;transition:none !important}}

/* ---------- 说明：收进问号里，桌面悬停、手机点一下 ---------- */
.q{display:inline-grid;place-items:center;width:16px;height:16px;padding:0;border:0;
  position:relative;border-radius:50%;font:700 10px/1 inherit;color:var(--dim);background:var(--surf);
  cursor:help;margin:0 0 0 6px;vertical-align:1px;flex:0 0 auto;
  box-shadow:2px 2px 4px var(--lo), -2px -2px 4px var(--hi)}
/* 手指点得着：往外扩一圈透明热区，不影响排版 */
.q::after{content:"";position:absolute;inset:-4px -8px}
.q:hover,.q.on{color:var(--acc)}
.q:active{box-shadow:inset 1px 1px 3px var(--lo), inset -1px -1px 3px var(--hi)}
.q:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#tip{position:fixed;left:0;top:0;z-index:200;max-width:340px;padding:13px 15px;
  border-radius:13px;font-size:12px;line-height:1.65;color:var(--hint);background:var(--surf);
  box-shadow:6px 6px 16px var(--lo), -6px -6px 16px var(--hi);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--lo) transparent;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .14s,transform .14s}
/* 悬停出来的气泡不吃鼠标（不挡下面的控件）；点出来的要能滚、能选字 */
#tip.tap{pointer-events:auto}
#tip::-webkit-scrollbar{width:7px}
#tip::-webkit-scrollbar-track{background:transparent}
#tip::-webkit-scrollbar-thumb{background:var(--lo);border-radius:99px;border:2px solid var(--surf)}
#tip.on{opacity:1;transform:none}
#tip b{color:var(--fg);font-weight:650}
#tip .k{color:var(--acc);font-weight:650}

/* ==== /css/announcements.css ==== */
.an-trigger{position:relative}
.an-count{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--acc);color:var(--on-accent);font-size:10px;line-height:17px;text-align:center}

.an-dialog{position:fixed;width:min(560px,calc(100vw - 28px));max-height:min(86dvh,760px);margin:auto;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--surf);color:var(--fg);box-shadow:0 30px 90px #0000005c}
.an-dialog[open]{display:flex;flex-direction:column;animation:an-in .26s cubic-bezier(.2,.8,.2,1)}
.an-dialog::backdrop{background:#0b0b10b8;backdrop-filter:blur(6px)}
@keyframes an-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.an-dialog[open]{animation:none}}
.an-close{position:absolute;z-index:3;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer}
.an-close:hover{background:var(--hole);color:var(--fg)}
.an-close .ui-icon{width:18px;height:18px}
.an-dialog:has(.an-card.is-wide) .an-close{top:18px;right:18px;background:#00000073;color:#fff;backdrop-filter:blur(6px)}
.an-dialog:has(.an-card.is-wide) .an-close:hover{background:#000000a6}

/* The bell's list. */
.an-heading{display:flex;align-items:center;gap:12px;padding:16px 56px 16px 20px;border-bottom:1px solid var(--line)}
.an-dialog[data-view="card"] .an-heading{display:none}
.an-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--soft);color:var(--acc)}
.an-heading h2{flex:1;margin:0;font-size:16px;font-weight:650;overflow-wrap:anywhere}
.an-content{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.an-dialog[data-view="list"] .an-content{min-height:100px;padding:6px 20px 16px}
.an-item{display:flex;flex-direction:column;gap:3px;width:100%;padding:14px 8px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);text-align:left;cursor:pointer;white-space:normal}
.an-item:hover{background:var(--hole)}
.an-item strong{font-size:14px;font-weight:550;overflow-wrap:anywhere}
.an-item.unread strong{font-weight:700}
.an-item span{font-size:12px;color:var(--dim)}
.an-empty{margin:35px 0;text-align:center;color:var(--dim)}

/* One notice: key visual + headline + a few lines + one button. */
.an-dialog[data-view="card"]{width:min(460px,calc(100vw - 28px))}
.an-dialog[data-view="card"]:has(.an-card.has-hero){width:min(760px,calc(100vw - 28px))}
.an-dialog[data-view="card"]:has(.an-card.is-wide){width:min(580px,calc(100vw - 28px))}
.an-card{display:flex;align-items:stretch;transition:opacity .2s}
.an-card.is-pending{opacity:0}
.an-hero{position:relative;flex:0 0 44%;min-height:380px;margin:8px 0 8px 8px;overflow:hidden;border-radius:10px;background:#0d0d10}
.an-hero>img,.an-hero>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.an-card.is-wide{flex-direction:column}
.an-card.is-wide .an-hero{flex:none;min-height:0;aspect-ratio:16/9;margin:8px 8px 0}
.an-sound{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:#00000080;color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.an-sound:hover{background:#000000b3}
.an-sound .ui-icon{width:16px;height:16px}
.an-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 30px 26px}
.an-card.has-hero:not(.is-wide) .an-copy{padding:30px 30px 26px 26px}
.an-card.is-wide .an-copy{padding:22px 26px 24px}
.an-brand{width:104px;height:20px;flex:0 0 auto;color:var(--fg)}
.an-card:not(.has-hero) .an-brand,.an-card.is-wide .an-brand{display:none}
.an-tag{padding:2px 8px;border-radius:4px;background:var(--soft);color:var(--acc);font-size:12px;font-weight:650;line-height:20px}
.an-card.has-hero:not(.is-wide) .an-tag{margin-top:6px}
.an-headline{margin:0;padding-right:28px;font-size:26px;line-height:1.35;font-weight:760;overflow-wrap:anywhere;text-wrap:balance}
.an-card.is-wide .an-headline{padding-right:0;font-size:22px}
.an-headline strong{color:var(--acc);font-weight:inherit}
.an-body{align-self:stretch;color:var(--fg);font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.an-body>:first-child{margin-top:0}
.an-body>:last-child{margin-bottom:0}
.an-body p{margin:0 0 8px}
.an-body strong{color:var(--acc);font-weight:650}
.an-body a{color:var(--acc)}
.an-body ul,.an-body ol{display:grid;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.an-body li{position:relative;padding-left:15px}
.an-body li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.an-body h1,.an-body h2,.an-body h3{margin:12px 0 6px;font-size:15px;line-height:1.5}
.an-body img,.an-body video{display:block;width:100%;max-height:50dvh;margin:10px 0;border-radius:8px;background:#0d0d10}
.an-body pre{overflow-x:auto;padding:12px;border-radius:6px;background:var(--hole)}
.an-body blockquote{margin:10px 0;padding-left:12px;border-left:2px solid var(--acc);color:var(--dim)}
.an-cta{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin-top:8px;padding:10px 18px;
  border-radius:999px;background:var(--acc);color:var(--on-accent);font-size:15px;font-weight:650;text-decoration:none;
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 28%,transparent);transition:background .15s,transform .15s}
.an-cta:hover{background:var(--acc-d)}
.an-cta:active{transform:translateY(1px)}
.an-cta .ui-icon{width:17px;height:17px}
/* Side layout: brand on top, button at the bottom, the message centred between them. */
.an-card.has-hero:not(.is-wide) .an-brand{margin-bottom:auto}
.an-card.has-hero:not(.is-wide) .an-cta{margin-top:auto}
.an-card.has-hero:not(.is-wide) .an-copy{gap:16px}
.an-heading h2:focus,.an-headline:focus{outline:none}
.an-back{padding:2px 0;border:0;background:none;color:var(--dim);font-size:12px;cursor:pointer}
.an-back:hover{color:var(--fg)}

@media(max-width:640px){
  .an-dialog[data-view="list"] .an-content{padding:6px 14px 16px}
  .an-heading{padding:12px 52px 12px 14px}
  .an-card,.an-card.has-hero{flex-direction:column}
  .an-hero,.an-card.is-wide .an-hero{flex:none;min-height:0;aspect-ratio:16/10;max-height:42dvh;margin:8px 8px 0}
  .an-dialog:has(.an-card.has-hero) .an-close{top:18px;right:18px;background:#00000073;color:#fff}
  .an-copy,.an-card.has-hero:not(.is-wide) .an-copy,.an-card.is-wide .an-copy{gap:12px;padding:20px 20px 22px}
  .an-card.has-hero .an-brand{display:none}
  .an-headline,.an-card.is-wide .an-headline{padding-right:0;font-size:21px}
  .an-card:not(.has-hero) .an-headline{padding-right:28px}
}

/* ==== /css/login.css ==== */
/* 登录框：左边轮播平台自己生成的短片，右边是表单（参考即梦 / LibTV 的双栏登录）。
   基础样式（输入框、按钮、Tab）仍在 base.css，这里只管双栏布局和展示区。
   窄屏只留表单：展示区不渲染，js/login-show.js 也不会去拉视频。 */
/* 高度固定、表单从顶上排：登录 / 注册来回切，弹窗不跟着伸缩，标题和 Tab 也不跳，只有下面的输入栏变。
   700 是注册页（Google + 邮箱 + 密码 + 邀请码）刚好放下的高度；屏幕更矮、或者多出验证码栏时表单区自己滚。 */
#login .box.loginsplit{width:min(920px,100%);height:min(700px,calc(100dvh - 48px));padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:minmax(0,1fr);overflow:hidden;border-radius:16px;
  box-shadow:0 32px 96px rgba(0,0,0,.42)}
.loginmain{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;padding:44px 40px 36px}
#login .loginmain h2{font-size:26px}
/* 主按钮反色：深色主题白底黑字、浅色主题黑底白字。颜色交给左边的片子，青色只留给输入焦点和 logo */
#login .go{background:var(--fg);color:var(--bg)}
#login .go:hover:not(:disabled){opacity:.88}
#login .go:disabled{background:var(--hole);color:var(--dim)}

.loginshow{position:relative;margin:8px 0 8px 8px;border-radius:11px;overflow:hidden;background:#0b0d0e;isolation:isolate;
  color:#fff;min-height:0}
.loginshow video,.loginshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.loginshow video{opacity:0;transition:opacity .8s ease}
.loginshow video.on{opacity:1}
/* 上下两道压暗，让标题和说明在任何画面上都读得清 */
.loginshow::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.18) 26%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 52%,rgba(0,0,0,.8) 100%)}
.lsh-head{position:absolute;left:28px;right:28px;top:30px;z-index:2}
.lsh-head strong{display:block;font-size:30px;line-height:1.3;font-weight:700;letter-spacing:.02em;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lsh-head span{display:block;margin-top:10px;font-size:13px;color:rgba(255,255,255,.84);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lsh-cap{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}
.lsh-tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:11px;color:rgba(255,255,255,.9)}
.lsh-tag .ui-icon{width:12px;height:12px}
.lsh-title{margin:10px 0 6px;font-size:18px;font-weight:650;line-height:1.4}
#login .lsh-prompt{margin:0 0 14px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lsh-foot{display:flex;align-items:center;gap:12px;min-height:28px}
.lsh-dots{display:flex;gap:6px}
.lsh-dots button{position:relative;width:16px;height:4px;padding:0;border:0;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.32);cursor:pointer;transition:width .3s ease}
.lsh-dots button[aria-current="true"]{width:32px}
/* 当前那一格按播放进度填满（--p 由脚本写，0~1） */
.lsh-dots button::after{content:'';position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.lsh-dots button[aria-current="true"]::after{transform:scaleX(var(--p,1))}
#login .lsh-dots button:disabled{opacity:1}
.lsh-pause{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff;cursor:pointer}
.lsh-pause:hover{background:rgba(255,255,255,.28)}
.lsh-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lsh-pause .ui-icon{width:13px;height:13px}

@media(max-width:860px){
  #login .box.loginsplit{width:min(440px,100%);height:min(720px,calc(100dvh - 48px));grid-template-columns:minmax(0,1fr)}
  .loginshow{display:none}
}
@media(max-width:480px){
  #login .box.loginsplit{height:min(680px,calc(100dvh - 24px))}
  .loginmain{padding:28px 22px 24px}
  #login .loginmain h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .loginshow video{transition:none}
  .lsh-dots button{transition:none}
}

/* ==== /css/form.css ==== */
/* 侧栏表单：控件、开关、chips、参考图槽位、首尾帧、锚点行、文件行、估时、生成按钮。 */

label{display:block;font-size:12px;color:var(--dim);margin:18px 0 8px;font-weight:600}
label:first-child{margin-top:0}
textarea,select,input[type=text]{width:100%;background:var(--surf);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:11px 12px;font:inherit;box-shadow:none}
textarea:focus,select:focus,input[type=text]:focus,input[type=number]:focus{border-color:var(--acc)}
input[type=text]::placeholder{color:var(--ph)}
textarea{min-height:158px;resize:vertical;line-height:1.6}
textarea::placeholder{color:var(--ph)}
select{appearance:none;cursor:pointer;padding-right:34px}
select option{background:var(--surf);color:var(--fg)}
.selwrap{position:relative}
.selwrap::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;
  margin-top:-5px;border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);
  transform:rotate(45deg);pointer-events:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=number]{width:100%;background:var(--surf);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:11px 12px;font:inherit;box-shadow:none}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{opacity:.35}
.opt{display:flex;align-items:center;gap:10px;margin-top:14px;cursor:pointer;
  position:relative;min-height:26px;
  font-size:12.5px;color:var(--dim);user-select:none}
/* 开关的真身藏起来，但**必须**钉在这一行里（position:relative + left/top）。
   原来只写 position:absolute：包含块是最近的定位祖先，也就是 sticky 的 .ct-compose，
   静态位置落在那块 overflow:hidden 面板的底边之外，把面板撑出 150px 的滚动高度；
   点一下 label，浏览器聚焦这个看不见的 input、顺手把这段溢出滚进视野——
   面板顶上的「新建视频」和提示词输入框就被推出裁剪边，而且再也滚不回来
   （2026-09-14 用户报「勾选生成中预览页面坍塌、输入框不见」）。 */
.opt input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;
  opacity:0;pointer-events:none}
.sw{width:36px;height:20px;border-radius:99px;flex:0 0 auto;position:relative;transition:.15s;
  background:var(--line)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--ph);transition:.15s;box-shadow:1px 1px 3px var(--lo)}
.opt input:checked + .sw{background:var(--acc)}
.opt input:checked + .sw::after{transform:translateX(16px);background:var(--on-accent)}
.opt input:focus-visible + .sw{outline:2px solid var(--acc);outline-offset:2px}
/* 控件下面的一行说明：别用负 margin 往上顶，原生 select 会盖在它上面；
   颜色也别用 --ph，浅色模式下几乎看不见 */
.subhint{font-size:12px;color:var(--hint);line-height:1.55;margin:9px 0 14px}
.subhint:empty{display:none}
/* 控件底下的一行小按钮（克隆音色 / 删除音色）。原来只有 .ttsout .trow 有样式，
   音色区那一行没人管，两颗按钮各占一行、删除键掉到左下角。 */
.trow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 种子：一个输入框 + 一颗「随机」把它清空 */
.seedrow{display:flex;gap:9px;align-items:stretch}
.seedrow input{flex:1;min-width:0}
.seedrow button{border:0;cursor:pointer;font:inherit;font-size:12px;padding:0 15px;border-radius:12px;
  color:var(--dim);background:var(--surf);white-space:nowrap;
  box-shadow:3px 3px 7px var(--lo), -3px -3px 7px var(--hi)}
.seedrow button:active{box-shadow:inset 2px 2px 5px var(--lo), inset -2px -2px 5px var(--hi)}
.seedlock{font-size:11.5px;color:var(--acc);margin-top:7px}
.chips{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.chips button{flex:1;min-width:0;border:1px solid var(--line);cursor:pointer;font:inherit;font-size:11.5px;
  padding:5px 0;border-radius:5px;color:var(--dim);background:var(--surf)}
.chips button.on{color:var(--acc);background:var(--soft);border-color:var(--acc)}
.chips button:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}

.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.slot{aspect-ratio:1;border-radius:6px;position:relative;cursor:pointer;overflow:hidden;
  display:grid;place-items:center;color:var(--ph);font-size:20px;
  background:var(--hole);border:1px dashed var(--line)}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot .x{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#e8646d;font-size:13px;line-height:19px;
  text-align:center;box-shadow:1px 1px 3px rgba(0,0,0,.2)}
.slot.drag{color:var(--acc)}
label .hint{color:var(--hint);opacity:.85;font-weight:400;margin-left:6px}
/* 首尾帧：两个 16:9 的格子，各带一行说明 */
#tierwrap,#ltxwrap,#refblock,#flfblock{margin-top:18px}   /* 块内首个 label 的 margin-top 被 :first-child 清掉了 */
.flf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fcell{display:flex;flex-direction:column;gap:6px}
.fcell .slot{aspect-ratio:16/9}
.fcap{text-align:center;font-size:11.5px;color:var(--ph)}
.warn{font-size:11.5px;color:var(--warn);margin-top:10px;line-height:1.5}
/* 中间锚点：一行一个，缩略图 + 帧号 */
.guides{display:flex;flex-direction:column;gap:7px}
.grow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:12px;
  box-shadow:inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi)}
.grow .gthumb{width:44px;height:26px;border-radius:7px;object-fit:cover;flex:0 0 auto;background:var(--hole)}
.grow .gkind{width:44px;height:26px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;color:var(--acc);box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.grow .gat{font-size:11.5px;color:var(--dim);white-space:nowrap}
.grow input[type=number]{width:62px;background:transparent;color:var(--fg);border:0;outline:none;
  border-radius:9px;padding:5px 8px;font:inherit;font-size:12px;
  box-shadow:inset 3px 3px 6px var(--lo), inset -3px -3px 6px var(--hi)}
.grow .gsec{flex:1;font-size:11px;color:var(--ph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est{margin-top:12px;font-size:12px;color:var(--dim);text-align:center;min-height:18px}
.est b{color:var(--acc);font-weight:650}
/* 提交前报价：余额付不起这条时标红（内核会拒绝提交） */
.quote-short{color:#e5484d}
.files{display:flex;flex-direction:column;gap:7px}
.frow{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;font-size:12.5px;
  box-shadow:inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi)}
.frow .fi{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;color:var(--acc);box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.frow .fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);opacity:.85}
.frow .fs{color:var(--ph);font-size:11.5px;white-space:nowrap}
.frow .tg,.frow .fx{border:0;background:var(--surf);cursor:pointer;font:inherit;font-size:11px;
  padding:3px 9px;border-radius:99px;white-space:nowrap;color:var(--dim);
  box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.frow .tg.on{color:var(--acc)}
.frow .fx{color:var(--bad);padding:3px 8px}
.frow .tg:active,.frow .fx:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.fadd{cursor:pointer;color:var(--ph);justify-content:center;font-size:13px}
.fadd.drag,.fadd:hover{color:var(--acc)}
/* 生成中的实时预览：ComfyUI 每一步的 latent 预览铺在底下，状态条压在上面 */
.thumb img.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d1016}
.thumb.haspv .wait{position:absolute;left:10px;right:10px;bottom:10px;width:auto;padding:9px 12px;
  gap:7px;border-radius:10px;color:#fff;background:rgba(12,16,24,.55);backdrop-filter:blur(5px)}
.thumb.haspv .bar{width:100%;box-shadow:inset 1px 1px 3px rgba(0,0,0,.5)}
.thumb.haspv .w-eta{color:rgba(255,255,255,.75)}

.go{width:100%;margin-top:22px;border:0;border-radius:6px;padding:13px;cursor:pointer;
  background:var(--acc);color:var(--on-accent);font:inherit;font-weight:650;font-size:14px;transition:filter .15s}
.go:active:not(:disabled){filter:brightness(.94)}
.go:disabled{background:var(--hole);color:var(--dim);cursor:not-allowed}

/* ==== /css/cards.css ==== */
/* 队列、成片卡片、瀑布流、杂项小按钮、toast。 */
.queue{padding:0 0 18px;margin-bottom:20px}
.queue.out{background:transparent;border:0;border-bottom:1px solid var(--line);box-shadow:none;border-radius:0}
.qtitle{font-size:12px;color:var(--dim);font-weight:600;margin-bottom:12px}
.qrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.qrow:first-of-type{border-top:0}
.qnum{width:26px;height:26px;border-radius:9px;font-size:11.5px;flex:0 0 auto;
  display:grid;place-items:center;color:var(--dim);
  box-shadow:inset 2px 2px 5px var(--lo), inset -2px -2px 5px var(--hi)}
.qrow.run .qnum{color:var(--acc)}
.qtext{flex:1;font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qeta{font-size:12.5px;color:var(--ph);white-space:nowrap;flex:0 0 auto}
/* 排队里也要看得到这条片子有多长——光有剩余时间不知道在等什么 */
.qdur{font-size:11.5px;color:var(--dim);white-space:nowrap;flex:0 0 auto}
.qempty{color:var(--ph);font-size:13px}

/* align-items:start —— 不加的话同一行的卡片会被最高的那张（竖屏片）拉到一样高，
   矮卡片的正文和底部信息之间就空出一大片 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px;
  align-items:start}
/* 瀑布流：行高切成 4px 的细格，每张卡片由 JS 按自己的高度算 grid-row: span N，
   下一张就能贴着上一张的底边往上顶，而不是等一整行里最高的那张。
   只在支持 ResizeObserver 的浏览器上开（JS 给 <html> 加 .mas），否则退回上面的规则。 */
html.mas .cards, html.mas .acards{grid-auto-rows:4px;row-gap:0}
html.mas .card, html.mas .acard{margin-bottom:22px}
html.mas .empty{grid-row:span 60}
.card{overflow:hidden;display:flex;flex-direction:column;padding:12px}
.thumb{position:relative;border-radius:5px;overflow:hidden;background:var(--hole);
  aspect-ratio:16/9;display:grid;place-items:center;
  box-shadow:inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi)}
/* 画框比例由 JS 按成片的真实宽高设（thumb.style.aspectRatio），不再吸附到几个预设比例——
   768x448 / 448x768 / 2048x1152 这些都不是标准的 16:9 或 9:16，吸附过去就会留黑边或被切。
   竖片再高也不让它把整页撑爆，超过就靠 contain 自己居中。 */
.thumb{max-height:min(70vh, 560px)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:contain;display:block;background:#0d1016}
.play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(12,16,24,.2)}
.play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.25)}
.play span::after{content:"";border-left:15px solid var(--acc-d);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.wait{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--dim);
  font-size:12.5px;padding:18px;width:100%}
/* 生成中的 .wait.live 铺流光，见 skeleton.css */
@keyframes sp{to{transform:rotate(360deg)}}
.bar{width:76%;height:7px;border-radius:5px;overflow:hidden;
  box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.bar i{display:block;height:100%;border-radius:5px;width:0;transition:width .8s linear;
  background:linear-gradient(90deg,var(--acc),var(--acc-d))}
.cbody{padding:12px 4px 2px;display:flex;flex-direction:column;gap:9px;flex:1}
.cp{font-size:12.5px;line-height:1.55;color:var(--fg);opacity:.85;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word}
.cmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;
  color:var(--ph);margin-top:auto}
.st{font-size:11px;padding:3px 10px;border-radius:99px;white-space:nowrap;flex:0 0 auto;
  box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.st.done{color:var(--ok)} .st.running{color:var(--acc)}
.st.pending{color:var(--warn)} .st.failed,.st.expired{color:var(--bad)} .st.cancelled{color:var(--ph)}
.st.draft{color:var(--warn)}
/* 草片角标：别让人把它当成成片下载走了 */
.dtag{position:absolute;left:8px;top:8px;z-index:2;pointer-events:none;
  font-size:10.5px;padding:3px 8px;border-radius:99px;
  color:#fff;background:rgba(0,0,0,.55)}
.m-dl .enh{font:inherit;font-size:11.5px;padding:4px 12px;border:0;border-radius:99px;cursor:pointer;
  color:var(--acc-d);background:var(--surf);box-shadow:3px 3px 6px var(--lo), -3px -3px 6px var(--hi)}
.m-dl .enh:disabled{color:var(--ph);cursor:default}
.cmeta .del{color:var(--dim)}
.mini{font:inherit;font-size:12px;padding:7px 11px;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--hint);font-weight:550;background:var(--surf);box-shadow:none}
.mini:hover{color:var(--acc-d)}
#ttsvoicedel:hover{color:var(--bad)}
.mini:disabled{color:var(--ph);cursor:default}
/* 克隆面板：和下面的"合成"分开，免得两个蓝色大按钮挨在一起误点 */
#ttsclonewrap{margin-top:14px;padding:14px 14px 16px;border-radius:14px;background:var(--hole);
  box-shadow:inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi)}
#ttsclonewrap label:first-of-type{margin-top:0}
.go.sub{margin-top:14px;padding:12px;font-size:13.5px;background:var(--surf);color:var(--acc-d);
  box-shadow:4px 4px 9px var(--lo), -4px -4px 9px var(--hi)}
.go.sub:disabled{background:var(--surf);color:var(--ph)}
/* 卡片上的种子：点一下复制 + 填进左边的种子框，用来锁运动 */
.cmeta .m-seed{border:0;cursor:pointer;font:inherit;font-size:11px;padding:3px 9px;border-radius:99px;
  color:var(--dim);background:var(--surf);white-space:nowrap;
  box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.cmeta .m-seed:hover{color:var(--acc)}
.cmeta .m-seed:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.chead{display:flex;align-items:center;justify-content:space-between;margin:0 4px 12px}
.chead span{font-size:12px;color:var(--dim);font-weight:600}
.chead button{font:inherit;font-size:11.5px;padding:5px 12px;border:0;border-radius:99px;cursor:pointer;
  color:var(--dim);background:var(--surf);box-shadow:3px 3px 6px var(--lo), -3px -3px 6px var(--hi)}
.chead button:hover{color:var(--bad)}
.chead button:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.cmeta .cancel,.cmeta .del,.qx{margin-left:auto;font:inherit;font-size:11px;padding:3px 10px;border:0;border-radius:99px;
  cursor:pointer;color:var(--bad);background:var(--surf);white-space:nowrap;
  box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.cmeta .cancel:hover,.cmeta .del:hover,.qx:hover{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.cmeta .cancel[disabled],.cmeta .del[disabled],.qx[disabled]{opacity:.5;cursor:default}
.qx{margin-left:6px;padding:2px 8px}
.cmeta a{color:var(--dim);text-decoration:none}
.cmeta a:hover{color:var(--acc)}
.empty{grid-column:1/-1;text-align:center;color:var(--ph);padding:80px 20px;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);max-width:calc(100% - 32px);
  background:var(--surf);color:var(--fg);padding:12px 20px;border:1px solid var(--line);border-radius:8px;font-size:13px;
  box-shadow:0 8px 28px var(--lo);overflow-wrap:anywhere;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:120}
.toast.on{opacity:1}

/* 进行中的事（上传 / 读文件 / 打开大页面）：右下角托盘，见 core.js activity() */
.acts{position:fixed;right:16px;bottom:16px;z-index:115;display:flex;flex-direction:column;gap:8px;
  width:min(320px,calc(100vw - 32px));pointer-events:none}
.acts[hidden]{display:none}
.act{background:var(--surf);color:var(--fg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:12.5px}
.act-top{display:flex;align-items:center;gap:8px;min-width:0}
.act-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-detail{color:var(--dim);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.act-spin{width:13px;height:13px;flex:0 0 auto;border:2px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;animation:sp 1s linear infinite}
.act-bar{height:4px;margin-top:8px;border-radius:3px;background:var(--hole);overflow:hidden}
.act-bar i{display:block;height:100%;background:var(--acc);transition:width .2s linear}
@media(max-width:600px){.acts{right:16px;left:16px;width:auto;bottom:12px}}

/* ==== /css/flow.css ==== */
/* 工作台：无限画布 + 分镜条 + 底部统一提示条。
   形态照 Google Flow 那套：一条提示条发起所有生成，结果落成片段卡，
   片子的顺序由分镜条表达——不用连线，所以节点再多也不会变成意大利面。 */

/* 画布要占满视口，所以 flow 页签激活时把 #app 改成纵向 flex；
   header 的 sticky 在 flex 容器里没意义，压成 static。 */
body.flowon{overflow:hidden}
body.flowon #app{height:100vh;height:100dvh;display:flex;flex-direction:column}
body.flowon header{position:static;flex:0 0 auto}
body.flowon .tabbar{flex:0 0 auto}
#pane-flow{--library-width:248px;--dock-height:190px;flex:1;min-height:0;position:relative;display:flex;flex-direction:column}

.fw{flex:1;min-height:0;display:grid;grid-template-columns:var(--library-width) minmax(0,1fr)}
.fw-canvas{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.fw-toolbar{display:flex;align-items:center;gap:8px;flex:0 0 48px;padding:0 20px;
  background:var(--surf);border-bottom:1px solid var(--line)}
.fw-toolbar h2,.fw-ing-hd h2{font-size:13px;font-weight:600;margin:0;color:var(--fg)}
.fw-count{min-width:20px;padding:0 5px;border-radius:4px;text-align:center;
  color:var(--dim);background:var(--hole);font-size:11px;font-variant-numeric:tabular-nums}
.fw-divider{width:1px;height:16px;background:var(--line);margin:0 5px}
.fw-mobile,.fw-scrim{display:none}

/* ---------- 左：素材库（Flow 的 ingredients：角色 / 场景 / 道具） ---------- */
.fw-ing{display:flex;flex-direction:column;min-height:0;padding:0 16px;gap:16px;
  background:var(--surf);border-right:1px solid var(--line)}
.fw-ing-hd{display:flex;align-items:center;gap:8px;min-height:48px;flex-shrink:0;color:var(--dim)}
.fw-ing-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-wrap:wrap;
  gap:10px;align-content:flex-start;padding:2px;overscroll-behavior:contain}
.fw-ing-list::-webkit-scrollbar{width:8px}
.fw-ing-list::-webkit-scrollbar-track{background:transparent}
.fw-ing-list::-webkit-scrollbar-thumb{background:var(--lo);border-radius:99px}
.fw-ing-empty{width:100%;color:var(--ph);font-size:12px;text-align:center;
  padding:36px 8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.fw-ing-empty .ui-icon{width:30px;height:30px;opacity:.7}
.fw-ing-footer{padding:12px 0;border-top:1px solid var(--line);font-size:11px;color:var(--dim);flex-shrink:0}

/* 两列方块。不用 grid + aspect-ratio：Chrome 排网格行高时把卡片的内在高度算成 0，
   容器高度被平均分给每一行，卡片一张压一张。换成 flex 换行 + padding 撑高就没这个问题 */
.ing{position:relative;width:calc(50% - 5px);flex:0 0 auto;border-radius:6px;overflow:hidden;cursor:pointer;
  background:var(--hole);box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s}
.ing::before{content:"";display:block;padding-top:100%}
.ing>img,.ing>video,.ing>.ic{position:absolute;inset:0;width:100%;height:100%}
.ing img,.ing video{object-fit:cover;display:block}
.ing-dur{position:absolute;left:5px;top:5px;padding:1px 6px;border-radius:9px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-variant-numeric:tabular-nums}
.ing .ic.broken{color:var(--dim);font-size:11px}
.ing .ic.broken .ui-icon{width:22px;height:22px;opacity:.6}
.ing .ic.broken b{font-weight:400;font-size:11px}
.ing.on{box-shadow:0 0 0 2px var(--acc)}
.ing .n{position:absolute;left:0;right:0;bottom:0;padding:3px 5px;font-size:10px;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ing .x{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;
  border:0;cursor:pointer;font:inherit;font-size:11px;line-height:1;
  background:rgba(0,0,0,.5);color:#fff;opacity:0;transition:opacity .15s}
.ing:hover .x,.ing:focus-within .x{opacity:1}
/* 选中时左上角标出它是第几张，和提示词里的 <Picture N> 对得上 */
.ing .i{position:absolute;top:3px;left:3px;min-width:16px;height:16px;border-radius:5px;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;padding:0 3px;
  background:var(--acc);color:var(--on-accent)}

/* ---------- 中：无限画布 ---------- */
.fw-stage{flex:1;min-height:0;position:relative;overflow:hidden;outline:none;
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0);
  background-size:24px 24px;
  cursor:grab;touch-action:none}
.fw-stage.pan{cursor:grabbing}
.fw-stage.drop{box-shadow:inset 0 0 0 2px var(--acc)}
.fw-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
.fw-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}

.fw-hint{position:absolute;inset:0 16px calc(var(--dock-height) + 40px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;color:var(--ph);pointer-events:none;overflow:hidden}
.fw-empty-icon{width:48px;height:48px;flex-shrink:0;opacity:.7}
.fw-hint h3{font-size:16px;font-weight:550;color:var(--dim);margin:0}
.fw-hint .mini{pointer-events:auto}

.fw-zoom{display:flex;align-items:center;gap:2px;font-size:11px;color:var(--dim)}
.fw-zoom button{width:30px;height:30px;padding:0;border:0;border-radius:5px;
  display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--dim)}
.fw-zoom button:hover{color:var(--fg);background:var(--hole)}
.fw-zoom button:disabled{opacity:.35;cursor:default}
#fw-scale{width:46px;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- 片段卡 ---------- */
.clip{position:absolute;left:0;top:0;width:264px;border-radius:8px;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);box-shadow:0 3px 12px var(--lo);
  cursor:grab;user-select:none}
.clip:not(.aud){height:338px;display:flex;flex-direction:column}
.clip:not(.aud) .cv{flex:0 0 auto}
.clip.drag{cursor:grabbing;z-index:5;box-shadow:8px 8px 20px var(--lo), -8px -8px 20px var(--hi)}
.clip.on{box-shadow:0 0 0 2px var(--acc), 6px 6px 14px var(--lo)}
.clip:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.clip .cv{position:relative;background:var(--hole);aspect-ratio:16/9;overflow:hidden}
.clip .cv img,.clip .cv video{width:100%;height:100%;object-fit:contain;display:block}
.clip .cv .ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;color:var(--ph);font-size:11.5px}
.clip .cv .bar{width:70%;height:6px;border-radius:4px;overflow:hidden;
  box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.clip .cv .bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--acc),var(--acc-d));transition:width .5s}
.clip .cv .play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.clip .cv .play span{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.82);
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.clip .cv .play span::after{content:"";border-left:12px solid var(--acc-d);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}

.clip .cb{padding:12px;display:flex;flex-direction:column;gap:9px;flex:1}
.clip .cp{font-size:12px;line-height:1.65;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clip .cm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:10.5px;color:var(--ph)}
.clip .st{padding:2px 7px;border-radius:4px;background:var(--hole);box-shadow:none}
.clip .st.done{color:var(--ok)} .clip .st.running{color:var(--acc)}
.clip .st.pending{color:var(--warn)} .clip .st.draft{color:var(--warn)}
.clip .st.failed{color:var(--bad)}

/* 预留操作条高度，悬停时显现按钮不会推大卡片或遮住下一排。 */
.clip .ca{display:flex;gap:5px;flex-wrap:wrap;align-content:start;flex:0 0 66px;margin-top:auto;
  opacity:0;visibility:hidden;transition:opacity .15s}
.clip:hover .ca,.clip.on .ca,.clip:focus-within .ca{opacity:1;visibility:visible}
.clip.aud .ca{flex-basis:30px}
.clip .ca button{font:inherit;font-size:10.5px;padding:4px 8px;border:1px solid var(--line);border-radius:5px;
  cursor:pointer;background:var(--surf);color:var(--dim);box-shadow:none}
.clip .ca button:hover{color:var(--acc)}
.clip .ca button:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.clip .ca button.del:hover{color:var(--bad)}
.clip .ca button:disabled{color:var(--ph);cursor:default;box-shadow:none}

/* 续拍出来的片段，用一条线连回源片段。只有这一种连线——它表示「时间上接着」，
   不是数据流，所以不会像节点图那样连成一团。 */
.fw-link{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.fw-link path{fill:none;stroke:var(--acc);stroke-width:2;opacity:.34}
.fw-link path.jump{stroke-dasharray:5 4;opacity:.28}

/* ---------- 分镜条 ---------- */
/* ---------- 悬浮 dock：分镜条 + 提示条 ---------- */
/* 生成栏在画布内部居中，左侧留出素材库。 */
.fw-dock{position:absolute;left:calc(var(--library-width) + 24px);right:24px;bottom:24px;z-index:10;
  max-width:960px;margin-inline:auto;max-height:calc(100% - 64px);overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
.fw-dock > *{pointer-events:auto}

/* 磨砂：半透明底 + backdrop-filter。先给一个不透明的 background 兜底，
   老浏览器不支持 backdrop-filter 时至少不会变成一块透明的看不清的东西。 */
.fw-glass{background:var(--surf);background:color-mix(in srgb,var(--surf) 96%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.07)}
html[data-theme="dark"] .fw-glass{box-shadow:0 8px 28px rgba(0,0,0,.24)}

.fw-scene{flex:0 0 auto;padding:9px 14px;border-radius:8px}
.fw-scene-hd{display:flex;align-items:center;gap:9px;margin-bottom:9px;
  font-size:12px;color:var(--dim);font-weight:600}
.fw-scene-hd .hint{font-weight:400;color:var(--ph);font-size:11.5px}
.fw-scene-hd .spacer{flex:1}
.fw-scene-hd button{font:inherit;font-size:11px;padding:4px 8px;border-radius:5px;
  cursor:pointer;color:var(--dim);
  background:color-mix(in srgb, var(--hole) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.fw-scene-hd button:hover:not(:disabled){color:var(--bad)}
.fw-scene-hd button:disabled{opacity:.45}
.fw-scene-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;min-height:0;
  align-items:stretch}
.fw-scene.empty .fw-scene-row{display:none}
.fw-scene-hd{margin-bottom:0}
.fw-scene:not(.empty) .fw-scene-hd{margin-bottom:9px}
.fw-scene-row::-webkit-scrollbar{height:7px}
.fw-scene-row::-webkit-scrollbar-track{background:transparent}
.fw-scene-row::-webkit-scrollbar-thumb{background:var(--lo);border-radius:99px}
.fw-scene-empty{color:var(--ph);font-size:11.5px;align-self:center;padding-left:2px}

.sc{position:relative;flex:0 0 auto;width:92px;border-radius:6px;overflow:hidden;
  cursor:grab;background:var(--hole);
  box-shadow:3px 3px 7px var(--lo), -3px -3px 7px var(--hi)}
.sc.drag{opacity:.45;cursor:grabbing}
.sc.over{box-shadow:0 0 0 2px var(--acc)}
.sc img{width:100%;height:44px;object-fit:cover;display:block}
.sc .n{position:absolute;top:2px;left:3px;font-size:9.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.sc .d{font-size:9.5px;color:var(--dim);text-align:center;padding:2px 0 3px}
.sc .x{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;border:0;
  cursor:pointer;font-size:10px;line-height:1;background:rgba(0,0,0,.5);color:#fff;
  opacity:0;transition:opacity .15s}
.sc:hover .x{opacity:1}

/* ---------- 底部统一提示条：所有生成都从这里发起 ---------- */
.fw-bar{flex:0 0 auto;padding:16px;border-radius:8px}
.fw-bar:focus-within{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}

/* 续拍 / 跳转模式：把接的是哪一条、接的哪一帧摆出来，不然人不知道自己在什么上下文里 */
.fw-ctx{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:8px 11px;
  border-radius:6px;font-size:11.5px;color:var(--dim);
  background:color-mix(in srgb, var(--acc) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 28%, transparent)}
.fw-ctx img{width:56px;height:32px;object-fit:cover;border-radius:7px;flex:0 0 auto;
  background:var(--hole)}
.fw-ctx b{color:var(--acc);font-weight:650}
.fw-ctx .spacer{flex:1}
.fw-ctx button{font:inherit;font-size:11px;padding:4px 10px;border:0;border-radius:8px;
  cursor:pointer;background:var(--surf);color:var(--dim);
  box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.fw-ctx button:hover{color:var(--bad)}

.fw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.fw-chips:empty{display:none}
.fw-chips.off .fw-chip{opacity:.38}
.fw-chip-note{font-size:11px;color:var(--warn);align-self:center;line-height:1.5}
.fw-chip{display:flex;align-items:center;gap:6px;padding:3px 7px 3px 4px;border-radius:5px;
  font-size:11px;color:var(--dim);
  background:color-mix(in srgb, var(--hole) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 55%, transparent)}
.fw-chip img{width:22px;height:22px;object-fit:cover;border-radius:6px}
.fw-chip button{border:0;background:transparent;color:var(--ph);cursor:pointer;
  font:inherit;font-size:12px;line-height:1;padding:0 2px}
.fw-chip button:hover{color:var(--bad)}

.fw-row{display:flex;align-items:flex-end;gap:10px}
/* 提示词框是 contenteditable 不是 textarea——要在文字中间显示素材缩略图 */
.fw-input{flex:1;min-width:0;min-height:64px;max-height:150px;overflow-y:auto;
  background:transparent;color:var(--fg);outline:none;border:0;border-radius:0;
  padding:6px 0;font:inherit;font-size:14px;line-height:1.7;
  white-space:pre-wrap;word-break:break-word;
  transition:border-color .15s, background .15s}
.fw-input:focus{background:transparent}
.fw-input:empty::before{content:attr(data-ph);color:var(--ph);pointer-events:none}
.fw-input::-webkit-scrollbar{width:7px}
.fw-input::-webkit-scrollbar-thumb{background:var(--lo);border-radius:99px}

/* 素材标签：整体是一个原子（contenteditable=false），退格一次就整块删掉 */
.pref{display:inline-flex;align-items:center;gap:3px;vertical-align:-4px;
  margin:0 2px;padding:1px 5px 1px 2px;border-radius:8px;user-select:none;
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 45%, transparent)}
.pref img{width:18px;height:18px;object-fit:cover;border-radius:5px;display:block}
.pref i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--acc);line-height:1}
/* 对不上素材的编号：原样留着文字，标红，别显示成图 */
.pref.off{background:color-mix(in srgb, var(--bad) 12%, transparent);
  border-color:color-mix(in srgb, var(--bad) 40%, transparent);
  color:var(--bad);font-size:11.5px;padding:1px 6px;vertical-align:0}
/* 卡片上的那份小一号，行高别被撑开 */
.clip .cp .pref{vertical-align:-3px;padding:1px 4px 1px 1px}
.clip .cp .pref img{width:15px;height:15px}

.fw-go{flex:0 0 88px;width:88px;min-height:40px;border:0;border-radius:6px;padding:8px 16px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:650;color:var(--on-accent);background:var(--acc)}
.fw-go:hover:not(:disabled){filter:brightness(.94)}
.fw-go:active:not(:disabled){filter:brightness(.94)}
.fw-go:disabled{background:var(--hole);color:var(--ph);cursor:default}

.fw-opts{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.fw-opts select{width:auto;color:var(--fg);outline:none;
  background:transparent;border:1px solid var(--line);box-shadow:none;
  border-radius:5px;padding:6px 24px 6px 8px;font:inherit;font-size:11px;min-height:32px;max-width:100%;
  appearance:none;cursor:pointer}
.fw-opts select:hover{border-color:color-mix(in srgb, var(--acc) 45%, transparent)}
.fw-opts select option{background:var(--surf);color:var(--fg)}
.fw-opts .sw2{position:relative}
.fw-opts .sw2::after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;
  margin-top:-3px;border-right:1.5px solid var(--ph);border-bottom:1.5px solid var(--ph);
  transform:rotate(45deg);pointer-events:none}
.fw-opts .spacer{flex:1}
.fw-est{font-size:11.5px;color:var(--ph);white-space:nowrap}
.fw-est b{color:var(--acc);font-weight:650}

/* ---------- AI 辅助：润色按钮、设置齿轮、弹窗 ---------- */
.fw-ing-btns{display:flex;gap:6px;flex-shrink:0}
.fw-ing-btns .mini{flex:1;min-width:0}

.fw-ai{flex:0 0 auto;width:40px;height:40px;border-radius:6px;cursor:pointer;font-size:17px;
  line-height:1;color:var(--dim);
  background:var(--hole);border:1px solid transparent;
  transition:color .15s, border-color .15s, transform .15s}
.fw-ai:hover:not(:disabled){color:var(--acc);
  border-color:color-mix(in srgb, var(--acc) 50%, transparent)}
.fw-ai:disabled{opacity:.5;cursor:default}
.fw-ai.busy{animation:fwpulse 1s ease-in-out infinite}
@keyframes fwpulse{50%{opacity:.45;transform:scale(.93)}}

.fw-undo{width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:5px;cursor:pointer;
  color:var(--warn);background:transparent;
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent)}
.fw-undo:hover{background:color-mix(in srgb, var(--warn) 12%, transparent)}

.fw-gear{width:32px;height:32px;border-radius:5px;cursor:pointer;flex:0 0 auto;display:grid;place-items:center;padding:0;
  color:var(--dim);background:transparent;border:1px solid transparent}
.fw-gear:hover{color:var(--acc);border-color:color-mix(in srgb, var(--acc) 40%, transparent)}
.fw-gear.on{background:var(--soft);color:var(--acc)}

.fw-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(0,0,0,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.fw-modal-box{width:min(520px, calc(100% - 32px));max-height:calc(100% - 40px);overflow-y:auto;
  border-radius:8px;padding:24px;overscroll-behavior:contain}
.fw-modal-box::-webkit-scrollbar{width:8px}
.fw-modal-box::-webkit-scrollbar-thumb{background:var(--lo);border-radius:99px}
.fw-modal-body h3{margin:0 0 4px;font-size:15.5px;font-weight:650;color:var(--fg)}
.fw-modal-body label{display:block;font-size:11.5px;color:var(--dim);margin:14px 0 6px;font-weight:600}
.fw-modal-body input,.fw-modal-body textarea,.fw-modal-body select{width:100%;font:inherit;
  font-size:13px;color:var(--fg);border-radius:6px;padding:10px 12px;outline:none;
  background:color-mix(in srgb, var(--hole) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.fw-modal-body textarea{min-height:84px;resize:vertical;line-height:1.55}
.fw-modal-body select{appearance:none;cursor:pointer}
.fw-modal-body input:focus,.fw-modal-body textarea:focus{
  border-color:color-mix(in srgb, var(--acc) 55%, transparent)}
.fw-modal-body input::placeholder,.fw-modal-body textarea::placeholder{color:var(--ph)}
.fw-m-note{font-size:11.5px;color:var(--hint);line-height:1.65;margin-top:8px}
.fw-m-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fw-m-two label{margin-top:14px}
.fw-m-row{display:flex;align-items:center;gap:9px;margin-top:18px}
.fw-m-row .spacer{flex:1}
.fw-m-msg{font-size:11.5px;color:var(--ok);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:210px}
.fw-m-msg.bad{color:var(--bad)}
.fw-m-go{font:inherit;font-size:13px;font-weight:650;padding:9px 20px;border:0;border-radius:6px;
  cursor:pointer;color:var(--on-accent);background:var(--acc)}
.fw-m-go:disabled{background:var(--lo);color:var(--ph);cursor:default;box-shadow:none}

/* ---------- 设置弹窗：分组 + 自动填充 ---------- */
/* Chrome 的自动填充会强行刷一层亮底色（暗色模式下就是截图里那块白），
   它用的是浏览器内部样式，改 background 盖不掉，只能拿 inset 阴影糊过去。 */
.fw-modal-body input:-webkit-autofill,
.fw-modal-body input:-webkit-autofill:hover,
.fw-modal-body input:-webkit-autofill:focus,
.fw-modal-body input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--fg);
  -webkit-box-shadow:0 0 0 60px var(--hole) inset;
  caret-color:var(--fg);
  border-radius:6px;
  /* 顺带把它的背景过渡拖到天荒地老，某些版本靠这个才压得住 */
  transition:background-color 99999s ease-in-out 0s}

/* 暗色下那几个框原来的边框几乎看不见，单独提一档对比 */
html[data-theme="dark"] .fw-modal-body input,
html[data-theme="dark"] .fw-modal-body textarea,
html[data-theme="dark"] .fw-modal-body select{
  background:rgba(0,0,0,.24);border-color:rgba(255,255,255,.13)}
html[data-theme="dark"] .fw-modal-body input:focus,
html[data-theme="dark"] .fw-modal-body textarea:focus{
  border-color:color-mix(in srgb, var(--acc) 70%, transparent);
  background:rgba(0,0,0,.3)}

.fw-m-grp{margin-top:20px;padding:16px 0 0;border-top:1px solid var(--line)}
.fw-m-grp-hd{display:flex;align-items:baseline;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--fg)}
.fw-m-grp-hd span{font-size:11px;font-weight:400;color:var(--ph)}
.fw-m-grp .fw-m-row{margin-top:12px}
.fw-modal-body .fw-m-grp label{margin-top:12px}
/* 复选框那行要横过来，压掉 label 默认的 block + 上边距 */
.fw-modal-body .fw-m-same{display:flex;align-items:center;gap:8px;margin:12px 0 0;
  cursor:pointer;font-weight:400;color:var(--dim)}
.fw-modal-body .fw-m-same input{width:auto;padding:0;margin:0;cursor:pointer;
  accent-color:var(--acc);border:0;background:none}

/* ---------- 提示词里的 <Picture N> 对上素材就亮起来 ---------- */
.fw-chip.used{color:var(--acc);
  background:color-mix(in srgb, var(--acc) 13%, transparent);
  border-color:color-mix(in srgb, var(--acc) 55%, transparent)}
.fw-ref-bad{font-size:11px;color:var(--bad);align-self:center;line-height:1.5}

/* 复选框：浏览器默认那个在暗色下是一块白，自己画一个 */
.fw-modal-body .fw-m-same input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex:0 0 auto;position:relative;border-radius:5px;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background:color-mix(in srgb, var(--hole) 60%, transparent)}
html[data-theme="dark"] .fw-modal-body .fw-m-same input{
  border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.3)}
.fw-modal-body .fw-m-same input:checked{background:var(--acc);border-color:var(--acc)}
.fw-modal-body .fw-m-same input:checked::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fw-modal-body .fw-m-same input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* 图标按钮：用 svg 跟随 currentColor，别用彩色 emoji——那两个小黄星和整体的单色调不搭 */
.fw-ai{display:grid;place-items:center}
.fw-ai svg{display:block}
.fw-ing-btns .mini{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.fw-ing-btns .mini svg{display:block;opacity:.85}

/* ---------- 生成什么：视频 / 图片 / 音频 ---------- */
.fw-kind{display:inline-flex;gap:2px;padding:3px;border-radius:6px;flex:0 0 auto;background:var(--hole)}
.fw-kind button{font:inherit;font-size:11px;padding:4px 8px;border:0;border-radius:4px;min-height:28px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;background:transparent;color:var(--dim);transition:color .15s}
.fw-kind .ui-icon{width:14px;height:14px}
.fw-kind button:hover{color:var(--fg)}
.fw-kind button.on{color:var(--acc);background:var(--surf);box-shadow:var(--shadow)}
.fw-kgrp{display:inline-flex;align-items:center;gap:6px;max-width:100%;flex-wrap:wrap}

/* ---------- 音频卡：和视频片段并排摆在画布上 ---------- */
.clip.aud{cursor:grab}
.clip.aud .ahd{display:flex;align-items:center;gap:7px;padding:11px 12px 0;font-size:10.5px}
.clip.aud .akind{padding:2px 9px;border-radius:99px;font-weight:650;color:var(--acc);
  background:color-mix(in srgb, var(--acc) 13%, transparent)}
.clip.aud .adur{color:var(--ph);margin-left:auto}
.clip.aud .acv{padding:11px 12px 0}
/* Chrome 的 audio 控件不跟 color-scheme 走，暗色下也是一块浅色，硬掰（invert 之类）
   只会更难看。给个圆角让它看起来像卡片自带的播放条就行。
   color-scheme 那条仍然有用——select 的下拉菜单和滚动条是跟着走的。 */
.clip.aud audio{width:100%;height:34px;display:block;border-radius:10px}
.clip.aud video{width:100%;border-radius:10px;display:block}
.clip.aud .aph{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:18px 0 14px;color:var(--ph);font-size:11.5px}
.clip.aud .aph .bar{width:70%;height:6px;border-radius:4px;overflow:hidden;
  box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)}
.clip.aud .aph .bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--acc),var(--acc-d));transition:width .5s}
.clip.aud .ca a.dl{font:inherit;font-size:10.5px;padding:4px 9px;border-radius:8px;
  color:var(--dim);text-decoration:none;background:var(--surf);
  box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)}
.clip.aud .ca a.dl:hover{color:var(--acc)}

/* 失败原因：摆出来，别让人去翻服务器日志。太长就截断，完整的在 title 里 */
.clip .ph.err,.clip .aph.err{color:var(--bad);text-align:center;padding:14px 12px}
.clip .ph.err span,.clip .aph.err span{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  font-size:11px;line-height:1.5;word-break:break-word}

/* ---------- 更多：首尾帧 / 锚点 / 两个预览开关 ---------- */
.fw-more{margin-bottom:14px;padding:0 0 14px;max-height:200px;overflow-y:auto;
  overscroll-behavior:contain;border-bottom:1px solid var(--line)}
.fw-more-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fw-more-row + .fw-more-row{margin-top:9px;padding-top:9px;
  border-top:1px solid color-mix(in srgb, var(--line) 45%, transparent)}
.fw-more-lb{font-size:11.5px;color:var(--dim);font-weight:600;flex:0 0 auto}
.fw-more-hint{font-size:11px;color:var(--warn);line-height:1.5}
.fw-sw{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);cursor:pointer;margin:0}
.fw-sw input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:5px;
  position:relative;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background:color-mix(in srgb, var(--hole) 60%, transparent)}
html[data-theme="dark"] .fw-sw input{border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.3)}
.fw-sw input:checked{background:var(--acc);border-color:var(--acc)}
.fw-sw input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.fw-frames,.fw-guides{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fslot{position:relative;width:64px;height:40px;border-radius:5px;cursor:pointer;overflow:hidden;
  display:grid;place-items:center;font-size:10.5px;color:var(--ph);
  background:var(--hole);border:1px dashed var(--line)}
.fslot.on{box-shadow:0 0 0 1.5px var(--acc)}
.fslot img{width:100%;height:100%;object-fit:cover;display:block}
.fslot .x{position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;border:0;
  cursor:pointer;font-size:10px;line-height:1;background:rgba(0,0,0,.55);color:#fff;opacity:0}
.fslot:hover .x{opacity:1}
.fslot .cap{position:absolute;left:0;right:0;bottom:0;font-size:9px;text-align:center;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65))}

.grow2{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:5px;font-size:10.5px;
  color:var(--dim);background:color-mix(in srgb, var(--hole) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 55%, transparent)}
.grow2 img{width:32px;height:20px;object-fit:cover;border-radius:5px}
.grow2 .ic{width:32px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:11px;
  background:color-mix(in srgb, var(--acc) 14%, transparent);color:var(--acc)}
.grow2 input{width:52px;font:inherit;font-size:10.5px;padding:3px 5px;border-radius:6px;
  color:var(--fg);outline:none;
  background:color-mix(in srgb, var(--hole) 60%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
html[data-theme="dark"] .grow2 input{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.12)}
.grow2 button{border:0;background:transparent;color:var(--ph);cursor:pointer;font:inherit;
  font-size:12px;line-height:1;padding:0 2px}
.grow2 button:hover{color:var(--bad)}

/* 素材库里视频 / 音频没有画面，用图标占位 */
.ing .ic,.fw-chip .ic,.pref .ic{display:grid;place-items:center;color:var(--acc);
  background:color-mix(in srgb, var(--acc) 14%, transparent)}
.ing .ic{width:100%;height:100%;font-size:17px;flex-direction:column;gap:2px}
.ing .ic b{font-size:9px;font-weight:600;opacity:.8}
.fw-chip .ic{width:22px;height:22px;border-radius:6px;font-size:11px}
.pref .ic{width:18px;height:18px;border-radius:5px;font-size:9px}
.clip .cp .pref .ic{width:15px;height:15px;font-size:8px}

/* 窄屏保留素材入口，抽屉不挤压画布或生成栏。 */
@media(max-width:900px){
  #pane-flow{--library-width:0px}
  .fw{grid-template-columns:minmax(0,1fr)}
  .fw-mobile{display:grid}
  .fw-ing{display:none;position:absolute;inset:0 auto 0 0;width:min(300px,calc(100% - 48px));z-index:31;
    box-shadow:8px 0 28px rgba(0,0,0,.12)}
  #pane-flow.library-open .fw-ing{display:flex}
  .fw-scrim{display:block;position:absolute;inset:0;z-index:30;border:0;border-radius:0;
    background:rgba(0,0,0,.28);cursor:pointer}
  .fw-toolbar{padding:0 16px}
  .fw-dock{left:20px;right:20px;bottom:20px}
}
@media(max-width:600px){
  .fw-toolbar{padding:0 10px;flex-basis:46px}
  .fw-zoom button{width:32px;height:34px}
  .fw-dock{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:8px;max-height:calc(100% - 58px)}
  .fw-bar{padding:12px}
  .fw-row{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .fw-input{flex-basis:100%;min-height:54px;max-height:110px;font-size:16px}
  .fw-ai,.fw-go{min-height:36px;height:36px}
  .fw-ai{width:36px}
  .fw-opts{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,30px);gap:8px 4px;margin-top:10px;padding-top:10px}
  .fw-opts > .spacer{display:none}
  .fw-kind{grid-column:1;grid-row:1;width:max-content}
  .fw-kind button{padding:4px 7px}
  .fw-kind .ui-icon{display:none}
  .fw-kgrp{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;gap:5px}
  .fw-kgrp .sw2{flex:1}
  #fw-opt-video .sw2:first-child{flex:1.4}
  #fw-opt-video .sw2:nth-child(3){flex:1.15}
  .fw-kgrp select{width:100%;padding:6px 20px 6px 7px}
  .fw-opts .sw2::after{right:8px}
  .fw-undo{grid-column:2;grid-row:1;width:30px}
  #fw-more-btn{grid-column:3;grid-row:1;width:30px}
  .fw-est{grid-column:1/-1;grid-row:3;font-size:10.5px}
  .fw-est:empty{display:none}
  .fw-scene{padding:7px 12px}
  .fw-scene-hd{gap:7px}
  .fw-scene-hd .hint{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fw-hint{gap:12px}
  .fw-empty-icon{width:36px;height:36px}
  .fw-hint h3{font-size:14px}
  .fw-modal-box{padding:20px;max-height:calc(100% - 24px)}
  .fw-m-two{grid-template-columns:1fr;gap:0}
  .fw-m-row{flex-wrap:wrap}
  .fw-m-msg{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .fw-ctx{gap:6px;flex-wrap:wrap}
}
@media(max-height:640px){
  .fw-dock{bottom:8px;gap:6px}
  .fw-bar{padding:10px 12px}
  .fw-input{min-height:38px;max-height:72px}
  .fw-opts{margin-top:8px;padding-top:8px}
  .fw-hint{gap:8px}
  .fw-hint .fw-empty-icon{display:none}
}
@media(hover:none){
  .ing .x,.sc .x,.fslot .x{opacity:1;min-width:24px;min-height:24px}
  .clip .ca button{min-height:30px}
}

/* ==== /css/canvas-opening.css ==== */
.wb-opening{display:none;position:absolute;inset:0;z-index:90;background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,var(--grid) 1px,transparent 0);
  background-size:24px 24px;align-content:center;justify-items:center;gap:22px;
  pointer-events:auto;color:var(--fg)}
body.canvas-booting #pane-flow:not([hidden]) .wb-opening{display:grid}
.wb-opening-scene{position:relative;display:flex;align-items:center;justify-content:center;
  gap:9px;width:206px;height:114px}
.wb-opening-slot{width:52px;height:58px;border:1px dashed var(--dim);border-radius:4px;
  background:var(--hole);opacity:.7;transform:rotate(-3deg)}
.wb-opening-slot:nth-child(2){transform:rotate(2deg)}
.wb-opening-slot:nth-child(3){transform:rotate(-1deg)}
.wb-opening-item{position:absolute;top:28px;left:16px;width:52px;height:58px;
  display:grid;place-items:center;color:var(--fg);background:var(--surf);
  border:2px solid var(--fg);border-radius:3px;box-shadow:3px 4px 0 var(--line);
  animation:wb-sort 2.7s cubic-bezier(.18,.82,.2,1) infinite both}
.wb-opening-item .ui-icon{width:25px;height:25px}
.wb-opening-item:nth-last-child(2){color:var(--acc);animation-delay:.16s}
.wb-opening-item:nth-last-child(1){color:var(--warn);animation-delay:.32s}
.wb-opening-item:nth-last-child(3){--from-x:-72px;--from-y:36px;--to-x:0px;--tilt:-16deg}
.wb-opening-item:nth-last-child(2){--from-x:79px;--from-y:-37px;--to-x:61px;--tilt:13deg}
.wb-opening-item:nth-last-child(1){--from-x:151px;--from-y:35px;--to-x:122px;--tilt:-11deg}
@keyframes wb-sort{
  0%,9%{opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--tilt)) scale(.88)}
  17%{opacity:1}
  49%,78%{opacity:1;transform:translate(var(--to-x),0) rotate(0) scale(1)}
  94%,100%{opacity:0;transform:translate(var(--to-x),0) rotate(0) scale(1)}
}
.wb-opening-label{font-size:13px;font-weight:600;color:var(--dim)}
.wb-hydration{position:absolute;z-index:100;top:74px;left:50%;transform:translateX(-50%);
  padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surf);
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim);white-space:nowrap;box-shadow:var(--shadow)}
.wb-hydration .mini{padding:2px 8px;font-size:12px}
@media (prefers-reduced-motion:reduce){.wb-opening-item{animation:none;opacity:1;transform:translate(var(--to-x),0)}}

/* ==== /css/workspace.css ==== */
/* Project controls and editing tools share the existing theme tokens. */
.wb-projectbar{display:flex;align-items:center;gap:8px;padding:8px 16px;min-height:49px;
  background:var(--surf);border-bottom:1px solid var(--line);flex:0 0 auto}
.wb-projectbar > .ui-icon{color:var(--dim)}
.wb-projectbar select{width:190px;max-width:26%;height:32px;padding:4px 26px 4px 9px;font-size:12px}
.wb-projectbar .mini{height:32px;font-size:12px}
.wb-projectbar .iconbtn{width:30px;height:32px}
.wb-primary{background:var(--acc);color:var(--on-accent);border-color:var(--acc)}
.wb-primary:hover{color:var(--on-accent);filter:brightness(.95)}
.wb-primary:disabled{background:var(--hole);color:var(--ph);border-color:var(--line);filter:none}
.wb-save{font-size:11px;color:var(--dim);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.wb-save[data-state="dirty"],.wb-save[data-state="saving"]{color:var(--warn)}
.wb-save[data-state="error"],.wb-save[data-state="conflict"]{color:var(--bad)}
.wb-library-tools{display:grid;grid-template-columns:1fr;gap:8px}
.wb-library-tools input,.wb-library-tools select{width:100%;height:32px;border:1px solid var(--line);border-radius:5px;
  background:var(--bg);color:var(--fg);padding:5px 9px;font:inherit;font-size:12px;box-shadow:none}
.wb-canvas-tools{display:flex;align-items:center;gap:6px;margin-left:10px}
.wb-canvas-tools input,.wb-canvas-tools select{height:30px;padding:4px 8px;border:1px solid var(--line);border-radius:5px;
  background:var(--surf);color:var(--fg);font:inherit;font-size:11px;box-shadow:none}
.wb-canvas-tools input{width:140px}
.wb-canvas-tools select{width:88px}
.wb-canvas-tools .mini{font-size:11px;padding:4px 8px}
.wb-asset-edit{position:absolute;left:4px;bottom:23px;display:grid;place-items:center;width:27px;height:27px;
  color:var(--fg);background:var(--surf);border:1px solid var(--line);border-radius:5px;cursor:pointer;opacity:0}
.ing:hover .wb-asset-edit,.ing:focus-within .wb-asset-edit{opacity:1}
.wb-asset-edit .ui-icon{width:14px;height:14px}
.wb-clip-tools{position:absolute;top:6px;right:6px;z-index:2;display:flex;gap:4px}
.wb-clip-tools button{width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid var(--line);
  border-radius:5px;background:var(--surf);color:var(--dim);cursor:pointer}
.wb-clip-tools button[aria-pressed="true"]{color:var(--warn)}
.wb-version{padding:0;border:0;background:transparent;font:inherit;font-size:10px;color:var(--acc);cursor:pointer}
.clip.wb-picked{box-shadow:0 0 0 3px var(--acc)}
.wb-selecting{cursor:crosshair}
.wb-selection{position:absolute;border:1px solid var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);pointer-events:none;z-index:6}
.wb-ready .fw-scene-hd button:has(.ui-icon){width:30px;height:28px;display:grid;place-items:center;padding:0}
.wb-ready .fw-scene-row{align-items:flex-start}
.wb-sc{position:relative;width:108px;flex:0 0 108px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--hole);cursor:grab}
.wb-sc.missing{border-color:var(--bad)}
.wb-sc-open{display:block;width:100%;padding:0;border:0;background:transparent;color:var(--fg);cursor:pointer}
.wb-sc img,.wb-sc video{display:block;width:100%;height:60px;object-fit:cover;background:var(--hole);pointer-events:none}
.wb-sc-number{position:absolute;left:4px;top:4px;min-width:19px;height:18px;line-height:18px;
  background:rgba(0,0,0,.6);color:white;font-size:10px;border-radius:3px}
.wb-sc-duration{display:block;font-size:10px;padding:3px 4px;color:var(--dim)}
.wb-sc-remove{position:absolute;top:3px;right:3px;width:22px;height:22px;padding:0;border:0;border-radius:4px;
  display:grid;place-items:center;background:rgba(0,0,0,.6);color:white;cursor:pointer}
.wb-sc-remove .ui-icon{width:13px;height:13px}
.wb-missing{height:60px;display:grid;place-items:center;font-size:11px;color:var(--bad)}
.wb-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  padding:24px;margin:auto;background:var(--surf);color:var(--fg);border:1px solid var(--line);border-radius:8px;
  font:inherit;box-shadow:0 20px 64px rgba(0,0,0,.22);overflow:auto;overscroll-behavior:contain}
.wb-dialog.wide{width:min(1060px,calc(100vw - 32px))}
.wb-dialog::backdrop{background:rgba(10,16,12,.55);backdrop-filter:blur(4px)}
.wb-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.wb-dialog-heading h2{margin:0;font-size:17px;font-weight:650}
.wb-dialog input:not([type="checkbox"]):not([type="range"]),.wb-dialog textarea,.wb-dialog select{width:100%;
  padding:9px 10px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:5px;box-shadow:none;font:inherit;font-size:13px}
.wb-dialog input[type="number"]{min-height:36px}
.wb-dialog textarea{min-height:84px;max-height:240px}
.wb-dialog label{color:var(--dim);font-size:12px}
.wb-dialog p{font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.wb-dialog .wb-error{color:var(--bad);font-size:12px}
.wb-muted{color:var(--dim);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.wb-dialog .wb-muted{font-size:12px}
.wb-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px}
.wb-actions a{text-decoration:none}
.wb-dialog .wb-check{display:flex;align-items:center;gap:7px;margin:12px 0;font-weight:400}
.wb-check input{width:16px;height:16px;accent-color:var(--acc);margin:0}
.wb-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wb-fields.five{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.wb-fields.five label{margin:10px 0 0}
.wb-fields.five input{margin-top:6px}
.wb-range{display:flex;align-items:center;gap:12px}
.wb-range input{flex:1;accent-color:var(--acc)}
.wb-range output{width:42px;font-size:12px;font-variant-numeric:tabular-nums}
.wb-link{border:0;padding:6px 0;background:transparent;color:var(--acc);font:inherit;font-size:11px;cursor:pointer}
.wb-inspect{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:24px;align-items:start}
.wb-media-column{min-width:0}
.wb-media-column video{display:block;width:100%;max-height:58vh;background:#0d0f0e;object-fit:contain;border-radius:5px}
.wb-media-column audio{width:100%;display:block}
.wb-asset-preview{display:block;margin:auto;max-width:100%;max-height:42vh;object-fit:contain;border-radius:5px}
.wb-dialog video.wb-asset-preview{width:100%;background:#0d0f0e}
.wb-dialog audio.wb-asset-preview{width:100%}
.wb-history-search{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.wb-history-search input{flex:1}
.wb-history-search select{max-width:125px}
.wb-dialog .wb-history-item{display:flex;align-items:center;gap:12px;margin:0;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.wb-history-item input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--acc)}
.wb-history-item span{flex:1;min-width:0}
.wb-history-item b{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-history-item small{display:block;color:var(--dim);margin-top:4px;font-size:11px}
.wb-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.wb-compare article{padding-bottom:16px;border-bottom:1px solid var(--line)}
.wb-compare h3{font-size:13px;margin:0 0 10px}
.wb-compare video,.wb-compare audio{display:block;width:100%;max-height:320px;background:var(--hole);border-radius:5px}
.wb-compare p{font-size:12px;max-height:80px;overflow:auto}
.wb-audio-add{display:flex;gap:8px;align-items:center}
.wb-audio-add select{flex:1;min-width:0}
.wb-audio-row{padding:18px 0;border-bottom:1px solid var(--line)}
.wb-audio-heading{display:flex;align-items:center;gap:12px}
.wb-audio-heading b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.wb-audio-heading .wb-check{margin:0}
.wb-audio-bottom{display:flex;align-items:center;gap:24px;margin-top:10px}
.wb-dialog .wb-volume-label{display:flex;align-items:center;gap:10px;flex:1;margin:0}
.wb-volume-label input{flex:1;accent-color:var(--acc)}
.wb-volume-label output{width:40px;text-align:right;font-variant-numeric:tabular-nums}
#wb-scene-player{width:100%;max-height:62vh;display:block;background:#0d0f0e;object-fit:contain}
.wb-playback{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;font-variant-numeric:tabular-nums}
.wb-playback input{flex:1;accent-color:var(--acc)}
.wb-preview-strip{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:5px}
.wb-preview-strip .on{background:var(--soft);border-color:var(--acc);color:var(--acc)}
.wb-export-job{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.wb-export-job > div{flex:1}
.wb-export-job b{font-size:13px}
.wb-export-job small{display:block;font-size:11px;color:var(--dim)}
.wb-export-job progress{display:block;width:100%;height:6px;margin-top:8px;accent-color:var(--acc)}
.wb-export-job a{text-decoration:none}
.wb-image-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-image-toolbar .wb-brush-label{display:flex;align-items:center;gap:8px;margin:0;flex:1}
.wb-brush-label input{width:100px;max-width:100%;accent-color:var(--acc)}
.wb-image-stage{position:relative;margin:16px auto;max-width:100%;line-height:0}
.wb-image-stage img{display:block;width:100%;height:auto}
.wb-image-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.38;cursor:crosshair;touch-action:none}
.wb-image-toolbar [aria-pressed="true"]{color:var(--acc);background:var(--soft)}
.wb-image-tools{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.wb-image-tools[hidden]{display:none}
.wb-image-stage img{user-select:none;-webkit-user-drag:none}
/* 裁剪：框外压暗、框内三分线、八个把手。框用百分比摆，坐标全程按原图像素算（见 image-edit.js） */
.wb-crop{position:absolute;inset:0;overflow:hidden;cursor:crosshair;touch-action:none}
.wb-crop-box{position:absolute;box-shadow:0 0 0 9999px #000000a0;outline:1px solid #fff;cursor:move}
.wb-crop-box:focus-visible{outline:2px solid var(--acc)}
.wb-crop-box::before,.wb-crop-box::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s;
  border:solid #ffffff70;border-width:0 1px}
.wb-crop-box::before{left:33.33%;right:33.33%}
.wb-crop-box::after{top:33.33%;bottom:33.33%;border-width:1px 0}
.wb-crop.dragging .wb-crop-box::before,.wb-crop.dragging .wb-crop-box::after{opacity:1}
.wb-crop-box i{position:absolute;width:14px;height:14px;background:#fff;border-radius:3px;box-shadow:0 1px 4px #0008}
/* 把手收在框内侧：框贴着图片边缘时，外伸的一半会被 .wb-crop 的 overflow 切掉，鼠标点不中 */
.wb-crop-box i[data-h="nw"]{left:-1px;top:-1px;cursor:nwse-resize}.wb-crop-box i[data-h="se"]{right:-1px;bottom:-1px;cursor:nwse-resize}
.wb-crop-box i[data-h="ne"]{right:-1px;top:-1px;cursor:nesw-resize}.wb-crop-box i[data-h="sw"]{left:-1px;bottom:-1px;cursor:nesw-resize}
.wb-crop-box i[data-h="n"],.wb-crop-box i[data-h="s"]{left:50%;width:26px;height:6px;margin-left:-13px;cursor:ns-resize}
.wb-crop-box i[data-h="n"]{top:-1px}.wb-crop-box i[data-h="s"]{bottom:-1px}
.wb-crop-box i[data-h="e"],.wb-crop-box i[data-h="w"]{top:50%;width:6px;height:26px;margin-top:-13px;cursor:ew-resize}
.wb-crop-box i[data-h="e"]{right:-1px}.wb-crop-box i[data-h="w"]{left:-1px}
.wb-crop-ratios{display:flex;flex-wrap:wrap;gap:4px}
.wb-crop-ratios button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}
.wb-crop-ratios button:hover{color:var(--fg)}
.wb-crop-ratios button[aria-pressed="true"]{color:var(--fg);border-color:var(--fg);background:var(--hole)}
#wb-crop-reset{margin-left:auto;display:inline-flex;align-items:center;gap:5px}
#wb-crop-reset .ui-icon{width:13px;height:13px}
.wb-crop-size{margin:0 0 4px;color:var(--dim);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.wb-ready .fw-opts .fw-kgrp{flex-wrap:wrap}
.wb-ready .fw-est{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#wb-extra-settings .sw2{flex:1}
#wb-extra-settings select{font-size:12px;padding:7px 9px;min-height:34px}
@media(max-width:1100px){
  .wb-canvas-tools input{width:100px}
  .wb-canvas-tools{margin-left:2px}
  .wb-projectbar{gap:6px;padding-inline:12px}
  .wb-projectbar select{width:150px}
  .wb-save{max-width:82px}
}
@media(max-width:760px){
  .wb-inspect{grid-template-columns:1fr}
  .wb-fields.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wb-dialog{padding:18px}
  .wb-canvas-tools input{width:90px}
  .wb-canvas-tools select{width:64px}
}
@media(max-width:600px){
  .wb-projectbar{display:grid;grid-template-columns:minmax(0,1fr) 30px 30px auto;gap:6px;padding:8px 12px}
  .wb-projectbar > .ui-icon,.wb-projectbar > .spacer{display:none}
  .wb-projectbar select{grid-column:1;grid-row:1;width:100%;max-width:none}
  #wb-new{grid-column:2;grid-row:1} #wb-project-menu{grid-column:3;grid-row:1}
  .wb-save{grid-column:4;grid-row:1;text-align:right;max-width:100px}
  #wb-undo{grid-column:2;grid-row:2} #wb-redo{grid-column:3;grid-row:2}
  #wb-history{grid-column:1;grid-row:2;justify-self:start} #wb-export{grid-column:4;grid-row:2}
  #wb-retry{grid-column:1/-1;grid-row:3}
  .wb-projectbar .mini{padding:5px 8px;font-size:11px}
  .wb-ready .fw-toolbar{flex-wrap:wrap;flex-basis:auto;min-height:46px;padding:5px 10px;gap:5px}
  .wb-ready .fw-toolbar > h2,.wb-ready .fw-toolbar > .fw-count{display:none}
  .wb-canvas-tools{flex:1;gap:4px}
  .wb-canvas-tools input{width:80px;flex:1;max-width:150px}
  .wb-canvas-tools select{width:58px;font-size:10px}
  .wb-canvas-tools .iconbtn{width:28px}
  .wb-ready .fw-zoom{margin-left:auto}
  .wb-ready .fw-zoom .fw-divider{display:none}
  .wb-ready .fw-zoom button{width:26px}
  .wb-ready #fw-scale{width:36px;font-size:10px}
  .wb-ready #fw-opt-video{display:grid;grid-template-columns:1.35fr 1fr 1.1fr 1fr;gap:5px}
  #wb-variants-wrap{grid-column:1/3} #wb-camera-wrap{grid-column:3/5}
  .wb-ready .fw-dock{max-height:calc(100% - 145px);overflow:auto}
  .wb-compare{grid-template-columns:1fr}
  .wb-audio-add{flex-wrap:wrap}
  .wb-audio-add select{flex-basis:100%}
  .wb-fields.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-audio-bottom{gap:12px}
  .wb-dialog .wb-volume-label{gap:6px}
  .wb-playback{gap:5px;font-size:10px}
  .wb-playback .iconbtn{width:28px}
  .wb-sc{width:96px;flex-basis:96px}
  .wb-sc img,.wb-sc video{height:54px}
  .wb-image-toolbar .wb-brush-label{flex-basis:100%}
  .wb-image-toolbar input{flex:1}
}
@media(hover:none){.wb-asset-edit{opacity:1}}

/* 写作技能管理（js/skills.js） */
.sk-intro{margin:0 0 14px;color:var(--dim)}
.sk-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.sk-actions .ui-icon{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.sk-list{max-height:min(52vh,460px);overflow-y:auto}
.sk-list h4{margin:18px 0 6px;font-size:12px;font-weight:600;color:var(--dim)}
.sk-list ul{list-style:none;margin:0;padding:0}
.sk-item{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line)}
.sk-item>div{flex:1;min-width:0}
.sk-item b{display:block;font-size:13px;font-weight:550}
.sk-item span{display:block;margin-top:2px;font-size:12px;color:var(--dim);line-height:1.5}
.sk-item em{font-style:normal;font-size:11px;color:var(--dim);padding:2px 8px;border:1px solid var(--line);border-radius:10px}
.wb-dialog .sk-empty{margin:4px 0;color:var(--dim);font-size:12px}
.sk-form label{display:block;margin:12px 0 6px}
.sk-form label:first-child{margin-top:0}
.wb-dialog .sk-form textarea{min-height:260px;max-height:50vh;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.6}
/* 画布导入导出（js/nc-port.js） */
.ncp-form fieldset{display:grid;gap:8px;min-width:0;margin:0 0 16px;padding:0;border:0}
.ncp-form legend{padding:0;margin-bottom:8px;color:var(--fg);font-size:12px;font-weight:600}
.wb-dialog .ncp-form label{display:flex;align-items:center;gap:8px;margin:0;color:var(--fg);font-size:13px;cursor:pointer}
.wb-dialog .ncp-form label.off{color:var(--dim);cursor:default}
.wb-dialog .ncp-form input[type="radio"]{flex:0 0 16px;width:16px;height:16px;margin:0;padding:0;accent-color:var(--acc)}
.wb-dialog .ncp-target #ncp-title{width:calc(100% - 24px);margin:-2px 0 4px 24px}
.ncp-form small{display:block;color:var(--dim);font-size:11px;line-height:1.6}
.wb-dialog .ncp-form .ncp-hint,.wb-dialog .ncp-form .ncp-note{margin:0 0 14px;color:var(--dim);font-size:12px}
.wb-dialog .ncp-source{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--dim)}
.ncp-source .ui-icon{flex:0 0 16px;width:16px;height:16px}
.ncp-source span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncp-counts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.ncp-counts li{padding:3px 10px;border:1px solid var(--line);border-radius:14px;color:var(--dim);font-size:12px}
.ncp-counts b{color:var(--fg);font-weight:600}
.ncp-wants{margin:0 0 14px;padding:10px 12px;border:1px dashed var(--line);border-radius:6px}
.wb-dialog .ncp-wants p{margin:0 0 6px}
.ncp-wants ul{margin:0 0 10px;padding-left:18px;font-size:12px;overflow-wrap:anywhere}
.ncp-wants .mini{margin:0 8px 6px 0}
.ncp-notes{margin:0 0 14px;padding-left:18px;color:var(--dim);font-size:12px;line-height:1.7}
.ncp-skipped{margin:0 0 14px;color:var(--dim);font-size:12px}
.ncp-skipped summary{cursor:pointer}
.wb-dialog .ncp-skipped p{margin:6px 0 0;font-size:12px}

/* ==== /css/node-canvas.css ==== */
/* The workspace chrome floats above one continuous canvas. */
.nc-brand{display:none}
body.node-canvas-mode{
  --bg:#f7f7f9;--surf:#fff;--hole:#eff0f3;--line:#e4e5e9;--grid:#dfe0e8;
  --fg:#292a31;--dim:#62636d;--ph:#797a85;--acc:#765398;--acc-d:#60417f;
  --soft:#efe9f5;--on-accent:#fff;--canvas-rim:#fff;--canvas-shadow:#2521320d;
}
html[data-theme="dark"] body.node-canvas-mode{
  --bg:#26262b;--surf:#303137;--hole:#383a41;--line:#41434b;--grid:#484951;
  --fg:#f4f2f6;--dim:#c0bec8;--ph:#a7a6b1;--acc:#dcbceb;--acc-d:#e9d1f3;
  --soft:#44394e;--on-accent:#302638;--canvas-rim:#ffffff0d;--canvas-shadow:#0000002a;
}
.node-canvas-mode header,.node-canvas-mode .tabbar,.node-canvas-mode .fw-toolbar,
.node-canvas-mode #fw-world,.node-canvas-mode #fw-hint,.node-canvas-mode .fw-bar{display:none}
.node-canvas-mode #pane-flow{--library-width:0px;--dock-height:0px}
.node-canvas-mode .fw{display:flex}
.node-canvas-mode .fw-canvas{flex:1}
.node-canvas-mode #fw-stage{cursor:default;background-color:var(--bg);isolation:isolate}
.node-canvas-mode #fw-stage.nc-hand{cursor:grab}
.node-canvas-mode #fw-stage.pan{cursor:grabbing}
.node-canvas-mode .wb-projectbar{display:flex;position:absolute;z-index:10;top:18px;left:20px;right:auto;
  width:max-content;max-width:calc(100% - 360px);height:44px;min-height:44px;padding:0;gap:8px;
  background:transparent;border:0;flex-wrap:nowrap}
.node-canvas-mode .nc-brand{display:grid;place-items:center;width:96px;height:40px;padding:0;border:1px solid var(--line);
  border-radius:8px;color:var(--fg);background:var(--surf);font-size:19px;font-weight:750;cursor:pointer;flex:0 0 96px;white-space:nowrap}
.node-canvas-mode .wb-projectbar>svg,.node-canvas-mode #wb-new,.node-canvas-mode #wb-project-menu,
.node-canvas-mode .wb-projectbar>.spacer{display:none}
.nc-select-button{display:none}
.node-canvas-mode #wb-project,.node-canvas-mode #nc-board{display:none}
.node-canvas-mode .nc-select-button{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px 0 12px;border:0;background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.node-canvas-mode .nc-select-button>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node-canvas-mode .nc-select-button .ui-icon{width:13px;height:13px;color:var(--dim);flex:0 0 13px;transition:transform .15s}
.node-canvas-mode .nc-select-button[aria-expanded="true"] .ui-icon{transform:rotate(180deg)}
.node-canvas-mode .nc-select-button:disabled{opacity:.5;cursor:default}
.node-canvas-mode .nc-select-button:focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 40%,transparent);outline-offset:-2px;border-radius:9px}
.node-canvas-mode #wb-project-button,.nc-boardbar{background:var(--surf);border:1px solid var(--line);border-radius:10px;height:38px}
.node-canvas-mode #wb-project-button{width:170px;min-width:70px;max-width:200px}
.node-canvas-mode #wb-project-button:hover:not(:disabled),.node-canvas-mode #nc-board-button:hover{background:var(--hole)}
.node-canvas-mode #nc-board-button{height:36px;width:130px;border-radius:9px 0 0 9px}
.nc-boardbar{display:flex;align-items:center;min-width:95px;max-width:180px}
.nc-boardbar{overflow:hidden}
.nc-boardbar .iconbtn{width:30px;height:30px}
.node-canvas-mode .wb-save{font-size:11px;white-space:nowrap;flex:0 0 auto;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.nc-top-right{position:absolute;z-index:10;right:20px;top:22px;display:flex;align-items:center;gap:5px}
.nc-top-right .mini,.nc-top-right .iconbtn{width:34px;height:34px;padding:0;display:grid;place-items:center;background:var(--surf);border:1px solid var(--line);border-radius:6px}
.nc-top-right .mini span{display:none}
.nc-top-right .chip{font-size:11px;padding:0 6px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.nc-world{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0}
.nc-tidy-hands{position:absolute;inset:0;width:100%;height:100%;z-index:8;overflow:hidden;pointer-events:none;color:#27212d}
html[data-theme="dark"] .nc-tidy-hands{color:#17131b}
.nc-tidy-hands .arm,.nc-tidy-hands .palm{filter:drop-shadow(0 3px 3px #0006)}
html[data-theme="dark"] .nc-tidy-hands .arm,html[data-theme="dark"] .nc-tidy-hands .palm{filter:drop-shadow(0 0 2px #dcbceb88) drop-shadow(0 3px 3px #0006)}
.nc-tidy-hands .arm{fill:none;stroke:currentColor;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.nc-tidy-hands .palm{fill:currentColor}
/* 只在拖动 / 缩放时提成独立图层，停下就撤掉，放大后文字才会按新倍数重新渲染（见 NC.applyView） */
.nc-world.moving{will-change:transform}
/* 点选节点触发的自动对焦：这一下是瞬间改完 x/y/k，加个过渡让画布飘过去，别一下跳过去。
   背景网格是 #fw-stage 自己的 background-position/-size，不跟着 .nc-world 的 transform 走，
   之前只有节点在飘、网格瞬间跳到终点，两层对不上看着就是硬切——这里给网格配一份同款过渡。
   之前的 cubic-bezier(.22,.75,.28,1) 太前重：一半时间就飘完了九成，看着跟瞬移没区别；
   换成两头对称减速的曲线，全程都看得出在飘。 */
.nc-world.focusing{transition:transform .32s cubic-bezier(.4,0,.2,1)}
.node-canvas-mode #fw-stage.focusing{transition:background-position .32s cubic-bezier(.4,0,.2,1),background-size .32s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){ .nc-world.focusing,.node-canvas-mode #fw-stage.focusing{transition:none} }
.nc-lines{position:absolute;inset:0;width:1px;height:1px;overflow:visible;z-index:1;pointer-events:none}
#nc-groups{position:absolute;inset:0;z-index:0}
#nc-nodes{position:absolute;inset:0;z-index:2}
/* 节点 = 标题 + 一张卡片。参数、提示词和接进来的素材都收在选中时才浮出来的输入框里，
   卡片本身只放「结果」——客户一眼看到的是片子，不是一排表单。 */
.nc-node{position:absolute;left:0;top:0;width:360px;outline:none;overflow:visible;font-size:12px;user-select:none}
.nc-node.selected,.nc-node:focus-within{z-index:5}
.nc-node:focus-visible .nc-card{outline:2px solid var(--acc);outline-offset:4px}
.nc-node-head{height:34px;display:flex;align-items:center;gap:7px;padding:0 2px 0 4px;cursor:move;color:var(--dim)}
.nc-node-head>b{font-size:13px;font-weight:500;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-node.selected .nc-node-head>b{color:var(--fg)}
.nc-node button{font:inherit;color:var(--dim);border:0;background:transparent;cursor:pointer}
/* form.css 给所有 label 加了上下边距和粗体（第一个 label 除外），节点里的下拉胶囊会因此高低不齐 */
.nc-node label{margin:0;font-size:inherit;color:inherit;font-weight:400}
.nc-node button:disabled{opacity:.45;cursor:default}
.nc-node-head>button{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;flex:0 0 26px;padding:0;margin-left:auto;opacity:0}
.nc-node:hover .nc-node-head>button,.nc-node.selected .nc-node-head>button,.nc-node-head>button:focus-visible{opacity:1}
.nc-node button:hover:not(:disabled){color:var(--fg);background:var(--hole)}
.nc-kind-icon{width:18px;height:18px;display:grid;place-items:center;flex-shrink:0}
.nc-kind-icon .ui-icon{width:15px;height:15px}
.nc-kind-icon.text,.nc-template-icon.text{color:#c69be8}
.nc-kind-icon.image,.nc-template-icon.image{color:#72bccc}
.nc-kind-icon.video,.nc-template-icon.video{color:#e3b979}
.nc-kind-icon.audio,.nc-template-icon.audio{color:#8fcaa8}
.nc-kind-icon.frames{color:#72bccc}
.nc-kind-icon.depth,.nc-template-icon.depth{color:#9fb4d8}
.nc-kind-icon.studio3d,.nc-template-icon.studio3d{color:#8bd6bf}
.nc-kind-icon.edit{color:var(--dim)}
.nc-status{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dim);font-size:11px;opacity:.8}
.nc-status.idle{visibility:hidden}
.nc-status.failed{color:var(--bad);opacity:1}
.nc-status.running,.nc-status.stale{color:var(--warn);opacity:1}

.nc-card{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--surf);box-shadow:0 3px 12px var(--canvas-shadow),inset 0 1px 0 var(--canvas-rim)}
.nc-node.selected .nc-card{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 16%,transparent),0 6px 22px var(--canvas-shadow)}
.nc-card>.nc-media{border-radius:7px}
.nc-media{position:relative;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--surf)}
.nc-media img,.nc-media video{display:block;width:100%;height:100%;object-fit:cover;background:#0d0e10;-webkit-user-drag:none}
.nc-media.audio{aspect-ratio:auto;min-height:110px;display:grid;align-items:center;padding:0 14px}
.nc-media audio{width:100%;height:42px}
.nc-media-placeholder{height:100%;display:grid;place-items:center;color:var(--dim);opacity:.3}
.nc-media-placeholder .ui-icon{width:44px;height:44px}
.nc-media-label{position:absolute;inset:auto 6px 10px;text-align:center;font-size:11px;color:var(--dim)}
/* 素材丢了 / 坏了：原地给恢复入口 */
.nc-media.lost{aspect-ratio:16/9;min-height:190px}
.nc-recover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;background:var(--surf)}
.nc-media.broken .nc-recover{background:color-mix(in srgb,var(--surf) 92%,transparent);backdrop-filter:blur(4px)}
.nc-media.broken .nc-preview-play,.nc-media.broken .nc-player{display:none}
.nc-recover>.ui-icon{width:30px;height:30px;color:var(--dim);opacity:.5;margin-bottom:2px}
.nc-recover b{font-size:13px;font-weight:500;color:var(--fg)}
.nc-recover span{font-size:11px;color:var(--dim)}
.nc-recover-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.nc-node .nc-recover-actions button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;background:var(--hole);color:var(--fg);font-size:12px}
.nc-node .nc-recover-actions button:first-child{background:var(--fg);color:var(--bg)}
.nc-node .nc-recover-actions button:first-child:hover:not(:disabled){background:var(--acc);color:var(--on-accent,#0b0c0d)}
.nc-recover-actions .ui-icon{width:14px;height:14px}
/* 拖进来的素材先上画布、后台上传：顶上一条进度（不挡画面，也不挡底下的播放条），传失败整块盖上「重试 / 移除」 */
.nc-upload{position:absolute;left:8px;right:8px;top:8px;display:grid;gap:6px;padding:7px 10px;border-radius:8px;background:rgba(12,16,24,.58);color:#fff;font-size:11px;backdrop-filter:blur(6px);pointer-events:none}
.nc-upload .nc-live-bar{width:100%;background:#ffffff2e}
.nc-upload-txt{font-variant-numeric:tabular-nums}
.nc-upload.failed{inset:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;
  background:color-mix(in srgb,var(--surf) 88%,transparent);color:var(--fg);pointer-events:auto}
.nc-upload.failed b{font-size:13px;font-weight:500}
.nc-upload.failed span{font-size:11px;color:var(--dim)}
/* 空节点的「尝试」：一句引导 + 三个起手式 */
.nc-try{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:0 22px}
.nc-try>span{color:var(--dim);font-size:12px;margin-bottom:6px}
.nc-node .nc-try button{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 6px;margin-left:-6px;border-radius:8px;color:var(--fg);font-size:13px}
.nc-try .ui-icon{width:16px;height:16px;color:var(--dim)}
.nc-node .nc-try button:hover .ui-icon{color:var(--fg)}
.nc-card:has(.nc-media.audio.trying) .nc-try,.nc-media.trying:is(.audio){position:static}
.nc-node[data-kind="audio"] .nc-media.trying{aspect-ratio:auto;min-height:150px}
/* 选中有结果的节点时，头顶浮出的快捷操作。和输入框一样按 --nc-inv 反向缩放：画布缩小时字不跟着变小 */
.nc-quick{display:none;position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) scale(var(--nc-inv,1));transform-origin:50% 100%;
  align-items:center;gap:2px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--surf);box-shadow:0 10px 30px #00000040;white-space:nowrap;cursor:default}
.nc-node.solo .nc-quick{display:flex}
.nc-node .nc-quick button{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;color:var(--fg);font-size:13px}
.nc-node .nc-quick button.icon{width:32px;padding:0;justify-content:center}
.nc-quick .ui-icon{width:15px;height:15px}
.nc-quick>i{width:1px;height:18px;margin:0 5px;background:var(--line)}
.nc-result-picker{position:absolute;left:8px;top:8px}
.nc-node .nc-result-picker .nc-pill button{height:26px;padding:0 6px 0 9px;border-radius:13px;background:#161719c0;color:#fff;font-size:11px;backdrop-filter:blur(6px)}
.nc-node .nc-result-picker .nc-pill button:hover,.nc-node .nc-result-picker .nc-pill button[aria-expanded="true"]{background:#161719;color:#fff}
.nc-result-picker .nc-pill .ui-icon{color:#ffffffb0}
/* 抽帧：大图角上标秒数，底下一排缩略图直接点选 */
.nc-frame-time{position:absolute;left:8px;top:8px;height:22px;padding:0 8px;border-radius:11px;background:#161719c0;color:#fff;font-size:11px;line-height:22px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}
.nc-frame-strip{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:4px;padding:6px}
.nc-node .nc-frame-strip button{position:relative;aspect-ratio:16/9;padding:0;overflow:hidden;border-radius:6px;background:var(--hole);outline:2px solid transparent;outline-offset:-2px;opacity:.72}
.nc-node .nc-frame-strip button:hover{opacity:1}
.nc-node .nc-frame-strip button.on{outline-color:var(--fg);opacity:1}
.nc-frame-strip img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.nc-frame-strip span{position:absolute;left:0;right:0;bottom:1px;color:#fff;font-size:9px;line-height:1.2;text-align:center;text-shadow:0 0 3px #000,0 0 2px #000;font-variant-numeric:tabular-nums}
/* 生成中的节点：ComfyUI 的实时预览铺底，阶段 / 进度条 / 剩余时间压在上面（和成片卡片一个口径） */
.nc-live{position:absolute;inset:0;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;gap:12px;padding:10px;overflow:hidden;isolation:isolate;background:var(--hole)}
/* 还没出预览时的底：一团跟着呼吸明暗的主色光晕，加一道骨架屏的流光横扫（和 skeleton.css 同一个节奏）——让卡片看起来在干活，而不是死等 */
.nc-live::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 72%);animation:nc-breathe 3.4s ease-in-out infinite}
.nc-live::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 8%,transparent) 50%,transparent 70%);background-size:300% 100%;animation:nc-sweep 1.6s ease-in-out infinite}
.nc-live.haspv{align-content:end;background:#0d1016}
.nc-live.haspv::before,.nc-live.haspv::after{display:none}
.nc-live-pv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.nc-live-info{position:relative;display:grid;justify-items:center;gap:8px;width:100%;font-size:11px;color:var(--dim);text-align:center}
.nc-live.haspv .nc-live-info{padding:8px 10px;border-radius:8px;color:#fff;background:rgba(12,16,24,.58);backdrop-filter:blur(6px)}
/* 阶段文字：一道从左往右流过去的光 */
.nc-live-txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:12px;font-weight:500;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--dim) 0 40%,var(--fg) 50%,var(--dim) 60% 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nc-shine 2.4s linear infinite}
.nc-live.haspv .nc-live-txt{background-image:linear-gradient(90deg,#ffffffb8 0 40%,#fff 50%,#ffffffb8 60% 100%)}
.nc-live-bar{position:relative;width:72%;height:5px;border-radius:5px;overflow:hidden;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.nc-live.haspv .nc-live-bar{width:100%;background:#ffffff2e}
.nc-live-bar i{position:relative;display:block;height:100%;width:0;border-radius:5px;transition:width .8s linear;
  background:linear-gradient(90deg,var(--acc-d),var(--acc));box-shadow:0 0 8px color-mix(in srgb,var(--acc) 55%,transparent)}
/* 填充段上一道来回跑的高光 */
.nc-live-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff66 50%,transparent) no-repeat;background-size:60% 100%;animation:nc-glide 1.6s ease-in-out infinite}
/* 后端不报步数（抽帧、图片这类）：别摆一根空条杵着，改成来回扫的一段光 */
.nc-live-bar.indet i{width:38%;transition:none;animation:nc-indet 1.5s cubic-bezier(.45,0,.35,1) infinite}
.nc-live-bar.indet i::after{display:none}
.nc-live-eta{font-variant-numeric:tabular-nums}
.nc-live.haspv .nc-live-eta{color:rgba(255,255,255,.78)}
/* 标题栏的「生成中」：前面一个跳动的小点 */
.nc-status.running::before{content:"";display:inline-block;width:6px;height:6px;margin:0 5px 1px 0;border-radius:50%;background:currentColor;vertical-align:middle;animation:nc-blink 1.3s ease-in-out infinite}
@keyframes nc-breathe{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes nc-sweep{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes nc-shine{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes nc-glide{0%{background-position:-100% 0}100%{background-position:200% 0}}
@keyframes nc-indet{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}
@keyframes nc-blink{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes nc-edge-flow{to{stroke-dashoffset:-44}}
@media (prefers-reduced-motion:reduce){
  .nc-live::before,.nc-live::after,.nc-live-txt,.nc-live-bar i::after,.nc-status.running::before,.nc-edge-flow{animation:none}
  .nc-live-txt{background:none;color:var(--dim)}
  .nc-live.haspv .nc-live-txt{color:#fff}
}
.nc-node .nc-preview-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;padding:0 0 0 3px;background:#161719a8;color:#fff;backdrop-filter:blur(6px);transition:opacity .15s}
.nc-node .nc-preview-play:hover:not(:disabled){background:#161719;color:#fff}
.nc-preview-play .ui-icon{width:22px;height:22px}
.nc-media.playing .nc-preview-play{opacity:0;pointer-events:none}
/* 卡片里的播放条：悬停、选中或正在放时出现 */
.nc-player{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:4px;padding:18px 8px 6px;
  background:linear-gradient(transparent,#000000a0);color:#fff;opacity:0;transition:opacity .15s}
.nc-node:hover .nc-media.started .nc-player,.nc-node.selected .nc-media.started .nc-player,.nc-media.playing .nc-player,.nc-player:focus-within{opacity:1}
.nc-node .nc-player button{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;padding:0;border-radius:6px;color:#fff}
.nc-node .nc-player button:hover:not(:disabled){background:#ffffff26;color:#fff}
.nc-player .ui-icon{width:15px;height:15px}
.nc-seek{flex:1;height:18px;display:flex;align-items:center;cursor:pointer;position:relative}
.nc-seek::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:#ffffff40}
.nc-seek i{position:relative;display:block;height:3px;width:0;border-radius:2px;background:#fff}
.nc-seek:hover::before,.nc-seek:hover i{height:5px}
.nc-time{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px;color:#ffffffd0}
.nc-source-actions{display:flex;gap:6px;padding:10px}
.nc-source-actions button{flex:1;display:flex;justify-content:center;align-items:center;gap:5px;border:1px solid var(--line)!important;border-radius:8px;min-height:32px;padding:4px;font-size:12px}
.nc-source-actions .ui-icon{width:14px;height:14px}
/* 文本节点的卡片：排版编辑器。正文存成 markdown，这里只管显示那几样工具栏做得出来的格式 */
.nc-node .nc-doc{display:block;width:100%;min-height:200px;max-height:480px;overflow-y:auto;border-radius:13px;color:var(--fg);font-size:13px;line-height:1.75;padding:14px 18px;
  user-select:text;touch-action:pan-y;cursor:text;overflow-wrap:anywhere;scrollbar-width:thin}
.nc-node .nc-doc:focus{outline:none}
.nc-node .nc-doc:empty::before{content:attr(data-ph);color:var(--ph);pointer-events:none}
.nc-doc>:first-child{margin-top:0}
.nc-doc>:last-child{margin-bottom:0}
.nc-doc p{margin:0 0 .6em}
.nc-doc h1,.nc-doc h2,.nc-doc h3{margin:.8em 0 .4em;line-height:1.35;font-weight:650;color:var(--fg)}
.nc-doc h1{font-size:20px}
.nc-doc h2{font-size:17px}
.nc-doc h3{font-size:15px}
.nc-doc ul,.nc-doc ol{margin:0 0 .6em;padding-left:1.4em}
.nc-doc hr{border:0;border-top:1px solid var(--line);margin:.9em 0}
.nc-node[data-kind="text"] .nc-text-try{aspect-ratio:4/3}
/* 放大写：跟画布缩放完全无关的大窗口，字号固定、不用跟着画布倍数挤在小卡片里 */
.nc-write{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:36px 16px;
  background:color-mix(in srgb,#000 55%,transparent)}
.nc-write-box{display:flex;flex-direction:column;width:min(860px,100%);height:100%;max-height:min(820px,100%);
  border-radius:16px;overflow:hidden;background:var(--surf);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.nc-write-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--line);background:var(--bg);flex:0 0 auto}
.nc-write-tools{display:flex;align-items:center;flex:1;min-width:0;overflow-x:auto;gap:2px}
.nc-write-tools .iconbtn{width:30px;height:30px;flex:0 0 auto}
.nc-write-tools .ui-icon{width:15px;height:15px}
.nc-write-tools>i{width:1px;height:18px;margin:0 4px;background:var(--line);flex:0 0 auto}
.nc-write-doc{flex:1;min-height:0;overflow-y:auto;padding:30px clamp(20px,7%,72px);font-size:16px;line-height:1.85;color:var(--fg);
  user-select:text;overflow-wrap:anywhere;scrollbar-width:thin}
.nc-write-doc:focus{outline:none}
.nc-write-doc:empty::before{content:attr(data-ph);color:var(--ph);pointer-events:none}
body.nc-write-open{overflow:hidden}
.wb-dialog.nc-image-preview{width:calc(100vw - 40px);max-width:1600px;height:calc(100dvh - 40px);padding:16px;overflow:hidden}
.nc-image-preview[open]{display:flex;flex-direction:column}
.nc-image-preview .wb-dialog-heading{flex:0 0 auto;margin-bottom:12px;min-width:0}
.nc-image-preview .wb-dialog-heading h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-image-preview #wb-dialog-close{flex:0 0 auto}
.nc-image-preview #wb-dialog-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.nc-image-full{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
@media (max-width:640px){ .nc-write{padding:0} .nc-write-box{max-height:100%;border-radius:0} .nc-write-doc{padding:24px 18px} }
/* 格式工具栏最后那组：自己写 / AI 写 */
.nc-author{display:flex;gap:2px;padding:2px;border-radius:9px;background:var(--hole)}
.nc-node .nc-author button{height:28px;padding:0 10px;border-radius:7px;color:var(--dim);font-size:12px}
.nc-node .nc-author button[aria-pressed="true"]{background:var(--surf);color:var(--fg)}
.nc-node textarea::placeholder{color:var(--ph)}
.nc-edit-summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:110px;color:var(--dim)}
.nc-edit-summary b{font-weight:500}
/* 3D 导演台节点：卡片上一行场景摘要（几个物品、几个机位、白模多长） */
.nc-studio-summary{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--dim);font-size:12px;border-top:1px solid var(--line)}
.nc-studio-summary b{color:var(--fg);font-weight:500}
.nc-studio-summary span{margin-left:auto;font-variant-numeric:tabular-nums}
.nc-studio-summary .ui-icon{width:14px;height:14px}
/* 两侧的「+」：选中或悬停时出现。连线也落在这两个点上 */
.nc-node .nc-plug{position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;display:grid;place-items:center;padding:0;
  border:1.5px solid color-mix(in srgb,var(--fg) 45%,transparent);background:var(--bg);color:var(--fg);opacity:0;transition:opacity .15s,background .15s,box-shadow .15s;cursor:crosshair;
  transform:translate(var(--nc-plug-x,0px),var(--nc-plug-y,0px)) scale(var(--nc-plug-scale,1))}
.nc-plug.in{left:-40px}
.nc-plug.out{right:-40px}
.nc-plug .ui-icon{width:14px;height:14px;pointer-events:none}
.nc-node:hover .nc-plug,.nc-node.selected .nc-plug,.nc-node.nc-magnet-active .nc-plug,.nc-plug:focus-visible{opacity:1}
.nc-node .nc-plug.magnetic,.nc-node .nc-plug.magnetic:hover:not(:disabled){opacity:1;border-color:var(--acc);background:var(--bg);color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 12%,transparent);cursor:pointer}
.nc-node .nc-plug.magnet-returning{pointer-events:none}
.nc-node .nc-plug:hover:not(:disabled):not(.magnetic){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nc-caption{margin:8px 4px 0;color:var(--dim);font-size:12px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.nc-node.solo .nc-caption{visibility:hidden}

/* 输入框：浮在卡片下面，比卡片宽一点，盖住下面的东西也没关系 */
.nc-composer{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) scale(var(--nc-inv,1));transform-origin:50% 0;width:max(100%,480px);max-width:calc(100vw - 24px);
  padding:12px 12px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surf);box-shadow:0 14px 40px #00000040;cursor:default}
.nc-node.solo .nc-composer{display:block}
.nc-node[data-kind="text"] .nc-caption,.nc-node[data-kind="text"].solo .nc-composer{margin-top:0}
.nc-refs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.nc-ref,.nc-node .nc-attach{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;border-radius:9px;font-size:12px}
.nc-ref{padding:0 26px 0 3px;background:var(--hole);color:var(--fg);max-width:160px}
/* 缩略图框：画面和图标同一个尺寸（尺寸由各处的父元素定） */
.nc-thumb{display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;border-radius:6px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--dim)}
.nc-thumb>img,.nc-thumb>video{width:100%;height:100%;object-fit:cover;display:block}
.nc-thumb>.ui-icon{width:55%;height:55%}
.nc-ref>.nc-thumb{width:28px;height:28px}
.nc-ref small{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nc-ref.inactive{opacity:.45;text-decoration:line-through}
.nc-node .nc-ref button{position:absolute;right:4px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0}
.nc-ref button .ui-icon{width:11px;height:11px}
.nc-node .nc-attach{padding:0 12px 0 9px;background:var(--hole);color:var(--dim)}
.nc-attach .ui-icon{width:14px;height:14px}
.nc-node .nc-prompt{display:block;width:100%;min-height:52px;max-height:320px;overflow-y:auto;border:0;background:transparent;color:var(--fg);font-size:14px;line-height:30px;padding:4px 2px;
  user-select:text;-webkit-user-select:text;touch-action:pan-y;white-space:pre-wrap;word-break:break-word;cursor:text;overscroll-behavior:contain}
.nc-node .nc-prompt:focus{outline:none}
.nc-node .nc-prompt:empty::before{content:attr(data-ph);color:var(--ph);pointer-events:none}
/* @ 引用的素材：一个不可拆的小标签，退格一次整个删掉 */
.nc-mention{display:inline-flex;align-items:center;gap:5px;height:24px;margin:0 3px;padding:0 8px 0 2px;border-radius:7px;vertical-align:middle;position:relative;top:-1px;box-sizing:border-box;
  background:color-mix(in srgb,var(--acc) 16%,var(--hole));color:var(--fg);font-size:12px;line-height:1;user-select:all;white-space:nowrap}
.nc-mention>.nc-thumb{width:20px;height:20px;border-radius:5px}
.nc-mention b{font-weight:500;line-height:24px}
.nc-mention.missing,.nc-mention.inactive{background:var(--hole);color:var(--dim);text-decoration:line-through}
.nc-mention-menu{width:300px;max-height:360px}
.nc-mention-menu button>.nc-thumb{width:30px;height:30px;flex:0 0 30px}   /* 菜单里 button>span 默认 flex:1，缩略图框也是 span，不钉住会被拉成长条 */
.nc-mention-menu button{gap:10px;height:40px;flex:0 0 40px;padding:0 10px 0 5px}
.nc-mention-menu button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.nc-mention-menu button small{flex:0 0 auto;min-width:34px;text-align:right;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.nc-mention-menu button[aria-selected="true"]{background:var(--hole)}
.nc-mention-group{padding:8px 10px 4px;color:var(--dim);font-size:11px;flex:0 0 auto}
.nc-mention-group:not(:first-child){border-top:1px solid var(--line);margin-top:3px}
.nc-mention-empty{padding:14px 12px;color:var(--dim);font-size:12px;line-height:1.6;white-space:normal}
.nc-bar{display:flex;align-items:center;gap:6px;margin-top:6px;min-width:0}
/* 没有提示词框的节点（深度、抽帧），胶囊行就是第一行：上面那 6px 会让整排看着往下坠 */
.nc-composer>.nc-bar:first-child{margin-top:0}
.nc-note{margin:2px 4px 10px;font-size:12px;line-height:1.65;color:var(--dim)}
.nc-note b{color:var(--fg);font-weight:600}
.nc-bar-options{display:flex;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.nc-bar-options::-webkit-scrollbar{display:none}
.nc-bar-options>.nc-pill{flex:0 0 auto;min-width:0}
.nc-bar-options>.nc-pill:has(select[data-param="model"]){flex-shrink:1;min-width:80px}
.nc-node .nc-bar-options .nc-pill button{min-width:0;max-width:100%;gap:3px;padding:0 4px}
.nc-bar-options .nc-pill button>span{min-width:0}
.nc-bar-options .nc-pill .ui-icon{flex:0 0 12px}
.nc-bar-options .nc-pill::before{flex-shrink:0}
.nc-bar-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.nc-bar-actions>.nc-tool,.nc-bar-actions>.nc-run{flex-shrink:0}
/* 提交前报价：发送按钮左边的小字；余额不够变红（提交会被内核拒） */
.nc-cost{padding:0 6px;font-size:12px;color:var(--dim);white-space:nowrap}
/* 每天送的 Pro 体验：发送那一排上面单独一行（和胶囊挤一行会把胶囊挤没） */
.nc-trial-row{display:flex;justify-content:flex-end;margin-top:6px}
.nc-node .nc-trial{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;white-space:nowrap;border:1px solid var(--line);background:var(--hole);color:var(--fg)}
.nc-node .nc-trial .ui-icon{color:#d99a00}
.nc-node .nc-trial:not(:disabled):hover{border-color:#d99a00}
.nc-node .nc-trial:disabled{opacity:.55;cursor:default}
.nc-cost:empty{display:none}
.nc-cost.short{color:#e5484d}
.nc-pill{position:relative;display:inline-flex;align-items:center;height:30px;color:var(--fg)}
.nc-pill select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nc-node .nc-pill button{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 7px 0 9px;border-radius:8px;color:var(--fg);font-size:13px;white-space:nowrap}
.nc-node .nc-pill button:hover,.nc-node .nc-pill button[aria-expanded="true"]{background:var(--hole);color:var(--fg)}
.nc-node .nc-pill button:focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 40%,transparent);outline-offset:0}
.nc-pill button>span{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.nc-pill .ui-icon{width:12px;height:12px;color:var(--dim);transition:transform .15s}
.nc-pill button[aria-expanded="true"] .ui-icon{transform:rotate(180deg)}
/* 胶囊的下拉菜单：挂在 body 上，不随画布缩放 */
.nc-pill-menu{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent;overscroll-behavior:contain;position:fixed;z-index:60;min-width:120px;max-height:min(360px,calc(100dvh - 16px));overflow-y:auto;padding:5px;
  display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:12px;background:var(--surf);box-shadow:0 12px 32px #00000047}
.nc-pill-menu button{display:flex;align-items:center;gap:16px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;
  color:var(--dim);font:inherit;font-size:13px;text-align:left;cursor:pointer;white-space:nowrap}
.nc-pill-menu button>span{flex:1}
/* 带说明的菜单（视频的生成方式 / 清晰度 / 画质）：两行，宽一点 */
.nc-pill-menu button.unmet>span{color:var(--dim)}
/* 视频节点上的前置条件提示：红的挡住生成，灰的只是提醒 */
.nc-warn{margin:0 4px 8px}
.nc-warn p{margin:0;font-size:12px;line-height:1.6}
.nc-warn p.note{color:var(--dim)}
.nc-pill-menu button:hover,.nc-pill-menu button:focus-visible{background:var(--hole);color:var(--fg);outline:none}
.nc-pill-menu button[aria-selected="true"]{color:var(--fg)}
.nc-pill-menu .ui-icon{width:14px;height:14px;color:var(--fg)}
.nc-pill+.nc-pill::before{content:"";width:1px;height:14px;background:var(--line);margin-right:2px}
.nc-node .nc-tool{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:8px;font-size:12px}
.nc-tool .ui-icon{width:14px;height:14px}
.nc-node .nc-run{width:36px;height:36px;margin-left:6px;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--fg);color:var(--bg)}
.nc-node .nc-run:hover:not(:disabled){background:var(--acc);color:var(--on-accent,#0b0c0d)}
.nc-node .nc-run:disabled{opacity:.35}
.nc-run .ui-icon{width:17px;height:17px}
.nc-node .nc-run.wide{width:auto;display:inline-flex;gap:6px;padding:0 16px;border-radius:18px;font-size:13px}
.nc-run.wide .ui-icon{width:15px;height:15px}
.nc-edge-hit{fill:none;stroke:transparent;stroke-width:16;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}
.nc-edge.selected .nc-edge-hit{cursor:url('/assets/cursors/scissors.svg') 16 16,crosshair}
#fw-stage.nc-hand .nc-edge-hit{cursor:grab}
#fw-stage.pan .nc-edge-hit{cursor:grabbing}
.nc-edge-line{fill:none;stroke:#9b8ca8;stroke-width:2;opacity:.75}
.nc-edge.image .nc-edge-line{stroke:#72bccc}
.nc-edge.video .nc-edge-line{stroke:#e3b979}
.nc-edge.audio .nc-edge-line{stroke:#8fcaa8}
.nc-edge.selected .nc-edge-line{stroke:var(--acc);stroke-width:4;opacity:1}
.nc-edge-flow{fill:none;pointer-events:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 14;opacity:.95;animation:nc-edge-flow 1s linear infinite}
.nc-edge-draft{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:6 5}
.nc-group{position:absolute;inset:0 auto auto 0;border:1px solid color-mix(in srgb,var(--acc) 32%,transparent);border-radius:8px;background:color-mix(in srgb,var(--acc) 4%,transparent);pointer-events:none}
.nc-group-head{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 14px;pointer-events:auto;cursor:move;color:var(--dim);font-size:11px}
.nc-group-head>b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.nc-group-head>span{white-space:nowrap}
.nc-group-head button{width:25px;height:25px;display:grid;place-items:center;background:transparent;border:0;color:var(--dim);cursor:pointer;padding:0;border-radius:4px}
.nc-group-head .ui-icon{width:14px;height:14px}
.nc-group-head button:hover{background:var(--hole);color:var(--fg)}
.nc-marquee{position:absolute;z-index:4;border:1px solid var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);pointer-events:none}
.nc-starters{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 48px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nc-starters button{display:flex;flex-direction:column;align-items:center;gap:12px;background:transparent;border:0;color:var(--dim);font:inherit;font-size:12px;cursor:pointer;white-space:normal;text-align:center;padding:12px 0}
.nc-starters button:hover{color:var(--fg)}
.nc-template-icon{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--line);border-radius:8px;background:var(--surf);box-shadow:0 2px 8px var(--canvas-shadow),inset 0 1px 0 var(--canvas-rim)}
.nc-starters button:hover .nc-template-icon,.nc-starters button:focus-visible .nc-template-icon{border-color:var(--acc);background:var(--soft)}
.nc-template-icon .ui-icon{width:23px;height:23px}
.nc-tool-dock{position:absolute;z-index:10;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px)}
.nc-tool-dock::after{content:attr(data-tip);position:absolute;z-index:3;left:var(--nc-tip-x,50%);bottom:calc(100% + 10px);
  max-width:calc(100vw - 24px);padding:7px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--surf);color:var(--fg);box-shadow:0 5px 16px var(--canvas-shadow);font-size:12px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;visibility:hidden;
  transform:translate(-50%,4px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.nc-tool-dock[data-tip]::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@property --nc-assistant-angle{syntax:'<angle>';initial-value:30deg;inherits:false}
@keyframes nc-assistant-flow{to{--nc-assistant-angle:390deg}}
@keyframes nc-assistant-glow{0%,100%{filter:drop-shadow(0 0 3px #79bfff70)}50%{filter:drop-shadow(0 0 7px #e8a1e4b0)}}
@keyframes nc-assistant-halo{0%,100%{opacity:.25}50%{opacity:.7}}
.nc-assistant-launcher{position:relative;display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:15px;color:var(--fg);cursor:pointer;
  background:linear-gradient(var(--surf),var(--surf)) padding-box,conic-gradient(from var(--nc-assistant-angle),#79bfff,#aa8cff,#ee91c6,#f3b87e,#8de1d0,#79bfff) border-box;
  box-shadow:0 2px 12px #00000024;transition:box-shadow .18s,transform .18s;animation:nc-assistant-flow 7s linear infinite}
.nc-assistant-launcher::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:-3px 0 12px #7cbfff50,3px 0 12px #ee91c650;animation:nc-assistant-halo 3.6s ease-in-out infinite}
.nc-assistant-launcher .ui-icon{width:24px;height:24px;filter:drop-shadow(0 0 4px #aa8cff70);animation:nc-assistant-glow 3.6s ease-in-out infinite}
.nc-assistant-launcher:hover,.nc-assistant-launcher[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent),0 0 18px #aa8cff40}
.nc-assistant-launcher:active{transform:scale(.96)}
.nc-assistant-launcher:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  .nc-assistant-launcher{transition:none;animation:nc-assistant-flow 18s linear infinite!important}
  .nc-assistant-launcher:active{transform:none}
  .nc-assistant-launcher::before,.nc-assistant-launcher .ui-icon{animation:none}
}
.nc-tools{height:54px;display:flex;align-items:center;gap:3px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surf);box-shadow:0 3px 14px var(--canvas-shadow),inset 0 1px 0 var(--canvas-rim);min-width:0}
.nc-tools button{width:36px;height:38px;padding:0;border:1px solid transparent;flex:0 0 36px;border-radius:5px;display:grid;place-items:center;background:transparent;color:var(--dim);cursor:pointer;
  transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s}
.nc-tools button:hover:not(:disabled){background:var(--hole);color:var(--fg)}
.nc-tools button[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 18%,var(--surf));color:var(--acc);
  border-color:color-mix(in srgb,var(--acc) 38%,var(--line));
  box-shadow:inset 0 1px 0 var(--canvas-rim),0 2px 0 color-mix(in srgb,var(--acc) 32%,transparent),0 6px 12px var(--canvas-shadow);
  transform:translateY(-2px)}
.nc-tools button[aria-pressed="true"]:hover{transform:translateY(-3px)}
.nc-tools button:active:not(:disabled){transform:translateY(0);box-shadow:inset 0 2px 5px var(--canvas-shadow)}
.nc-tools button:disabled{opacity:.3;cursor:default}
.nc-tools .nc-add{color:var(--on-accent);background:var(--acc);margin-right:4px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--canvas-rim) 45%,transparent),0 2px 0 var(--acc-d),0 5px 10px var(--canvas-shadow)}
.nc-tools .nc-add:hover{background:var(--acc-d);color:var(--on-accent)}
.nc-tools .nc-add[aria-expanded="true"]{transform:translateY(1px);box-shadow:inset 0 2px 5px var(--canvas-shadow)}
@media(prefers-reduced-motion:reduce){.nc-tools button,.nc-tool-dock::after{transition:none}}
.nc-tool-divider{height:22px;width:1px;flex:0 0 1px;background:var(--line);margin:0 3px}
.nc-undo-tools{display:flex;gap:2px;flex:none}
.nc-bottom-left{position:absolute;bottom:26px;left:20px;z-index:10;display:flex;align-items:center;gap:4px;font-size:11px}
.nc-bottom-left button{height:34px;min-width:30px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 6px;background:var(--surf);border:1px solid var(--line);border-radius:6px;color:var(--dim);cursor:pointer;font:inherit;box-shadow:0 2px 8px var(--canvas-shadow)}
#nc-library{padding:0 10px;margin-right:7px}
#nc-scale{min-width:50px;font-variant-numeric:tabular-nums}
#nc-selection-count{position:absolute;bottom:44px;left:0;white-space:nowrap;color:var(--dim)}
.nc-minimap{position:absolute;right:20px;bottom:90px;z-index:9;width:190px;height:118px;background:var(--surf);border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:crosshair}
.nc-minimap i{display:block;position:absolute;pointer-events:none;min-width:2px;min-height:2px}
.nc-mini-node{background:#9b8ca87a;border-radius:1px}
.nc-mini-node.image,.nc-mini-node.frames{background:#72bccc7a}
.nc-mini-node.depth{background:#9fb4d87a}
.nc-mini-node.video{background:#e3b9797a}
.nc-mini-node.audio{background:#8fcaa87a}
.nc-mini-view{border:1px solid var(--acc);background:color-mix(in srgb,var(--acc) 6%,transparent)}
.nc-palette{position:fixed;z-index:45;width:260px;max-width:calc(100vw - 16px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:5px;box-shadow:0 12px 32px var(--canvas-shadow)}
.nc-palette.short{width:220px}
.nc-palette.short .nc-palette-head{display:none}
.nc-palette-head{display:flex;align-items:center;gap:6px;margin:0 0 4px;padding:0 10px;border-radius:8px;background:var(--hole);height:36px;flex:0 0 36px;color:var(--dim)}
.nc-palette-head .iconbtn{width:24px;height:24px;margin-left:-6px;border:0;background:transparent}
.nc-palette-head input{width:100%;background:transparent;border:0;color:var(--fg);font:inherit;font-size:13px;padding:0}
.nc-palette-head input:focus,.nc-palette-head input:focus-visible{outline:none}
.nc-palette-head input::placeholder{color:var(--ph)}
.nc-palette-head .ui-icon{width:15px;height:15px}
/* min-height:0 不能省：flex 子项默认 min-height:auto，列表不肯缩，就整个溢出到框外、根本滚不起来 */
#nc-palette-items{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px}
#nc-palette-items>button{display:flex;align-items:center;gap:10px;width:100%;height:34px;flex:0 0 34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);text-align:left;cursor:pointer;font:inherit;font-size:13px}
#nc-palette-items>button .ui-icon{width:15px;height:15px;color:var(--dim)}
#nc-palette-items>button:hover,#nc-palette-items>button:focus-visible{background:var(--hole);outline:none}
#nc-palette-items>button:hover .ui-icon,#nc-palette-items>button:focus-visible .ui-icon{color:var(--fg)}
#nc-palette-items>button>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nc-palette-items img{width:22px;height:22px;object-fit:cover;border-radius:3px}
/* 触屏：加大点击区，手指点得准；搜索框字号给到 16px，iOS 聚焦时才不会自动放大整页 */
@media (pointer:coarse){
  .nc-palette{width:288px}
  .nc-palette-head{height:44px;flex-basis:44px}
  .nc-palette-head input{font-size:16px}
  #nc-palette-items>button{height:44px;flex-basis:44px;font-size:15px}
  #nc-palette-items>button .ui-icon{width:17px;height:17px}
  #nc-palette-items img{width:26px;height:26px}
}
.nc-menu-section{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;font-size:11px;color:var(--dim);padding:9px 10px 4px;border-top:1px solid var(--line);margin-top:4px}
.nc-menu-section:first-child{border-top:0;margin-top:0;padding-top:4px}
.nc-menu-section small{font-size:10px;color:var(--ph);font-variant-numeric:tabular-nums}
.nc-menu-empty{padding:20px;text-align:center;font-size:12px;color:var(--dim)}
.node-canvas-mode .fw-ing{display:none;position:absolute;z-index:20;left:16px;top:76px;bottom:82px;width:min(340px,calc(100% - 32px));transform:none;
  padding:0 14px 12px;gap:12px;border:1px solid var(--line);border-radius:14px;background:var(--surf);box-shadow:0 12px 36px #00000040}
/* ---------- 素材库面板（画布模式） ---------- */
.node-canvas-mode .fw-ing-hd{min-height:52px}
.node-canvas-mode .fw-ing-hd h2{font-size:14px}
.node-canvas-mode .fw-ing-hd .fw-count{font-size:11px;padding:1px 7px;border-radius:9px;background:var(--hole);color:var(--dim)}
.node-canvas-mode .fw-ing-btns{gap:8px}
.node-canvas-mode .fw-ing-btns .mini{height:36px;border-radius:10px;font-size:12px;box-shadow:none}
.node-canvas-mode #fw-ing-add{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.node-canvas-mode #fw-ing-add:hover{background:var(--acc);border-color:var(--acc);color:var(--on-accent,#0b0c0d)}
.node-canvas-mode .wb-library-tools{gap:10px}
.node-canvas-mode #wb-asset-filter{display:none}
.node-canvas-mode #wb-asset-search{height:36px;border-radius:10px;background:var(--hole);border-color:transparent;padding:0 12px;font-size:13px}
.node-canvas-mode #wb-asset-search:focus{outline:none;border-color:var(--line)}
.nc-asset-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.nc-asset-filters::-webkit-scrollbar{display:none}
.nc-asset-filters button{flex:0 0 auto;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}
.nc-asset-filters button:hover{color:var(--fg)}
.nc-asset-filters button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.nc-library-hint{margin:0;color:var(--dim);font-size:11px}
.node-canvas-mode .fw-ing-list{gap:10px;padding:2px 2px 6px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}
.node-canvas-mode .ing{border-radius:10px;cursor:grab;box-shadow:0 0 0 1px var(--line)}
.node-canvas-mode .ing:hover,.node-canvas-mode .ing:focus-visible{box-shadow:0 0 0 1.5px var(--fg);outline:none}
.node-canvas-mode .ing:active{cursor:grabbing}
.node-canvas-mode .ing .n{padding:16px 8px 6px;font-size:11px}
.node-canvas-mode .ing .ic.audio{font-size:22px;color:#8fcaa8}
.node-canvas-mode .ing .x{top:6px;right:6px;width:22px;height:22px;font-size:13px}
.node-canvas-mode .wb-asset-edit{left:auto;right:32px;top:6px;bottom:auto;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff}
.node-canvas-mode .wb-asset-edit .ui-icon{width:12px;height:12px}
.node-canvas-mode.nc-library-open .fw-ing{display:flex}
.node-canvas-mode .fw-ing .fw-mobile{display:grid}
.node-canvas-mode .fw-ing-footer{display:none}
.node-canvas-mode .fw-dock{display:none;left:50%;right:auto;bottom:86px;transform:translateX(-50%);width:min(980px,calc(100% - 40px));max-width:none}
.node-canvas-mode.nc-timeline-open .fw-dock{display:block}
.node-canvas-mode .fw-scene.empty{display:block}
.node-canvas-mode .fw-scene-row{min-height:92px}
.node-canvas-mode.nc-timeline-open .nc-minimap{bottom:260px}

@media(max-width:1100px){
  .node-canvas-mode .wb-projectbar{max-width:calc(100% - 265px)}
  .nc-top-right .chip{display:none}
  .node-canvas-mode .wb-save{position:absolute;top:47px;left:48px;max-width:180px}
  .nc-bottom-left{bottom:88px}
  #nc-selection-count{bottom:39px}
  .node-canvas-mode.nc-timeline-open .nc-bottom-left{bottom:270px}
}
@media(max-width:640px){
  .node-canvas-mode .wb-projectbar{left:12px;top:12px;max-width:calc(100% - 24px);gap:6px;width:calc(100% - 24px)}
  .node-canvas-mode .nc-brand{width:82px;flex-basis:82px;font-size:16px}
  .node-canvas-mode #wb-project-button{flex:1;width:120px;max-width:none}
  .node-canvas-mode #nc-board-button{width:auto;flex:1;min-width:0}
  .nc-boardbar{width:135px;flex:0 1 135px}
  .nc-top-right{top:66px;right:12px;gap:4px}
  .nc-top-right .mini,.nc-top-right .iconbtn{width:30px;height:30px}
  .node-canvas-mode .wb-save{top:56px;left:0;max-width:calc(100vw - 250px)}
  .node-canvas-mode #wb-retry{position:absolute;top:45px;left:90px}
  .nc-tool-dock{bottom:12px;max-width:calc(100% - 24px);gap:8px}
  .nc-assistant-launcher{width:44px;height:44px;flex-basis:44px;border-radius:13px}
  .nc-tools{height:50px;padding:5px;gap:1px;overflow-x:auto;scrollbar-width:none}
  .nc-tools button{width:31px;height:36px;flex-basis:31px}
  .nc-tools .nc-add{margin-right:2px}
  .nc-tool-divider{margin:0 1px}
  .nc-undo-tools{gap:0}
  .nc-bottom-left{left:12px;bottom:75px}
  #nc-library span{display:none}
  #nc-library{margin-right:2px;padding:0 8px}
  .nc-minimap{right:12px;bottom:122px;width:150px;height:94px}
  .nc-starters{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:280px;top:45%;max-width:calc(100% - 40px)}
  .nc-starters button{gap:9px;padding:5px}
  .node-canvas-mode .fw-ing{top:108px;bottom:114px;left:12px;width:calc(100% - 24px)}
  .node-canvas-mode .fw-dock{width:calc(100% - 24px);bottom:118px}
  .node-canvas-mode.nc-timeline-open .nc-bottom-left{bottom:75px}
}
@media(max-height:520px){
  .nc-starters{grid-template-columns:repeat(4,minmax(0,1fr));width:560px;top:47%;gap:8px}
  .nc-template-icon{width:42px;height:42px}
  .nc-minimap{height:75px}
}
@media(max-width:360px){
  .nc-tools button{width:28px;flex-basis:28px}
}

/* ==== /css/nc-chat.css ==== */
/* ---------- 画布助手 ---------- */
/* 右侧浮层，和左边的素材库对称。面板开着的时候把右上角那排和小地图往左推，
   否则它们会被压在面板底下——那两处都是 position:absolute 贴右边缘的。 */
.nc-chat{display:none;position:absolute;z-index:20;right:16px;top:auto;bottom:82px;height:min(620px,calc(100% - 110px));
  width:min(360px,calc(100% - 32px));flex-direction:column;border:1px solid var(--line);border-radius:18px;
  background:var(--surf);box-shadow:0 18px 48px #00000030;overflow:hidden;font-size:12.5px}
.node-canvas-mode .nc-chat{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(24px);
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
.node-canvas-mode.nc-chat-open .nc-chat{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
@media(max-width:760px){.node-canvas-mode .nc-chat{transform:translateY(24px)}}
@media(prefers-reduced-motion:reduce){.node-canvas-mode .nc-chat,.node-canvas-mode.nc-chat-open .nc-chat{transition:none}}
.node-canvas-mode.nc-chat-open .nc-top-right{right:calc(min(360px,100% - 32px) + 28px)}
.node-canvas-mode.nc-chat-open .nc-minimap{right:calc(min(360px,100% - 32px) + 28px)}

/* 标头：对话名 + 新对话 / 历史 / 设置 / 收起 */
.ncc-head{display:flex;align-items:center;gap:2px;height:50px;padding:0 8px 0 16px;flex:0 0 auto}
.ncc-head>.ui-icon{width:18px;height:18px;margin-right:6px;color:var(--fg)}
.ncc-head>b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.ncc-free{margin:0 4px;padding:0 6px;border:1px solid var(--line);border-radius:8px;font-size:11px;color:var(--dim);white-space:nowrap}
.ncc-head button{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:0;border-radius:9px;background:transparent;color:var(--dim);cursor:pointer}
.ncc-head button .ui-icon{width:16px;height:16px}
.ncc-head button:hover:not(:disabled),.ncc-head button[aria-expanded="true"]{background:var(--hole);color:var(--fg)}
.ncc-head button:disabled{opacity:.35;cursor:default}
.ncc-head .ncc-director{display:flex;align-items:center;gap:4px;max-width:96px;width:auto;padding:0 6px;color:var(--acc);font-size:11px;white-space:nowrap}
.ncc-head .ncc-director[hidden]{display:none}
.ncc-head .ncc-director{flex:0 1 auto;max-width:80px}
.ncc-model{border:0;background:transparent;color:var(--dim);font:inherit;font-size:11px;min-width:0;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding:6px}
.ncc-model:hover{color:var(--fg)}
.ncc-bar-gap{min-width:0}
.ncc-mode{flex-shrink:0}
.ncc-script-modes summary{display:flex;align-items:center;justify-content:space-between;padding:10px 9px;border-radius:9px;cursor:pointer;list-style:none}
.ncc-script-modes summary:hover{background:var(--hole)}
.ncc-script-modes[open] summary>.ui-icon{transform:rotate(90deg)}
.ncc-script-modes>div{padding-left:12px;border-left:1px solid var(--line);margin-left:14px}
.dr-inline{margin:auto 0 12px;text-align:center;padding:22px 0 8px}
.dr-intro{color:var(--dim);font-size:12px}
.dr-inline-carousel{height:132px;position:relative;margin:14px 0 0;overflow:hidden}
.dr-avatar{position:absolute;left:calc(50% - 43px);top:22px;width:86px;height:86px;border:0;border-radius:50%;padding:0;background:var(--hole);cursor:pointer;transform:translateX(calc(var(--step) * 64px)) scale(.63);opacity:.48}
.dr-avatar img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.dr-avatar[aria-pressed="true"]{transform:translateX(0) scale(1);opacity:1;z-index:2;box-shadow:0 0 0 4px var(--surf),0 0 0 5px var(--line)}
.dr-avatar:focus-visible{outline:2px solid var(--acc);outline-offset:5px}
.dr-inline-arrow{position:absolute;top:49px;width:26px;height:28px;border:1px solid var(--line);border-radius:50%;background:var(--surf);color:var(--fg);display:grid;place-items:center;z-index:3;cursor:pointer}
.dr-inline-arrow.prev{left:0}.dr-inline-arrow.next{right:0}.dr-inline-arrow .ui-icon{width:13px;height:13px}
.dr-inline h3{font-size:12px;font-weight:500;margin:0 0 10px}
.dr-custom{display:inline-flex;align-items:center;gap:5px;border:0;background:var(--hole);border-radius:16px;color:var(--dim);font:inherit;font-size:11px;padding:5px 10px;cursor:pointer}
.dr-custom .ui-icon{width:11px;height:11px}
.dr-shortcuts{display:flex;justify-content:center;gap:6px;margin-top:24px}
.dr-shortcuts button{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--dim);font:inherit;font-size:11px;padding:7px;cursor:pointer}
.dr-shortcuts button:hover{background:var(--hole);color:var(--fg)}
.dr-shortcuts .ui-icon{width:13px;height:13px}
.dr-menu-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover}
.ncc-visual-refs{display:flex;gap:5px;width:100%;overflow-x:auto;padding-bottom:5px}
.ncc-visual-refs>span{display:flex;align-items:center;gap:5px;max-width:160px;flex-shrink:0;color:var(--dim)}
.ncc-visual-refs img{width:28px;height:28px;object-fit:cover;border-radius:5px}
.ncc-visual-refs small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
.ncc-visual-refs .ui-icon{width:20px;height:20px;flex-shrink:0}
.ncc-directing .ncc-context{max-height:120px}
.ncc-director-tools{display:none;gap:4px;padding:0 14px 8px;flex-shrink:0}
.ncc-directing .ncc-director-tools{display:flex}
.ncc-director-tools button{border:0;background:transparent;color:var(--dim);font:inherit;font-size:11px;cursor:pointer;padding:5px 8px;border-radius:8px}
.ncc-director-tools button:hover{background:var(--hole);color:var(--fg)}
@media(prefers-reduced-motion:reduce){.dr-avatar{transition:none}}
@media(max-height:650px){.dr-inline{padding:8px 0}.dr-inline-carousel{height:106px;margin-top:0}.dr-shortcuts{margin-top:12px}}
.ncc-director span{overflow:hidden;text-overflow:ellipsis}

.ncc-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}
.ncc-turn p{margin:0;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.ncc-turn.user{align-self:flex-end;max-width:86%;padding:9px 12px;border-radius:14px 14px 4px 14px;background:var(--hole)}
.ncc-turn.bot{align-self:stretch;display:flex;flex-direction:column;gap:8px}
.ncc-busy{display:flex;align-items:center;color:var(--dim)}
.ncc-failed{color:var(--bad)}
.ncc-note{margin:0;color:var(--dim);font-size:11px}
/* 用户这句用的不是「搭建」时，气泡上标一下：回头看得懂它那轮为什么没动画布 */
.ncc-tag{display:inline-flex;align-items:center;gap:4px;margin-bottom:4px;color:var(--dim);font-size:11px}
.ncc-tag .ui-icon{width:12px;height:12px}

/* 补丁清单。改动是要花人的注意力去核对的，所以一条一行、带图标，别挤成一段话。 */
.ncc-patch{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--hole)}
.ncc-patch ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ncc-patch li{display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.ncc-patch li .ui-icon{width:13px;height:13px;margin-top:3px;flex:0 0 13px;color:var(--dim)}
.ncc-patch li.danger .ui-icon{color:var(--bad)}
.ncc-patch .ncc-note{margin-top:8px}
.ncc-patch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ncc-patch-actions button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:1px solid var(--line);
  border-radius:14px;background:var(--surf);color:var(--fg);font:inherit;font-size:11px;cursor:pointer}
.ncc-patch-actions button:hover{border-color:var(--dim)}
.ncc-patch-actions .ui-icon{width:13px;height:13px}
.ncc-applied{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:11px}
.ncc-primary{background:var(--fg)!important;border-color:var(--fg)!important;color:var(--surf)!important}

/* Empty conversations keep the brand and the four creation entry points. */
.ncc-empty{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;text-align:center}
.ncc-empty h3{margin:6px 0 14px;font-size:15px;font-weight:600;color:var(--fg)}
.ncc-empty>p{margin:0 0 12px;max-width:250px;color:var(--dim);line-height:1.7}
.ncc-starters{display:flex;flex-direction:column;gap:2px;width:100%}
.ncc-starters button{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border:0;border-radius:10px;
  background:transparent;color:var(--fg);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.ncc-starters button:hover,.ncc-starters button:focus-visible{background:var(--hole)}
.ncc-starters button>span{flex:1}
.ncc-starters .ui-icon{width:15px;height:15px;color:var(--dim)}
.ncc-starters button>.ui-icon:last-child{width:13px;height:13px;opacity:0;transition:opacity .15s,transform .15s}
.ncc-starters button:hover>.ui-icon:last-child,.ncc-starters button:focus-visible>.ui-icon:last-child{opacity:1;transform:translateX(2px)}
@media (hover:none){ .ncc-starters button>.ui-icon:last-child{opacity:.6} }

.ncc-brand-mark{display:block;width:44px;height:44px;flex:0 0 auto;color:var(--fg)}
.ncc-wait{display:inline-block;width:12px;height:12px;flex:0 0 12px;margin-right:8px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@media(prefers-reduced-motion:reduce){.ncc-wait{animation:none}}

/* 输入框：选中的节点、正文、底栏（+ / 方式 / 发送）收在一个圆角框里 */
.ncc-compose{flex:0 0 auto;display:flex;flex-direction:column;margin:0 12px 12px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);transition:border-color .15s}
.ncc-compose:focus-within{border-color:color-mix(in srgb,var(--fg) 32%,var(--line))}
.ncc-compose textarea{display:block;width:100%;min-height:50px;max-height:180px;resize:none;padding:10px 12px 4px;border:0;
  background:transparent;color:var(--fg);font:inherit;font-size:13px;line-height:1.55}
.ncc-compose textarea:focus,.ncc-compose textarea:focus-visible{outline:none}
.ncc-compose textarea::placeholder{color:var(--ph)}
.ncc-bar{display:flex;align-items:center;gap:2px;padding:2px 6px 6px}
.ncc-bar-gap{flex:1}
.ncc-tool{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:0;border-radius:9px;background:transparent;color:var(--dim);cursor:pointer}
.ncc-tool .ui-icon{width:16px;height:16px}
.ncc-tool:hover,.ncc-tool[aria-expanded="true"]{background:var(--hole);color:var(--fg)}
.ncc-mode{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px;border:0;border-radius:9px;background:transparent;
  color:var(--fg);font:inherit;font-size:12px;cursor:pointer}
.ncc-mode:hover,.ncc-mode[aria-expanded="true"]{background:var(--hole)}
.ncc-mode .ui-icon{width:14px;height:14px;color:var(--dim)}
.ncc-mode .ui-icon:last-child{width:12px;height:12px;transition:transform .15s}
.ncc-mode[aria-expanded="true"] .ui-icon:last-child{transform:rotate(180deg)}
.ncc-send{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border:0;border-radius:50%;background:var(--fg);color:var(--surf);
  cursor:pointer;transition:opacity .15s}
.ncc-send .ui-icon{width:16px;height:16px}
.ncc-send.stop .ui-icon{width:11px;height:11px;fill:currentColor}
/* 没字可发时发送键淡下去（还能点，点了什么也不发） */
.ncc-compose:has(textarea:placeholder-shown) .ncc-send:not(.stop){opacity:.35}

/* 画布上选中的节点，摆在输入框里、正文上面。点标签本身把画布挪过去，× 是在画布上取消选中 */
.ncc-context{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-height:84px;overflow-y:auto;padding:9px 10px 0}
.ncc-context[hidden]{display:none}
.ncc-context-label{display:inline-flex;align-items:center;gap:4px;margin-right:1px;color:var(--dim);font-size:11px;white-space:nowrap;cursor:help}
.ncc-context-label .ui-icon{width:12px;height:12px}
.ncc-chip{display:inline-flex;align-items:center;min-width:0;max-width:100%;height:24px;border:1px solid var(--line);border-radius:8px;background:var(--surf);overflow:hidden}
.ncc-chip button{display:inline-flex;align-items:center;gap:4px;min-width:0;height:100%;padding:0 3px 0 6px;border:0;background:transparent;color:var(--fg);font:inherit;font-size:11px;cursor:pointer}
.ncc-chip button:hover{background:var(--hole)}
.ncc-chip-main>span:last-child,.ncc-ref>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.ncc-chip .ncc-chip-x{padding:0 5px;color:var(--dim)}
.ncc-chip-x .ui-icon{width:11px;height:11px}
.ncc-chip.more{padding:0 7px;color:var(--dim);font-size:11px}
.ncc-chip .nc-kind-icon,.ncc-ref .nc-kind-icon,.ncc-pop .nc-kind-icon{width:14px;height:14px}
.ncc-chip .nc-kind-icon .ui-icon,.ncc-ref .nc-kind-icon .ui-icon,.ncc-pop .nc-kind-icon .ui-icon{width:12px;height:12px}
.ncc-context-clear{height:24px;padding:0 5px;border:0;border-radius:6px;background:transparent;color:var(--dim);font:inherit;font-size:11px;cursor:pointer}
.ncc-context-clear:hover{background:var(--hole);color:var(--fg)}
/* 发过的消息上挂着当时选中的节点 */
.ncc-refs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.ncc-ref{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;height:22px;padding:0 6px 0 4px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--fg);font:inherit;font-size:11px;cursor:pointer}
.ncc-ref:hover{border-color:var(--dim)}
.ncc-ref.more{cursor:default;color:var(--dim)}
.ncc-ref.more:hover{border-color:var(--line)}
/* 从助手里点节点标签时，画布挪过去后让那个节点闪一下 */
.nc-node.nc-ping .nc-card{animation:nc-ping 1.2s ease-out}
@keyframes nc-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fg) 45%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
@media (prefers-reduced-motion:reduce){ .nc-node.nc-ping .nc-card{animation:none;outline:2px solid var(--fg);outline-offset:3px} }

/* 浮层：历史、设置从标头往下开，铺满面板宽；方式、更多、@ 从输入框往上开 */
.ncc-pop{position:absolute;z-index:3;left:10px;right:10px;max-height:min(380px,calc(100% - 130px));overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surf);
  box-shadow:0 16px 40px #00000040;scrollbar-width:thin}
.ncc-pop.mode,.ncc-pop.more{right:auto;width:min(290px,calc(100% - 20px))}
.ncc-pop-head{padding:6px 8px 7px;color:var(--dim);font-size:11px}
.ncc-pop-empty{margin:0;padding:16px 12px 18px;text-align:center;color:var(--dim);line-height:1.7}
.ncc-pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 8px;border:0;border-radius:9px;
  background:transparent;color:var(--fg);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.ncc-pop button:hover,.ncc-pop button:focus-visible,.ncc-pop button[aria-selected="true"]{background:var(--hole);outline:none}
.ncc-pop button>span:not(.nc-kind-icon){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ncc-pop b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncc-pop small{color:var(--dim);font-size:11px;line-height:1.5;white-space:normal}
.ncc-pop button>small{flex:0 0 auto}
.ncc-pop .ui-icon{width:15px;height:15px;color:var(--dim)}
.ncc-pop .nc-kind-icon .ui-icon{color:inherit}      /* 节点类型图标保留各自的颜色 */
.ncc-pop [aria-checked="true"] b{color:var(--acc)}
/* 历史：一行一段，删除键悬停才出现（触屏上常亮） */
.ncc-hist-row{display:flex;align-items:center;border-radius:9px}
.ncc-hist-row:hover,.ncc-hist-row.current{background:var(--hole)}
.ncc-hist-row .ncc-hist-open:hover,.ncc-hist-row .ncc-hist-open:focus-visible{background:transparent}
.ncc-pop .ncc-hist-del{flex:0 0 32px;width:32px;justify-content:center;padding:0;opacity:0}
.ncc-hist-row:hover .ncc-hist-del,.ncc-pop .ncc-hist-del:focus-visible{opacity:1}
.ncc-pop .ncc-hist-del:hover .ui-icon{color:var(--bad)}
@media (hover:none){ .ncc-pop .ncc-hist-del{opacity:1} }
/* 设置里的开关：真 checkbox 藏起来，后面的 <i> 画成拨杆 */
/* 全站的 label 是表单小标题（加粗、灰、上下有外边距），这里是一整行开关，全部压回来 */
.ncc-switch{position:relative;display:flex;align-items:flex-start;gap:14px;margin:0;padding:9px 8px;border-radius:9px;
  color:var(--fg);font-size:12.5px;font-weight:400;cursor:pointer}
.ncc-switch:hover{background:var(--hole)}
.ncc-switch>span{flex:1;display:flex;flex-direction:column;gap:3px}
.ncc-switch b{font-weight:500;white-space:normal}
.ncc-switch small{font-weight:400}
.ncc-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ncc-switch i{position:relative;flex:0 0 32px;width:32px;height:18px;margin-top:1px;border-radius:9px;background:var(--line);transition:background .15s}
.ncc-switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0000004d;transition:transform .15s}
.ncc-switch input:checked+i{background:var(--acc)}
.ncc-switch input:checked+i::after{transform:translateX(14px)}
.ncc-switch input:focus-visible+i{outline:2px solid var(--acc);outline-offset:2px}
.ncc-pop-foot{margin:6px 8px 4px;padding-top:9px;border-top:1px solid var(--line);color:var(--dim);font-size:11px;line-height:1.65}

@media(max-width:640px){
  /* 窄屏上面板铺满，右上角那排就不用让位了——本来也没地方可让 */
  .nc-chat{left:12px;right:12px;top:108px;bottom:114px;width:auto;height:auto}
  .node-canvas-mode.nc-chat-open .nc-top-right,.node-canvas-mode.nc-chat-open .nc-minimap{right:12px}
  .node-canvas-mode.nc-chat-open .nc-minimap{display:none}
}

/* ==== /css/home.css ==== */
/* Shared navigation, with the home layout isolated from the node canvas. */
.studio-shell{
  --bg:#f7f8fa;--surf:#fff;--hole:#eef1f3;--line:#e1e6e8;
  --fg:#202629;--dim:#68747a;--ph:#79858b;--acc:#087f73;--acc-d:#06665d;
  --soft:#e7f3ef;--on-accent:#fff;--hm-sidebar:216px;--hm-notice:0px;
  background:var(--bg);
}
html[data-theme="dark"] .studio-shell{
  --bg:#151819;--surf:#1f2426;--hole:#292f32;--line:#353d40;
  --fg:#eef2f3;--dim:#a5b0b5;--ph:#8f9ca3;--acc:#7dd9bd;--acc-d:#a1e9d3;
  --soft:#203a33;--on-accent:#12392c;
}
.studio-shell #app{padding-top:0}
.studio-shell #app>header{
  height:68px;top:0;margin-left:var(--hm-sidebar);padding:0 40px;
  background:var(--bg);border:0;z-index:24;
}
.studio-shell #app>header>.logo,.studio-shell #app>.tabbar,.hm-mobile-brand,.hm-mobile-menu{display:none}
.studio-shell #app>header h1{font-size:13px;font-weight:450;color:var(--dim)}
.studio-shell #app>header>.spacer{display:block;flex:1}
.studio-shell header .chip{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surf);font-size:12px}
.studio-shell header .dot{width:6px;height:6px}
.studio-shell #acctbtn{max-width:310px}
.studio-shell #acctname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-shell #acctbal{flex-shrink:0}
#pane-home button,#pane-home input,#pane-home textarea{font:inherit}
#pane-home button,#pane-home a{-webkit-tap-highlight-color:transparent}
#pane-home button{cursor:pointer}
#pane-home button:disabled{cursor:default}
#pane-home a{text-decoration:none;color:inherit}
.hm-sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--hm-sidebar);padding:25px 16px 16px;
  border-right:1px solid var(--line);background:var(--surf);display:flex;flex-direction:column;
  z-index:30;overflow-y:auto;scrollbar-width:thin;
}
.hm-brand{display:flex;align-items:baseline;width:max-content;margin:0 12px 30px;color:var(--fg);font-size:32px;font-weight:750;line-height:1.2;text-decoration:none}
.hm-brand span,.hm-mobile-brand span{color:var(--acc)}
.hm-new{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:9px 14px;border:0;border-radius:6px;background:var(--fg);color:var(--bg);font-size:13px!important;font-weight:550!important}
.hm-new:hover{opacity:.88}
.hm-new .ui-icon{width:17px;height:17px}
.hm-nav{display:flex;flex-direction:column;gap:5px;margin-top:24px}
.hm-nav a,.hm-nav>button{display:flex;align-items:center;gap:11px;min-height:42px;border:0;border-radius:6px;background:transparent;color:var(--dim)!important;padding:9px 13px;text-align:left;font-size:13px!important}
.hm-nav a:hover,.hm-nav>button:hover{background:var(--hole);color:var(--fg)!important}
.hm-nav a[aria-current="page"]{background:var(--soft);color:var(--acc)!important;font-weight:600}
.hm-nav .ui-icon{width:18px;height:18px}
.hm-nav-divider{border-top:1px solid var(--line);margin:19px 8px 14px}
.hm-nav-label{font-size:11px;color:var(--dim);padding:0 13px 8px}
.hm-sidebar-bottom{margin-top:auto;padding-top:40px}
.hm-resume{width:100%;display:flex;align-items:center;gap:10px;padding:13px 10px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;text-align:left}
.hm-resume:hover{border-color:var(--acc)}
.hm-resume>span{flex:1;font-size:12px;font-weight:550}
.hm-resume small{display:block;font-size:11px;font-weight:400;color:var(--dim);margin-top:3px}
.hm-resume>.ui-icon{color:var(--dim);width:17px;height:17px}
.hm-help{display:flex;align-items:center;gap:9px;width:100%;padding:22px 12px 2px;border:0;background:transparent;color:var(--dim);font-size:12px!important}
.hm-help:hover{color:var(--fg)}
.hm-help>.ui-icon{width:16px;height:16px}
.hm-main{display:flex;flex-direction:column;min-height:calc(100vh - 68px);min-height:calc(100dvh - 68px);margin-left:var(--hm-sidebar);padding:16px 40px 30px}
.hm-content{display:flex;flex:1;flex-direction:column;width:100%;max-width:1600px;margin:0 auto}
.hm-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.hm-eyebrow{display:block;font-size:12px;color:var(--dim);margin-bottom:8px}
.hm-welcome h2{font-size:28px;font-weight:650;line-height:1.35;margin:0}
.hm-open-canvas{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:10px 0;color:var(--dim);font-size:13px!important}
.hm-open-canvas:hover{color:var(--acc)}
.hm-open-canvas .ui-icon{width:17px;height:17px}
.hm-open-canvas .ui-icon:last-child{width:14px;height:14px}
.hm-idea{margin:0 0 34px}
#hm-idea-form{padding:16px 20px 14px;background:var(--surf);border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 14px #10182004}
#hm-idea-form:focus-within{border-color:var(--acc)}
.hm-create-modes{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.hm-create-modes>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 13px;background:transparent;color:var(--dim);border:0;border-radius:5px;font-size:13px!important}
.hm-create-modes>button:hover{background:var(--hole);color:var(--fg)}
.hm-create-modes>button[aria-pressed="true"]{background:var(--soft);color:var(--acc);font-weight:600}
.hm-create-modes .ui-icon{width:16px;height:16px}
#hm-prompt{display:block;width:100%;min-height:106px;max-height:360px;resize:vertical;margin:14px 0 10px;padding:5px 2px;border:0;border-radius:0;background:transparent;color:var(--fg);box-shadow:none;font-size:15px;line-height:1.8}
#hm-prompt:focus-visible{outline:0}
#hm-prompt::placeholder{color:var(--ph)}
.hm-composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hm-prompt-count{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.hm-create-submit{display:flex;align-items:center;justify-content:center;gap:12px;min-height:38px;padding:8px 15px;border:0;border-radius:5px;background:var(--acc);color:var(--on-accent);font-size:13px!important;font-weight:550!important}
.hm-create-submit:hover:not(:disabled){background:var(--acc-d)}
.hm-create-submit:disabled{background:var(--hole);color:var(--dim)}
.hm-create-submit .ui-icon{width:17px;height:17px}
.hm-idea-presets{display:flex;align-items:center;flex-wrap:wrap;gap:9px 18px;margin-top:14px;font-size:12px;color:var(--dim)}
.hm-idea-presets>span{font-size:11px}
.hm-idea-presets>button{display:flex;align-items:center;gap:6px;min-height:32px;padding:5px 0;background:transparent;border:0;color:var(--dim);font-size:12px!important}
.hm-idea-presets>button:hover{color:var(--acc)}
.hm-idea-presets .ui-icon{width:14px;height:14px}
.hm-section-heading{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:30px 0 16px;min-height:28px}
.hm-section-heading h2{font-size:17px;line-height:1.4;margin:0;font-weight:600;flex:1}
.hm-section-heading>a{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)!important}
.hm-section-heading>a:hover{color:var(--acc)!important}
.hm-section-heading>a .ui-icon{width:14px;height:14px}
.hm-project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hm-project-card{position:relative;min-width:0}
.hm-project{display:flex;flex-direction:column;width:100%;gap:0;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--fg);text-align:left;overflow:hidden}
.hm-project:hover{border-color:var(--acc)}
.hm-project-cover{display:grid;place-items:center;width:100%;aspect-ratio:16/9;max-height:170px;background:var(--hole);color:var(--dim);overflow:hidden;border-bottom:1px solid var(--line)}
.hm-project-cover img{display:block;width:100%;height:100%;object-fit:cover}
.hm-project-cover>.ui-icon{width:32px;height:32px;opacity:.55}
.hm-project-text{display:flex;flex-direction:column;gap:5px;width:100%;padding:13px 15px;overflow:hidden}
.hm-project-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:550}
.hm-project-text time{font-size:11px;color:var(--dim)}
.hm-project-actions{position:absolute;top:9px;right:9px;display:flex;gap:2px;padding:3px;border-radius:5px;background:var(--surf);border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .12s}
.hm-project-card:hover .hm-project-actions,.hm-project-card:focus-within .hm-project-actions{opacity:1;pointer-events:auto}
.hm-project-act{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:3px;background:transparent;color:var(--dim)}
.hm-project-act .ui-icon{width:15px;height:15px}
.hm-project-act:hover{background:var(--hole);color:var(--fg)}
.hm-project-act[data-hm-delete]:hover{color:var(--bad)}
.hm-project-act:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.hm-project.hm-opening+.hm-project-actions{display:none}
#hm-projects[aria-busy="true"] .hm-project:not(.hm-opening){opacity:.55}
.hm-project.hm-opening{position:relative;outline:1px solid var(--acc);outline-offset:-1px}
.hm-project.hm-opening::after{content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:sp 1s linear infinite}
#pane-home .hm-section-heading>.hm-import{display:flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;color:var(--dim);font-size:12px}
#pane-home .hm-section-heading>.hm-import:hover{color:var(--acc)}
.hm-section-heading>.hm-import .ui-icon{width:14px;height:14px}
.hm-empty{min-height:100px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:24px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--dim);font-size:13px;text-align:center}
.hm-empty>span{overflow-wrap:anywhere}
.hm-empty>.ui-icon{width:24px;height:24px}
.hm-empty .mini{padding:6px 10px;font-size:12px;border-radius:5px;box-shadow:none}
.hm-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hm-tools>button{display:flex;align-items:center;gap:12px;min-height:74px;padding:16px;border:1px solid var(--line);border-radius:7px;background:var(--surf);color:var(--fg);text-align:left;font-size:13px!important}
.hm-tools>button:hover{border-color:var(--acc)}
.hm-tool-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:6px;background:var(--hole)}
.hm-tool-icon .ui-icon{width:19px;height:19px}
.hm-tool-icon.cyan{color:#2d8396;background:#edf4f7}
.hm-tool-icon.gold{color:#a67a31;background:#f8f3e8}
.hm-tool-icon.pink{color:#ae627c;background:#f8edf1}
.hm-tool-icon.green{color:#488a68;background:#eaf4ee}
html[data-theme="dark"] .hm-tool-icon{background:var(--hole)}
html[data-theme="dark"] .hm-tool-icon.cyan{color:#93c8d7}
html[data-theme="dark"] .hm-tool-icon.gold{color:#dbc38e}
html[data-theme="dark"] .hm-tool-icon.pink{color:#dea0b8}
html[data-theme="dark"] .hm-tool-icon.green{color:#8ecba6}
.hm-tools>button>span:nth-child(2){overflow-wrap:anywhere;white-space:normal}
.hm-tools .hm-tool-arrow{width:14px;height:14px;margin-left:auto;flex-shrink:0;color:var(--dim)}
.hm-discover{margin-top:34px}
.hm-discover .hm-section-heading{margin-top:0}
.hm-discover-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.hm-content[data-view="home"] .hm-discover-toolbar{display:none}
.hm-categories{display:flex;gap:6px;flex-wrap:wrap}
.hm-categories>button{border:0;border-radius:5px;padding:6px 10px;background:transparent;color:var(--dim);font-size:12px!important;min-height:32px}
.hm-categories>button:hover{color:var(--fg)}
.hm-categories>button[aria-pressed="true"]{background:var(--hole);color:var(--fg)}
.hm-search{display:flex;align-items:center;gap:8px;width:190px;flex-shrink:0;border:1px solid var(--line);border-radius:5px;min-height:34px;padding:6px 10px;color:var(--dim);background:var(--surf)}
.hm-search input{width:100%;background:transparent;border:0;outline:0;color:var(--fg);font-size:12px!important;padding:0;border-radius:0;box-shadow:none}
.hm-search .ui-icon{width:15px;height:15px}
.hm-search:focus-within{border-color:var(--acc)}
.hm-show-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px}
.hm-show{border:0;background:transparent;color:var(--fg);padding:0;text-align:left;display:block;width:100%;white-space:normal}
.hm-show-art{position:relative;display:block;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:var(--hole)}
.hm-show-art>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}
.hm-show:hover .hm-show-art>img{transform:scale(1.025)}
.hm-show-tag{position:absolute;top:10px;left:10px;padding:3px 7px;border-radius:4px;background:#142124b8;color:#fff;font-size:10px}
.hm-show-arrow{position:absolute;right:10px;bottom:10px;width:30px;height:30px;display:grid;place-items:center;border-radius:5px;background:#fff;color:#203234;opacity:0;transition:opacity .15s}
.hm-show:hover .hm-show-arrow,.hm-show:focus-visible .hm-show-arrow{opacity:1}
.hm-show-title{display:block;margin-top:12px;font-size:13px;font-weight:550}
.hm-show-caption{display:block;font-size:11px;color:var(--dim);margin-top:4px;overflow-wrap:anywhere}
.hm-content>.hm-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--dim);font-size:11px;border-top:1px solid var(--line);margin-top:auto;padding-top:20px}
.hm-footer>span:first-child{font-size:16px;font-weight:650;color:var(--fg)}
.hm-content[data-view="projects"] .hm-section-heading,.hm-content[data-view="explore"] .hm-section-heading{margin-top:10px}
.hm-content[data-view="projects"] .hm-section-heading h2,.hm-content[data-view="explore"] .hm-section-heading h2{font-size:24px}
.hm-preview-image{display:block;width:100%;max-height:330px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;margin-bottom:18px}
.hm-preview-prompt{font-size:13px;line-height:1.9;color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
.node-canvas-mode .hm-workspace-home{background:var(--surf);border:1px solid var(--line);width:36px;height:36px;flex:0 0 36px}
@media(min-width:1800px){.hm-main{padding:24px 56px 36px}.studio-shell #app>header{padding:0 56px}.hm-project-cover{max-height:200px}}
@media(max-width:1180px){
  .studio-shell{--hm-sidebar:192px}
  .studio-shell #app>header{padding:0 28px}
  .hm-main{padding:12px 28px 28px}
  .hm-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-project-grid,.hm-show-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-project-cover{max-height:180px}
  .hm-discover-toolbar{flex-wrap:wrap}
}
@media(max-width:860px){
  .studio-shell{--hm-sidebar:180px}
  .studio-shell #app>header{padding:0 22px;gap:8px}
  .hm-main{padding:10px 22px 26px}
  .hm-sidebar{padding-inline:12px}
  .hm-brand{font-size:29px}
  .hm-tools>button{padding:12px;gap:10px}
  .hm-tools .hm-tool-arrow{display:none}
  .studio-shell header .guestbar>span{font-size:11px}
  .studio-shell #acctbtn{max-width:220px}
  .hm-search{width:100%}
  .hm-section-heading .hm-project-search{width:160px}
}
@media(max-width:600px){
  .studio-shell{--hm-sidebar:0px}
  .studio-shell #app>header{height:60px;padding:0 16px;gap:10px;border-bottom:1px solid var(--line);background:var(--surf)}
  .studio-shell #app>header h1{display:none}
  .studio-shell .hm-mobile-menu{display:grid;width:32px;padding:0}
  .studio-shell .hm-mobile-brand{display:flex;align-items:baseline;color:var(--fg);font-size:24px;font-weight:750;line-height:1.2;text-decoration:none}
  .studio-shell header .chip{padding:5px 7px;font-size:11px}
  .studio-shell header .guestbar{border:0;padding:0;background:transparent}
  .studio-shell header .guestbar>span{display:none}
  .studio-shell header .guestbar .mini{min-height:32px;padding:4px 9px;box-shadow:none}
  .studio-shell header .iconbtn{width:30px}
  .studio-shell #acctname{display:none}
  .studio-shell #account{flex:0 1 120px}
  .studio-shell #acctbtn{max-width:100%}
  .studio-shell #acctbal{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}
  .hm-main{min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);padding:24px 18px}
  .hm-sidebar{width:232px;transform:translateX(-100%);transition:transform .18s;padding:24px 16px 18px}
  .hm-menu-open .hm-sidebar{transform:none}
  .hm-brand{font-size:32px}
  .hm-scrim{position:fixed;inset:0;z-index:29;background:#0e191957;border:0}
  .hm-welcome{margin-bottom:20px;gap:12px}
  .hm-eyebrow{font-size:11px;margin-bottom:6px}
  .hm-welcome h2{font-size:25px}
  .hm-open-canvas{font-size:12px!important;gap:5px}
  .hm-open-canvas>.ui-icon:first-child{display:none}
  #hm-idea-form{padding:12px 14px}
  .hm-create-modes{gap:3px;flex-wrap:nowrap}
  .hm-create-modes>button{flex:1;gap:5px;padding:7px 6px;font-size:12px!important;min-height:36px}
  .hm-create-modes .ui-icon{width:14px;height:14px}
  #hm-prompt{font-size:16px;min-height:120px;margin-top:12px}
  .hm-create-submit{min-height:40px;font-size:12px!important;gap:10px;padding:9px 12px}
  .hm-idea{margin-bottom:28px}
  .hm-idea-presets{gap:6px 14px;margin-top:12px}
  .hm-idea-presets>span{display:none}
  .hm-idea-presets>button{font-size:11px!important;gap:5px}
  .hm-section-heading{margin:26px 0 14px;gap:12px}
  .hm-section-heading h2{font-size:16px}
  .hm-section-heading>a,#pane-home .hm-section-heading>.hm-import{font-size:11px}
  .hm-project-grid{gap:12px}
  .hm-project-cover{max-height:130px}
  .hm-project-text{padding:11px 10px;gap:4px}
  .hm-project-text b{font-size:12px}
  .hm-project-text time{font-size:10px}
  .hm-project-actions{top:5px;right:5px;padding:2px}
  .hm-project-act{width:26px;height:26px}
  .hm-empty{gap:10px;font-size:12px;padding:22px 8px}
  .hm-empty>span{flex-basis:100%}
  .hm-empty>.ui-icon{display:none}
  .hm-tools{gap:10px}
  .hm-tools>button{min-height:70px;padding:12px 10px;gap:8px;font-size:12px!important}
  .hm-tool-icon{width:30px;height:30px;flex-basis:30px}
  .hm-tool-icon .ui-icon{width:17px;height:17px}
  .hm-discover{margin-top:28px}
  .hm-discover-toolbar{gap:12px}
  .hm-categories{gap:3px}
  .hm-categories>button{font-size:11px!important;padding:5px 8px}
  .hm-show-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hm-show-title{font-size:12px;margin-top:9px}
  .hm-show-caption{font-size:11px;line-height:1.6}
  .hm-show-tag{font-size:10px;top:7px;left:7px;padding:2px 5px}
  .hm-footer{font-size:10px;margin-top:30px}
  .hm-content[data-view="projects"] .hm-section-heading h2,.hm-content[data-view="explore"] .hm-section-heading h2{font-size:22px}
  .hm-section-heading .hm-project-search{width:100%;order:2}
  .hm-workspace-home{width:30px!important;flex-basis:30px!important}
}
@media(max-width:380px){.hm-create-modes .ui-icon{display:none}.hm-main{padding-inline:14px}.hm-tools>button{font-size:11px!important}}
@media(hover:none){.hm-project-actions{opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.hm-sidebar,.hm-project-actions,.hm-show-art>img,.hm-show-arrow{transition:none}}

/* ==== /css/creative-studio.css ==== */
/* Creative tools use unframed work areas and compact, shared controls. */
.hm-creative{padding:8px 0 24px}
.cs-heading{position:static;height:auto;padding:0;background:transparent;border:0;z-index:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 26px}
.cs-heading>div>span{font-size:11px;color:var(--dim)}
.cs-heading h2{font-size:26px;line-height:1.35;margin:8px 0 0;font-weight:650}
.cs-heading>a{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim)!important}
#cs-tool-switch{margin-left:auto;max-width:190px;border:1px solid var(--line);background:var(--surf);color:var(--fg);padding:8px 10px;border-radius:5px;font:inherit;font-size:12px}
.cs-library-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px}
.cs-library{border-right:1px solid var(--line);padding-right:18px}
.cs-library-heading{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cs-library-heading h3{font-size:14px;font-weight:550;flex:1;margin:0}
.cs-library-item{display:flex;gap:4px;align-items:center;margin-bottom:6px}
.cs-library-item>button:first-child{flex:1;display:flex;gap:9px;align-items:center;border:0;background:transparent;color:var(--dim);padding:10px 9px;border-radius:5px;text-align:left}
.cs-library-item>button:first-child>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cs-library-item>button:first-child:hover,.cs-library-item>button[aria-pressed=true]{background:var(--hole);color:var(--fg)}
.cs-library-item>.iconbtn{width:28px;height:30px;flex-shrink:0;box-shadow:none}
.cs-editor{max-width:1100px}
.cs-field{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;font-size:12px;color:var(--dim)}
.cs-field>span{font-size:12px;color:var(--dim)}
.cs-field input,.cs-field textarea,.cs-field select,.cm-segment input,.cm-cue input,.cm-cue textarea,.cs-actions>select{width:100%;min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--surf);color:var(--fg);font:inherit;font-size:13px;padding:10px 12px;box-shadow:none}
.cs-field input,.cs-field select{min-height:40px}
.cs-field textarea{resize:vertical;min-height:80px;line-height:1.8}
.cs-field input[type=color]{padding:4px;height:40px;cursor:pointer}
.cs-field input[type=range]{padding:0;border:0;background:none;accent-color:var(--acc)}
.cs-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.cs-field input:focus-visible,.cs-field textarea:focus-visible,.cs-field select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cs-actions,.cs-save-row,.cs-reference-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
.cs-save-row{padding-top:18px;border-top:1px solid var(--line)}
.cs-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;min-height:38px;border:1px solid var(--line);border-radius:5px;background:var(--surf);color:var(--fg);font:inherit;font-size:12px;cursor:pointer}
.cs-button:hover{border-color:var(--dim);background:var(--hole)}
.cs-button.primary{background:var(--acc);color:var(--on-accent);border-color:var(--acc);font-weight:550}
.cs-button:disabled{opacity:.5;cursor:default}
.cs-button .ui-icon{width:16px;height:16px}
.cs-actions>select{width:auto;max-width:280px}
.cs-message{min-height:22px;font-size:12px;color:var(--dim);overflow-wrap:anywhere}
.cs-message.error{color:var(--bad)}
.dr-workspace{max-width:960px;margin:0 auto;padding:38px 0 30px;min-height:400px}
.dr-picker{text-align:center}
.dr-carousel{position:relative;max-width:650px;height:200px;margin:0 auto;overflow:hidden}
.dr-role{position:absolute;z-index:var(--dr-order);top:19px;left:calc(50% + var(--dr-offset));width:144px;height:144px;padding:0;border:0;border-radius:50%;background:var(--hole);cursor:pointer;overflow:hidden;opacity:var(--dr-opacity);transform:translateX(-50%) scale(var(--dr-scale));transition:transform .22s ease,left .22s ease,opacity .22s ease,filter .22s ease}
.dr-role[aria-pressed=false]{filter:brightness(.62)}
.dr-role[aria-pressed=true]{outline:2px solid var(--acc);outline-offset:4px}
.dr-role img{display:block;width:100%;height:100%;object-fit:cover}
.dr-role:focus-visible,.dr-arrow:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.dr-arrow{position:absolute;z-index:20;top:72px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--hole);color:var(--fg);cursor:pointer}
.dr-arrow.prev{left:0}.dr-arrow.next{right:0}
.dr-arrow:hover{background:var(--surf)}
.dr-arrow .ui-icon{width:18px;height:18px}
.dr-name{margin:0;font-size:18px;font-weight:500;line-height:1.4}
.dr-commands{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:30px 0 0}
.dr-legacy{max-width:560px;margin:44px auto 0;border-top:1px solid var(--line);padding-top:18px}
.dr-legacy h4{margin:0 0 10px;font-size:13px;font-weight:550;color:var(--dim)}
.dr-draft{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:12px;cursor:pointer;text-align:left}
.dr-draft span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-draft .ui-icon{width:16px;height:16px;color:var(--dim)}
@media(max-width:600px){.dr-workspace{padding:22px 0 16px;min-height:320px}.dr-carousel{height:178px}.dr-role{top:19px;width:124px;height:124px}.dr-arrow{top:58px}.dr-name{font-size:16px}.dr-commands{margin-top:22px}.dr-legacy{margin-top:34px}}
@media(prefers-reduced-motion:reduce){.dr-role{transition:none}}
#os3d .os3d-sketch{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--fg);padding:22px}
#os3d .os3d-sketch::backdrop{background:#0008}
#os3d .os3d-sketch h2{font-size:20px;margin:0 0 16px}
#os3d .os3d-sketch canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
#os3d .os3d-sketch-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:16px 0;font-size:12px}
#os3d .os3d-sketch-controls label{display:flex;align-items:center;gap:8px}
#os3d .os3d-sketch-controls input{width:80px}
#os3d .os3d-sketch .dialog-actions{display:flex;justify-content:flex-end;gap:10px}
#os3d .os3d-sketch [data-sketch-error]{color:var(--bad);font-size:12px}
#os3d .os3d-assistant{width:min(600px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--fg);padding:24px}
#os3d .os3d-assistant::backdrop{background:#0008}
#os3d .os3d-assistant h2{font-size:20px;margin:0 0 20px}
#os3d .os3d-assistant label{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:14px 0}
#os3d .os3d-assistant textarea{width:100%;min-height:110px;font:inherit;color:var(--fg);background:var(--hole);border:1px solid var(--line);padding:10px;border-radius:5px;resize:vertical}
#os3d .os3d-assistant-actions,#os3d .os3d-assistant .dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
#os3d .os3d-assistant .os3d-replace{display:flex;flex-direction:row;align-items:center}
#os3d .os3d-assistant h3{font-size:14px;font-weight:550;margin-top:22px}
#os3d .os3d-assistant li{font-size:12px;line-height:1.8}
#os3d .os3d-assistant-price{font-size:11px;color:var(--dim)}
#os3d .os3d-assistant [data-plan-error]{color:var(--bad);font-size:12px}
.nc-autolink-list{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow:auto}
.nc-autolink-list>label{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}
.nc-autolink-list>label>span:not(.nc-thumb){flex:1;overflow-wrap:anywhere}
.nc-autolink-list small{font-size:11px;color:var(--dim)}
.nc-autolink-list .nc-thumb{width:48px;height:36px;overflow:hidden;flex:0 0 48px}
.nc-autolink-list .nc-thumb img{width:100%;height:100%;object-fit:cover}
.nc-tool[data-node-action="autolink"].matched{color:var(--acc);background:var(--soft)}
.nc-batch{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:40;max-width:calc(100vw - 24px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surf);color:var(--fg);font-size:12px}
.nc-batch>span{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-batch label{display:flex;align-items:center;gap:6px;margin:0;font-size:12px}
.nc-batch input{accent-color:var(--acc)}
.nc-batch .iconbtn{width:30px;height:30px;box-shadow:none}
.cs-muted,.cs-empty{font-size:12px;color:var(--dim);line-height:1.8;overflow-wrap:anywhere}
.cs-empty{padding:40px 10px;text-align:center}
.cs-proposal{border-top:1px solid var(--line);padding-top:18px;margin-top:24px}
.cs-proposal h3,.ci-inspector h3,.cm-controls h3,.cm-captions h3{font-size:16px;font-weight:550;margin:0 0 18px}
.cs-proposal li{font-size:12px;color:var(--dim);line-height:1.8}
.cs-check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--fg)}
.cs-check input,.cs-reference-picker input,.ci-layer-list input{accent-color:var(--acc)}
.cs-reference-row{font-size:12px;color:var(--dim)}
.cs-reference-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cs-reference-picker>label{display:flex;flex-direction:column;gap:8px;font-size:12px}
.cs-reference-picker img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px}
.cs-reference-picker input{width:18px;height:18px}
.cs-reference-picker span{overflow-wrap:anywhere}
.cs-asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cs-asset{padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--fg);overflow:hidden;text-align:left;display:flex;flex-direction:column}
.cs-asset img,.cs-asset-icon{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--hole)}
.cs-asset-icon{display:grid;place-items:center;color:var(--dim)}
.cs-asset-icon .ui-icon{width:36px;height:36px}
.cs-asset b{padding:10px 12px 4px;font-size:13px;font-weight:550;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-asset small{padding:0 12px 12px;color:var(--dim);font-size:11px}
.ci-layout,.cm-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.ci-stage{position:relative;touch-action:none;background-color:#b5babc;background-image:conic-gradient(#e4e7e8 25%,transparent 0 50%,#e4e7e8 0 75%,transparent 0);background-size:20px 20px;overflow:hidden}
#ci-canvas{display:block;width:100%;height:auto}
#ci-size{margin-top:10px}
#ci-guides{position:absolute;inset:0;pointer-events:none}
.ci-guide{position:absolute;border:0;background:transparent;color:var(--acc);padding:0;pointer-events:auto;touch-action:none}
.ci-guide.x{width:16px;height:100%;top:0;transform:translateX(-50%);cursor:col-resize}
.ci-guide.y{height:16px;width:100%;left:0;transform:translateY(-50%);cursor:row-resize}
.ci-guide::after{content:"";position:absolute;background:#14e4ef;box-shadow:0 0 0 1px #173c4266}
.ci-guide.x::after{top:0;bottom:0;width:2px;left:7px}
.ci-guide.y::after{left:0;right:0;height:2px;top:7px}
#ci-selection{position:absolute;border:2px dashed #fff;background:#12c9dc30;pointer-events:none;box-shadow:0 0 0 1px #172a31}
.ci-inspector{border-left:1px solid var(--line);padding-left:22px}
.ci-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ci-tiles>span{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.ci-tiles small{font-size:10px;color:var(--dim)}
.ci-layer-list>div{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.ci-layer-list button{flex:1;border:0;border-radius:4px;background:transparent;color:var(--dim);padding:9px;text-align:left;font-size:12px}
.ci-layer-list button[aria-pressed=true]{background:var(--hole);color:var(--fg)}
#ci-layer-fields{margin-top:20px}
.cm-preview{position:relative}
.cm-source-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.cm-source-row select{flex:1;min-width:min(100%,260px);max-width:580px;border:1px solid var(--line);border-radius:5px;background:var(--surf);color:var(--fg);font:inherit;font-size:13px;padding:10px 12px}
.cm-workflow{padding-bottom:18px}
.cm-workflow .cs-actions{margin:0}
.cm-workflow p{margin:9px 0 0;font-size:12px}
.cm-advanced>summary,.cm-study>summary,.cm-captions>summary{cursor:pointer;font-size:15px;font-weight:600;list-style-position:inside;padding:8px 0}
.cm-advanced[open]>summary,.cm-study[open]>summary,.cm-captions[open]>summary{margin-bottom:16px}
.cm-proposal-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:20px}
.cm-proposal-head h3{font-size:16px;margin:0}
.cm-proposal-head span{font-size:12px;color:var(--dim)}
.cm-cut-list{max-height:240px;overflow-y:auto;border-top:1px solid var(--line);margin:12px 0}
.cm-cut{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:12px}
.cm-cut input{accent-color:var(--acc);width:16px;height:16px;flex:none}
.cm-cut span{flex:1}.cm-cut b{font-size:11px;font-weight:500;white-space:nowrap;color:var(--dim)}
#cm-canvas{display:block;width:100%;max-height:70vh;object-fit:contain;background:#0c0d0e}
.cm-playback{display:flex;align-items:center;gap:12px;padding:14px 0}
.cm-playback input{flex:1;accent-color:var(--acc)}
.cm-playback output{min-width:50px;text-align:right;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.cm-controls{border-left:1px solid var(--line);padding-left:22px}
.cm-controls>h3{margin-top:22px}
.cm-controls .cs-fields{gap:0 12px}
#cm-video{display:block;width:100%;aspect-ratio:16/9;background:#0c0d0e;object-fit:contain}
.cm-video-stage{position:relative}
#cm-empty-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--dim);pointer-events:none;font-size:14px}
#cm-empty-stage[hidden]{display:none}
#cm-empty-stage .ui-icon{width:32px;height:32px}
#cm-pip-preview{position:absolute;object-fit:contain;background:#111}
#cm-preview-caption{position:absolute;bottom:12%;left:8%;right:8%;text-align:center;white-space:pre-wrap;pointer-events:none;line-height:1.4;text-shadow:0 1px 3px #000,0 0 5px #000}
.cm-segments{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.cm-segment{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(0,1fr) 30px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cm-segment label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--dim);margin:0}
.cm-segment label:first-child{flex-direction:row;align-items:center;color:var(--fg)}
.cm-segment input[type=radio]{width:16px;min-height:16px;accent-color:var(--acc)}
.cm-segment input[type=number]{padding:7px 8px}
.cm-captions{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.cm-captions .cs-actions{margin-bottom:18px}
.cm-study{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.cm-study h3{font-size:16px;font-weight:550}
.cm-study .cs-actions>label{display:flex;align-items:center;gap:8px;font-size:12px}
#cm-study-count{width:64px;padding:7px;border:1px solid var(--line);background:var(--surf);color:var(--fg);border-radius:4px}
#cm-study-frames{margin:16px 0}
#cm-study-frames figure{margin:0}
#cm-study-frames img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
#cm-study-frames figcaption{font-size:11px;margin-top:6px;color:var(--dim)}
.cm-cue{display:grid;grid-template-columns:100px 100px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px}
.cm-cue textarea{resize:vertical;line-height:1.6}
@media(max-width:1100px){.cs-library-layout{grid-template-columns:170px minmax(0,1fr);gap:20px}.ci-layout,.cm-layout{grid-template-columns:minmax(0,1fr) 230px;gap:18px}.cs-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cm-segment{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr) 28px}}
@media(max-width:820px){.ci-layout,.cm-layout{grid-template-columns:1fr}.ci-inspector,.cm-controls{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.cs-library-layout{grid-template-columns:1fr}.cs-library{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px}.cs-library-heading{margin-bottom:6px}#cs-library-list{display:flex;flex-wrap:wrap;gap:6px}.cs-library-item{max-width:220px}.cs-asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cs-heading{gap:12px;margin-bottom:22px}.cs-heading h2{font-size:23px}.cs-heading>a{font-size:11px}.cs-fields{gap:0 12px}.cs-field input,.cs-field textarea,.cs-field select{font-size:16px;padding:9px 10px}.cs-field>span{font-size:11px}.cs-button{font-size:12px;padding:9px 11px}.cs-save-row .spacer{display:none}.cs-reference-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-asset-grid{gap:12px}.cm-segment{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr) 24px;gap:6px}.cm-cue{grid-template-columns:1fr 1fr;gap:8px}.cm-cue textarea{grid-column:1/-1}.cm-cue input{font-size:16px}.cs-heading>div{flex:1}.cs-heading>a{white-space:nowrap}.cs-library-item>button:first-child{font-size:12px}.cm-controls .cs-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Home: a canvas entry, compact tools, and media-led discovery. */
.studio-shell{--hm-sidebar:192px;--acc:#078cab;--acc-d:#06728b;--soft:#e6f4f7;--on-accent:#fff}
html[data-theme="dark"] .studio-shell{--bg:#121212;--surf:#1c1c1d;--hole:#242426;--line:#2c2c2f;--fg:#efeff1;--dim:#a0a0a5;--ph:#85858a;--acc:#27cbea;--acc-d:#6adaee;--soft:#17343b;--on-accent:#092b32}
.studio-shell #app>header{height:60px;padding:0 max(40px,calc((100vw - var(--hm-sidebar) - 1280px)/2))}
.studio-shell #app>header h1{font-size:12px}
.hm-sidebar{padding:22px 12px 14px;background:var(--bg)}
.hm-brand{font-size:27px;margin:0 8px 24px}
.hm-new{min-height:36px;padding:8px 12px;border:0;background:var(--acc);color:var(--on-accent);font-size:12px!important}
.hm-new:hover{background:var(--acc-d);opacity:1}
.hm-nav{margin-top:17px;gap:3px}
.hm-nav a{min-height:34px;padding:7px 10px;font-size:12px!important}
.hm-nav a[aria-current=page]{background:var(--hole);color:var(--fg)!important}
.hm-nav-divider{margin:12px 8px 9px}
.hm-nav-label{font-size:10px;padding:0 10px 6px}
.hm-sidebar-bottom{padding-top:24px}
.hm-update-link{display:flex;gap:8px;align-items:center;margin:0 10px 14px;font-size:12px;color:var(--dim)!important}
.hm-update-link[aria-current=page]{color:var(--acc)!important}
.hm-resume{border:0;background:transparent;padding:10px}
.hm-help{padding:16px 10px 2px}
.hm-main{padding:16px 40px 42px}
.hm-content{max-width:1280px}
.hm-start{margin:0 0 24px}
#pane-home .hm-canvas-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;width:100%;min-height:168px;padding:28px;border:1px solid var(--line);border-radius:8px;background-color:var(--surf);background-image:radial-gradient(circle,color-mix(in srgb,var(--fg) 10%,transparent) .7px,transparent .9px),linear-gradient(180deg,transparent,color-mix(in srgb,var(--fg) 4%,transparent));background-size:18px 18px,100% 100%;color:var(--fg);text-align:center;box-shadow:none;transition:border-color .18s}
#pane-home .hm-canvas-start:hover{border-color:color-mix(in srgb,var(--fg) 30%,var(--line))}
#pane-home .hm-canvas-start:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.hm-canvas-plus{display:grid;place-items:center;width:66px;height:40px;border:1px solid #dadddf;border-radius:8px;background:linear-gradient(#fff,#e7e9eb);color:#17191b;box-shadow:0 3px 12px #00000020;transition:transform .18s,box-shadow .18s}
.hm-canvas-plus .ui-icon{width:23px;height:23px}
.hm-canvas-start:hover .hm-canvas-plus{transform:translateY(-2px);box-shadow:0 5px 16px #00000030}
.hm-canvas-copy{font-size:13px;font-weight:550;line-height:1.5}
.hm-launcher{margin:0 0 32px}
.hm-tool-launchers{grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
.hm-tool-launchers>a{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;text-align:center;color:var(--dim)!important;font-size:12px}
.hm-tool-launchers>a:hover{color:var(--fg)!important}
.hm-tool-launchers .hm-tool-icon{display:grid;place-items:center;width:64px;height:44px;flex:0 0 44px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:8px;background:linear-gradient(145deg,var(--hole),var(--surf));color:var(--fg);box-shadow:inset 0 1px 0 #ffffff04}
.hm-tool-launchers>a:hover .hm-tool-icon{border-color:var(--acc);color:var(--acc)}
.hm-tool-launchers .hm-tool-icon .ui-icon{width:20px;height:20px}
.hm-section-heading{margin:28px 0 14px;min-height:22px;gap:12px}
.hm-section-heading h2{font-size:14px;line-height:1.5;font-weight:550}
.hm-section-heading>a{font-size:11px}
.hm-project-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hm-project{height:72px;flex-direction:row;align-items:center;padding:4px;gap:10px;background:transparent}
.hm-project-cover{width:62px;height:62px;flex:0 0 62px;aspect-ratio:auto;border:0;border-radius:6px;background:var(--surf)}
.hm-project-cover>.ui-icon{width:20px;height:20px}
.hm-project-text{padding:3px 48px 3px 0;gap:5px}
.hm-project-text b{font-size:12px;font-weight:500}
.hm-project-text time{font-size:11px}
.hm-project-actions{top:50%;transform:translateY(-50%);right:5px}
.hm-project-act{width:24px;height:24px}
.hm-empty{min-height:46px;padding:12px 0;border:0;font-size:12px;justify-content:flex-start}
.hm-empty>.ui-icon{width:18px;height:18px}
.hm-features{margin:28px 0 32px}
.hm-features .hm-section-heading{margin-top:0}
.hm-feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.hm-feature{display:block;min-width:0}
.hm-feature-art{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--hole)}
.hm-feature-art>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.hm-feature:hover img{transform:scale(1.035)}
.hm-feature-tag{position:absolute;left:10px;top:10px;padding:3px 6px;border-radius:3px;background:#11131865;color:#fff;font-size:10px;backdrop-filter:blur(8px)}
.hm-feature-label{display:flex;align-items:center;gap:6px;margin-top:10px}
.hm-feature-label b{flex:1;min-width:0;font-size:12px;font-weight:500;line-height:1.5}
.hm-feature-label .ui-icon{width:13px;height:13px;flex:0 0 13px;color:var(--dim);opacity:.65}
.hm-title-art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#fff7dc;text-shadow:0 2px 12px #00000070;font-family:"Songti SC","SimSun",serif;font-size:38px;font-weight:700}
.hm-title-art small{font-family:inherit;font-size:9px;font-weight:500}
.hm-content[data-view=home] .hm-discover-toolbar{display:flex}
.hm-discover{margin-top:30px}
.hm-curated{font-size:11px;color:var(--dim)}
.hm-discover-toolbar{gap:16px;margin-bottom:16px}
.hm-categories{gap:12px}
.hm-categories>button{border-radius:0;background:none!important;border-bottom:1px solid transparent;padding:6px 2px;min-height:30px;font-size:11px!important}
.hm-categories>button[aria-pressed=true]{border-bottom-color:var(--fg);color:var(--fg)}
.hm-search{min-height:32px;width:190px;padding:6px 10px;border-radius:8px;background:transparent}
.hm-search input{font-size:11px!important}
.hm-show-grid{gap:28px 18px}
.hm-show-art{aspect-ratio:16/10;border-radius:8px}
.hm-show-tag{top:9px;left:9px;font-size:10px;background:#14141685}
.hm-show-title{font-size:13px;font-weight:500;margin-top:11px}
.hm-show-caption{font-size:11px;margin-top:5px}
.hm-show-title::before{display:none}
.hm-footer{justify-content:flex-end;gap:22px;margin-top:38px}
.hm-footer>a:first-child{font-size:17px;font-weight:650;margin-right:auto}
.hm-release{position:static;display:block;height:auto;background:transparent;padding:24px 0 30px;border-bottom:1px solid var(--line);margin-bottom:26px}
.hm-release>span{font-size:12px;color:var(--acc)}
.hm-release h3{font-size:26px;font-weight:600;margin:10px 0 0}
.hm-update-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
.hm-update-grid article{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.hm-update-grid article>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.hm-update-grid article>div>span{font-size:10px;color:var(--dim)}
.hm-update-grid h3{font-size:17px;margin:7px 0 10px;font-weight:600}
.hm-update-grid p{font-size:12px;line-height:1.8;color:var(--dim);margin:0 0 14px}
.hm-update-grid a{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--acc)!important}
.hm-update-grid a .ui-icon{width:14px;height:14px}
@media(max-width:1180px){
  .hm-main{padding:16px 28px 36px}.studio-shell #app>header{padding:0 28px}
  .hm-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-feature-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px)/3);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none}
  .hm-feature{scroll-snap-align:start}
  .hm-tool-launchers{gap:12px 8px}.hm-tool-launchers .hm-tool-icon{width:56px}
  .hm-tool-launchers>a{font-size:11px}
  .hm-update-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .studio-shell{--hm-sidebar:176px}.hm-brand{font-size:25px}.hm-main{padding-inline:22px}.studio-shell #app>header{padding-inline:22px}
  .hm-tool-launchers{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px}
  .hm-feature-grid{grid-auto-columns:calc((100% - 14px)/2)}
  .hm-discover-toolbar{align-items:flex-start}.hm-categories{gap:6px 12px}.hm-search{width:150px}
}
.hm-account-icon{display:none}
@media(max-width:600px){
  .studio-shell{--hm-sidebar:0px}.studio-shell #app>header{padding:0 16px;height:60px}
  .hm-main{padding:18px 16px 30px}.hm-brand{font-size:28px}
  .hm-start{margin-bottom:22px}#pane-home .hm-canvas-start{min-height:148px;padding:24px;background-size:16px 16px,100% 100%}
  .hm-launcher{margin-bottom:26px}.hm-tool-launchers{gap:16px 10px}.hm-tool-launchers .hm-tool-icon{width:54px;height:40px;flex-basis:40px}
  .hm-tool-launchers>a{font-size:11px;gap:7px}.hm-tool-launchers .hm-tool-icon .ui-icon{width:19px;height:19px}
  .hm-section-heading{margin-top:24px;margin-bottom:13px}.hm-section-heading h2{font-size:14px}
  .hm-project-grid{grid-template-columns:1fr}.hm-content[data-view="home"] .hm-project-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none}
  .hm-content[data-view="home"] .hm-project-card{flex:0 0 86%;scroll-snap-align:start}.hm-project-text b{font-size:13px}
  .hm-features{margin:28px 0}.hm-feature-grid{grid-auto-columns:76%;gap:12px}.hm-feature-art{aspect-ratio:16/10}
  .hm-feature-label b{font-size:13px}.hm-curated{display:none}
  .hm-discover-toolbar{gap:12px}.hm-categories{gap:5px 12px}.hm-search{width:100%}
  .hm-show-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.hm-show-art{aspect-ratio:4/3}
  .hm-show-title{font-size:12px}.hm-show-caption{font-size:11px}
  .hm-footer{gap:14px}.hm-footer>span{display:none}
  .hm-update-grid article{grid-template-columns:100px minmax(0,1fr);gap:14px}.hm-update-grid h3{font-size:15px}.hm-release h3{font-size:22px}.hm-update-grid article>img{aspect-ratio:3/4}
  .cs-heading{flex-wrap:wrap}.cs-heading>div{flex-basis:100%}#cs-tool-switch{margin-left:0;max-width:none;flex:1;font-size:14px}
  .studio-shell .hm-mobile-brand{flex-shrink:0;white-space:nowrap}
  .studio-shell #account{flex:0 0 32px}
  .studio-shell #acctbtn{width:32px;height:32px;padding:0;border:0;background:transparent;justify-content:center}
  .studio-shell #acctbtn>span,.studio-shell #acctbtn>.ui-icon:not(.hm-account-icon){display:none}
  .studio-shell #acctbtn>.hm-account-icon{display:block;width:18px;height:18px}
  .studio-shell #acctpanel{position:fixed;top:66px;left:auto;right:12px;width:calc(100% - 24px);max-width:360px}
}
@media(prefers-reduced-motion:reduce){.hm-feature-art>img,.hm-canvas-plus,.hm-canvas-start{transition:none}.hm-canvas-start:hover .hm-canvas-plus{transform:none}}
.cs-edit-entry{max-width:920px;margin:20px auto 0}
.cs-edit-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.cs-edit-heading h3{font-size:16px;margin:0}
.cs-edit-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.cs-edit-project{width:100%;min-height:72px;display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--fg);cursor:pointer}
.cs-edit-project:hover,.cs-edit-project:focus-visible{border-color:var(--acc)}
.cs-edit-project .ui-icon{width:19px;height:19px;flex:none}
.cs-edit-project span{display:grid;min-width:0;flex:1;gap:4px}
.cs-edit-project b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.cs-edit-project small,.cs-edit-note{color:var(--dim);font-size:12px}
.cs-edit-note{margin:18px 0}
@media(max-width:680px){.cs-edit-projects{grid-template-columns:1fr}.cs-edit-heading{flex-wrap:wrap}}

/* ==== /css/director-entry.css ==== */
.de-entry{max-width:1120px;margin:0 auto;padding:10px 0 28px}
.de-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;color:var(--dim);font-size:12px}
.de-top>span,.de-top>a{display:flex;align-items:center;gap:8px}
.de-top a{color:var(--dim)!important;text-decoration:none}
.de-top .ui-icon{width:16px;height:16px}
.de-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;align-items:center}
.de-eyebrow{font-size:12px;color:var(--acc);letter-spacing:.08em}
.de-intro h2{font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.5;letter-spacing:-.04em;margin:14px 0 18px}
.de-intro>p{max-width:365px;font-size:13px;color:var(--dim);line-height:1.9;margin:0}
.de-benefits{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;color:var(--dim);font-size:11px}
.de-benefits>span{display:flex;align-items:center;gap:5px}.de-benefits .ui-icon{width:14px;height:14px}
.de-demo-wrap{min-width:0}
.de-demo{position:relative;aspect-ratio:16/10;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#171b22;color:#fff}
.de-backdrop,.de-demo-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.de-backdrop{opacity:.55}
.de-demo-shade{background:linear-gradient(180deg,#10151b30,#10151bc4)}
.de-demo-label{position:absolute;z-index:2;top:17px;left:19px;right:19px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#ffffffa6;letter-spacing:.07em}
.de-demo-label>span:first-child{padding:5px 8px;border:1px solid #ffffff30;border-radius:6px;background:#10151b44;color:#ffffffda}
.de-demo-content{position:absolute;inset:65px 24px 24px}
.de-demo-panel{position:absolute;inset:0;display:flex;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility .4s}
.de-demo[data-step="0"] .de-story,.de-demo[data-step="1"] .de-refs,.de-demo[data-step="2"] .de-shots{opacity:1;visibility:visible;transform:none}
.de-story{inset:auto 0 0;max-width:370px;padding:18px 20px;border:1px solid #ffffff26;border-radius:12px;background:#15191edb;box-shadow:0 10px 25px #0002}
.de-story>span{font-size:10px;color:#dac5ee;letter-spacing:.08em}
.de-story p{font-size:15px;line-height:1.9;margin:10px 0 15px;color:#f5f3f7}
.de-story small{font-size:10px;color:#b9b7bf}
.de-refs{display:grid;grid-template-columns:1fr 1.35fr;gap:12px;align-content:center;align-items:start}
.de-refs>div{background:#26292eee;border:1px solid #ffffff26;border-radius:10px;overflow:hidden}
.de-refs img{display:block;width:100%;height:130px;object-fit:cover}.de-refs>div:first-child img{object-position:50% 35%}
.de-refs span{display:block;padding:9px 10px;font-size:10px;color:#e3e0e7}
.de-refs p,.de-shots>p{grid-column:1/-1;color:#d5d2dc;font-size:11px;line-height:1.7;margin:3px 0 0}
.de-shot-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.de-shot-heading strong{font-size:14px;font-weight:500}.de-shot-heading>span{font-size:10px;color:#d5d2dc}
.de-shot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.de-shot{background:#24252bee;border:1px solid #ffffff30;border-radius:8px;overflow:hidden}
.de-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.de-shot>span{display:flex;gap:5px;align-items:center;font-size:9px;white-space:nowrap;padding:9px 6px;color:#e8e5ed}
.de-shot b{font-size:9px;font-weight:500;color:#b8a4cd}.de-shots>p{margin-top:12px}
.de-demo-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px}
.de-phases{display:flex;gap:16px}.de-phases button{display:flex;align-items:center;gap:5px;padding:4px 0;border:0;background:none;color:var(--dim);font:inherit;font-size:11px;cursor:pointer}
.de-phases button>span{font-size:9px;color:var(--dim);opacity:.6}
.de-phases button[aria-pressed="true"]{color:var(--fg)}.de-phases button[aria-pressed="true"]>span{color:var(--acc);opacity:1}
.de-play{width:27px;height:27px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--dim);cursor:pointer;flex-shrink:0}
.de-play .ui-icon{width:12px;height:12px}
.de-cast-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:44px 0 18px}
.de-cast-heading h3{margin:0 0 7px;font-size:18px;font-weight:550}.de-cast-heading p{margin:0;color:var(--dim);font-size:12px}
.de-custom{display:flex;align-items:center;gap:5px;padding:7px 9px;border:0;background:transparent;color:var(--dim);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}
.de-custom .ui-icon{width:14px;height:14px}
.de-cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.de-role{min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:18px;border:1px solid var(--line);border-radius:13px;background:var(--surf);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.de-role:hover{border-color:var(--dim);transform:translateY(-2px)}
.de-role[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,var(--surf))}
.de-role-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:15px}
.de-role-top>img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.de-role-check{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;color:transparent;transition:background .2s}
.de-role-check .ui-icon{width:11px;height:11px}.de-role[aria-pressed="true"] .de-role-check{background:var(--acc);border-color:var(--acc);color:var(--on-accent)}
.de-role>strong{font-size:15px;font-weight:550;margin-bottom:9px}
.de-role-note{font-size:11px;line-height:1.8;color:var(--dim);flex:1;white-space:normal;overflow-wrap:anywhere}
.de-role>strong,.de-selection>div{min-width:0;white-space:normal;overflow-wrap:anywhere}
.de-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:17px}.de-tags>span{padding:3px 5px;border-radius:4px;background:var(--hole);color:var(--dim);font-size:9px}
.de-selection{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0 0;margin-top:24px;border-top:1px solid var(--line)}
.de-selection strong{font-size:13px;font-weight:500}.de-selection p{font-size:11px;color:var(--dim);line-height:1.8;margin:7px 0 0;max-width:680px}
.de-enter{display:flex;align-items:center;justify-content:center;gap:18px;flex-shrink:0;min-height:44px;padding:11px 18px;border:1px solid var(--acc);border-radius:9px;background:var(--acc);color:var(--on-accent);font:inherit;font-size:12px;font-weight:550;cursor:pointer}
.de-enter .ui-icon{width:15px;height:15px}.de-enter:disabled{opacity:.42;cursor:default}
#de-error{min-height:18px;font-size:12px;color:var(--bad);margin:10px 0 0}
.de-entry button:focus-visible,.de-entry a:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
@media(min-width:1440px){.de-hero{gap:70px}.de-entry{padding-top:20px}}
@media(max-width:1000px){.de-hero{gap:24px}.de-intro h2{font-size:30px}.de-role{padding:14px}.de-tags{gap:4px}.de-story p{font-size:13px}.de-demo-content{inset:52px 16px 16px}.de-refs img{height:105px}}
@media(max-width:760px){.de-entry{padding-top:0}.de-top{margin-bottom:23px}.de-hero{grid-template-columns:1fr;gap:25px}.de-intro h2{font-size:30px;margin:10px 0}.de-intro>p{max-width:500px}.de-benefits{margin-top:15px}.de-demo{aspect-ratio:16/10}.de-demo-content{inset:58px 20px 20px}.de-refs img{height:130px}.de-cast-heading{margin-top:30px}.de-cast{grid-template-columns:repeat(2,minmax(0,1fr))}.de-selection{align-items:stretch;flex-direction:column;gap:16px}.de-enter{align-self:stretch}.de-cast-heading h3{font-size:16px}.de-phases{gap:12px}}
@media(max-width:400px){.de-demo-content{inset:50px 12px 12px}.de-story{padding:12px}.de-story p{font-size:12px;margin:8px 0}.de-shot-heading{margin-bottom:8px}.de-shot-heading strong{font-size:12px}.de-shot-row{gap:5px}.de-shot>span{font-size:8px;padding:6px 3px}.de-shots>p{font-size:10px;margin-top:8px}.de-refs img{height:98px}.de-role{padding:12px}.de-role-top>img{width:46px;height:46px}.de-custom{font-size:11px;padding:5px}}
@media(prefers-reduced-motion:reduce){.de-demo-panel,.de-role,.de-role-check{transition:none}.de-role:hover{transform:none}}

/* ==== /css/character-studio.css ==== */
/* Image character workspace: source-preserving face controls and reusable accessories. */
.ch-layout{display:grid;grid-template-columns:180px minmax(280px,1fr) 260px;gap:24px;align-items:start}
.ch-editor{max-width:none;min-width:0}.ch-library,.ch-inspector{min-width:0}.ch-library{border-right:1px solid var(--line);padding-right:16px}.ch-inspector{border-left:1px solid var(--line);padding-left:20px}
.ch-library-heading{display:flex;justify-content:space-between;font-size:13px;font-weight:600;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.ch-library-heading span{font-weight:400;color:var(--dim);font-size:11px}
.ch-materials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.ch-materials button{min-width:0;padding:12px 2px;border:1px solid var(--line);border-radius:9px;background:var(--surf);color:var(--fg);font:inherit;font-size:11px;cursor:pointer}.ch-material-icon{display:grid;place-items:center;height:30px;margin-bottom:5px}.ch-material-icon svg{width:23px;height:23px}.ch-materials button:hover:not(:disabled){border-color:var(--acc);background:var(--hole)}
.ch-topline{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px}.ch-name{flex:1;margin:0}.ch-name input{font-size:15px}.ch-topline>.cs-button{margin-bottom:1px;flex-shrink:0}
.ch-import-actions,.ch-inline{display:flex;gap:8px;flex-wrap:wrap}.ch-import-actions{margin-bottom:16px}.ch-steps{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--dim);margin:20px 0 12px}
.ch-stage{position:relative;min-height:440px;padding:26px;display:flex;justify-content:center;align-items:center;background:var(--hole);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ch-empty{text-align:center;max-width:390px;padding:65px 16px}.ch-empty>.ui-icon{width:44px;height:44px;color:var(--acc);margin-bottom:12px}.ch-empty h3{font-size:21px;font-weight:600;margin:10px 0}.ch-empty p{font-size:13px;line-height:1.9;color:var(--dim);margin:12px 0 24px}.ch-empty small{display:block;color:var(--dim);font-size:11px;margin-top:18px;line-height:1.7}
#ch-picture{position:relative;max-width:100%;background:repeating-conic-gradient(#ecebed 0 25%,#f6f5f7 0 50%) 0/18px 18px;box-shadow:0 7px 28px #0000000a}#ch-picture canvas{display:block;width:100%;height:100%}#ch-overlay,#ch-anchors{position:absolute;inset:0;width:100%;height:100%}#ch-overlay{pointer-events:none}#ch-anchors{touch-action:none}
.ch-anchor{position:absolute;width:16px;height:16px;border:2px solid white;border-radius:50%;background:var(--acc);box-shadow:0 0 0 1px var(--acc);transform:translate(-50%,-50%);padding:0;cursor:move}.ch-anchor span{position:absolute;left:19px;top:-4px;font-size:10px;line-height:20px;white-space:nowrap;border-radius:4px;background:#ffffffeb;color:#4b405b;padding:0 5px;pointer-events:none}.ch-anchor:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.ch-view-label{position:absolute;top:10px;left:12px;padding:5px 9px;background:var(--surf);color:var(--dim);border:1px solid var(--line);border-radius:6px;font-size:10px}
.ch-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:12px}.ch-spacer{flex:1}.ch-toolbar .cs-button{padding:8px 10px;font-size:11px}.ch-toolbar button[aria-pressed=true]{border-color:var(--acc);color:var(--acc)}
.ch-hint{font-size:11px;line-height:1.8;color:var(--dim);margin:10px 0}.ch-inspector-heading{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px}.ch-inspector-heading h3{font-size:15px;margin:0;font-weight:600}.ch-inspector-heading span{font-size:10px;color:var(--dim)}
.ch-tabs{display:flex;padding:3px;background:var(--hole);border-radius:8px;gap:3px}.ch-tabs button{flex:1;border:0;border-radius:6px;padding:8px 5px;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}.ch-tabs button[aria-pressed=true]{background:var(--surf);color:var(--fg);box-shadow:0 1px 4px #00000009}
.ch-section{border-bottom:1px solid var(--line);padding:17px 0}.ch-section h4{font-size:12px;font-weight:600;margin:0 0 10px}.ch-section>.cs-button{width:100%}.ch-section .cs-button{font-size:11px;padding:8px 10px}.ch-inline>.cs-button{flex:1;white-space:nowrap}
.ch-slider{display:block;margin:14px 0;font-size:11px;color:var(--dim)}.ch-slider>span{display:flex;justify-content:space-between;margin-bottom:6px}.ch-slider output{font-variant-numeric:tabular-nums}.ch-slider input{width:100%;accent-color:var(--acc);cursor:pointer}.ch-layout button:disabled,.ch-layout input:disabled{opacity:.42;cursor:default}
.ch-accessory{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.ch-accessory-title,.ch-color{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:12px 0}.ch-accessory-title strong{font-weight:500}.ch-accessory-title button{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:11px}.ch-color input{width:36px;height:26px;padding:2px;border:1px solid var(--line);border-radius:5px;background:var(--surf)}
.ch-versions{margin:12px 0}.ch-versions>div{display:flex;margin:6px 0;gap:4px}.ch-versions button{padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--fg);cursor:pointer;text-align:left;font-size:11px}.ch-versions button:first-child{flex:1;min-width:0}
.ch-proposal{border:1px solid var(--line);background:var(--surf);padding:18px;border-radius:10px;margin-top:20px}.ch-proposal h3{font-size:15px;margin:0 0 10px}.ch-proposal p{font-size:12px;color:var(--dim)}.ch-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.ch-comparison figure{margin:0}.ch-comparison img{width:100%;max-height:320px;object-fit:contain;background:var(--hole);border-radius:6px}.ch-comparison figcaption{font-size:11px;text-align:center;color:var(--dim);margin-top:8px}.ch-layout [hidden]{display:none!important}
@media(max-width:1250px){.ch-layout{grid-template-columns:145px minmax(260px,1fr) 225px;gap:16px}.ch-inspector{padding-left:15px}.ch-stage{padding:20px 12px}.ch-toolbar .ch-spacer{display:none}}
@media(max-width:1050px){.ch-layout{grid-template-columns:145px minmax(0,1fr)}.ch-inspector{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:20px 0}.ch-inspector #ch-inspector-body{max-width:560px}.ch-stage{min-height:380px}}
@media(max-width:640px){.ch-layout{display:flex;flex-direction:column;gap:22px}.ch-editor{order:0;width:100%}.ch-inspector{order:1;width:100%}.ch-library{order:2;width:100%;border:0;border-top:1px solid var(--line);padding:20px 0}.ch-materials{grid-template-columns:repeat(4,minmax(0,1fr))}.ch-stage{min-height:310px;padding:25px 12px}.ch-empty{padding:38px 5px}.ch-topline{gap:8px}.ch-name input{font-size:16px}.ch-topline .cs-button{padding:10px}.ch-toolbar .cs-button{flex:1}.ch-steps{font-size:10px}.ch-anchor span{font-size:9px;left:12px}.ch-section{padding:18px 0}.ch-inspector-heading{margin-bottom:14px}}
.ch-material-icon svg{width:62px;max-width:100%;height:30px}.ch-material-icon{color:var(--acc)}

/* ==== /css/home-motion.css ==== */
/* 首页卡片的动态封面（js/home-motion.js）：视频叠在首帧图上，标签、片头字照旧盖在最上面 */
.hm-feature-art>video.hm-motion,.hm-show-art>video.hm-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;pointer-events:none;opacity:0;transition:opacity .35s ease,transform .35s ease}
.hm-feature-art>video.hm-motion.is-playing,.hm-show-art>video.hm-motion.is-playing{opacity:1}
.hm-feature-art>.hm-feature-tag,.hm-feature-art>.hm-title-art,.hm-show-art>.hm-show-tag,.hm-show-art>.hm-show-arrow{z-index:1}
.hm-feature:hover .hm-feature-art>video.hm-motion{transform:scale(1.03)}
.hm-show:hover .hm-show-art>video.hm-motion{transform:scale(1.025)}
video.hm-preview-image{background:#0b0d0e}
@media(prefers-reduced-motion:reduce){.hm-feature-art>video.hm-motion,.hm-show-art>video.hm-motion{transition:opacity .18s ease!important}}

/* ==== /css/creation.css ==== */
/* Shared studio navigation and focused creation surfaces. */
.hm-sidebar a{color:inherit;text-decoration:none}
.hm-sidebar button,.hm-notice button{font:inherit;cursor:pointer}
.toolson .ct-page{margin-left:var(--hm-sidebar);padding:0 28px 32px}
.ct-heading{max-width:1520px;margin:0 auto;display:flex;align-items:center;gap:12px;min-height:80px;padding:6px 0 20px}
.ct-heading-icon{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;background:var(--surf);color:var(--acc)}
.ct-heading-icon>.ui-icon{width:23px;height:23px}.ct-audio-icon{color:#91c7ab}
.ct-eyebrow{display:block;font-size:10px;color:var(--dim);margin-bottom:1px}
.ct-heading h2{margin:0;font-size:21px;font-weight:650;line-height:1.45}
.ct-model{align-self:center;padding:3px 8px;border:1px solid var(--line);border-radius:4px;color:var(--dim);font-size:10px;margin-left:6px}
.ct-workspace{margin-left:auto;font-size:11px;background:transparent;min-height:34px}.ct-workspace>.ui-icon{width:15px;height:15px}
.ct-mobile-views{display:none}
.ct-page .ct-layout{max-width:1520px;grid-template-columns:340px minmax(0,1fr);gap:28px;padding:0;margin:0 auto}
/* overflow 用 clip 不用 hidden：hidden 是个「没有滚动条的滚动容器」，任何一次
   .focus() / scrollIntoView（点开关、复用提示词、切页签）都能把它滚上去，
   而它没滚动条，用户滚不回来——标题和输入框就这么没了。clip 压根不建滚动容器。
   撑出溢出的那个 bug 已在 form.css 修掉，这里是兜底：以后再有元素溢出也不会坍。 */
/* 高度要按「还没滚动时」的位置算：那时面板顶在页面标题下面（比 sticky 的 top 低 66px），
   按 sticky 之后的位置算出来的 88px 会让面板底下出界 48px，
   「生成视频」被视口切掉一截，非得先滚一下页面才点得到。 */
.ct-page .ct-compose{top:calc(var(--hm-notice) + 70px);max-height:calc(100dvh - var(--hm-notice) - 144px);padding:0;overflow:clip;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--surf);box-shadow:none}
.ct-compose-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.ct-compose-heading h3{margin:0;font-size:13px;font-weight:600}.ct-compose-heading>span{color:var(--dim);font-size:9px}
/* 唯一负责滚动的那一层：flex:1 让它吃掉标题条和提交条以外的全部高度，
   scrollbar-gutter 预留槽位，免得内容一长就整栏横向抖一下。 */
.ct-compose-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dim) 42%,transparent) transparent;scrollbar-gutter:stable;padding:18px;min-height:0}
.ct-compose-scroll::-webkit-scrollbar{width:9px}
.ct-compose-scroll::-webkit-scrollbar-track{background:transparent}
.ct-compose-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dim) 42%,transparent);border-radius:99px;border:2px solid var(--surf)}
.ct-page .ct-prompt-label{display:flex;align-items:center;margin-top:0;gap:3px}
.ct-char-count{margin-left:auto;color:var(--dim);font-size:10px;font-weight:400}
.ct-compose label{font-size:11px;font-weight:500;margin-top:16px;margin-bottom:7px}
.ct-compose input[type=text],.ct-compose input[type=number],.ct-compose textarea,.ct-compose select{background:var(--bg);border-color:var(--line);border-radius:5px;box-shadow:none;font-size:12px;padding:9px 10px}
.ct-compose select{height:36px;padding-right:28px;text-overflow:ellipsis}.ct-compose .selwrap::after{right:12px;width:6px;height:6px}
.ct-compose textarea{min-height:136px;line-height:1.8}.ct-compose textarea:focus{outline:1px solid var(--acc);outline-offset:0}
.ct-compose #mlyrics{min-height:104px}.ct-compose #ttsdesc,.ct-compose #ttsreftext{min-height:94px}
.ct-compose .grid2{gap:10px}.ct-compose .grid2>div{display:flex;flex-direction:column}.ct-compose .grid2 label{margin-top:16px}
.ct-compose .chips{gap:4px;flex-wrap:nowrap}.ct-compose .chips button{background:transparent;padding:4px 0;font-size:10px;box-shadow:none;min-height:25px}
.ct-compose .chips button.on{background:var(--soft);border-color:var(--acc)}
.ct-presets{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.ct-presets>button{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:4px 7px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--dim);font:inherit;font-size:10px;cursor:pointer}
.ct-presets>button:hover{border-color:var(--dim);color:var(--fg)}.ct-presets .ui-icon{width:12px;height:12px}
.ct-section{padding-top:18px;margin-top:20px;border-top:1px solid var(--line)}
.ct-section>h3{margin:0 0 14px;font-size:12px;font-weight:600}.ct-section>h3+label{margin-top:0}
.ct-section>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:12px;font-weight:550}
.ct-section>summary::-webkit-details-marker{display:none}.ct-section>summary>.ui-icon{width:15px;height:15px;color:var(--dim)}
.ct-section>summary small{color:var(--dim);font-size:10px;font-weight:400;margin-left:auto}
.ct-section .ct-chevron{margin-left:auto;width:13px;height:13px;transition:transform .15s}.ct-section[open]>summary>.ct-chevron{transform:rotate(90deg)}
.ct-tier-detail{margin-top:8px;color:var(--dim);font-size:10px}.ct-tier-detail summary{cursor:pointer;width:max-content}.ct-tier-detail .subhint{font-size:11px;margin-bottom:0}
.ct-compose #durhint{font-size:10px!important;line-height:1.7;margin-bottom:0}
.ct-compose .seedrow .iconbtn{width:36px;flex:0 0 36px;padding:0;border:1px solid var(--line);border-radius:5px;box-shadow:none;background:var(--bg)}
.ct-compose .opt{font-size:11px}.ct-compose .opt .q{margin-left:auto}.ct-compose .q{box-shadow:none;background:var(--hole)}
.ct-compose .refs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ct-compose .slot{border-radius:5px;background:var(--bg);max-height:96px}
.ct-compose .frow,.ct-compose .grow{border:1px solid var(--line);border-radius:5px;box-shadow:none;background:var(--bg);padding:8px;font-size:11px}
.ct-compose .fadd{min-height:44px;border-style:dashed}.ct-compose .fi,.ct-compose .gkind{box-shadow:none;background:var(--hole);border-radius:3px}
.ct-compose .frow .fx,.ct-compose .frow .tg{box-shadow:none;background:var(--hole);border-radius:4px;padding:3px 6px}
.ct-compose .subhint,.ct-compose label .hint,.ct-compose .seedlock{font-size:10px;color:var(--dim)}
.ct-submit{flex:0 0 auto;border-top:1px solid var(--line);background:var(--surf);padding:14px 18px 12px}
.ct-submit .go{margin-top:0;min-height:42px;font-size:12px;background:var(--acc);color:var(--on-accent);border-radius:5px}
.ct-submit .go:disabled{background:var(--hole);color:var(--dim)}
.ct-submit .est{font-size:10px;margin-top:8px;min-height:0;overflow-wrap:anywhere}.ct-submit .est:empty{display:none}
/* 音频页三种模式各自带提交按钮，按钮长在滚动区里面。让它黏在滚动区底边，
   和视频页那颗固定的「生成视频」看齐——否则表单一长（克隆音色展开后近两屏）
   按钮就滚没了，人以为页面坏了。 */
.ct-compose-scroll .ct-submit{position:sticky;bottom:-18px;z-index:3;margin:20px -18px -18px}
/* 配音的结果区排在按钮后面，负的下外边距会压它 18px，补回来 */
.ct-compose-scroll .ct-submit + *{margin-top:32px}
.ct-page .ct-audio-modes{flex:0 0 auto;width:calc(100% - 36px);margin:14px 18px 0;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:5px}
.ct-page .ct-audio-modes .tab{gap:5px;padding:7px 0;font-size:11px;min-height:32px;border-radius:3px;box-shadow:none}
.ct-page .ct-audio-modes .tab .ui-icon{width:14px;height:14px}.ct-page .ct-audio-modes .tab.on{background:var(--hole);color:var(--fg)}
.ct-page .warnbox{border-left:2px solid var(--warn);border-radius:0;background:transparent;box-shadow:none;font-size:11px;padding:2px 0 2px 10px}
.ct-page #ttsclonewrap{background:transparent;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;box-shadow:none}
.ct-page .go.sub{box-shadow:none;background:var(--hole);border:1px solid var(--line);color:var(--fg);font-size:11px}
.ct-page .ttsout{box-shadow:none;border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:10px}
.ct-results{min-width:0}.ct-results-heading{display:flex;align-items:center;gap:8px;min-height:38px;margin-bottom:12px}
.ct-results-heading h3{flex:1;margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px}.ct-results-heading h3>span{font-size:10px;color:var(--dim);font-weight:400;padding:1px 6px;background:var(--surf);border:1px solid var(--line);border-radius:4px}
.ct-history-caption{font-size:10px;color:var(--dim)}.ct-results-heading .iconbtn{width:30px;height:30px;border:1px solid var(--line);background:transparent}
.ct-results-heading .iconbtn .ui-icon{width:14px;height:14px}.ct-results-heading #clearall:hover,.ct-results-heading #aclearall:hover{color:var(--bad)}
.ct-results-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.ct-filters{display:flex;align-items:center;gap:3px}.ct-filters>button{border:0;background:transparent;border-radius:4px;color:var(--dim);font:inherit;font-size:11px;padding:5px 8px;min-height:28px;cursor:pointer}
.ct-filters>button[aria-pressed=true]{color:var(--fg);background:var(--hole)}.ct-filters>button:hover{color:var(--fg)}
.ct-search{display:flex;align-items:center;gap:7px;min-height:30px;width:170px;flex:1 1 130px;margin:0 0 0 auto!important;padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:var(--surf);color:var(--dim)}
.ct-search:focus-within{border-color:var(--acc)}.ct-search .ui-icon{width:13px;height:13px}.ct-search input{width:100%;color:var(--fg);background:transparent;border:0;outline:none;font:inherit;font-size:11px;padding:0}
.ct-results-toolbar .ct-kind-filter{width:100px;min-height:30px;padding:4px 6px;font-size:11px;border-radius:5px;background:var(--surf);appearance:auto}
.ct-page .ct-queue{padding:12px 0 14px;margin-bottom:18px}.ct-queue .qtitle{display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:6px}.ct-queue .dot{width:6px;height:6px}.ct-queue .qtitle>span:last-child{margin-left:auto;color:var(--dim)}
.ct-queue .qrow{gap:8px;flex-wrap:wrap;padding:8px 0}.ct-queue .qnum{border:1px solid var(--line);box-shadow:none;border-radius:4px;width:23px;height:23px;font-size:10px}
.ct-queue .qtext{font-size:11px;flex-basis:110px}.ct-queue .qeta,.ct-queue .qdur{font-size:10px}.ct-queue .qx{box-shadow:none;background:var(--hole);border-radius:4px}
.ct-page .cards,.ct-page .acards{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));column-gap:16px}
.ct-page .card,.ct-page .acard{padding:0;background:var(--surf);border-color:var(--line);border-radius:7px;box-shadow:none}
.ct-page .thumb{border-radius:6px 6px 0 0;box-shadow:none;background:var(--hole);max-height:min(52vh,440px)}
.ct-page .thumb img,.ct-page .thumb video{background:#141516}.ct-page .cbody{padding:12px;gap:10px}.ct-page .cp{font-size:12px;line-height:1.7;opacity:1}
.ct-page .cmeta{gap:7px;font-size:10px}.ct-page .cmeta .st{background:var(--hole);box-shadow:none;padding:2px 6px;border-radius:4px;font-size:9px}
.ct-page .cmeta .m-size{font-size:10px}.ct-page .cmeta .m-seed{box-shadow:none;font-size:9px;padding:2px 5px;background:var(--bg);border-radius:3px}
.ct-page .cmeta .del,.ct-page .cmeta .cancel,.ct-page .m-dl .enh{box-shadow:none;background:var(--hole);border-radius:4px;font-size:10px;padding:3px 7px}
.ct-page .m-dl a{color:var(--acc);font-size:10px;text-decoration:none}.ct-page .abody{padding:14px;display:flex;flex-direction:column;gap:12px}.ct-page .ap{margin:0;font-size:12px;line-height:1.7}
.ct-page .acard .media{margin:0}.ct-page .acard audio{width:100%;height:38px}.ct-page .acard video{width:100%;max-height:340px}.ct-page .acard .await{font-size:11px;min-height:58px;padding:16px 0;color:var(--dim)}
.ct-reuse{border:0;background:transparent;color:var(--dim);padding:3px;display:grid;place-items:center;cursor:pointer;border-radius:4px}.ct-reuse .ui-icon{width:13px;height:13px}.ct-reuse:hover{color:var(--acc);background:var(--hole)}
.ct-page .cards>.empty,.ct-page .acards>.empty{display:none}
.ct-empty{min-height:340px;padding:58px 12px 28px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center}
.ct-empty-icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--dim)}.ct-empty-icon .ui-icon{width:28px;height:28px}
.ct-empty h3{font-size:13px;font-weight:450;color:var(--dim);margin:0}.ct-empty>.mini{font-size:11px;background:transparent}
.ct-starters{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(440px,100%);margin-top:12px}
.ct-starters>button{border:1px solid var(--line);padding:0;border-radius:6px;overflow:hidden;background:var(--surf);color:var(--fg);font:inherit;cursor:pointer;text-align:left}
.ct-starters img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}.ct-starters>button>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;font-size:11px}.ct-starters .ui-icon{width:13px;height:13px}.ct-starters>button:hover{border-color:var(--dim)}
.ct-sound-presets{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:12px}.ct-sound-presets>button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surf);border-radius:5px;padding:9px 11px;color:var(--dim);font:inherit;font-size:11px;cursor:pointer}.ct-sound-presets .ui-icon{width:16px;height:16px}
.ct-load-error{display:flex;align-items:center;justify-content:space-between;gap:12px;border-left:2px solid var(--bad);padding:8px 12px;margin-bottom:16px;color:var(--bad);font-size:12px;background:var(--surf)}.ct-load-error .mini{font-size:11px;min-height:28px;padding:4px 9px}
.studio-shell .fw-modal-box{background:var(--surf);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 64px #00000055}
.studio-shell .fw-modal-body .fw-m-grp{border-radius:0;box-shadow:none;background:transparent;padding:16px 0;border-top:1px solid var(--line)}
.studio-shell .fw-modal-body input,.studio-shell .fw-modal-body textarea{background:var(--bg);border:1px solid var(--line);border-radius:5px;box-shadow:none;color:var(--fg);font-size:12px}
@media(min-width:1700px){.ct-page .ct-layout{grid-template-columns:370px minmax(0,1fr);gap:32px}}
@media(max-width:1200px){.toolson .ct-page{padding:0 22px 28px}.ct-page .ct-layout{grid-template-columns:310px minmax(0,1fr);gap:20px}.ct-search{width:100%;flex-basis:100%}.ct-results-toolbar .ct-kind-filter{flex:1}.ct-results-toolbar:has(.ct-kind-filter) .ct-search{flex-basis:130px}}
@media(max-width:940px){.ct-page .ct-layout{grid-template-columns:minmax(0,1fr)}.ct-page .ct-compose{position:static;max-height:none;width:100%;border-radius:6px}.ct-compose-scroll{overflow:visible}.ct-compose .ct-submit{position:sticky;bottom:0;z-index:2}.ct-mobile-views{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:6px;margin-bottom:18px;background:var(--surf)}.ct-mobile-views>button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:33px;padding:5px;border:0;border-radius:3px;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}.ct-mobile-views>button[aria-pressed=true]{background:var(--hole);color:var(--fg)}.ct-mobile-views .ui-icon{width:15px;height:15px}.ct-search{flex-basis:140px}.ct-empty{min-height:300px}.ct-heading{min-height:72px;padding-bottom:16px}.ct-page .cards,.ct-page .acards{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}}
@media(max-width:600px){.toolson .ct-page{padding:0 14px 24px}.ct-heading{gap:9px;min-height:76px}.ct-heading-icon{width:35px;height:35px;flex-basis:35px;border-radius:6px}.ct-heading-icon .ui-icon{width:20px;height:20px}.ct-heading h2{font-size:18px}.ct-eyebrow{font-size:9px}.ct-model{font-size:9px;margin-left:0;padding:2px 5px}.ct-workspace{padding:7px;font-size:10px;min-height:32px}.ct-workspace>span{display:none}.ct-workspace>.ui-icon{width:17px;height:17px}.ct-history-caption{font-size:9px}.ct-results-heading h3{font-size:13px}.ct-filters>button{font-size:10px;padding:5px 7px}.ct-results-toolbar{gap:8px}.ct-search{flex-basis:100%}.ct-results-toolbar:has(.ct-kind-filter) .ct-search{flex-basis:150px}.ct-results-toolbar .ct-kind-filter{max-width:115px}.ct-queue .qeta{flex:1 1 100px;white-space:normal}.ct-compose-heading{padding:14px 16px}.ct-compose-scroll{padding:16px}.ct-compose-scroll .ct-submit{margin-left:-16px;margin-right:-16px;margin-bottom:-16px}.ct-compose .ct-submit{padding:12px 16px}.ct-compose input[type=text],.ct-compose input[type=number],.ct-compose textarea,.ct-compose select{font-size:14px}.ct-compose label{font-size:12px}.ct-presets>button{font-size:11px;min-height:29px}.ct-empty{padding-top:40px}.ct-starters{gap:9px}.ct-starters>button>span{font-size:10px}.ct-page .ct-audio-modes .tab{min-height:36px;font-size:12px}}

/* 历史还没拉回来（.ct-loading）：空状态换成一排占位卡片，别和「还没有作品」长得一样，见 skeleton.css */

/* ==== /css/objects.css ==== */
/* 物品建模页签：选图格、模型卡片、三维预览器。其余复用 creation.css（ct-*）和 cards.css。 */
.ct-objects-icon{color:#c9a96b}
.oimgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.oimg{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:5px;background:var(--bg);overflow:hidden}
.oimg img{width:100%;height:100%;object-fit:contain;display:block;background:var(--hole)}
.oimg .fs{position:absolute;left:4px;bottom:4px;font-size:9px;color:#fff;background:rgba(0,0,0,.55);padding:1px 5px;border-radius:3px}
.oimg .fx{position:absolute;right:3px;top:3px;width:20px;height:20px;border:0;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font:inherit;font-size:13px;line-height:1;cursor:pointer}
.oimg.oadd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-style:dashed;color:var(--dim);cursor:pointer;font-size:11px}
.oimg.oadd span{font-size:20px;line-height:1}.oimg.oadd small{font-size:10px}
.oimg.oadd:hover,.oimg.oadd.drag{border-color:var(--acc);color:var(--fg)}
.ocard .thumb{aspect-ratio:1/1;max-height:min(60vh,420px)}
.ocard .thumb img{object-fit:contain;background:#fff}
.ocard .play.o3d span{font-size:13px;font-weight:700;color:var(--acc-d)}
.ocard .play.o3d span::after{display:none}
.oturn{position:absolute;right:8px;bottom:8px;z-index:2;border:0;border-radius:99px;padding:4px 10px;font:inherit;font-size:11px;
  color:#fff;background:rgba(0,0,0,.55);cursor:pointer}
.oturn:hover{background:rgba(0,0,0,.8)}
.ocard .thumb video{background:#fff}
.oviewer{position:relative;width:100%;height:100%;min-height:240px;background:radial-gradient(ellipse at center,#1b212b 0%,#0d1014 100%)}
.oviewer canvas{width:100%;height:100%;display:block;touch-action:none}
.oviewer-status{position:absolute;left:8px;bottom:6px;font-size:11px;color:#cfd6e0;background:rgba(13,16,20,.7);padding:2px 8px;border-radius:4px;transition:opacity .6s;pointer-events:none}
.oviewer-status.fade{opacity:.35}.oviewer-status.bad{color:#ff8080;opacity:1}
.ct-page .ct-objects-modes .tab{padding:7px 0;font-size:11px}

/* ==== /css/home-tactile.css ==== */
/* The site skin: home, the creative tools and the standalone video / audio / object pages (.ct-page).
   The node canvas keeps its own theme. Page-specific alignment for .ct-page lives in ct-site.css. */
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])){
  --bg:#f7f7f9;--surf:#fff;--hole:#eff0f3;--line:#e4e5e9;
  --fg:#292a31;--dim:#62636d;--ph:#797a85;
  --acc:#765398;--acc-d:#60417f;--soft:#efe9f5;--on-accent:#fff;
  --ht-edge:#e1e1e7;--ht-rim:#ffffff;--ht-ink:#b6a3ca;
  --ht-raised:0 2px 8px #2521320a,inset 0 1px 0 #fff;
  --ht-pressed:inset 0 1px 3px #29344313,0 1px 0 #fff;
  --ht-paper:#fcfcfd;--ht-paper-back:#e4e7eb;--ht-grid:#30343a0a;
  --ht-sidebar:#f0f0f3;--ht-tag:#fbfbfbed;--ht-tag-fg:#30343a;
  --ht-red:#aa6679;--ht-green:#568a72;--ht-violet:#765398;--ht-gold:#96723d;--ht-blue:#527b91;
  background:var(--bg);
}
html[data-theme="dark"] body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])){
  --bg:#26262b;--surf:#303137;--hole:#383a41;--line:#41434b;
  --fg:#f4f2f6;--dim:#c0bec8;--ph:#a7a6b1;
  --acc:#dcbceb;--acc-d:#e9d1f3;--soft:#44394e;--on-accent:#302638;
  --ht-edge:#494a53;--ht-rim:#ffffff0d;--ht-ink:#8c7799;
  --ht-raised:0 2px 8px #0000001c,inset 0 1px 0 #ffffff0b;
  --ht-pressed:inset 0 2px 4px #00000033,0 1px 0 #ffffff09;
  --ht-paper:#32333a;--ht-paper-back:#2b2c32;--ht-grid:#ffffff06;
  --ht-sidebar:#222328;--ht-tag:#292930ef;--ht-tag-fg:#f3f4f5;
  --ht-red:#e3a2b1;--ht-green:#a4d9b6;--ht-violet:#dcbceb;--ht-gold:#e1c38e;--ht-blue:#a6cede;
}

.paba-brand-logo{display:block;width:148px;height:29px;flex:0 0 auto;color:inherit}
.studio-shell .hm-mobile-brand .paba-brand-logo{width:128px;height:25px}
.hm-footer .paba-brand-logo{width:112px;height:22px}
:where(body:has(#pane-home:not([hidden]))) .hm-new{
  border:1px solid var(--ht-edge);background:var(--surf);color:var(--fg);
  box-shadow:0 1px 2px #00000009,inset 0 1px 0 var(--ht-rim);
  transition:transform .16s,box-shadow .16s,border-color .16s,background-color .16s;
}
:where(body:has(#pane-home:not([hidden]))) .hm-new:hover{
  background:var(--hole);border-color:var(--ht-ink);
}
:where(body:has(#pane-home:not([hidden]))) .hm-new:active{
  transform:translateY(1px);box-shadow:var(--ht-pressed);
}

body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #app>header{background:var(--bg)}
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #app>header>.iconbtn,
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #guestlogin{
  border:1px solid var(--ht-edge);background:var(--surf);color:var(--fg);
  box-shadow:var(--ht-raised);border-radius:6px;
}
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #app>header>.iconbtn:hover,
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #guestlogin:hover{border-color:var(--ht-ink)}
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #app>header>.iconbtn:active,
body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #guestlogin:active{box-shadow:var(--ht-pressed)}

/* The primary create control is a drafting surface; the little sheets carry the depth. */
#pane-home .hm-canvas-start{
  position:relative;isolation:isolate;overflow:hidden;border-color:var(--ht-edge);
  border-radius:8px;background-color:var(--ht-paper);
  background-image:linear-gradient(var(--ht-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ht-grid) 1px,transparent 1px);
  background-size:24px 24px;box-shadow:inset 0 1px 0 var(--ht-rim),inset 0 -1px 0 var(--ht-rim);
  transition:border-color .18s,background-color .18s;
}
#pane-home .hm-canvas-start::before,#pane-home .hm-canvas-start::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;opacity:.6;
}
#pane-home .hm-canvas-start::before{top:14px;left:14px;border-top:1px solid var(--ht-ink);border-left:1px solid var(--ht-ink)}
#pane-home .hm-canvas-start::after{right:14px;bottom:14px;border-right:1px solid var(--ht-ink);border-bottom:1px solid var(--ht-ink)}
#pane-home .hm-canvas-start:hover{border-color:var(--acc)}
#pane-home .hm-canvas-plus{
  position:relative;isolation:isolate;width:66px;height:44px;margin:3px 0;
  border:1px solid var(--ht-edge);border-radius:6px;
  background:linear-gradient(165deg,var(--surf),var(--hole));color:var(--acc);box-shadow:var(--ht-raised);
  transition:transform .18s,box-shadow .18s;
}
#pane-home .hm-canvas-plus::before,#pane-home .hm-canvas-plus::after{
  content:"";position:absolute;inset:-4px 3px 3px -3px;z-index:-1;
  border:1px solid var(--ht-edge);border-radius:5px;background:var(--ht-paper-back);
  transform:rotate(-9deg);transform-origin:50% 100%;transition:transform .18s;pointer-events:none;
}
#pane-home .hm-canvas-plus::after{inset:0;transform:none;background:linear-gradient(165deg,var(--surf),var(--hole));box-shadow:inset 0 1px 0 var(--ht-rim)}
#pane-home .hm-canvas-plus>.ui-icon{width:23px;height:23px;transform:rotate(-6deg)}
#pane-home .hm-canvas-start:hover .hm-canvas-plus{transform:translateY(-2px) rotate(2deg);box-shadow:var(--ht-raised)}
#pane-home .hm-canvas-start:hover .hm-canvas-plus::before{transform:rotate(-13deg)}
#pane-home .hm-canvas-start:active .hm-canvas-plus{transform:translateY(1px);box-shadow:var(--ht-pressed)}
#pane-home .hm-canvas-copy{position:relative;font-weight:600}
#pane-home .hm-canvas-copy::after{
  content:"";position:absolute;left:4px;right:-2px;bottom:-6px;height:5px;
  border-bottom:2px solid var(--acc);border-radius:0 0 50% 30%;transform:rotate(-3deg);opacity:.45;
}

#pane-home .hm-tool-launchers>a{--ht-tool:var(--ht-red);color:var(--dim)!important}
#pane-home .hm-tool-launchers>a[href="#create/image"]{--ht-tool:var(--ht-green)}
#pane-home .hm-tool-launchers>a[href="#create/audio"]{--ht-tool:var(--ht-violet)}
#pane-home .hm-tool-launchers>a[href="#tools/script"]{--ht-tool:var(--ht-gold)}
#pane-home .hm-tool-launchers>a[href="#tools/director"]{--ht-tool:var(--ht-blue)}
#pane-home .hm-tool-launchers>a[href="#tools/character"]{--ht-tool:var(--ht-violet)}
#pane-home .hm-tool-launchers>a[href="#tools/edit"]{--ht-tool:var(--fg)}
#pane-home .hm-tool-launchers>a[href="#objects/studio"]{--ht-tool:var(--ht-green)}
#pane-home .hm-tool-launchers .hm-tool-icon{
  position:relative;border:1px solid var(--ht-edge);border-bottom-color:color-mix(in srgb,var(--ht-edge) 80%,var(--ht-ink));
  border-radius:8px;background:linear-gradient(160deg,var(--surf),color-mix(in srgb,var(--ht-tool) 5%,var(--surf)));
  color:var(--ht-tool);box-shadow:var(--ht-raised);transition:transform .16s,box-shadow .16s,border-color .16s;
}
#pane-home .hm-tool-launchers>a:hover{color:var(--fg)!important}
#pane-home .hm-tool-launchers>a:hover .hm-tool-icon{
  color:var(--ht-tool);border-color:color-mix(in srgb,var(--ht-tool) 55%,var(--ht-edge));transform:translateY(-2px);
}
#pane-home .hm-tool-launchers>a:active .hm-tool-icon{transform:translateY(1px);box-shadow:var(--ht-pressed)}
#pane-home .hm-tool-launchers .ui-icon{filter:drop-shadow(0 1px 0 var(--ht-rim))}

/* One pencil mark per section, with readable standard type throughout. */
#pane-home .hm-section-heading h2{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--fg)}
#pane-home .hm-section-heading h2::before{
  content:"";display:block;flex:0 0 3px;width:3px;height:13px;background:var(--acc);
  border-radius:60% 30% 45% 20%;transform:rotate(9deg);opacity:.75;
}
#pane-home .hm-empty{color:var(--dim)}
#pane-home .hm-empty>.ui-icon{color:var(--ht-ink)}
#pane-home .hm-project{border-color:var(--ht-edge);background:var(--surf);box-shadow:var(--ht-raised)}
#pane-home .hm-project:hover{border-color:var(--acc)}
#pane-home .hm-project-cover{background:var(--hole);box-shadow:var(--ht-pressed)}
#pane-home .hm-project-actions{border-color:var(--ht-edge);box-shadow:var(--ht-raised)}
#pane-home .hm-feature-art,#pane-home .hm-show-art{
  border:1px solid var(--ht-edge);outline:0;
  box-shadow:0 4px 16px #00000014;border-radius:6px;
}
#pane-home .hm-feature-art::after,#pane-home .hm-show-art::after{
  content:"";position:absolute;inset:0;border:1px solid #00000012;border-radius:4px;pointer-events:none;z-index:1;
}
#pane-home .hm-feature-tag,#pane-home .hm-show-tag{
  top:8px;left:8px;max-width:calc(100% - 16px);padding:3px 7px;
  background:var(--ht-tag);color:var(--ht-tag-fg);border:1px solid #ffffff25;
  border-radius:3px;box-shadow:0 1px 3px #00000012;backdrop-filter:blur(8px);font-weight:500;
}
#pane-home .hm-feature-label b{font-weight:550}
#pane-home .hm-feature-label>.ui-icon{color:var(--acc);opacity:.85}
#pane-home .hm-show-title{font-weight:550}
#pane-home .hm-show-arrow{
  background:var(--surf);color:var(--acc);border:1px solid var(--ht-edge);box-shadow:var(--ht-raised);
}
#pane-home .hm-categories>button{position:relative;border-bottom-color:transparent}
#pane-home .hm-categories>button[aria-pressed="true"]{color:var(--acc);font-weight:600}
#pane-home .hm-categories>button[aria-pressed="true"]::after{
  content:"";position:absolute;left:1px;right:0;bottom:0;height:5px;border-bottom:2px solid var(--acc);
  border-radius:0 0 50% 25%;transform:rotate(-3deg);opacity:.75;pointer-events:none;
}
#pane-home .hm-search{background:var(--hole);border-color:var(--ht-edge);box-shadow:var(--ht-pressed);border-radius:6px}
#pane-home .hm-search:focus-within{border-color:var(--acc);outline:2px solid var(--soft);outline-offset:1px}
#pane-home #hm-idea-form{background:var(--ht-paper);border-color:var(--ht-edge);box-shadow:var(--ht-pressed)}
#pane-home #hm-idea-form:focus-within{border-color:var(--acc)}
#pane-home .hm-create-submit{box-shadow:inset 0 1px 0 #ffffff25,0 2px 3px #0000000b}
#pane-home .hm-create-submit:disabled{box-shadow:none}
#pane-home .hm-create-modes>button[aria-pressed="true"]{box-shadow:inset 0 1px 0 var(--ht-rim);border:0}
#pane-home .hm-footer{border-color:var(--ht-edge);box-shadow:0 -1px 0 var(--ht-rim)}

@media(max-width:600px){
  body.studio-shell:has(#pane-home:not([hidden]),.ct-page:not([hidden])) #app>header{background:var(--ht-sidebar);border-bottom-color:var(--ht-edge);box-shadow:inset 0 -1px 0 var(--ht-rim)}
  #pane-home .hm-canvas-start{background-size:20px 20px}
  #pane-home .hm-feature-tag,#pane-home .hm-show-tag{top:6px;left:6px;padding:2px 5px}
  #pane-home .hm-section-heading h2{gap:7px}
}
@media(max-width:380px){
  .studio-shell #app>header{padding-inline:12px;gap:6px}
  .studio-shell .hm-mobile-brand .paba-brand-logo{width:120px;height:24px}
}
@media(prefers-reduced-motion:reduce){
  #pane-home .hm-canvas-start:hover .hm-canvas-plus,#pane-home .hm-canvas-start:active .hm-canvas-plus,
  #pane-home .hm-tool-launchers>a:hover .hm-tool-icon,#pane-home .hm-tool-launchers>a:active .hm-tool-icon{transform:none}
  #pane-home .hm-canvas-start:hover .hm-canvas-plus::before{transform:rotate(-9deg)}
  :where(body:has(#pane-home:not([hidden]))) .hm-new:active{transform:none}
}

/* ==== /css/home-entry.css ==== */
/* Home entry points share the existing project and conversation workflows. */
body.studio-shell:has(#pane-home:not([hidden])) #app>header{height:62px;padding-inline:42px}
body.studio-shell:has(#pane-home:not([hidden])) .hm-main{padding:22px 42px 40px}
body.studio-shell:has(#pane-home:not([hidden])) .hm-content{max-width:1600px}
.studio-shell .hm-mobile-brand{color:var(--acc)}
#pane-home .hm-start{margin:6px 0 24px}
#pane-home .hm-content[data-view="home"] .hm-start{width:100%;max-width:860px;margin:42px auto 36px}
#pane-home .hm-start-heading{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px}
#pane-home .hm-partner-title{display:flex;align-items:center;gap:10px;width:max-content;color:var(--fg);min-height:34px}
#pane-home .hm-partner-title h2{margin:0;font-size:27px;line-height:1.3;font-weight:600}
#pane-home .hm-partner-mark{display:block;width:30px;height:30px;flex:0 0 30px;fill:currentColor;color:var(--acc)}
#pane-home .hm-partner-enter{width:14px;height:14px;color:var(--dim);transition:transform .15s}
#pane-home .hm-partner-title:hover .hm-partner-enter{transform:translateX(2px)}
#pane-home .hm-entry-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 12px;border:1px solid var(--ht-edge);border-radius:999px;background:transparent;color:var(--fg);font-size:12px}
#pane-home .hm-projects-create[hidden]{display:none}
#pane-home .hm-entry-action:hover{border-color:var(--ht-ink);background:var(--hole)}
#pane-home .hm-entry-action:active{box-shadow:var(--ht-pressed)}
#pane-home .hm-entry-action .ui-icon{width:15px;height:15px}
#pane-home .hm-partner-form{padding:20px 24px 17px;border:1px solid var(--ht-edge);border-radius:24px;background:var(--ht-paper);box-shadow:0 4px 18px #0000000d}
#pane-home .hm-partner-form:focus-within{border-color:var(--ht-ink);box-shadow:var(--ht-pressed),0 0 0 2px var(--soft)}
#pane-home .hm-partner-label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--dim);font-size:12px;margin:0}
#pane-home #hm-partner-count{font-size:11px;font-variant-numeric:tabular-nums}
#pane-home .hm-partner-editor{position:relative;margin:9px 0 11px;isolation:isolate}
#pane-home #hm-partner-prompt{position:relative;z-index:1;display:block;width:100%;min-height:82px;max-height:300px;resize:vertical;margin:0;padding:2px 0;border:0;border-radius:0;outline:0;background:transparent;color:var(--fg);caret-color:var(--acc);box-shadow:none;font-size:15px;line-height:1.8}
#pane-home .hm-partner-example{position:absolute;inset:2px 20px 0 0;overflow:hidden;pointer-events:none;user-select:none;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ph);font-size:15px;line-height:1.8;opacity:1;transition:opacity .32s ease-in-out}
#pane-home .hm-partner-example.is-fading{opacity:0}
#pane-home .hm-partner-editor:focus-within .hm-partner-example{opacity:.36}
#pane-home .hm-partner-error{margin:0 0 12px;color:var(--bad);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#pane-home .hm-partner-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
#pane-home .hm-partner-footer{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-left:auto}
#pane-home .hm-partner-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:116px;min-height:40px;flex:0 0 116px;padding:7px 15px;border:1px solid var(--acc);border-radius:999px;background:var(--acc);color:var(--on-accent);font-size:13px;font-weight:600;box-shadow:0 3px 10px #00000014;transition:transform .15s,box-shadow .15s,opacity .15s}
#pane-home .hm-partner-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff20,0 3px 0 #00000020,0 5px 10px #00000012}
#pane-home .hm-partner-submit:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px #00000025}
#pane-home .hm-partner-submit:disabled:not(.is-loading){opacity:.4;box-shadow:inset 0 1px 0 #ffffff16}
#pane-home .hm-submit-mark{display:block;width:22px;height:22px;flex:0 0 22px}
#pane-home .hm-partner-submit.is-loading .hm-submit-mark{opacity:.65}
#pane-home .hm-partner-presets{display:flex;align-items:center;flex:1 1 300px;flex-wrap:wrap;gap:7px}
#pane-home .hm-partner-presets>button{display:flex;align-items:center;gap:6px;min-height:32px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--dim);font-size:12px}
#pane-home .hm-partner-presets>button:hover{border-color:var(--ht-ink);color:var(--fg)}
#pane-home .hm-partner-presets>button[aria-pressed="true"]{border-color:var(--ht-ink);color:var(--fg)}
#pane-home .hm-partner-presets .ui-icon{width:14px;height:14px}
#pane-home .hm-content[data-view="projects"] .hm-start{margin:0}
#pane-home .hm-content[data-view="projects"] .hm-start-heading{justify-content:flex-end;margin-bottom:0}
#pane-home .hm-content[data-view="projects"] .hm-entry-action{position:static}
#pane-home .hm-projects{margin-bottom:30px}
#pane-home .hm-projects .hm-section-heading{margin-top:0}
#pane-home .hm-empty{min-height:58px;padding:15px 0}
#pane-home .hm-launcher{padding:0;margin:20px 0 28px;border:0}
#pane-home .hm-launcher .hm-section-heading{margin:0 0 14px}
#pane-home .hm-tool-launchers{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px}
#pane-home .hm-tool-launchers>a{flex-direction:row;justify-content:flex-start;gap:10px;min-height:54px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surf);font-size:12px;text-align:left;transition:background .15s}
#pane-home .hm-tool-launchers>a:hover{background:var(--hole);border-color:var(--line)}
#pane-home .hm-tool-launchers .hm-tool-icon{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:5px;background:var(--hole);box-shadow:none;color:var(--dim)}
#pane-home .hm-tool-launchers .hm-tool-icon .ui-icon{width:18px;height:18px;filter:none}
#pane-home .hm-tool-launchers>a:hover .hm-tool-icon,#pane-home .hm-tool-launchers>a:active .hm-tool-icon{transform:none;border:0;box-shadow:none;color:var(--fg)}
#pane-home .hm-tool-launchers>a>span:last-child{overflow-wrap:anywhere}
#pane-home .hm-discover{margin-top:0}
#pane-home .hm-discover .hm-section-heading{margin:0 0 20px}
/* 推荐短片：平时一排收窄压暗的竖条，正中那张展开成 16:9 播放，播完下一张接着展开（js/home-motion.js mountReel）。
   尺寸（--reel-wide / slim / h / gap / ms）由脚本按条子宽度算好写进来，这里的值只管脚本跑起来之前那一下 */
#pane-home .hm-show-featured{--reel-wide:504px;--reel-slim:120px;--reel-h:284px;--reel-gap:10px;--reel-ms:.7s;--reel-ease:cubic-bezier(.45,0,.2,1);position:relative;left:50%;display:block;width:calc(100vw - var(--hm-sidebar));margin:0 0 32px;padding:24px 0 66px;transform:translateX(-50%);overflow:hidden;overflow:clip;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ht-sidebar)}
#pane-home .hm-show-featured[hidden]{display:none}
#pane-home .hm-show-featured::before,#pane-home .hm-show-featured::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:min(8vw,110px);pointer-events:none}
#pane-home .hm-show-featured::before{left:0;background:linear-gradient(90deg,var(--ht-sidebar),transparent)}
#pane-home .hm-show-featured::after{right:0;background:linear-gradient(-90deg,var(--ht-sidebar),transparent)}
#pane-home .hm-reel-track{display:flex;align-items:center;gap:var(--reel-gap);width:max-content;height:var(--reel-h);will-change:transform;transition:transform var(--reel-ms) var(--reel-ease)}
#pane-home .hm-reel-track .hm-show-feature{position:relative;flex:0 0 auto;width:var(--reel-slim);height:calc(var(--reel-h) * .8);transition:width var(--reel-ms) var(--reel-ease),height var(--reel-ms) var(--reel-ease)}
#pane-home .hm-reel-track .hm-show-feature.is-active{width:var(--reel-wide);height:var(--reel-h)}
#pane-home .hm-reel-track.is-still,#pane-home .hm-reel-track.is-still .hm-show-feature{transition:none}
#pane-home .hm-reel-track .hm-show-art{position:absolute;inset:0;aspect-ratio:auto;border-radius:8px;box-shadow:none;transition:box-shadow var(--reel-ms) ease}
#pane-home .hm-reel-track .is-active .hm-show-art{box-shadow:0 16px 40px #0000004d}
#pane-home .hm-reel-track .hm-show-art>img{transform:none}
#pane-home .hm-reel-track .hm-show-art::before{content:"";position:absolute;inset:0;z-index:1;background:#0b0b0e;opacity:.5;pointer-events:none;transition:opacity var(--reel-ms) ease}
#pane-home .hm-reel-track .hm-show-feature:hover .hm-show-art::before{opacity:.25}
#pane-home .hm-reel-track .is-active .hm-show-art::before{opacity:0}
#pane-home .hm-reel-track .hm-show-feature:focus-visible{outline:0}
#pane-home .hm-reel-track .hm-show-feature:focus-visible .hm-show-art{outline:2px solid var(--acc);outline-offset:3px}
#pane-home .hm-reel-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .3s ease}
#pane-home .hm-reel-video.is-playing{opacity:1}
#pane-home .hm-reel-track .hm-show-info{position:absolute;top:calc(100% + 12px);left:1px;width:var(--reel-wide);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
#pane-home .hm-reel-track .is-active .hm-show-info{opacity:1;visibility:visible;transition:opacity .4s ease calc(var(--reel-ms) * .6)}
#pane-home .hm-show-featured .hm-show-title{margin-top:0;font-size:15px}
#pane-home .hm-show-featured .hm-show-caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#wb-dialog .hm-promo-preview{display:block;width:auto;max-width:100%;height:auto;max-height:min(70vh,680px);margin-inline:auto;object-fit:contain;background:#17181c;border-radius:5px}
#pane-home .hm-content[data-view="home"] .hm-discover-toolbar{display:none}
#pane-home .hm-content[data-view="home"] .hm-show-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 16px}
#pane-home .hm-content[data-view="home"] .hm-show-grid .hm-show-title{font-size:13px;margin-top:10px}
#pane-home .hm-content[data-view="home"] .hm-show-grid .hm-show-caption{font-size:11px}
#pane-home .hm-show-title{font-size:15px;margin-top:13px;font-weight:600}
#pane-home .hm-show-caption{font-size:12px;margin-top:5px}
#pane-home .hm-show-art{aspect-ratio:16/10}
@media(max-width:1180px){
  body.studio-shell:has(#pane-home:not([hidden])) #app>header{padding-inline:28px}
  body.studio-shell:has(#pane-home:not([hidden])) .hm-main{padding:18px 28px 32px}
  #pane-home .hm-tool-launchers{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px 12px}
  #pane-home .hm-content[data-view="home"] .hm-show-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  body.studio-shell:has(#pane-home:not([hidden])) #app>header{padding-inline:22px}
  body.studio-shell:has(#pane-home:not([hidden])) .hm-main{padding:14px 22px 28px}
  #pane-home .hm-tool-launchers{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pane-home .hm-content[data-view="home"] .hm-show-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  body.studio-shell:has(#pane-home:not([hidden])) #app>header{height:60px;padding-inline:16px}
  body.studio-shell:has(#pane-home:not([hidden])) .hm-main{padding:22px 18px 30px}
  #pane-home .hm-content[data-view="home"] .hm-start{margin:12px auto 28px}
  #pane-home .hm-start-heading{gap:8px;margin-bottom:15px}
  #pane-home .hm-partner-title{gap:7px}
  #pane-home .hm-partner-title h2{font-size:20px}
  #pane-home .hm-partner-mark{width:25px;height:25px;flex-basis:25px}
  #pane-home .hm-partner-enter{width:11px;height:11px}
  #pane-home .hm-entry-action{padding:7px 9px;font-size:11px;gap:5px}
  #pane-home .hm-entry-action .ui-icon{width:14px;height:14px}
  #pane-home .hm-partner-form{padding:17px 18px;border-radius:20px}
  #pane-home .hm-partner-editor{margin-bottom:12px}
  #pane-home #hm-partner-prompt{font-size:16px;min-height:96px}
  #pane-home .hm-partner-example{font-size:16px}
  #pane-home .hm-partner-footer{gap:8px}
  #pane-home .hm-partner-presets{flex-basis:100%;gap:6px}
  #pane-home .hm-partner-presets>button{font-size:11px;gap:5px;padding:5px 9px}
  #pane-home .hm-partner-presets .ui-icon{width:13px;height:13px}
  #pane-home .hm-projects{margin-bottom:22px}
  #pane-home .hm-launcher{margin-top:20px;margin-bottom:24px}
  #pane-home .hm-tool-launchers{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
  #pane-home .hm-tool-launchers>a{font-size:12px;padding:7px;min-height:46px}
  #pane-home .hm-show-featured{width:100vw;padding:16px 0 60px}
  #pane-home .hm-show-featured::before,#pane-home .hm-show-featured::after{width:24px}
  #pane-home .hm-content[data-view="home"] .hm-show-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  #pane-home .hm-show-title{font-size:14px}
}
@media(max-width:380px){
  #pane-home .hm-partner-presets .ui-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
  #pane-home .hm-partner-example{transition:none}
  #pane-home .hm-partner-title:hover .hm-partner-enter{transform:none}
  #pane-home .hm-partner-submit:hover:not(:disabled),#pane-home .hm-partner-submit:active:not(:disabled){transform:none}
  #pane-home .hm-reel-track,#pane-home .hm-reel-track .hm-show-feature,#pane-home .hm-reel-track .hm-show-art,#pane-home .hm-reel-track .hm-show-art::before,#pane-home .hm-reel-track .hm-show-info,#pane-home .hm-reel-video{transition:none}
}

/* ==== /css/home-tools.css ==== */
/* 首页「常用工具」横条的演示片（js/home-motion.js 的 mountTools 挂上 .hm-tool-media 和 .has-media）。
   平时：横条里是演示片第 3.2 秒的静帧，左侧一层暗色渐变让文字看得清；
   鼠标放上去（或键盘聚焦）：画面从横条展开成完整的 16:9，浮在旁边卡片上面，同时开始播；移开收回、停在封面那帧。
   放在 home-entry.css / home-tactile.css 之后加载：那两份给横条定了底色、字色（带 !important）和图标样式，这里要盖过去。
   ⚠️ 别拿 prefers-reduced-motion 关掉展开和播放（有用户系统里关了动画，关掉就像「坏了」），只把过渡变短。 */
#pane-home .hm-tool-launchers>a.has-media{
  position:relative;isolation:isolate;container-type:inline-size;min-height:72px;overflow:visible;
  border-color:transparent;background:#0f0f12;color:#f4f4f6!important;
  transition:z-index 0s .3s;
}
#pane-home .hm-tool-launchers>a.has-media:hover,#pane-home .hm-tool-launchers>a.has-media:active{
  background:#0f0f12;border-color:transparent;color:#fff!important;
}
#pane-home .hm-tool-launchers>a.has-media .hm-tool-media{
  position:absolute;z-index:-1;left:0;right:0;top:50%;height:100%;transform:translateY(-50%);
  border-radius:6px;overflow:hidden;background:#0f0f12;box-shadow:0 0 0 1px rgb(255 255 255 / .07);
  transition:height .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
#pane-home .hm-tool-media>img,#pane-home .hm-tool-media>video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  display:block;pointer-events:none;
}
#pane-home .hm-tool-media>video{opacity:0;transition:opacity .35s ease}
#pane-home .hm-tool-media>video.is-playing{opacity:1}
#pane-home .hm-tool-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(12 12 15 / .86) 0%,rgb(12 12 15 / .55) 34%,rgb(12 12 15 / .06) 72%);
  transition:opacity .3s ease;
}
#pane-home .hm-tool-launchers>a.has-media .hm-tool-icon,
#pane-home .hm-tool-launchers>a.has-media:hover .hm-tool-icon,
#pane-home .hm-tool-launchers>a.has-media:active .hm-tool-icon{
  border:1px solid rgb(255 255 255 / .16);background:rgb(255 255 255 / .1);color:#fff;box-shadow:none;transform:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#pane-home .hm-tool-launchers>a.has-media .ui-icon{filter:none}
#pane-home .hm-tool-launchers>a.has-media>span:last-child{text-shadow:0 1px 3px rgb(0 0 0 / .65)}

@media (hover:hover) and (pointer:fine){
  #pane-home .hm-tool-launchers>a.has-media:hover,#pane-home .hm-tool-launchers>a.has-media:focus-visible{z-index:6;transition:none}
  #pane-home .hm-tool-launchers>a.has-media:hover .hm-tool-media,
  #pane-home .hm-tool-launchers>a.has-media:focus-visible .hm-tool-media{
    height:calc((100cqw + 20px) * 9 / 16);   /* cqw 按内容区算，补回横条左右各 10px 内边距 */
    box-shadow:0 22px 48px rgb(0 0 0 / .5),0 0 0 1px rgb(255 255 255 / .12);
  }
  #pane-home .hm-tool-launchers>a.has-media:hover .hm-tool-media::after,
  #pane-home .hm-tool-launchers>a.has-media:focus-visible .hm-tool-media::after{opacity:.55}
}
@media(max-width:600px){
  #pane-home .hm-tool-launchers>a.has-media{min-height:56px}
}
@media(prefers-reduced-motion:reduce){
  #pane-home .hm-tool-launchers>a.has-media .hm-tool-media{transition-duration:.12s}
  #pane-home .hm-tool-media>video{transition-duration:.18s}
}

/* ==== /css/home-workflows.css ==== */
/* 灵感里的可复用工作流：左边样片，右边角色、步骤和「复用这个工作流」（js/home-workflows.js） */
.hmw{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px;align-items:start}
.hmw-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#0b0d0e;border-radius:6px}
.hmw-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.hmw-dialog .hmw-summary{margin:0;color:var(--dim)}
.hmw-cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.hmw-cast li{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 4px 7px;border:1px solid var(--line);border-radius:6px}
.hmw-cast img{width:100%;max-width:72px;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:var(--hole);margin-bottom:4px}
.hmw-cast b{font-size:12px;font-weight:600}
.hmw-cast span{font-size:11px;color:var(--dim);letter-spacing:.04em}
.hmw-steps{display:grid;gap:9px;margin:0;padding:0;list-style:none;counter-reset:hmw-step}
.hmw-steps li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:9px;font-size:12.5px;line-height:1.5;counter-increment:hmw-step}
.hmw-steps li::before{content:counter(hmw-step);grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--soft);color:var(--acc);font-size:11px;font-weight:650}
.hmw-steps b{font-weight:600}
.hmw-steps span{color:var(--dim)}
.hmw-dialog .wb-actions{margin-top:12px}
.hmw-note{margin-right:auto;font-size:12px;color:var(--dim)}
@media(max-width:820px){.hmw{grid-template-columns:minmax(0,1fr)}}

/* ==== /css/canvas-header.css ==== */
/* Project context on the left; creation and account actions on the right. */
.nc-workspace-menu,.nc-path-divider{display:none}
.node-canvas-mode .wb-projectbar{gap:5px;max-width:calc(100% - 300px);height:38px;min-height:38px;top:18px}
.node-canvas-mode .hm-workspace-home{width:34px;height:34px;flex:0 0 34px;margin-right:3px;border-radius:6px}
.node-canvas-mode #wb-project-button,.node-canvas-mode .nc-boardbar{border-color:transparent;background:transparent;border-radius:6px}
.node-canvas-mode .hm-workspace-home:hover,.node-canvas-mode #wb-project-button:hover:not(:disabled),.node-canvas-mode #nc-board-button:hover{background:var(--soft);color:var(--acc)}
.node-canvas-mode #wb-project-button{width:160px;max-width:210px;font-weight:550}
.node-canvas-mode .nc-boardbar{width:116px;min-width:76px;max-width:160px}
.node-canvas-mode #nc-board-button{width:100%;height:36px;border-radius:5px;padding-inline:8px;color:var(--dim)}
.node-canvas-mode .nc-path-divider{display:block;flex:0 0 9px;width:9px;text-align:center;color:var(--dim);font-size:13px;opacity:.6}
.node-canvas-mode #nc-workspace-menu{display:grid}
.node-canvas-mode .wb-save{margin-left:8px;max-width:100px}
.node-canvas-mode .wb-save[data-storage="memory"][data-state="saved"],
.node-canvas-mode .wb-save[data-storage="memory"][data-state="dirty"]{color:var(--dim)}
.node-canvas-mode .nc-top-right{top:20px;right:20px;gap:6px;z-index:25}
.node-canvas-mode.nc-chat-open .nc-top-right{right:20px}
.node-canvas-mode #nc-top-right :is(#theme,#logout,#wb-export){display:none}
.node-canvas-mode #nc-top-right .iconbtn{width:34px;height:34px;flex:0 0 34px;border-radius:6px;box-shadow:0 2px 8px var(--canvas-shadow),inset 0 1px 0 var(--canvas-rim)}
.node-canvas-mode #nc-top-right .iconbtn:hover{border-color:var(--acc);color:var(--acc)}
.node-canvas-mode #nc-top-right :is(#wb-history,#nc-import,#nc-workspace-menu){color:var(--fg)}
.node-canvas-mode #nc-top-right .guestbar .mini{display:flex;width:auto;min-width:76px;height:34px;padding:6px 11px;border:1px solid var(--line);border-radius:6px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:550}
.node-canvas-mode #nc-top-right .guestbar .mini:hover{opacity:.9}
.node-canvas-mode #nc-top-right #acctbtn{display:flex;align-items:center;gap:8px;height:34px;max-width:170px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--fg);font-size:12px;box-shadow:0 2px 8px var(--canvas-shadow),inset 0 1px 0 var(--canvas-rim)}
.node-canvas-mode #nc-top-right #acctbtn:hover,.node-canvas-mode #nc-top-right #acctbtn[aria-expanded="true"]{border-color:var(--acc)}
.node-canvas-mode #nc-top-right #acctname{display:none}
.node-canvas-mode #nc-top-right .hm-account-icon{display:block;width:16px;height:16px}
.node-canvas-mode #nc-top-right #acctbal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node-canvas-mode #nc-top-right .acctpanel{width:min(340px,calc(100vw - 24px));padding:18px;font-size:13px;box-shadow:0 12px 32px var(--canvas-shadow)}
.node-canvas-mode #nc-top-right .acctpanel .mini{display:inline-flex;width:auto;height:32px;min-height:32px;align-items:center;justify-content:center;white-space:nowrap}
.node-canvas-mode .ap-email{font-size:12px}
.node-canvas-mode .ap-bal{align-items:center;margin-top:14px;gap:10px}
.node-canvas-mode .ap-bal>div{flex:1 1 auto;min-width:0}
.node-canvas-mode .ap-bal>.mini{flex:0 0 auto;padding:6px 9px;border-color:var(--line);background:var(--surf);color:var(--acc);font-size:12px;font-weight:600}
.node-canvas-mode .ap-bal>.mini:hover{border-color:var(--acc);background:var(--soft)}
.node-canvas-mode .ap-v{font-size:26px;overflow-wrap:anywhere}
.node-canvas-mode .ap-stats{gap:6px;margin:14px 0;padding:12px 0}
.node-canvas-mode .ap-stats b{font-size:13px}
.node-canvas-mode .ap-tabs{margin-bottom:4px}
.node-canvas-mode .ap-tabs .tab.on{color:var(--acc)}
.node-canvas-mode .ap-list{min-height:0}
.node-canvas-mode .ap-empty{padding:16px 0 4px}
.node-canvas-mode #nc-top-right .acctpanel .chip{display:flex}
@media(max-width:1100px){
  .node-canvas-mode .wb-projectbar{max-width:calc(100% - 250px)}
  .node-canvas-mode .wb-save{position:absolute;top:42px;left:3px;margin:0;max-width:220px}
}
@media(max-width:760px){
  .node-canvas-mode .wb-projectbar{left:12px;right:12px;top:12px;width:calc(100% - 24px);max-width:calc(100% - 24px);gap:4px}
  .node-canvas-mode .hm-workspace-home{width:32px;height:32px;flex-basis:32px;margin-right:2px}
  .node-canvas-mode #wb-project-button{flex:1 1 120px;min-width:65px;width:auto;padding-inline:7px;font-size:12px}
  .node-canvas-mode .nc-boardbar{flex:0 1 112px;width:112px;min-width:70px}
  .node-canvas-mode #nc-board-button{font-size:12px;padding-inline:6px}
  .node-canvas-mode .wb-save{top:52px;left:1px;max-width:90px;font-size:11px}
  .node-canvas-mode #wb-retry{top:78px;left:1px}
  .node-canvas-mode .nc-top-right,.node-canvas-mode.nc-chat-open .nc-top-right{top:60px;right:12px;gap:4px}
  .node-canvas-mode #nc-top-right :is(.iconbtn,#wb-history){width:30px;height:30px;flex-basis:30px}
  .node-canvas-mode #nc-top-right .guestbar .mini{height:30px;min-width:68px;padding:5px 8px;font-size:11px}
  .node-canvas-mode #nc-top-right #acctbtn{width:32px;height:30px;padding:0;justify-content:center;gap:0}
  .node-canvas-mode #nc-top-right #acctbtn>:not(.hm-account-icon){display:none}
  .node-canvas-mode #nc-top-right .acctpanel{position:fixed;top:98px;left:auto;right:12px;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 110px)}
  .node-canvas-mode .nc-chat,.node-canvas-mode .fw-ing{top:108px}
}
@media(max-width:480px){
  .node-canvas-mode #nc-top-right .acctpanel{left:12px;width:auto}
}

/* ==== /css/sidebar.css ==== */
/* Studio sidebar: an immersive icon rail that opens into its own panel; a drawer on phones.
   Icons keep the same x in both states (centred on the 68px rail), so opening only widens the panel and fades the labels in. */
@property --hm-sidebar{syntax:"<length>";inherits:true;initial-value:0px}
body.studio-shell{--hm-sidebar:68px;--hm-panel-width:216px;--hm-ease:cubic-bezier(.2,0,0,1)}
/* Content follows the panel edge only while toggling, so switching tabs never slides the page. */
body.studio-shell.hm-nav-motion{transition:--hm-sidebar .28s var(--hm-ease)}
@media(min-width:1181px){body.studio-shell.hm-nav-expanded{--hm-sidebar:var(--hm-panel-width)}}

.studio-shell .hm-sidebar{
  --hm-hover:color-mix(in srgb,var(--fg) 8%,transparent);
  --hm-panel:color-mix(in srgb,var(--fg) 5%,var(--bg));
  width:var(--hm-panel-width);padding:14px;border:0;background:var(--hm-panel);box-shadow:none;
  overflow:hidden auto;scrollbar-width:none;
  transition:width .28s var(--hm-ease),background-color .28s var(--hm-ease),box-shadow .28s var(--hm-ease),transform .28s var(--hm-ease);
}
.studio-shell .hm-sidebar::-webkit-scrollbar{display:none}

.studio-shell .hm-sidebar-head{position:relative;display:flex;align-items:center;flex:0 0 40px;height:40px;margin:0 0 18px}
.studio-shell .hm-brand{display:flex;align-items:center;gap:3px;width:100%;height:40px;margin:0;padding:0 0 0 7px;border-radius:20px;overflow:hidden;color:var(--fg);font-size:0}
body.studio-shell:has(#pane-home:not([hidden])) .hm-brand{color:var(--acc)}
.studio-shell .hm-brand-mark{display:block;flex:0 0 26px;width:26px;height:26px;transition:opacity .16s}
.studio-shell .hm-brand-word{display:block;flex:0 0 106px;width:106px;height:26px;transition:opacity .2s ease .1s}
/* In the rail the toggle sits right over the logo (right:0 of a 40px head); it slides to the panel's right edge as it opens. */
.studio-shell .hm-sidebar-toggle{
  position:absolute;z-index:1;top:0;right:0;display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--dim);
  transition:opacity .16s,background-color .15s,color .15s;
}
.studio-shell .hm-sidebar-toggle:hover{background:var(--hm-hover);color:var(--fg)}
.studio-shell .hm-sidebar .hm-sidebar-toggle .ui-icon{width:20px;height:20px;flex-basis:20px}
.studio-shell .hm-sidebar-toggle .hm-icon-open{display:none}

.studio-shell .hm-sidebar>.hm-nav{gap:4px;margin:0}
.studio-shell .hm-nav a,.studio-shell .hm-sidebar-bottom>a,.studio-shell .hm-sidebar-bottom>button{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;height:40px;min-height:0;margin:0;padding:0 10px;
  border:1px solid transparent;border-radius:20px;background:transparent;box-shadow:none;
  color:var(--dim)!important;font-size:13px!important;font-weight:450;line-height:1.3;white-space:nowrap;text-align:left;overflow:hidden;
  transition:background-color .15s,color .15s,border-color .28s var(--hm-ease),border-radius .28s var(--hm-ease),box-shadow .28s var(--hm-ease),height .28s var(--hm-ease),margin .28s var(--hm-ease);
}
.studio-shell .hm-nav a:hover,.studio-shell .hm-sidebar-bottom>a:hover,.studio-shell .hm-sidebar-bottom>button:hover{background:var(--hm-hover);color:var(--fg)!important}
.studio-shell .hm-nav a[aria-current="page"],.studio-shell .hm-sidebar-bottom>a[aria-current="page"]{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)!important;font-weight:600}
.studio-shell .hm-sidebar .ui-icon{width:18px;height:18px;flex:0 0 18px}
.studio-shell .hm-nav-text{display:block;flex:1;min-width:0;overflow:hidden;transition:opacity .2s ease .1s}

/* Group label in the panel; a short rule in the rail. Same height both ways so nothing below moves. */
.studio-shell .hm-nav-divider{display:none}
.studio-shell .hm-nav-label{
  position:relative;display:flex;align-items:flex-end;height:34px;margin:0;padding:0 11px 7px;
  color:var(--dim);font-size:11px;font-weight:550;white-space:nowrap;transition:color .2s ease .1s;
}
.studio-shell .hm-nav-label::before{content:"";position:absolute;left:10px;top:50%;width:20px;height:1px;background:var(--line);opacity:0;transition:opacity .16s}

.studio-shell .hm-sidebar-bottom{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:20px}
.studio-shell .hm-sidebar-bottom>.hm-resume{height:52px;border-color:var(--line);border-radius:14px;background:var(--surf);box-shadow:0 1px 3px #00000010}
.studio-shell .hm-sidebar-bottom>.hm-resume:hover{border-color:var(--acc);background:var(--surf)}
.studio-shell .hm-resume>.hm-nav-text{color:var(--fg);font-size:12px;font-weight:550}
.studio-shell .hm-resume small{display:block;margin-top:2px;color:var(--dim);font-size:11px;font-weight:400}
.studio-shell .hm-sidebar .hm-resume-arrow{display:block;width:15px;height:15px;flex:0 0 15px;color:var(--dim);transition:opacity .2s ease .1s}

@media(min-width:601px){
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar{width:68px;background:var(--bg)}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-toggle{opacity:0}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-toggle .hm-icon-open{display:block}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-toggle .hm-icon-close{display:none}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-head:hover .hm-sidebar-toggle,
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-toggle:focus-visible{opacity:1}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-head:hover .hm-brand-mark,
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-head:has(.hm-sidebar-toggle:focus-visible) .hm-brand-mark{opacity:0}
  body.studio-shell:not(.hm-nav-expanded) .hm-brand-word,
  body.studio-shell:not(.hm-nav-expanded) .hm-nav-text,
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar .hm-resume-arrow{opacity:0;transition:opacity .08s}
  body.studio-shell:not(.hm-nav-expanded) .hm-nav-label{color:transparent;transition:color .08s}
  body.studio-shell:not(.hm-nav-expanded) .hm-nav-label::before{opacity:1}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-bottom>.hm-resume{height:40px;margin-block:6px;border-color:transparent;border-radius:20px;background:transparent;box-shadow:none}
  body.studio-shell:not(.hm-nav-expanded) .hm-sidebar-bottom>.hm-resume:hover{background:var(--hm-hover)}
}
/* Narrower screens: the open panel floats over the page instead of pushing it. */
@media(min-width:601px) and (max-width:1180px){
  body.studio-shell.hm-nav-expanded .hm-sidebar{box-shadow:0 16px 48px #00000033}
}
@media(max-width:600px){
  body.studio-shell{--hm-sidebar:0px}
  .studio-shell .hm-sidebar{width:min(272px,86vw);padding-top:18px;transform:translateX(-100%)}
  body.studio-shell.hm-menu-open .hm-sidebar{transform:none;box-shadow:0 16px 48px #00000038}
  .studio-shell .hm-sidebar-toggle{display:none}
}

/* Hover labels for the rail (js/home.js positions it next to the item). */
.hm-tip{
  position:fixed;z-index:70;left:0;top:0;max-width:240px;padding:6px 10px;border-radius:8px;
  background:var(--fg);color:var(--bg);font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap;
  box-shadow:0 6px 20px #00000030;pointer-events:none;opacity:0;transform:translate(-4px,-50%);
  transition:opacity .12s,transform .12s var(--hm-ease,ease);
}
.hm-tip.is-visible{opacity:1;transform:translate(0,-50%)}

@media(prefers-reduced-motion:reduce){
  body.studio-shell.hm-nav-motion{transition:none}
  .studio-shell .hm-sidebar,.studio-shell .hm-sidebar *,.studio-shell .hm-sidebar ::before,.hm-tip{transition:none!important}
}

/* ==== /css/ct-site.css ==== */
/* 视频生成 / 音频生成 / 物品建模这三个独立创作页，跟首页和创作工具穿同一套皮。
   配色变量（灰底、淡紫主色、--ht-*）在 home-tactile.css 里和首页一起给；这里只把这几页自己的控件对齐过去：
   原来那套是青色主色、近黑底、10~11px 的小字，和站里别处一比像另一个网站。
   排在 creation.css / objects.css 后面加载，同名规则靠顺序盖过去。 */

body.toolson .hm-brand{color:var(--acc)}
#pane-video{--ct-tint:var(--ht-red)}
#pane-audio{--ct-tint:var(--ht-violet)}
#pane-objects{--ct-tint:var(--ht-gold)}

/* ---------- 页头：和创作工具的标题一个字号，图标块用首页「常用工具」那种小方块 ---------- */
.ct-page .ct-heading{gap:14px;min-height:88px;padding:8px 0 22px}
.ct-page .ct-heading-icon{width:44px;height:44px;flex-basis:44px;border:1px solid var(--ht-edge);border-radius:8px;
  background:linear-gradient(160deg,var(--surf),color-mix(in srgb,var(--ct-tint) 6%,var(--surf)));color:var(--ct-tint);box-shadow:var(--ht-raised)}
.ct-page .ct-heading-icon>.ui-icon{width:22px;height:22px;filter:drop-shadow(0 1px 0 var(--ht-rim))}
.ct-page .ct-eyebrow{font-size:11px;margin-bottom:2px}
.ct-page .ct-heading h2{font-size:26px;line-height:1.3;font-weight:650;white-space:nowrap}
.ct-page .ct-model{margin-left:2px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:11px;line-height:1.5;background:transparent}
.ct-page .ct-model:empty{display:none}
.ct-page .ct-workspace{min-height:36px;padding:7px 13px;border:1px solid var(--ht-edge);border-radius:999px;background:transparent;color:var(--fg);font-size:12px;font-weight:500}
.ct-page .ct-workspace:hover{border-color:var(--ht-ink);background:var(--hole);color:var(--fg)}
.ct-page .ct-workspace:active{box-shadow:var(--ht-pressed)}
/* 物品页的「照片建模 / 场景工作室」：原来套的 .tabs.sm 会撑满一整行、按钮还是浏览器默认灰块，改成一组分段按钮 */
.ct-page .ct-objects-modes{width:auto;flex:0 0 auto;gap:2px;margin:0 0 0 8px;padding:3px;border:1px solid var(--ht-edge);border-radius:999px;background:transparent}
.ct-page .ct-objects-modes>button{min-height:30px;padding:4px 13px;border:0;border-radius:999px;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}
.ct-page .ct-objects-modes>button:hover{color:var(--fg)}
.ct-page .ct-objects-modes>button[aria-pressed="true"]{background:var(--soft);color:var(--acc);font-weight:600;box-shadow:inset 0 1px 0 var(--ht-rim)}

/* ---------- 左边的创作面板 ---------- */
.ct-page .ct-compose{border-color:var(--ht-edge);border-radius:12px;background:var(--ht-paper);box-shadow:0 4px 18px #0000000d}
.ct-page .ct-compose-heading{padding:16px 20px;border-bottom-color:var(--ht-edge)}
.ct-page .ct-compose-heading h3{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:650}
.ct-page .ct-compose-heading h3::before,.ct-page .ct-results-heading h3::before{content:"";display:block;flex:0 0 3px;width:3px;height:13px;
  background:var(--acc);border-radius:60% 30% 45% 20%;transform:rotate(9deg);opacity:.75}
.ct-page .ct-compose-scroll{padding:18px 20px}
.ct-page .ct-compose-scroll::-webkit-scrollbar-thumb{border-color:var(--ht-paper)}
.ct-page .ct-compose label{font-size:12px;font-weight:500;color:var(--dim);margin-top:18px}
.ct-page .ct-compose .ct-prompt-label{margin-top:0}
.ct-page .ct-char-count{font-size:11px;font-variant-numeric:tabular-nums}
.ct-page .ct-compose input[type=text],.ct-page .ct-compose input[type=number],.ct-page .ct-compose textarea,.ct-page .ct-compose select{
  border:1px solid var(--ht-edge);border-radius:8px;background:var(--bg);color:var(--fg);font-size:13px;padding:9px 12px;box-shadow:var(--ht-pressed)}
.ct-page .ct-compose input[type=text],.ct-page .ct-compose input[type=number],.ct-page .ct-compose select{min-height:40px}
.ct-page .ct-compose select{height:40px;padding-right:32px}
.ct-page .ct-compose select:hover{border-color:var(--ht-ink)}
.ct-page .ct-compose .selwrap::after{right:14px;width:6px;height:6px;margin-top:-4px;border-color:var(--dim);transition:transform .15s}
.ct-page .ct-compose textarea{line-height:1.8}
.ct-page .ct-compose input:focus,.ct-page .ct-compose textarea:focus,.ct-page .ct-compose select:focus,.ct-page .ct-compose select.ui-select-open{
  border-color:var(--ht-ink);outline:2px solid var(--soft);outline-offset:0}
.ct-page .ct-compose ::placeholder{color:var(--ph)}
.ct-page .ct-compose .subhint,.ct-page .ct-compose label .hint,.ct-page .ct-compose .seedlock,.ct-page .ct-compose #durhint{font-size:11px!important;color:var(--dim)}
.ct-page .ct-compose .q{width:17px;height:17px;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:10px}
.ct-page .ct-compose .q:hover{border-color:var(--ht-ink);color:var(--fg)}
/* 灵感示例和时长快捷：和首页那排示例同一种胶囊 */
.ct-page .ct-presets{gap:7px;margin-top:12px}
.ct-page .ct-presets>button{min-height:30px;padding:4px 11px;border-color:var(--line);border-radius:999px;color:var(--dim);font-size:12px}
.ct-page .ct-presets>button:hover{border-color:var(--ht-ink);color:var(--fg)}
.ct-page .ct-compose .chips{gap:5px}
.ct-page .ct-compose .chips button{min-height:28px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:11px}
.ct-page .ct-compose .chips button:hover{border-color:var(--ht-ink);color:var(--fg)}
.ct-page .ct-compose .chips button.on{border-color:var(--acc);background:var(--soft);color:var(--fg)}
.ct-page .ct-section{border-top-color:var(--ht-edge);margin-top:22px}
.ct-page .ct-section>h3,.ct-page .ct-section>summary{font-size:13px;font-weight:600}
.ct-page .ct-section>summary small{font-size:11px}
.ct-page .ct-section>summary:hover>span{color:var(--acc)}
.ct-page .ct-compose .opt{font-size:12px}
.ct-page .ct-compose .seedrow .iconbtn{width:40px;flex-basis:40px;border:1px solid var(--ht-edge);border-radius:8px;background:var(--bg);box-shadow:var(--ht-pressed)}
.ct-page .ct-compose .seedrow .iconbtn:hover{border-color:var(--ht-ink);color:var(--fg)}
/* 参考素材的槽位 / 文件行 */
.ct-page .ct-compose .slot,.ct-page .oimg{border-color:var(--ht-edge);border-radius:8px;background:var(--bg)}
.ct-page .ct-compose .frow,.ct-page .ct-compose .grow{border-color:var(--ht-edge);border-radius:8px;background:var(--bg);font-size:12px}
.ct-page .oimg.oadd{font-size:12px}.ct-page .oimg.oadd small{font-size:11px}
.ct-page .oimg.oadd:hover,.ct-page .oimg.oadd.drag{border-color:var(--ht-ink)}
/* 音频页的配音 / 音效 / 配乐：和物品页的分段按钮一个长相 */
.ct-page .ct-audio-modes{width:calc(100% - 40px);margin:14px 20px 0;padding:3px;border:1px solid var(--ht-edge);border-radius:999px;background:transparent}
.ct-page .ct-audio-modes .tab{min-height:32px;padding:6px 0;border-radius:999px;color:var(--dim);font-size:12px}
.ct-page .ct-audio-modes .tab:hover{color:var(--fg)}
.ct-page .ct-audio-modes .tab.on{background:var(--soft);color:var(--acc);font-weight:600;box-shadow:inset 0 1px 0 var(--ht-rim)}
.ct-page .ct-compose .mini{border-color:var(--ht-edge);border-radius:999px;background:transparent;color:var(--fg);font-weight:500}
.ct-page .ct-compose .mini:hover{border-color:var(--ht-ink);background:var(--hole);color:var(--fg)}
.ct-page .go.sub{border-color:var(--ht-edge);border-radius:999px;background:transparent;font-size:12px}
.ct-page .go.sub:hover{border-color:var(--ht-ink);background:var(--hole)}
.ct-page #ttsclonewrap{border-color:var(--ht-edge)}
.ct-page .warnbox{font-size:12px}
.ct-page .ttsout{border-color:var(--ht-edge);border-radius:8px}
/* 提交：首页「生成」那颗胶囊主按钮 */
.ct-page .ct-submit{padding:14px 20px;border-top-color:var(--ht-edge);background:var(--ht-paper)}
.ct-page .ct-compose-scroll .ct-submit{margin:22px -20px -18px}
.ct-page .ct-submit .go{min-height:44px;border:1px solid var(--acc);border-radius:999px;background:var(--acc);color:var(--on-accent);font-size:14px;font-weight:600;
  box-shadow:0 3px 10px #00000014;transition:transform .15s,box-shadow .15s,opacity .15s}
.ct-page .ct-submit .go:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff20,0 3px 0 #00000020,0 5px 10px #00000012}
.ct-page .ct-submit .go:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px #00000025}
.ct-page .ct-submit .go:disabled{border-color:var(--ht-edge);background:var(--hole);color:var(--dim);box-shadow:none;opacity:1}
.ct-page .ct-submit .est{font-size:11px;margin-top:9px}

/* ---------- 右边的生成记录 ---------- */
.ct-page .ct-results-heading h3{font-size:15px;font-weight:650}
.ct-page .ct-history-caption{font-size:11px}
.ct-page .ct-results-heading h3>span{padding:1px 8px;border-color:var(--ht-edge);border-radius:999px;font-size:11px;font-variant-numeric:tabular-nums}
.ct-page .ct-results-heading .iconbtn{width:34px;height:34px;border:1px solid var(--ht-edge);border-radius:8px;background:var(--surf);color:var(--dim);box-shadow:var(--ht-raised)}
.ct-page .ct-results-heading .iconbtn:hover{border-color:var(--ht-ink);color:var(--fg)}
.ct-page .ct-results-heading .iconbtn:active{box-shadow:var(--ht-pressed)}
.ct-page .ct-results-toolbar{border-bottom-color:var(--ht-edge)}
/* 状态筛选：首页灵感分类那种，选中的字变主色、底下一笔铅笔线 */
.ct-page .ct-filters{gap:14px}
.ct-page .ct-filters>button{position:relative;min-height:32px;padding:6px 2px;border-radius:0;background:none;color:var(--dim);font-size:12px}
.ct-page .ct-filters>button[aria-pressed="true"]{background:none;color:var(--acc);font-weight:600}
.ct-page .ct-filters>button[aria-pressed="true"]::after{content:"";position:absolute;left:1px;right:0;bottom:0;height:5px;
  border-bottom:2px solid var(--acc);border-radius:0 0 50% 25%;transform:rotate(-3deg);opacity:.75;pointer-events:none}
.ct-page .ct-search{min-height:36px;padding:6px 11px;border-color:var(--ht-edge);border-radius:8px;background:var(--hole);box-shadow:var(--ht-pressed)}
.ct-page .ct-search:focus-within{border-color:var(--acc);outline:2px solid var(--soft);outline-offset:1px}
.ct-page .ct-search .ui-icon{width:15px;height:15px}
.ct-page .ct-search input{font-size:12px}
.ct-page .ct-results-toolbar .ct-kind-filter{width:118px;min-height:36px;padding:6px 30px 6px 11px;border:1px solid var(--ht-edge);border-radius:8px;
  background-color:var(--hole);color:var(--fg);font-size:12px;box-shadow:var(--ht-pressed)}
.ct-page .ct-results-toolbar .ct-kind-filter:hover{border-color:var(--ht-ink)}
.ct-page .ct-queue .qtitle{font-size:12px}
.ct-page .ct-queue .qtext{font-size:12px}
.ct-page .ct-queue .qeta,.ct-page .ct-queue .qdur{font-size:11px}
.ct-page .ct-queue .qnum{border-color:var(--ht-edge);border-radius:6px}
.ct-page .ct-queue .qx{border-radius:6px}
.ct-page .ct-queue .dot.busy{background:var(--acc)}
/* 卡片：首页项目卡的边框和阴影 */
.ct-page .card,.ct-page .acard{border-color:var(--ht-edge);border-radius:10px;background:var(--surf);box-shadow:var(--ht-raised);transition:border-color .16s}
.ct-page .card:hover,.ct-page .acard:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--ht-edge))}
.ct-page .thumb{border-radius:9px 9px 0 0;box-shadow:var(--ht-pressed)}
/* 播放键是白底圆片：暗色主题的主色是很浅的紫，画在白底上看不见，固定用深一档的紫 */
.ct-page .play span::after{border-left-color:#765398}
.ct-page .ocard .play.o3d span{color:#765398}
.ct-page .cbody{padding:12px 14px 14px}
.ct-page .cp,.ct-page .ap{font-size:13px}
.ct-page .cmeta{font-size:11px}
.ct-page .cmeta .st{padding:2px 8px;border-radius:999px;font-size:11px}
.ct-page .cmeta .m-seed{border-radius:999px;font-size:11px;padding:2px 7px}
.ct-page .cmeta .del,.ct-page .cmeta .cancel,.ct-page .m-dl .enh{border-radius:999px;font-size:11px;padding:3px 9px}
.ct-page .m-dl a{font-size:11px}
.ct-page .ct-reuse .ui-icon{width:14px;height:14px}
.ct-page .ct-reuse:hover{color:var(--acc)}
/* 空状态 */
.ct-page .ct-empty-icon{border-color:var(--ht-edge);border-radius:10px;background:linear-gradient(160deg,var(--surf),var(--hole));color:var(--ht-ink);box-shadow:var(--ht-raised)}
.ct-page .ct-empty h3{font-size:14px}
.ct-page .ct-empty>.mini{min-height:36px;padding:7px 14px;border-color:var(--ht-edge);border-radius:999px;background:transparent;color:var(--fg);font-size:12px}
.ct-page .ct-empty>.mini:hover{border-color:var(--ht-ink);background:var(--hole)}
.ct-page .ct-starters>button{border-color:var(--ht-edge);border-radius:8px;box-shadow:var(--ht-raised)}
.ct-page .ct-starters>button:hover{border-color:var(--acc)}
.ct-page .ct-starters>button>span{font-size:12px}
.ct-page .ct-sound-presets>button{border-color:var(--line);border-radius:999px;background:transparent;font-size:12px}
.ct-page .ct-sound-presets>button:hover{border-color:var(--ht-ink);color:var(--fg)}
.ct-page .ct-load-error{border-radius:0 6px 6px 0}
.ct-page .ct-mobile-views{border-color:var(--ht-edge);border-radius:999px;background:transparent}
.ct-page .ct-mobile-views>button{border-radius:999px;font-size:13px}
.ct-page .ct-mobile-views>button[aria-pressed="true"]{background:var(--soft);color:var(--acc);font-weight:600;box-shadow:inset 0 1px 0 var(--ht-rim)}

@media(max-width:940px){
  .ct-page .ct-compose{border-radius:12px}
  .ct-page .ct-heading{flex-wrap:wrap;row-gap:10px}
  .ct-page .ct-objects-modes{order:5;margin-left:0}
}
@media(max-width:600px){
  .ct-page .ct-heading{gap:10px;min-height:74px}
  .ct-page .ct-heading-icon{width:36px;height:36px;flex-basis:36px}
  .ct-page .ct-heading-icon>.ui-icon{width:19px;height:19px}
  .ct-page .ct-heading h2{font-size:20px}
  .ct-page .ct-model{font-size:10px;padding:2px 7px}
  .ct-page .ct-workspace{width:36px;padding:0}
  .ct-page .ct-compose-heading{padding:14px 16px}
  .ct-page .ct-compose-scroll{padding:16px}
  .ct-page .ct-compose-scroll .ct-submit{margin:22px -16px -16px}
  .ct-page .ct-submit{padding:12px 16px}
  .ct-page .ct-audio-modes{width:calc(100% - 32px);margin:12px 16px 0}
  .ct-page .ct-compose input[type=text],.ct-page .ct-compose input[type=number],.ct-page .ct-compose textarea,.ct-page .ct-compose select{font-size:16px}
  .ct-page .ct-filters{gap:10px}
  .ct-page .ct-objects-modes{flex:1 1 100%}
  .ct-page .ct-objects-modes>button{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .ct-page .ct-submit .go:hover:not(:disabled),.ct-page .ct-submit .go:active:not(:disabled){transform:none}
}

/* ==== /css/ui-select.css ==== */
/* 站内下拉的弹出列表（js/ui-select.js）。长相照画布胶囊菜单 .nc-pill-menu：圆角浮层、34px 一行、选中打勾。
   颜色从 select 所在那块读出来塞进 --uis-*，所以 3D 工作室那套自己的配色也对得上。 */
.ui-select-menu{position:fixed;z-index:1000;display:flex;flex-direction:column;gap:1px;min-width:120px;max-width:min(420px,calc(100vw - 16px));
  max-height:320px;overflow-y:auto;overscroll-behavior:contain;padding:5px;margin:0;
  border:1px solid var(--uis-line);border-radius:12px;background:var(--uis-bg);color:var(--uis-fg);
  box-shadow:0 14px 36px #0000003d,0 2px 6px #0000001a;font-size:13px;line-height:1.4;text-align:left;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--uis-fg) 25%,transparent) transparent;
  animation:ui-select-in .12s cubic-bezier(.2,0,0,1)}
.ui-select-menu.is-up{animation-name:ui-select-up}
.ui-select-menu [role="option"]{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-height:34px;padding:6px 10px;border-radius:8px;
  color:var(--uis-dim);cursor:pointer;white-space:nowrap;user-select:none}
.ui-select-menu [role="option"]>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ui-select-menu [role="option"].is-active{background:color-mix(in srgb,var(--uis-fg) 9%,transparent);color:var(--uis-fg)}
.ui-select-menu [role="option"][aria-selected="true"]{color:var(--uis-fg);font-weight:550}
.ui-select-menu [role="option"]>.ui-icon{width:14px;height:14px;flex:0 0 14px;color:var(--uis-acc);visibility:hidden}
.ui-select-menu [role="option"][aria-selected="true"]>.ui-icon{visibility:visible}
.ui-select-menu [role="option"][aria-disabled="true"]{opacity:.42;cursor:default}
.ui-select-group{padding:8px 10px 4px;color:var(--uis-dim);font-size:11px;font-weight:550;opacity:.8}
.ui-select-group:not(:first-child){margin-top:4px;border-top:1px solid var(--uis-line)}
@keyframes ui-select-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes ui-select-up{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.ui-select-menu{animation:none}}
@media(max-width:600px){.ui-select-menu [role="option"]{min-height:40px;font-size:14px}}

/* 打开时收起箭头翻过来，看得出是哪一个开着 */
.selwrap:has(>select.ui-select-open)::after,.fw-opts .sw2:has(>select.ui-select-open)::after{transform:rotate(225deg);margin-top:-1px}

/* 有些地方的 select 被全局的 appearance:none 抹掉了箭头又没人补（创作工具、弹窗、3D 工作室那几处原来还是系统箭头），
   看着像个输入框。统一补一个画出来的箭头；selwrap / 提示条 / 胶囊自己画了的不动。 */
:is(.cs-field,.cs-actions,.wb-dialog,.fw-modal-body,.wb-canvas-tools,.wb-library-tools,#os3d) select:not([multiple]):not([size]),
#cs-tool-switch,.ct-results-toolbar .ct-kind-filter{
  appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px}
#os3d select:not([multiple]):not([size]){padding-right:24px;background-position:right 6px center;background-size:12px 12px}

/* ==== /css/skeleton.css ==== */
/* 骨架屏（js/skeleton.js）：内容还没到的地方按它最终的样子占位，一道高光横着扫过去，代替转圈。
   颜色全从 --fg 混出来：明暗主题、首页 / 画布 / 工作室各自改过的那套变量都自动跟着走。
   这个文件要排在所有样式表最后：媒体等待态、首页项目卡片那几条要盖过各页面自己的写法。 */

/* ---------- 块状占位 ---------- */
.skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--fg) 7%,transparent)}
/* 高光走伪元素 + transform，在合成层上跑，不逼整块重绘 */
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 7%,transparent),transparent);
  animation:skel-sweep 1.6s ease-in-out infinite}
.skel-line{display:block;width:var(--w,100%);height:10px;border-radius:4px}
.skel-line.sm{height:8px}
.skel-pill{display:inline-block;width:var(--w,48px);height:18px;border-radius:99px}
.skel-bar{display:block;height:36px;border-radius:99px}
.skel-box{display:block;flex:0 0 auto;width:16px;height:16px;border-radius:4px}
.skel-item{pointer-events:none;user-select:none}
.skel-item .abody{display:flex;flex-direction:column;gap:10px}
.skel-item .cmeta{gap:8px}
.skel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 图片 / 视频：出第一帧之前 ---------- */
/* <img> / <video> 是替换元素挂不了伪元素，流光直接画在元素自己的背景上（没画面时露出来的就是背景）。
   各处给媒体垫的底色（成片卡片的 #0d1016 之类）这时要让位，所以用 !important；出了画面属性一撤就原样回来。 */
:is(img,video)[data-skel="wait"]{
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 8%,transparent) 50%,transparent 70%) 0 0/300% 100% no-repeat
    color-mix(in srgb,var(--fg) 7%,transparent) !important;
  animation:skel-sheen 1.6s ease-in-out infinite !important;
  color:transparent}
:is(img,video)[data-skel="in"]{animation:skel-in .35s ease-out}

/* ---------- 生成中 ---------- */
/* 成片 / 三维卡片：整块画框铺流光，阶段文字、进度条、剩余时间压在上面。
   出了实时预览（.haspv）就让位给预览图，.wait 缩成底部那条半透明状态栏（form.css）。 */
.thumb:not(.haspv)>.wait.live{align-self:stretch;justify-content:center;
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 7%,transparent) 50%,transparent 70%) 0 0/300% 100% no-repeat;
  animation:skel-sheen 1.6s ease-in-out infinite}
/* 工作台画布上的片段：排队 / 生成中那块占位。失败的（.err）不扫，出了实时预览也不扫 */
.clip .cv .ph:not(.err):not(:has(>.pv)){
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 7%,transparent) 50%,transparent 70%) 0 0/300% 100% no-repeat;
  animation:skel-sheen 1.6s ease-in-out infinite}

/* ---------- 列表还没拉回来 ---------- */
/* 创作页（视频 / 声音 / 三维）：记录回来之前，空状态那块直接排成卡片网格，列宽和 .ct-page .cards 一致。
   标题「正在载入生成记录」留给读屏。 */
.ct-empty:not(.ct-loading)>.skel-item{display:none}
.ct-empty.ct-loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:22px 16px;
  align-items:start;min-height:0;padding:0;text-align:left}
.ct-empty.ct-loading>:not(.skel-item,h3){display:none}
.ct-empty.ct-loading>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ct-empty.ct-loading>.skel-item{margin:0}
/* 首页「最近项目」：占位直接套真实卡片的类，跟着各断点的布局走。
   它在的时候「正在加载项目…」只留给读屏；加载中整组半透明那条（home.css）别作用到占位上，本来就够淡了 */
#hm-projects:has(>.skel-item)+#hm-project-status{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#hm-projects[aria-busy] .skel-item .hm-project{opacity:1}
.skel-item .hm-project-text .skel-line{height:12px;margin:3px 0}
.skel-item .hm-project-text .skel-line.sm{height:9px}
/* 一行一条的列表（生成历史）：和 .wb-history-item 一样的行高和分隔线 */
.skel-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.skel-row>span{flex:1;min-width:0}
.skel-row .skel-line{height:11px;margin:4px 0}
.skel-row .skel-line.sm{height:9px;margin-top:9px}

@keyframes skel-sweep{to{transform:translateX(100%)}}
@keyframes skel-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes skel-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .skel::after{display:none}
  :is(img,video)[data-skel="wait"]{animation:none !important}
  :is(img,video)[data-skel="in"],.thumb>.wait.live,.clip .cv .ph{animation:none}
}