/* Presentation only. Existing task, billing and reference-image selectors stay intact. */
:root[data-theme] {
  --page:#f0f7fa; --surface:#f9fcfe; --ink:#183044; --muted:#50677b;
  --accent:#4269d8; --line:rgba(83,110,149,.17); --soft:rgba(226,235,249,.56);
  --glass:rgba(255,255,255,.84); --glass-bar:rgba(248,253,255,.88);
  --glass-edge:rgba(255,255,255,.9); --glass-shadow:0 18px 56px -24px rgba(51,77,112,.25),inset 0 1px 0 rgba(255,255,255,.94);
  --control:rgba(255,255,255,.83); --control-edge:rgba(92,119,159,.25);
  --accent-soft:rgba(72,115,225,.1); --quiet-glass:rgba(255,255,255,.62);
  --aurora-mint:#65dcd9; --aurora-blue:#719aff; --aurora-violet:#ec9dd0; --aurora-opacity:.34;
  --gutter:28px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] {
  --page:#06111e; --surface:#132b40; --ink:#edf4fc; --muted:#a1b9cc;
  --accent:#a7cfee; --line:rgba(145,189,220,.18); --soft:rgba(89,146,182,.12);
  --glass:rgba(18,43,62,.71); --glass-bar:rgba(16,42,62,.79);
  --glass-edge:rgba(156,207,239,.28); --glass-shadow:0 24px 60px -24px rgba(0,0,0,.52),inset 0 1px 0 rgba(180,222,249,.2),0 0 22px -12px rgba(104,182,239,.2);
  --control:rgba(10,19,36,.56); --control-edge:rgba(167,192,230,.22);
  --accent-soft:rgba(145,174,255,.14); --quiet-glass:rgba(123,151,204,.07);
  --aurora-mint:#26afb8; --aurora-blue:#446cea; --aurora-violet:#b568c6; --aurora-opacity:.72;
}
:root[data-theme] body {background:transparent;color:var(--ink);isolation:isolate;min-height:100svh}
.aurora {position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 45% 0%,var(--soft),transparent 66%),var(--page);contain:strict}
.aurora-ribbon {position:absolute;display:block;width:75vw;height:58vh;min-width:480px;min-height:380px;border-radius:45% 55% 60% 40%;filter:blur(70px);opacity:var(--aurora-opacity);will-change:transform;animation:aurora-drift 16s ease-in-out infinite alternate}
.ribbon-mint {top:-27%;left:-13%;background:radial-gradient(ellipse,var(--aurora-mint),transparent 68%);transform:rotate(-24deg)}
.ribbon-blue {top:9%;right:-25%;background:radial-gradient(ellipse,var(--aurora-blue),transparent 69%);animation-name:aurora-tide;animation-duration:22s;animation-delay:-9s}
.ribbon-violet {bottom:-8%;left:7%;width:86vw;height:83vh;background:radial-gradient(ellipse,var(--aurora-violet),transparent 68%);animation-duration:26s;animation-delay:-17s}
/* Prismatic light curtains: translucent blue, rose and champagne, with no external assets. */
.aurora::before,.aurora::after {content:"";position:absolute;pointer-events:none;will-change:transform}
.aurora::before {inset:-35% -20%;background:repeating-linear-gradient(112deg,transparent 0% 9%,#5989ff00 12%,#7298ff38 14%,#b994f54a 16%,#efbad733 17%,transparent 20% 31%);filter:blur(16px);-webkit-mask-image:radial-gradient(ellipse at 62% 42%,#000,transparent 65%);mask-image:radial-gradient(ellipse at 62% 42%,#000,transparent 65%);animation:aurora-curtain 19s ease-in-out infinite alternate;opacity:.78}
.aurora::after {width:130%;height:52%;left:-15%;top:12%;border-radius:50%;background:radial-gradient(ellipse,#f6c8a047 0%,#e599c538 20%,#7993e530 42%,transparent 67%);filter:blur(35px);transform:rotate(-16deg);animation:aurora-horizon 17s ease-in-out infinite alternate;opacity:.78}
:root[data-theme="light"] .aurora::before,:root[data-theme="light"] .aurora::after {opacity:.4}
@keyframes aurora-curtain {from{transform:translate3d(-7%,-3%,0) skewX(-8deg)}to{transform:translate3d(9%,7%,0) skewX(8deg)}}
@keyframes aurora-horizon {from{transform:translate3d(-6%,-9%,0) rotate(-16deg) scaleY(.7)}to{transform:translate3d(7%,15%,0) rotate(-7deg) scaleY(1.2)}}
.aurora-grain {position:absolute;inset:0;opacity:.06;background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808da8' opacity='.18' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
@keyframes aurora-drift {0%{transform:translate3d(-5%,-7%,0) rotate(-24deg) scale(1)}100%{transform:translate3d(20%,18%,0) rotate(8deg) scale(1.12)}}
@keyframes aurora-tide {0%{transform:translate3d(8%,-12%,0) rotate(12deg)}100%{transform:translate3d(-22%,20%,0) rotate(-15deg) scale(1.16)}}
:root:is([data-aurora="off"],[data-page-hidden="true"]) .aurora-ribbon,
:root:is([data-aurora="off"],[data-page-hidden="true"]) .aurora::before,
:root:is([data-aurora="off"],[data-page-hidden="true"]) .aurora::after,
:root:is([data-aurora="off"],[data-page-hidden="true"]) .studio-intro::before,
:root:is([data-aurora="off"],[data-page-hidden="true"]) .studio-intro::after {animation-play-state:paused;will-change:auto}
:root[data-theme] .topbar {
  height:76px;padding:0 var(--gutter);gap:12px;background:var(--glass-bar);color:var(--ink);
  border-bottom:1px solid var(--glass-edge);box-shadow:0 1px 0 var(--line),0 8px 30px -22px rgba(24,49,84,.3);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
}
:root[data-theme] .brand {width:34px;height:34px;flex:none;border-radius:0;background:none;border:0;box-shadow:none}
:root[data-theme] .top-title {font-size:15px;font-weight:650;letter-spacing:.2px}
:root[data-theme] :is(.top-sub,.origin) {color:var(--muted);font-size:11px}
:root[data-theme] :is(.top-btn,.theme-toggle,.top-balance) {border:1px solid var(--control-edge);border-radius:999px;background:var(--quiet-glass);color:var(--ink);font-size:11px;padding:9px 13px;min-height:34px;box-shadow:inset 0 1px 0 var(--glass-edge)}
:root[data-theme] :is(.top-btn,.theme-toggle):hover {background:var(--accent-soft);border-color:var(--accent)}
:root[data-theme] .theme-toggle[aria-pressed="true"] {background:var(--accent-soft);border-color:var(--control-edge)}
.aurora-toggle {display:inline-flex;align-items:center;gap:6px}
.aurora-indicator {width:7px;height:7px;border-radius:50%;background:#59bbaa;box-shadow:0 0 9px #66b9bf55}
.aurora-toggle[aria-pressed="false"] .aurora-indicator {background:var(--muted);box-shadow:none}
:root[data-theme] main {padding:0 var(--gutter) 44px;margin:0 auto;width:100%;max-width:none}
.studio-intro {position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:35px 3px 29px}
.studio-intro::before,.studio-intro::after {content:"";position:absolute;z-index:-1;pointer-events:none;width:65%;height:170px;right:1%;top:6%;border-radius:50%;background:conic-gradient(from 40deg,#91effc00,#80dfe48c,#bbadffb3,#ffd5bdcc,#e899ca8c,#8999ee33,#91effc00);-webkit-mask-image:radial-gradient(ellipse,transparent 54%,#000 57%,#000 59%,transparent 67%);mask-image:radial-gradient(ellipse,transparent 54%,#000 57%,#000 59%,transparent 67%);filter:blur(1px);transform:rotate(-13deg);animation:prism-ribbon 14s ease-in-out infinite alternate;opacity:.6}
.studio-intro::after {width:58%;height:125px;top:23%;right:7%;filter:blur(4px);opacity:.4;animation-direction:alternate-reverse;animation-delay:-6s}
@keyframes prism-ribbon {from{transform:translate3d(-2%,3%,0) rotate(-13deg) scaleY(.8)}to{transform:translate3d(4%,-5%,0) rotate(-5deg) scaleY(1.14)}}
:root[data-theme="light"] .studio-intro::before {opacity:.35}
:root[data-theme="light"] .studio-intro::after {opacity:.2}
.studio-eyebrow {font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--muted);margin:0 0 12px}
.studio-intro h1 {font-size:clamp(25px,2.5vw,38px);line-height:1.25;letter-spacing:-1.25px;font-weight:650;margin:0;color:var(--ink)}
.studio-description {font-size:12px;margin:12px 0 0;color:var(--muted);letter-spacing:.4px;line-height:1.7}
.studio-signature {display:flex;align-items:center;gap:20px;color:var(--muted);font-size:11px;line-height:1.8;letter-spacing:.4px;padding-right:10px}
.studio-orbit {display:block;width:60px;height:60px;border:1px solid var(--glass-edge);border-radius:50%;background:linear-gradient(140deg,#ffffff90,#93bddd35,#b9a7ec22);box-shadow:inset 8px 5px 14px #ffffff45,inset -8px -5px 16px #8ba0db20,0 8px 24px #658bd720;position:relative}
.studio-orbit::after {content:"";position:absolute;inset:12px -12px;border:1px solid var(--control-edge);border-radius:50%;transform:rotate(-35deg);box-shadow:0 1px 0 var(--glass-edge)}
:root[data-theme] :is(.card,.dlg) {background:var(--glass);color:var(--ink);border:1px solid var(--glass-edge);border-radius:24px;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(28px) saturate(135%);backdrop-filter:blur(28px) saturate(135%)}
:root[data-theme] .layout {grid-template-columns:minmax(320px,390px) minmax(0,1fr);gap:22px}
:root[data-theme] :is(.composer,.task-card) {padding:24px}
:root[data-theme] :is(.card h1,.card h2) {color:var(--ink);font-size:17px;letter-spacing:-.35px;font-weight:650}
:root[data-theme] .card-head {margin-bottom:20px}
:root[data-theme] .card-head p {color:var(--muted);line-height:1.8}
:root[data-theme] :is(.notice,.security-details) {background:var(--quiet-glass);border:1px solid var(--glass-edge);border-radius:13px;color:var(--muted);box-shadow:inset 0 1px 0 var(--glass-edge);padding:11px 15px;margin-bottom:10px}
:root[data-theme] .security-details {display:block}
:root[data-theme] .security-details>summary {min-width:0}
:root[data-theme] .security-details>summary span {min-width:0;flex:1}
:root[data-theme] :is(.notice b,.notice-details>summary,.security-details>summary b) {color:var(--ink);font-weight:600}
:root[data-theme] :is(.notice-details>summary::after,.notice-details>summary span,.security-details-body) {color:var(--muted)}
:root[data-theme] .top-tabs {width:fit-content;max-width:100%;gap:4px;border:1px solid var(--glass-edge);padding:5px;margin:22px 0 20px;border-radius:15px;background:var(--quiet-glass);box-shadow:inset 0 1px 0 var(--glass-edge)}
:root[data-theme] .ptab {border:0;border-radius:10px;margin:0;padding:10px 20px;color:var(--muted);font-size:12px;transition:background .2s,color .2s,box-shadow .2s}
:root[data-theme] .ptab.active {background:var(--glass);color:var(--ink);box-shadow:0 2px 8px #233c6612,inset 0 1px 0 var(--glass-edge)}
:root[data-theme] .ptab:hover {color:var(--accent);background:var(--quiet-glass)}
:root[data-theme] :is(.badge,.pill) {border:1px solid var(--line);background:var(--quiet-glass);color:var(--muted);border-radius:999px}
:root[data-theme] .field {margin:17px 0}
:root[data-theme] .field label {color:var(--ink);font-size:12px;font-weight:600;margin-bottom:8px}
:root[data-theme] :is(.input,.select,.textarea,.a-main textarea,.a-foot select) {background:var(--control);color:var(--ink);border:1px solid var(--control-edge);border-radius:12px;padding:11px 12px;box-shadow:inset 0 1px 3px #20375604;font-size:12px;transition:box-shadow .18s,border-color .18s,background .18s}
:root[data-theme] :is(.input,.select) {min-height:42px}
:root[data-theme] .textarea {min-height:132px;line-height:1.75}
:root[data-theme] :is(.input,.textarea)::placeholder {color:var(--muted);opacity:.85}
:root[data-theme] :is(.input,.select,.textarea,.a-main textarea,.a-foot select):focus {border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);outline:none}
/* 卡片流里的控件要**紧凑**：上面那条通用规则给的是 11px 内边距 + 12px 圆角，
   套到页脚的小下拉 / 卡内文本域上会把行高撑开。放在通用规则之后、同特异性，后写的胜。 */
:root[data-theme] :is(.a-foot select,.a-main textarea) {padding:7px 9px;border-radius:9px;font-size:12px}
:root[data-theme] select option {background:var(--surface);color:var(--ink)}
:root[data-theme] input[type="checkbox"] {accent-color:#597cdb}
:root[data-theme] .btn {border:1px solid #ffffff2b;border-radius:12px;background:linear-gradient(145deg,#5d83e4,#526ad0);color:#fff;box-shadow:inset 0 1px 0 #ffffff35,0 5px 12px #456dd31a;padding:10px 14px;font-weight:600;transition:transform .18s,box-shadow .18s,background .18s}
:root[data-theme] .btn:hover:not(:disabled) {filter:none;transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff45,0 6px 18px #456dd32a}
:root[data-theme] .btn:active:not(:disabled) {transform:translateY(1px)}
:root[data-theme] .btn:disabled {opacity:.5;box-shadow:none}
:root[data-theme] .btn.small {font-size:11px;padding:8px 11px}
:root[data-theme] :is(.btn.secondary,.btn.ghost) {background:var(--quiet-glass);color:var(--ink);border:1px solid var(--control-edge);box-shadow:inset 0 1px 0 var(--glass-edge)}
:root[data-theme] :is(.btn.danger,.task-actions .btn.danger) {background:rgba(214,86,100,.1);color:#b74051;border:1px solid rgba(207,85,101,.25);box-shadow:none}
:root[data-theme="dark"] :is(.btn.danger,.task-actions .btn.danger) {color:#ffb4bf}
:root[data-theme] .submit-row .btn {padding:13px 11px}
:root[data-theme] :is(.filebox,.checkbox-row,.capability,.stat,.material-list li,.ref-batch,.ih-batch,.ref-pick,.file-list li.ref-item) {border:1px solid var(--line);background:var(--quiet-glass);color:var(--muted);border-radius:14px;box-shadow:inset 0 1px 0 var(--glass-edge)}
:root[data-theme] .filebox {border-style:dashed;padding:13px}
:root[data-theme] .filebox input::file-selector-button {border:1px solid var(--control-edge);border-radius:8px;background:var(--control);color:var(--ink);padding:7px 10px;margin-right:8px;font:inherit;cursor:pointer}
:root[data-theme] :is(.hint,.token-note,.point-note,.remember-row,.filebox input,.file-list li,.prog-note,.upstream-note,.empty,.task-stage,.meta-grid dt,.statusbar,.raw summary,.dlg-note,.ss-meta,.ss-note,.ss-item small,.ref-toolbar .muted) {color:var(--muted)}
:root[data-theme] :is(.task-status,.meta-grid dd,.checkbox-row b,.material-list .m-title,.ref-batch-head b,.confirm-body,.confirm-body b,.ih-head b,.file-list li.ref-item .ref-item-name) {color:var(--ink)}
:root[data-theme] :is(.task-id,.job-id,.row-btn,.ss-ref,.ss-hist) {color:var(--accent)}
:root[data-theme] .capability.warn {background:rgba(200,146,32,.11);color:#815816}
:root[data-theme] .capability.good {background:rgba(42,156,113,.1);color:#247354}
:root[data-theme="dark"] .capability.warn {color:#f4ce8b}
:root[data-theme="dark"] .capability.good {color:#9fdfc4}
:root[data-theme] .tabbar {padding-bottom:12px;border-color:var(--line);gap:6px}
:root[data-theme] .tab {border-radius:9px;padding:8px 13px;color:var(--muted)}
:root[data-theme] .tab.active {background:var(--accent-soft);border:1px solid var(--line);color:var(--accent)}
:root[data-theme] .stat {padding:15px 14px}
:root[data-theme] .stat b {font-size:23px;letter-spacing:-.7px;font-weight:600;color:var(--ink)}
:root[data-theme] .stat span {font-size:11px;color:var(--muted);margin-top:6px}
:root[data-theme] .stat.ok b {color:#25866a}
:root[data-theme] .stat.warn b {color:#946918}
:root[data-theme] .stat.bad b {color:#b74051}
:root[data-theme="dark"] .stat.ok b {color:#9fdfc4}
:root[data-theme="dark"] .stat.warn b {color:#f4ce8b}
:root[data-theme="dark"] .stat.bad b {color:#ffb4bf}
:root[data-theme] .prog {height:5px;background:var(--soft)}
:root[data-theme] .prog i {background:linear-gradient(90deg,#7bcdbc,#739ce4,#a491e2)}
:root[data-theme] :is(.meta-grid,.raw,.dlg-head,.list-head,.jobs th,.jobs td,.a-card,.a-foot,.doc-table th,.doc-table td,.doc-sec,.doc-nav) {border-color:var(--line)}
:root[data-theme] :is(.jobs th,.doc-table th) {background:var(--quiet-glass);color:var(--muted);padding-top:13px;padding-bottom:13px}
:root[data-theme] :is(.jobs td,.doc-table td) {color:var(--ink);padding-top:12px;padding-bottom:12px}
:root[data-theme] :is(.a-main,.a-fig) {color:var(--ink)}
:root[data-theme] .jobs tbody tr:hover {background:var(--accent-soft)}
/* 卡片流的「页脚条 / 空图占位」沿用原来的浅底，表格 sticky 列已不存在。 */
:root[data-theme] :is(.a-foot,.a-img-empty) {background:var(--quiet-glass)}
:root[data-theme] .a-cands img {background:var(--control)}
:root[data-theme] :is(.raw pre,.doc-pre pre,.bug-env-preview) {background:var(--control);color:var(--ink);border:1px solid var(--line);border-radius:12px}
:root[data-theme] :is(.doc-sec h2,.doc-sec h3,.doc-path) {color:var(--ink)}
:root[data-theme] :is(.doc-head-sub,.doc-sec p,.doc-sec ul,.doc-need) {color:var(--muted)}
:root[data-theme] .doc {min-width:0;overflow-wrap:anywhere}
:root[data-theme] .doc-inline {white-space:normal;overflow-wrap:anywhere}
:root[data-theme] .doc-table {display:block;overflow-x:auto;max-width:100%}
:root[data-theme] .doc-pre {min-width:0;max-width:100%}
:root[data-theme] :is(.doc-nav a,.doc-copy,.ref-tab) {border-color:var(--control-edge);background:var(--quiet-glass);color:var(--ink);border-radius:10px}
:root[data-theme] :is(.doc-inline,code) {background:var(--soft);color:var(--accent);border-color:var(--line)}
:root[data-theme] :is(.ss-item,.material-list .m-prompt,.ref-pick .ref-name) {color:var(--ink)}
:root[data-theme] :is(.ss-item.active,.ref-pick.on,.ref-tab.active,.ih-batch.current) {background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
:root[data-theme] .dlg {background:var(--glass-bar);max-height:90svh}
:root[data-theme] .dlg::backdrop {background:rgba(10,20,39,.36);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
:root[data-theme] .dlg-head {padding:18px 22px}
:root[data-theme] .dlg-body {padding:20px 22px}
:root[data-theme] :is(button,a,input,select,textarea,summary):focus-visible {outline:3px solid var(--accent);outline-offset:3px}
:root[data-theme] .player {border-radius:16px}
:root[data-theme] .page {animation:glass-arrive .35s ease-out}
/* Champagne light is reserved for the active controls, as in the reference. */
:root[data-theme="dark"] .brand {background:none;border:0;box-shadow:none}
:root[data-theme="dark"] .btn:not(.secondary):not(.ghost):not(.danger) {background:linear-gradient(160deg,#ecdab5,#c8a96f);color:#352b1c;border-color:#fae8c36b;box-shadow:inset 0 1px 0 #fff2d991,0 5px 18px #d3b0751c}
:root[data-theme="dark"] .btn:not(.secondary):not(.ghost):not(.danger):hover:not(:disabled) {box-shadow:inset 0 1px 0 #fff5dd,0 0 21px #d7b87840}
:root[data-theme="dark"] .ptab.active {color:#f0dbb4;background:linear-gradient(150deg,rgba(217,191,148,.16),rgba(217,191,148,.06));box-shadow:inset 0 0 0 1px #e3c7935c,inset 0 1px 0 #ffe4b82b,0 0 16px #d6bc8c0c}
:root[data-theme="dark"] .tab.active {color:#f0dbb4;border-color:#c9b18048;background:#cfb58312}
:root[data-theme="dark"] .studio-eyebrow {color:#d3bb90}
:root[data-theme="dark"] .studio-orbit {background:linear-gradient(140deg,#6d9fbc44,#284a6333,#c1a77722);box-shadow:inset 8px 5px 14px #9ddaff18,inset -8px -5px 16px #c9a77818,0 8px 24px #275c8820}
:root[data-theme="dark"] .prog i {background:linear-gradient(90deg,#6eb7c2,#9ebfcd,#d7bb85)}
@keyframes glass-arrive {from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (max-width:1100px) {
  :root[data-theme] {--gutter:20px}
  :root[data-theme] .topbar {gap:8px}
  :root[data-theme] :is(.top-btn,.theme-toggle,.top-balance) {padding:8px 10px}
  :root[data-theme] .layout {grid-template-columns:minmax(300px,350px) minmax(0,1fr);gap:16px}
  :root[data-theme] :is(.composer,.task-card) {padding:20px}
}
@media (max-width:900px) {
  :root[data-theme] .layout {grid-template-columns:minmax(0,1fr)}
  .studio-intro {padding-top:27px;padding-bottom:24px}
  :root[data-theme] .task-card .pane.active {min-height:280px}
}
@media (max-width:700px) {
  :root[data-theme] {--gutter:14px}
  :root[data-theme] .topbar {height:auto;min-height:72px;padding:12px var(--gutter);flex-wrap:wrap;gap:8px}
  :root[data-theme] .topbar>div:nth-child(2) {flex:1;min-width:180px}
  :root[data-theme] .topbar>.spacer {display:none}
  :root[data-theme] .top-balance {margin-left:0}
  :root[data-theme] :is(.top-btn,.theme-toggle) {min-height:34px;padding:7px 12px;justify-content:center}
  :root[data-theme] .top-sub {display:block;font-size:10px;margin-top:3px}
  .studio-signature {display:none}
  .studio-intro {padding:25px 3px 21px}
  .studio-intro h1 {font-size:28px}
  .studio-eyebrow {font-size:9px;letter-spacing:2px;margin-bottom:10px}
  :root[data-theme] .top-tabs {width:100%;gap:3px;margin-top:18px}
  :root[data-theme] .ptab {flex:1;padding:10px 6px;font-size:11px;white-space:nowrap}
  :root[data-theme] :is(.composer,.task-card) {padding:19px;border-radius:20px}
  :root[data-theme] .security-details>summary span {max-width:55%}
  :root[data-theme] .stat {padding:12px}
  :root[data-theme] .stat b {font-size:21px}
  :root[data-theme] .dlg-head {padding:15px}
  :root[data-theme] .dlg-body {padding:16px}
  .aurora-ribbon {filter:blur(48px);min-width:330px}
  .aurora::before {filter:blur(12px)}
  .studio-intro::before,.studio-intro::after {width:95%;right:-38%;opacity:.3}
}
/* ★★★ 2026-10-02：把任务表的「操作」列钉在右侧（后台 bug #5：安卓说"不能看已完成的视频"）。

   现象：线上实测（Playwright，360×691 + 安卓 UA）表格渲染 1095px、可视容器只有 292px；
   操作列（第 7 列）落在 left≈846 ⇒ **在首屏外约 486px，要横向滚 803px 才点得到**。
   而**打开成片的唯一入口就是操作列里的「获取状态」**（点它才会切到「当前任务」并加载播放器；
   行本身没有点击事件，列表里也没有别的播放入口）⇒ 按钮看不见 = 用户"看不了视频"。
   服务端 access log 也印证：该设备**一次都没请求过 /content 或 /v1/files/**，
   连 `Range: bytes=0-0` 探针都没有 —— 不是播不了，是根本没走到播放。

   根因：`.jobs{min-width:680px}` 是**必要的**（7 列挤不进 360px），
   但本文件原先只给 main/layout/topbar/composer/stat-strip 做了移动端适配，
   **表格一个字都没管**。横向滚动因此成了唯一出路，而关键列又在最右边。

   修法：只钉最后一列（操作），其余照旧横滚。手机上首屏即可看到
   ID / 状态 / 操作（外加被覆盖住左侧的 阶段），按钮永远可点。

   ⚠️ 四个必须点，改这里之前先读：
   ① sticky 单元格**必须有不透明底色** —— `td` 默认透明，横滚时下面几列的文字会从底下透上来。
   ② **表头更隐蔽**：`td` 给个底色就够了，`th` 不行。主题里那条
      `:root[data-theme] :is(.jobs th,…){background:var(--quiet-glass)}` 的
      选择器**比我下面这条更具体**（(0,3,1) > (0,2,1)），而 `--quiet-glass` 是
      `rgba(255,255,255,.4)` **半透明**的 ⇒ 表头照样透光。
      实测证据：360px 下能看见「时长」表头从钉住的「操作」表头底下穿出来。
      所以 th 必须用同具体度或更高的选择器再压一次。
   ③ **只钉「操作」一列**。钉多了会遮住状态，反而看不出是哪条任务。
   ④ 行悬停底色（`tr:hover` 打在 `tr` 上）在 sticky 单元格上**会失效**，
      因为单元格自己有不透明背景。不能直接给 `--accent-soft` ——
      它是 rgba 半透明的，一用又变回透明 ⇒ 用「不透明底 + 叠一层色调」的写法。 */
/* ★★★ 2026-10-02 续修：把「钉住操作列」收窄到**真·手机 + 鼠标设备**。
   （原来这几条是**无媒体查询的全局规则**，任何宽度的视口都钉 —— 包括平板。）

   为什么必须收窄：sticky 会让它所在的滚动内容**逐帧重绘**，横向滚动从「纯合成」
   变成「每帧重绘 + 光栅化」。有头 Chrome tracing，平板竖屏 800×1280@2x，
   同为 40 步 × 2 遍 × 5 轮：
       现状（钉列） Paint 累计 78.3ms / 1844 次
       不钉列       Paint 累计  0.0ms /    0 次   ← 完全消失
   而平板是**手指持续横向拖动**的大屏设备 ⇒ 每帧都在滚 ⇒ 每帧重绘，弱 GPU 上被放大。
   这正是「iPhone 好 / 安卓手机还行 / 安卓平板最突出」的形状。

   ⚠️ 别指望「层提升」救它（实测反而更差）：
       will-change:transform  128.8ms / 3680 次（+64%）
       transform:translateZ(0) 79ms  / 1831 次（无改善）
   也别指望去掉阴影（阴影只占约 11%，78→54ms）。

   断点是怎么定的 —— 判据不是屏宽，而是 **「不钉列时要横滑多少 px 才碰到操作列」**
   （`probe-sticky-breakpoint.mjs` 实测，scrollLeft=0 那一瞬量 ops.right − wrap.right）：
       320px 616 ｜ 360px 576 ｜ 414px 522 ｜ 480px 456 ｜ 600px 336 ｜ 640px 296
       700px 236 ｜ 768px 182 ｜ 800px 150 ｜ 900px  50
   ≤640px 时按钮在首屏外半米以上 ⇒ 必须钉；>640px 划一下就到 ⇒ 不必钉。

   为什么还要带 `(pointer:fine)`：单靠屏宽**切不干净** —— 一进两栏布局（>900px）
   需要横滑的距离又跳回 292~400px，而「平板横屏 1180px」和「笔记本 1180px」物理宽度一模一样。
   `probe-pointer-media.mjs` 实测 `(pointer:coarse)` 能干净区分：
       安卓手机/平板竖/平板横/iPad/触屏笔记本 → coarse（不钉）
       纯鼠标桌面 → fine（照旧钉，不引入桌面回归）

   万一某环境指针检测异常、两条都不命中 ⇒ 只是「都不钉」（表格本来就能横滚，用户照旧能用），
   不会坏掉。这是有意的降级方向。 */
@media (max-width:640px),(pointer:fine) {
  .jobs th:last-child,.jobs td.ops {
    position:sticky;right:0;z-index:2;
    background-color:var(--surface,#fff);
  }
  /* th 专用的同具体度覆盖（见上面 ②）：顺带把主题里那层半透明玻璃色调**叠在不透明底上**，
     这样钉住的表头和其他表头长得一模一样，不会出现一条色差。 */
  :root[data-theme] .jobs th:last-child {
    background-color:var(--surface,#fff);
    background-image:linear-gradient(var(--quiet-glass,rgba(255,255,255,.4)),var(--quiet-glass,rgba(255,255,255,.4)));
  }
  .jobs tbody tr:hover td.ops {
    background-image:linear-gradient(var(--accent-soft,#eef3fb),var(--accent-soft,#eef3fb));
  }
  /* 阴影只在**确实发生横向溢出**时才有意义（≤1100px 必然横滚；更宽时卡片装得下，
     加阴影反而像一道莫名其妙的分割线）。
     ⚠️ 必须跟着 sticky 一起走，不能留在下面的 1100px 块里 —— 否则 641~1100px
     不钉列却还留着这道阴影，就真的成了一条"莫名其妙的竖线"。 */
  .jobs th:last-child,.jobs td.ops {box-shadow:-9px 0 12px -9px rgba(27,53,81,.22)}
}
@media (max-width:1100px) {
  /* ★ 必须把「操作」列**压回内容宽度**，否则钉住反而更糟。
     `table-layout:auto` 下这一列的最小宽度由**最宽的那一行**决定，实测 293px，
     来源是失败行末尾那条 nowrap 的长提示：
         「（终态不可重启，可重新提交）」+ 三个按钮
     而 360px 视口的可视区只有 292px ⇒ 钉住之后操作列独占整屏，
     用户只看到两个按钮、不知道是哪条任务，**比不钉还难用**。
     解法：窄屏放开换行（提示单独一行、按钮可折行），再用 `min-width` 给这列一个下限：
     `108px` = 「获取状态」+「清除」并排 + 两侧内边距（48+28+3+26），
     也就是**最常见的 ready 行一行放得下**；失败行三个按钮会自动折到第二行。
     ⚠️ 这里必须是 `min-width` 而不是 `width`：表格已经缩到最小宽度时
     （实测 716px，无可压缩空间），`width` 只是一个"上限提示"，**扩不动它**
     （试过 `width:108px`，实测仍 71px）；`min-width` 才会真的把列撑到这个宽度。 */
  .jobs th:last-child,.jobs td.ops {min-width:108px}
  .jobs td.ops {white-space:normal}
  /* ⚠️ 只放开"单元格能折行"，**按钮本身必须保持 nowrap**：
     否则中文会在按钮里逐字折行（实测塌到 18px 宽、3 个字叠成一竖列）。 */
  .jobs td.ops .row-btn {white-space:nowrap}
  .jobs td.ops .hint {display:block}
  /* 顺带：窄屏下「状态」标签和表头会被压到**逐字竖排**（实测「已完成」叠成三行、
     「时长」叠成两行）。允许它们不折行，列宽会自己长到刚好放下 ——
     `.tag` 是 inline-block，不折行后列最小宽度就是标签宽度，不用手写魔法数字。 */
  .jobs .tag,.jobs th {white-space:nowrap}
}
/* 任务刷新只动数字和小状态标记，整行保持不透明，避免平板上持续明暗闪烁。 */
.jobs .pending-row td {animation:none;opacity:1}
.jobs .pending-row .tag::before {
  width:8px;height:8px;box-sizing:border-box;background:transparent;
  border:1.5px solid currentColor;border-right-color:transparent;
  opacity:1;animation:job-pending-spin 1s linear infinite;
}
.jobs td.stage-cell {width:220px;min-width:220px;font-variant-numeric:tabular-nums}
@keyframes job-pending-spin {to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce) {
  .jobs .pending-row .tag::before {animation:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root[data-theme] :is(.card,.dlg,.topbar) {background:var(--surface)}
}
@media (prefers-reduced-transparency:reduce) {
  :root[data-theme] :is(.card,.dlg,.topbar) {background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce) {
  .aurora-ribbon,.aurora::before,.aurora::after,.studio-intro::before,.studio-intro::after {animation:none;will-change:auto}
  :root[data-theme] .page,:root[data-theme] .pending-row td,:root[data-theme] .pending-row .tag::before {animation:none}
  :root[data-theme] :is(.btn,.ptab,.input,.select,.textarea,.prog i) {transition:none}
  :root[data-theme] .btn:hover:not(:disabled) {transform:none}
}

/* The rendered Remotion loop stays decorative; controls and task content retain their layout. */
.studio-intro--motion {
  height:clamp(195px,18vw,245px);margin:0 calc(-1 * var(--gutter));padding:22px var(--gutter);
  display:block;text-align:left;background:#030716;isolation:isolate;
}
.studio-intro--motion::before,.studio-intro--motion::after {display:none}
.studio-motion {position:absolute;inset:0;z-index:-1;pointer-events:none;background:#030716 url("./motion/aurora-poster-v2.jpg") center/100% 100% no-repeat}
.studio-motion video {width:100%;height:100%;object-fit:fill;display:block}
.studio-motion video:not([data-active-theme]) {visibility:hidden}
.studio-motion::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,22,.37),rgba(3,7,22,.08) 42%,rgba(3,7,22,.44));pointer-events:none}
.studio-intro--motion .studio-copy {position:absolute;inset:0;z-index:1;text-shadow:0 2px 16px #030716a6}
.studio-slide {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:16px max(calc(var(--gutter) + 46px),7vw) 30px;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .45s ease,transform .45s ease}
.studio-slide.is-active {opacity:1;visibility:visible;transform:none}
.studio-arrow {position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:1px solid #d2e7f370;border-radius:50%;background:#14294a5e;color:#fff;font:normal 28px/28px Arial,sans-serif;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 12px #07152c26}
.studio-arrow:hover {background:#295a8799}
.studio-arrow-prev {left:18px}
.studio-arrow-next {right:18px}
.studio-dots {position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:7px}
.studio-dots button {width:18px;height:5px;padding:0;border:0;border-radius:5px;background:#e1ecf286;cursor:pointer;transition:width .2s,background .2s}
.studio-dots button.is-active {width:26px;background:#fff}
.studio-arrow:focus-visible,.studio-dots button:focus-visible {outline:2px solid #fff;outline-offset:3px}
.studio-intro--motion .studio-eyebrow {color:#b7eaff;letter-spacing:2px;margin-bottom:9px}
.studio-intro--motion h1 {color:#fff;font-size:clamp(25px,2.4vw,36px);letter-spacing:0}
.studio-intro--motion .studio-description {color:#e1e9f8;font-size:12px;margin-top:9px;letter-spacing:0}
.studio-intro--motion .studio-signature {display:none}
:root[data-theme="light"] .studio-intro--motion {background:#f8fcff;border-bottom:1px solid #bad6e6}
:root[data-theme="light"] .studio-motion {background:#f8fcff url("./motion/aurora-light-poster-v2.jpg") center/100% 100% no-repeat}
:root[data-theme="light"] .studio-motion::after {background:linear-gradient(180deg,rgba(247,252,255,.38),rgba(247,252,255,.17) 45%,rgba(247,252,255,.48))}
:root[data-theme="light"] .studio-intro--motion .studio-copy {text-shadow:0 2px 15px #ffffffde}
:root[data-theme="light"] .studio-intro--motion .studio-eyebrow {color:#266d84}
:root[data-theme="light"] .studio-intro--motion h1 {color:#17354b}
:root[data-theme="light"] .studio-intro--motion .studio-description {color:#365a71}
:root[data-theme="light"] .studio-arrow {background:#ffffffd9;color:#264d6c;border-color:#78a9c696;box-shadow:0 3px 12px #55809c24}
:root[data-theme="light"] .studio-arrow:hover {background:#effaff}
:root[data-theme="light"] .studio-dots button {background:#6c97b78c}
:root[data-theme="light"] .studio-dots button.is-active {background:#285f88}
:root[data-theme="light"] :is(.studio-arrow,.studio-dots button):focus-visible {outline-color:#285f88}
:root[data-aurora="off"] .studio-motion video,
:root[data-page-hidden="true"] .studio-motion video,
.studio-intro--motion[data-motion-unavailable="true"] .studio-motion video {visibility:hidden}
@media (max-width:700px) {
  .studio-intro--motion {height:210px;padding:17px var(--gutter)}
  .studio-slide {padding:12px 48px 32px}
  .studio-intro--motion h1 {font-size:23px}
  .studio-intro--motion .studio-description {font-size:11px}
  .studio-arrow {width:30px;height:30px;font-size:24px}
  .studio-arrow-prev {left:8px}
  .studio-arrow-next {right:8px}
  .studio-dots {bottom:13px}
}
@media (prefers-reduced-motion:reduce) {
  .studio-motion video {visibility:hidden}
  .studio-slide,.studio-dots button {transition:none}
}