/* Spark Studio · 明亮白、雾蓝与清晰的创作动线 */
:root {
  color-scheme: light;
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --surface-3: #edf3fb;
  --line: #dbe4f0;
  --line-soft: #e7edf5;
  --text: #1b2b43;
  --text-dim: #40536e;
  --muted: #5c6f89;
  --faint: #61748e;
  --accent: #2166eb;
  --accent-strong: #1451c7;
  --accent-line: #9ebef7;
  --accent-soft: #edf4ff;
  --ready: #16795b;
  --err: #bc3544;
  --radius: 18px;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box}html{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{cursor:not-allowed;opacity:.48}a{color:var(--accent-strong);text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px}input,textarea,select{width:100%;min-width:0;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;transition:border-color .15s}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:none}input[type=range]{padding:4px 0;accent-color:var(--accent)}textarea{resize:vertical;line-height:1.7;min-height:90px}::placeholder{color:var(--faint)}label{display:block;font-size:12px;color:var(--text-dim);margin:15px 0 6px}h1,h2,h3,p{margin-top:0}h1{font-size:29px;letter-spacing:-.04em;line-height:1.35;margin-bottom:8px}h2{font-size:19px}h3{font-size:14px}small{font-size:11px}.muted{color:var(--muted)}.mono{font-family:var(--font-mono);font-size:11px}.req{color:var(--accent)}[hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:20px;padding:12px;background:var(--surface-3);z-index:100}.skip-link:focus{top:10px}.app{display:flex;min-height:100vh}.sidebar{width:218px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;background:#ffffff;border-right:1px solid var(--line-soft);z-index:10}.brand{display:flex;gap:12px;align-items:center;padding:28px 20px;color:var(--text)}.brand:hover{text-decoration:none}.mark{font-size:39px;color:var(--accent);line-height:1}.wm{font-family:var(--font-display);font-size:20px;line-height:1.15}.wm small{display:block;font:10px var(--font-ui);color:var(--muted);letter-spacing:.25em;margin-top:7px}.nav-group{display:block;font-size:10px;letter-spacing:.18em;color:var(--faint);margin:22px 12px 9px}nav{padding:0 12px;flex:1}nav button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 13px;border-radius:8px;margin:2px 0;color:var(--text-dim)}nav button>span:first-child{width:18px;text-align:center;font-size:17px}nav button:hover{background:var(--surface-2)}nav button.active{background:var(--accent-soft);color:var(--accent-strong)}.nav-count{margin-left:auto;background:var(--surface-3);border-radius:20px;font:10px var(--font-mono);padding:3px 6px}.engine{border-top:1px solid var(--line-soft);padding:18px 22px}.engine-title{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-bottom:9px}.engine-row{display:flex;gap:9px;align-items:center;font-size:11px;margin:8px 0;color:var(--muted)}.stat{margin-left:auto}.dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}.ready .dot{background:var(--ready)}.busy .dot{background:var(--accent)}.down .dot{background:var(--err)}.logout{margin:0 22px 22px;text-align:left;font-size:11px;color:var(--faint)}.main{margin-left:218px;min-width:0;flex:1;padding:34px 36px 60px;max-width:1800px}.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px}.eyebrow{font:10px var(--font-mono);color:var(--accent);letter-spacing:.16em;margin-bottom:11px}.view-head p{color:var(--muted);margin:0;max-width:620px;font-size:12px}.head-note{font:10px var(--font-mono);color:var(--faint);text-align:right;white-space:nowrap}.scenario-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}.scenario-tools input{max-width:280px;font-size:12px;padding:8px 11px}.scenario-count{font-size:11px;color:var(--faint);margin-left:auto}.scenario-groups,.chips{display:flex;gap:7px;flex-wrap:wrap}.scenario-groups{margin-bottom:12px}.chip{padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:11px;color:var(--text-dim)}.chip.active,.chip[aria-pressed=true]{color:var(--accent-strong);border-color:var(--accent-line);background:var(--accent-soft)}.chip:hover{border-color:var(--accent-line)}.scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:8px;margin-bottom:25px;max-height:238px;overflow:auto;padding:2px 3px 5px}.scenario-card{display:flex;flex-direction:column;gap:4px;text-align:left;min-height:87px;padding:12px 14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;transition:border-color .15s}.scenario-card strong{font-size:12px;font-weight:500}.scenario-card small{color:var(--muted);font-size:10px;line-height:1.6}.scenario-card.active{border-color:var(--accent);background:linear-gradient(120deg,#eaf3ff,var(--surface))}.scenario-card:hover{border-color:var(--accent-line)}.scenario-card.unavailable{opacity:.55}.scenario-card .pill{font-size:9px;color:var(--faint)}.work{display:grid;grid-template-columns:minmax(330px,430px) minmax(0,1fr);gap:24px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}.section-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;margin:0 0 7px}.step-num{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--accent-line);color:var(--accent);border-radius:50%;font:10px var(--font-mono)}.section-help{font-size:11px;color:var(--muted);margin:0 0 15px}.form-divider{height:1px;background:var(--line-soft);margin:23px 0}.field-help,.hint{font-size:11px;line-height:1.7;color:var(--muted);margin-top:7px}.hint{padding:11px 13px;background:var(--surface-2);border-radius:8px}.hint.warn{border-left:2px solid var(--accent)}.hint.error{border-left:2px solid var(--err);color:var(--err)}.row{display:flex;gap:10px;align-items:center}.row>*{min-width:0}.row .field{flex:1}.row .field label{margin-top:10px}.row.spaced{justify-content:space-between}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 13px;min-height:38px;border:1px solid var(--line);background:var(--surface-2);color:var(--text-dim);border-radius:8px;font-size:12px}.btn:hover{border-color:var(--accent-line);color:var(--text)}.btn.small{font-size:10px;padding:5px 9px;min-height:29px}.btn.danger{color:var(--err)}.btn.primary,.go{background:var(--accent);color:#ffffff;font-weight:600;border:1px solid transparent}.btn.primary:hover,.go:hover{background:var(--accent-strong)}.go{width:100%;border-radius:9px;padding:14px;margin-top:18px;font-size:14px}.submit-note{text-align:center;font-size:10px;color:var(--faint);margin-top:8px}.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;margin:13px 0}.assistant-box{padding:15px;background:#f4f8ff;border:1px solid var(--line);border-radius:10px;margin-top:16px}.assistant-box .section-title{font-size:12px}.assistant-box textarea{font-size:12px;min-height:150px}.assistant-box details{margin-top:10px}.assistant-box summary{font-size:11px;color:var(--accent-strong)}.assistant-status{font-size:10px;color:var(--muted);margin-top:8px}.advanced{border-top:1px solid var(--line-soft);margin-top:18px;padding-top:15px}.advanced summary{cursor:pointer;color:var(--muted);font-size:12px}.advanced[open] summary{margin-bottom:12px}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;padding:19px;border:1px dashed var(--accent-line);border-radius:10px;color:var(--text-dim);background:var(--accent-soft);font-size:12px}.dropzone small{color:var(--muted);font-size:10px}.dropzone.over{border-color:var(--accent);background:#deedff}.upload-actions{display:flex;gap:8px;margin-top:9px}.ref-list{display:grid;gap:9px;margin-top:12px}.ref-card{padding:10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px}.ref-top{display:flex;gap:10px;align-items:center}.ref-top img{width:52px;height:58px;object-fit:cover;border-radius:5px;background:#f0f4f9}.ref-name{font-size:10px;color:var(--muted);word-break:break-all;flex:1}.ref-name strong{display:block;font-size:11px;color:var(--text-dim);margin-bottom:3px}.ref-card select,.ref-card input{font-size:11px;padding:6px 8px}.ref-card label{font-size:10px;margin:8px 0 3px}.ref-controls{display:grid;grid-template-columns:1.35fr .85fr .85fr;gap:7px}.icon-btn{color:var(--muted);border:1px solid var(--line);border-radius:6px;width:28px;height:28px;font-size:15px;padding:0;flex:none}.icon-btn:hover{color:var(--text);border-color:var(--accent-line)}.result{position:sticky;top:24px;min-width:0}.result-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px}.result-head h2{margin:0;font-size:13px}.result-head span{font:10px var(--font-mono);color:var(--faint)}.canvas-empty{min-height:450px;border:1px solid var(--line-soft);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(ellipse at 50% 40%,#eaf3ff,transparent 70%)}.canvas-empty .spark{font-size:54px;color:var(--accent-line);margin-bottom:18px}.canvas-empty h3{font-size:16px;font-weight:400;margin-bottom:9px}.canvas-empty p{font-size:12px;color:var(--muted);max-width:280px}.canvas-empty .flow{font:10px var(--font-mono);color:var(--faint);margin-top:28px}.tips-card{border:1px solid var(--line-soft);border-radius:10px;padding:17px;margin-top:15px}.tips-card h3{font-size:11px;color:var(--accent);margin-bottom:8px}.tips-card p{font-size:11px;color:var(--muted);margin:6px 0}.status{padding:13px 15px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;display:flex;align-items:center;gap:9px;margin-bottom:12px}.status.err{border-color:#f0b8b9;color:var(--err)}.status.success{border-color:#a3d7c4;color:var(--ready)}.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.grid-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}.output-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden}.output-card img,.output-card video{display:block;width:100%;max-height:70vh;object-fit:contain;background:repeating-conic-gradient(#edf2f7 0% 25%,#ffffff 0% 50%) 50% / 16px 16px}.output-card img{cursor:zoom-in}.output-card audio{width:100%;margin:20px 0}.output-bar{padding:10px 12px;display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);flex-wrap:wrap}.task-card{border:1px solid var(--line);border-radius:11px;padding:16px;margin-bottom:13px;background:var(--surface)}.task-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}.task-top strong{font-size:12px}.task-top .badge{margin-left:auto}.task-card p{font-size:11px;color:var(--muted);margin:8px 0;overflow-wrap:anywhere}.task-card .task-error{color:var(--err)}.progress{height:4px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin:13px 0 8px}.progress>span{display:block;height:100%;background:var(--accent);transition:width .5s}.progress.indeterminate>span{width:30%;animation:sweep 2s infinite ease-in-out}@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.badge{display:inline-block;font-size:9px;border:1px solid var(--line);color:var(--muted);padding:2px 7px;border-radius:20px;white-space:nowrap}.badge.done{color:var(--ready);border-color:#a3d7c4}.badge.failed{color:var(--err);border-color:#f0b8b9}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.toolbar input{flex:1;min-width:180px}.toolbar select{width:140px}.history-grid,.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:15px}.history-card,.asset-card{border:1px solid var(--line);background:var(--surface);border-radius:11px;overflow:hidden}.history-cover{height:170px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--faint)}.history-cover img,.history-cover video{width:100%;height:100%;object-fit:cover}.history-cover img{cursor:zoom-in}.history-body{padding:13px}.history-body h3{font-size:12px;margin-bottom:6px}.history-prompt{font-size:11px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:52px;margin:9px 0}.history-meta{font-size:9px;color:var(--faint);display:flex;align-items:center;justify-content:space-between}.card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.empty{text-align:center;padding:70px 20px;color:var(--muted);font-size:12px;grid-column:1/-1}.asset-card img{width:100%;height:160px;object-fit:contain;background:var(--surface-2)}.asset-card .asset-body{padding:12px;font-size:11px}.asset-card.selected{border-color:var(--accent)}.pagination{display:flex;justify-content:center;gap:12px;margin:24px 0}.clip-row{border:1px solid var(--line);padding:11px;border-radius:9px;margin-top:9px;background:var(--surface-2)}.clip-row .clip-title{font-size:11px;display:flex;gap:8px;align-items:center}.clip-row .clip-title span{flex:1;overflow-wrap:anywhere}.clip-row label{font-size:10px}.clip-row input{padding:7px 9px;font-size:11px}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--accent-line);border-radius:10px;padding:12px 19px;font-size:12px;box-shadow:0 10px 40px #18365c1a;z-index:100;max-width:90vw}.toast.error{border-color:#f0b8b9;color:var(--err)}dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:25px;width:min(780px,92vw);max-height:85vh}dialog::backdrop{background:#14284066;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0}.dialog-close{font-size:28px;color:var(--muted);line-height:1;padding:5px}.preview-dialog{width:max-content;max-width:96vw;padding:12px}.preview-dialog>.dialog-close{display:block;margin-left:auto}.preview-dialog img,.preview-dialog video{display:block;max-width:90vw;max-height:78vh;border-radius:8px}.login-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 35%,#dcecff,transparent 60%),var(--bg)}.login-card{width:min(360px,100%);text-align:center}.login-mark{width:48px;height:48px;display:block;margin:0 auto 24px}.login-card h1{font:36px var(--font-display);margin:0}.login-card .zh{color:var(--muted);letter-spacing:.3em;font-size:12px;margin-top:9px}.login-tag{font:10px var(--font-mono);letter-spacing:.15em;color:var(--faint);margin:20px 0 28px}.login-card input{text-align:center;padding:13px}.login-card button{margin-top:14px}.login-err{color:var(--err);min-height:22px;margin-top:14px;font-size:12px}
@media(min-width:1500px){.work{grid-template-columns:minmax(400px,490px) minmax(0,1fr)}.scenario-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
@media(max-width:1100px){.sidebar{width:182px}.main{margin-left:182px;padding:28px 24px}.brand{padding:27px 14px}.wm{font-size:17px}.work{gap:18px;grid-template-columns:minmax(310px,380px) minmax(0,1fr)}.panel{padding:18px}.head-note{display:none}.scenario-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}}
@media(max-width:900px){.work{grid-template-columns:1fr}.result{position:static}.canvas-empty{min-height:280px}.scenario-grid{max-height:230px}.history-grid,.asset-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media(max-width:650px){.app{display:block}.sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line);display:block}.brand{padding:17px 18px}.mark{font-size:28px}.wm{font-size:20px}.wm small{display:inline;margin-left:10px;font-size:9px}.sidebar nav{display:flex;overflow:auto;padding:0 10px 9px;gap:4px}.nav-group{display:none}.sidebar nav button{flex:none;width:auto;white-space:nowrap;font-size:11px;padding:8px 10px;gap:5px}.sidebar nav button>span:first-child{width:13px;font-size:14px}.nav-count{font-size:8px}.engine,.logout{display:none}.main{margin-left:0;padding:23px 16px 40px}.view-head{margin-bottom:20px}h1{font-size:25px}.view-head p{font-size:11px}.scenario-card{min-height:82px;padding:10px}.scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:192px}.scenario-count{display:none}.scenario-tools input{max-width:none}.panel{padding:18px}.work{gap:22px}.toolbar select{flex:1;width:auto}.toolbar input{flex-basis:100%}.history-grid,.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.history-cover{height:130px}.history-body{padding:10px}.history-prompt{font-size:10px}.card-actions .btn{font-size:9px;padding:4px 6px}.asset-card img{height:125px}.row.wrap{flex-wrap:wrap}.ref-controls{grid-template-columns:1.2fr .8fr .8fr}.grid-out{grid-template-columns:1fr}.toast{bottom:15px}.history-meta{flex-wrap:wrap;gap:4px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.storyboard-planner{border:1px solid var(--accent-line);border-radius:10px;padding:13px;margin:14px 0;background:var(--accent-soft)}.storyboard-planner>summary{cursor:pointer;color:var(--accent-strong);font-size:12px}.shot-card{padding:13px;border:1px solid var(--line);background:var(--surface);border-radius:9px;margin-top:12px}.shot-card textarea{font-size:11px}.shot-card label{font-size:10px}.mask-toolbar .btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.subtitle-dialog{width:min(950px,96vw)}.subtitle-line{display:grid;grid-template-columns:20px 90px 90px minmax(120px,1fr) 28px;gap:10px;align-items:center;border-bottom:1px solid var(--line-soft);padding:10px 0}.subtitle-line label{font-size:10px;margin-top:0}.subtitle-line input,.subtitle-line textarea{font-size:12px;padding:8px}.subtitle-line textarea{min-height:70px}@media(max-width:650px){.subtitle-line{grid-template-columns:20px 1fr 1fr 28px}.subtitle-text{grid-column:2/4;grid-row:2}.subtitle-line>.icon-btn{grid-column:4;grid-row:1}.subtitle-dialog{padding:17px}}
.import-button{flex:none;white-space:nowrap}@media(max-width:650px){.view-head{flex-wrap:wrap}.import-button{font-size:11px}}


/* Comfortable type and a quiet hierarchy. */
html { scroll-behavior: smooth; }
body { background: radial-gradient(ellipse at 85% 0, #edf5ff 0, transparent 46%), var(--bg); }
::selection { background: #cce2ff; color: #123a76; }
a { color: var(--accent-strong); }
input, textarea, select { min-height: 44px; background: #fff; border-radius: 11px; }
input:hover, textarea:hover, select:hover { border-color: #b2c5de; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px #2166eb12; }
input[type=checkbox] { min-height: 18px; width: 18px; height: 18px; }
input[type=range] { background: transparent; border: 0; box-shadow: none; }
label { font-size: 13px; font-weight: 500; }
h1 { font-size: 30px; font-weight: 720; letter-spacing: -.035em; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2166eb; outline-offset: 3px; }
.sidebar { width: 230px; background: #fff; border-right-color: #e1e9f3; }
.brand { padding: 32px 22px 24px; gap: 11px; }
.mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #3d8aff, #2166eb); box-shadow: 0 6px 15px #2166eb24; font-size: 33px; flex: none; }
.wm { font-size: 19px; letter-spacing: -.035em; font-weight: 700; }
.wm small { font-size: 11px; letter-spacing: .13em; font-weight: 400; margin-top: 6px; }
.nav-group { font-size: 11px; letter-spacing: .08em; margin: 23px 14px 11px; }
nav { padding: 0 14px; }
nav button { min-height: 46px; font-size: 13px; padding: 11px 14px; margin: 4px 0; border-radius: 12px; }
nav button.active { color: #1758d2; background: #eaf2ff; font-weight: 600; }
nav button.active > span:first-child { color: #2166eb; }
.nav-count { color: #49617f; background: #edf2f8; min-width: 22px; text-align: center; }
nav button.active .nav-count { color: #1758d2; background: #d7e7ff; }
.engine { margin: 0 18px; padding: 18px 3px 13px; }
.engine-row { font-size: 12px; }
.dot { width: 7px; height: 7px; }
.ready .dot { box-shadow: 0 0 0 3px #e3f4ed; }
.logout { min-height: 36px; font-size: 12px; margin: 0 21px 19px; }
.main { margin-left: 230px; padding: 38px 40px 70px; }
.view-head { margin-bottom: 28px; }
.eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 600; margin-bottom: 9px; }
.view-head p { font-size: 13px; line-height: 1.8; }
.head-note { font-size: 11px; }
.scenario-tools { gap: 16px; margin-bottom: 14px; }
.scenario-tools input { font-size: 13px; max-width: 320px; background: #fff; }
.scenario-tools .section-title { white-space: nowrap; }
.scenario-count { font-size: 12px; }
.scenario-groups { gap: 8px; margin-bottom: 14px; }
.chip { min-height: 36px; border-radius: 20px; padding: 7px 14px; font-size: 12px; background: #fff; }
.chip.active, .chip[aria-pressed=true] { color: #1758d2; background: #eaf2ff; border-color: #abc9fc; font-weight: 600; }
.scenario-grid { gap: 10px; padding: 2px 4px 8px 2px; max-height: 245px; margin-bottom: 25px; scrollbar-width: thin; scrollbar-color: #c2d2e7 transparent; }
.scenario-card { padding: 14px; min-height: 96px; gap: 6px; border-color: #e1e8f2; border-radius: 13px; }
.scenario-card strong { font-size: 13px; font-weight: 600; }
.scenario-card small { font-size: 11px; line-height: 1.65; }
.scenario-card.active { border-color: #4b8bf4; background: #f0f6ff; box-shadow: inset 0 0 0 1px #4b8bf41a; }
.scenario-card.active strong { color: #1656c5; }
.scenario-card:hover { border-color: #8eb6f9; box-shadow: 0 3px 12px #14376108; }
.scenario-card .pill { font-size: 10px; }
.work { grid-template-columns: minmax(350px, 440px) minmax(0,1fr); gap: 26px; }
.panel { padding: 26px; box-shadow: 0 6px 24px #1f477008; border-color: #dfe8f4; }
.section-title { font-size: 15px; }
.step-num { width: 25px; height: 25px; color: #2166eb; background: #edf4ff; border-color: #d5e4fc; font: 600 12px var(--font-ui); }
.section-help, .field-help, .hint { font-size: 12px; }
.section-help { line-height: 1.8; }
.hint { background: #f3f7fd; padding: 12px 14px; border-radius: 10px; }
.hint.warn { background: #fff8e9; color: #7a5b21; border-color: #d4a145; }
.hint.error { background: #fff3f3; }
.btn { min-height: 42px; border-radius: 10px; background: #fff; font-size: 13px; padding: 9px 14px; }
.btn:hover { background: #f6f9ff; border-color: #a6c0e6; }
.btn.small { font-size: 11px; min-height: 33px; border-radius: 8px; padding: 6px 10px; }
.btn.primary, .go { background: #2166eb; color: #fff; box-shadow: 0 5px 12px #2166eb1a; }
.btn.primary:hover, .go:hover { background: #1457d9; color: #fff; }
.go { min-height: 50px; border-radius: 12px; margin-top: 20px; font-size: 15px; letter-spacing: .015em; }
.submit-note { font-size: 11px; color: #61748e; }
.check { font-size: 12px; }
.assistant-box { background: #f3f7ff; border: 1px solid #dbe7fc; border-radius: 13px; padding: 17px; }
.assistant-box .section-title { color: #215ac2; font-size: 13px; }
.assistant-box textarea { font-size: 13px; }
.assistant-box summary { font-size: 12px; cursor: pointer; }
.assistant-status { font-size: 11px; }
.advanced summary { font-size: 13px; }
.dropzone { background: #f4f8ff; border-color: #abc5ed; padding: 23px 16px; border-radius: 13px; font-size: 13px; }
.dropzone:hover { background: #edf4ff; border-color: #6899e9; }
.dropzone small { font-size: 11px; }
.ref-card { background: #f7f9fd; border-color: #e3eaf4; padding: 12px; }
.ref-name, .ref-card label { font-size: 11px; }
.ref-name strong { font-size: 12px; }
.ref-card input, .ref-card select { font-size: 12px; min-height: 38px; }
.ref-top img { background: #edf2f8; border: 1px solid #e1e9f3; }
.icon-btn { width: 32px; height: 32px; background: #fff; font-size: 18px; border-radius: 9px; }
.result-head h2 { font-size: 14px; }
.result-head span { font-size: 11px; }
.canvas-empty { background: radial-gradient(ellipse at 50% 35%, #e8f2ff 0%, #f8fbff 54%, #fff 100%); border: 1px solid #dce7f5; min-height: 470px; box-shadow: 0 6px 24px #1f477005; }
.canvas-empty .spark { width: 84px; height: 84px; display: grid; place-items: center; color: #4386ef; border-radius: 26px; border: 1px solid #dbe9fe; background: #ffffffb8; font-size: 48px; margin-bottom: 24px; box-shadow: 0 10px 30px #3974c20b; }
.canvas-empty h3 { font-size: 18px; font-weight: 600; }
.canvas-empty p { font-size: 13px; line-height: 1.9; }
.canvas-empty .flow { font: 12px var(--font-ui); color: #6b82a0; margin-top: 22px; }
.tips-card { padding: 18px 20px; border-radius: 14px; background: #ffffffba; border-color: #e0e9f4; }
.tips-card h3 { font-size: 12px; color: #3f648d; }
.tips-card p { font-size: 12px; }
.status { font-size: 13px; background: #f5f8fd; }
.status.err { background: #fff4f4; }.status.success { background: #f0faf6; }
.output-card, .history-card, .asset-card { border-radius: 15px; box-shadow: 0 4px 15px #21466f06; }
.output-card img, .output-card video { background: repeating-conic-gradient(#edf2f7 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.output-bar { font-size: 12px; padding: 12px 14px; }
.task-card { border-radius: 14px; padding: 18px; }
.task-top strong { font-size: 13px; }
.task-card p { font-size: 12px; }
.progress { height: 5px; }
.badge { font-size: 10px; background: #f7f9fc; padding: 3px 8px; }
.badge.done { background: #eef9f4; }.badge.failed { background: #fff3f3; }
.history-body { padding: 15px; }
.history-body h3 { font-size: 13px; }
.history-prompt { font-size: 12px; }
.history-meta { font-size: 10px; }
.asset-card .asset-body { font-size: 12px; }
.clip-row { background: #f7f9fd; border-radius: 12px; }
.clip-row .clip-title { font-size: 12px; }
.clip-row label { font-size: 11px; }
.clip-row input { font-size: 13px; }
.empty { font-size: 13px; }
.toast { background: #fff; color: #1b2b43; border-color: #c8d9f0; border-radius: 12px; box-shadow: 0 10px 40px #23436a24; }
dialog { border: 1px solid #d9e5f5; border-radius: 20px; box-shadow: 0 24px 90px #17345433; max-height: min(88vh, 900px); padding: 28px; }
dialog::backdrop { background: #18355355; backdrop-filter: blur(5px); }
.dialog-close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; }
.dialog-close:hover { background: #edf3fb; }
.preview-dialog { padding: 12px; }
.storyboard-planner { background: #f1f7ff; border-color: #c9defc; padding: 15px; border-radius: 12px; }
.storyboard-planner > summary { font-size: 13px; font-weight: 500; }
.shot-card { border-radius: 12px; padding: 15px; }
.shot-card textarea { font-size: 13px; }
.shot-card label { font-size: 12px; }
.subtitle-line { grid-template-columns: 20px 100px 100px minmax(120px,1fr) 32px; }
.subtitle-line label { font-size: 11px; }
.subtitle-line input, .subtitle-line textarea { font-size: 13px; }
/* The sign-in page shares the same light, private workspace identity. */
.login-body { background: radial-gradient(ellipse at 20% 0, #dfedff 0, transparent 48%), radial-gradient(ellipse at 100% 100%, #e2f8f4 0, transparent 50%), #f5f8fc; padding: 30px 20px; }
.login-card { width: min(420px, 100%); background: #ffffffed; border: 1px solid #e1eaf6; border-radius: 26px; box-shadow: 0 22px 80px #28588c12; padding: 42px 38px 28px; }
.login-mark { width: 58px; height: 58px; margin-bottom: 22px; padding: 10px; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #4a9aff, #2166eb); box-shadow: 0 8px 20px #2166eb24; }
.login-card h1 { font: 720 29px/1.25 var(--font-ui); letter-spacing: -.04em; }
.login-card .zh { font-size: 14px; letter-spacing: .15em; color: #526985; margin-top: 10px; }
.login-intro { font-size: 13px; color: #6a7e98; margin: 23px 0 28px; line-height: 1.9; }
.login-card label { text-align: left; font-size: 13px; margin-bottom: 9px; }
.login-card input { font-size: 16px; text-align: left; min-height: 50px; padding: 13px 15px; }
.login-card button { margin-top: 15px; }
.login-err { font-size: 12px; min-height: 21px; margin: 13px 0 0; }
.login-footer { font-size: 11px; color: #61748e; letter-spacing: .02em; margin: 22px 0 0; padding-top: 21px; border-top: 1px solid #e9eef5; }
@media (min-width: 1500px) { .work { grid-template-columns: minmax(420px,490px) minmax(0,1fr); } }
@media (max-width: 1100px) {
  .sidebar { width: 190px; }.main { margin-left: 190px; padding: 30px 25px 60px; }
  .brand { padding: 27px 16px 22px; gap: 9px; }.mark { width: 35px; height: 38px; font-size: 29px; border-radius: 12px; }.wm { font-size: 17px; }
  nav { padding: 0 10px; }nav button { padding: 10px 12px; }
  .work { grid-template-columns: minmax(310px,380px) minmax(0,1fr); gap: 20px; }.panel { padding: 21px; }
}
@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; }.canvas-empty { min-height: 300px; }
  .scenario-tools { flex-wrap: wrap; gap: 10px; }.scenario-tools input { flex: 1; min-width: 160px; }.scenario-count { display: none; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 12px; }
  .sidebar { width: auto; background: #ffffffed; border-bottom: 1px solid #dfe8f4; }
  .brand { padding: 19px 18px 14px; gap: 10px; }.mark { width: 34px; height: 34px; border-radius: 11px; font-size: 27px; }.wm { font-size: 20px; }.wm small { font-size: 11px; margin-left: 11px; }
  .sidebar nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; overflow: visible; padding: 0 13px 14px; }
  .sidebar nav button { min-height: 44px; min-width: 0; width: 100%; margin: 0; justify-content: center; font-size: 12px; padding: 8px 5px; gap: 6px; border-radius: 10px; }
  .sidebar nav button > span:first-child { font-size: 16px; width: 15px; }.nav-count { font-size: 9px; margin-left: 0; min-width: 17px; padding: 2px 4px; }
  .main { margin-left: 0; padding: 26px 16px 48px; }.view-head { margin-bottom: 23px; gap: 13px; }
  h1 { font-size: 28px; }.eyebrow { font-size: 10px; }.view-head p { font-size: 13px; }
  .scenario-tools { flex-direction: column; align-items: stretch; gap: 12px; }.scenario-tools .section-title { font-size: 14px; }.scenario-tools input { width: 100%; max-width: none; }
  .scenario-groups { gap: 7px; }.chip { min-height: 44px; padding: 8px 13px; font-size: 12px; }
  .scenario-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 223px; margin-bottom: 22px; }
  .scenario-card { min-height: 99px; padding: 13px 12px; }.scenario-card strong { font-size: 13px; }.scenario-card small { font-size: 11px; }
  .panel { padding: 20px 17px; border-radius: 17px; }.work { gap: 23px; }.section-title { font-size: 14px; }.section-help { font-size: 12px; }
  .btn, .btn.small, .card-actions .btn, .import-button { min-height: 44px; font-size: 12px; padding: 9px 11px; }
  input, select, textarea, .scenario-tools input, .assistant-box textarea, .ref-card input, .ref-card select, .shot-card textarea, .clip-row input, .subtitle-line input, .subtitle-line textarea { font-size: 16px; min-height: 44px; }
  input[type=checkbox] { min-height: 20px; width: 20px; height: 20px; }input[type=range] { min-height: 44px; }
  .icon-btn, .dialog-close { width: 44px; height: 44px; min-width: 44px; }
  .check { min-height: 44px; font-size: 12px; line-height: 1.6; }
  .advanced summary, .assistant-box summary, .storyboard-planner > summary { min-height: 44px; align-content: center; line-height: 1.7; padding: 9px 0; }
  .assistant-box { padding: 15px 13px; }.assistant-box details { margin-top: 5px; }
  .row.wrap { flex-wrap: wrap; }.row.wrap .field { flex-basis: 100%; }.upload-actions { flex-wrap: wrap; }
  .ref-controls { grid-template-columns: 1fr 1fr; }.ref-controls > :first-child { grid-column: 1/-1; }
  .ref-card label { font-size: 12px; }.ref-name { font-size: 11px; }.ref-name strong { font-size: 12px; }
  .canvas-empty { min-height: 300px; padding: 25px; }.canvas-empty .spark { width: 64px; height: 64px; font-size: 38px; border-radius: 20px; margin-bottom: 20px; }
  .result-head { gap: 12px; }.result-head span { font-size: 10px; }
  .history-grid, .asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .history-body { padding: 12px 10px; }.history-prompt { font-size: 11px; }.history-body h3 { font-size: 12px; }
  .history-meta { font-size: 10px; }.card-actions { gap: 7px; }.history-card .card-actions .btn { width: 100%; }
  .asset-card .card-actions .btn { flex: 1; }.history-cover { height: 145px; }.asset-card img { height: 140px; }
  .task-card { padding: 15px; }.task-top { flex-wrap: wrap; }.task-top strong { overflow-wrap: anywhere; }.task-top .badge { margin-left: auto; }
  dialog { width: calc(100vw - 24px); max-width: none; padding: 20px 17px; max-height: calc(100dvh - 32px); border-radius: 18px; }
  .dialog-head { gap: 10px; }.dialog-head h2 { font-size: 18px; }.preview-dialog { width: max-content; max-width: calc(100vw - 20px); padding: 8px; }.preview-dialog img, .preview-dialog video { max-width: calc(100vw - 38px); }
  .subtitle-dialog { width: calc(100vw - 24px); padding: 18px 15px; }
  .subtitle-line { grid-template-columns: 18px minmax(0,1fr) minmax(0,1fr) 44px; gap: 8px; }
  .subtitle-text { grid-column: 2/5; grid-row: 2; }.subtitle-line > .icon-btn { grid-column: 4; grid-row: 1; align-self: end; }
  .subtitle-line label { font-size: 11px; }.subtitle-line textarea { min-height: 86px; }.subtitle-line input { padding: 9px 7px; }
  .mask-toolbar { gap: 8px; }.mask-toolbar > label { margin-left: 0; }.mask-stage { border-radius: 10px; overflow: hidden; }
  .mask-dialog .row.spaced { flex-wrap: wrap; gap: 12px; }
  .login-body { min-height: 100dvh; padding: 25px 18px; }.login-card { padding: 34px 26px 25px; border-radius: 23px; }.login-card h1 { font-size: 27px; }.login-intro { font-size: 13px; }
  .toast { bottom: max(16px, env(safe-area-inset-bottom)); font-size: 13px; padding: 12px 16px; width: max-content; max-width: calc(100vw - 28px); }
}
@media (max-width: 360px) {
  .main { padding-left: 12px; padding-right: 12px; }.wm small { font-size: 10px; margin-left: 8px; }.sidebar nav button { font-size: 11px; gap: 4px; }
  .history-grid, .asset-grid { grid-template-columns: 1fr; }.history-cover { height: 200px; }
  .history-card .card-actions .btn { width: auto; flex: 1; }.subtitle-line { grid-template-columns: 15px minmax(0,1fr) minmax(0,1fr) 44px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Public mobile access also needs a visible way to end a session. */
@media (max-width:650px) {
  .sidebar { position: relative; }
  .brand { padding-right: 96px; }
  .wm small { display: block; margin: 5px 0 0; font-size: 10px; }
  .logout { display: flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 14px; width: 76px; min-height: 44px; margin: 0; font-size: 11px; border: 1px solid #e0e8f3; border-radius: 10px; background: #fff; color: #5c6f89; }
  .logout:hover { border-color: #a6c0e6; background: #f3f7ff; }
}