/* 特效设计工作台 · 渐进式工作流。顶部 .site-header 由共享 site-navigation.css 负责。
   第一屏只问一个问题；之后每一步有了内容才展开下一步。两套界面：暗房（默认）/ 灯箱。 */
:root{--bg:#0b0f14;--panel:#121820;--panel2:#18202a;--line:#263241;--text:#e8eef3;--muted:#8d9bab;--accent:#d4ff68;--ink:#17250a;--warn:#f0b46a;--bad:#ff8a73;--ok:#a6e07a;--stage:#07090c;--radius:10px;color-scheme:dark}
.hero-image-studio{display:flex;align-items:center;gap:12px;margin:9px 0 0;padding:9px 14px;min-height:58px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);text-decoration:none}.hero-image-studio:hover{border-color:var(--accent)}.hero-image-studio:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hero-image-studio-icon{font-size:27px;color:var(--accent);line-height:1}.hero-image-studio>span:nth-child(2){flex:1;min-width:0}.hero-image-studio strong{display:block;font-size:13px;font-weight:600}.hero-image-studio strong small{font-weight:400;color:var(--muted);font-size:11px;margin-left:8px}.hero-image-studio>span>span{display:block;color:var(--muted);font-size:10px;margin-top:2px}.hero-image-studio>b{font-size:11px;font-weight:400;color:var(--accent);white-space:nowrap}@media(max-width:520px){.hero-image-studio{gap:10px;padding-inline:11px}.hero-image-studio strong small{font-size:10px;margin-left:5px}.hero-image-studio>b{font-size:0}.hero-image-studio>b:after{content:'→';font-size:16px}}
html[data-theme=lightbox]{--bg:#ebe9e3;--panel:#faf9f6;--panel2:#f2f0ea;--line:#d8d4c9;--text:#1d262c;--muted:#56636b;--accent:#3f6a0c;--ink:#fff;--warn:#87500a;--bad:#b2391f;--ok:#37680f;--stage:#e2dfd6;color-scheme:light}
*{box-sizing:border-box}
body.wb-body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
.preview-banner{margin:0;padding:8px 20px;background:#fff0c2;color:#483c1a;font-size:13px}
.wb button,dialog button,.restore button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:7px 12px;min-height:34px}
.wb button:hover,dialog button:hover{border-color:var(--accent)}
.wb button:focus-visible,dialog button:focus-visible,.wb input:focus-visible,.wb textarea:focus-visible,.wb select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wb button:disabled,dialog button:disabled{opacity:.45;cursor:not-allowed}
.wb button.primary,dialog button.primary{background:transparent;border-color:var(--accent);color:var(--accent);font-weight:650}
.wb button.primary:not(:disabled):hover,dialog button.primary:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.wb button.primary:not(:disabled):active,dialog button.primary:not(:disabled):active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.wb button.ghost,dialog button.ghost{background:none;border-color:transparent;color:var(--muted)}
.wb button.dashed{width:100%;border-style:dashed;background:none;color:var(--muted)}
.wb input,.wb textarea,.wb select,dialog textarea,dialog input{width:100%;font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.wb textarea,dialog textarea{resize:vertical;line-height:1.6}
.label{font-size:12px;font-weight:650;letter-spacing:.5px;color:var(--text);margin:0 0 8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.label small,.fine{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0}
.fine{margin:6px 0}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
[hidden]{display:none!important}

/* 作品条 */
.wb-bar{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:54px}
.wb-title.wb-title{width:auto;min-width:140px;max-width:320px;flex:0 1 200px;font-size:17px;font-weight:600;background:none;border-color:transparent;padding:6px 8px}
.wb-title:hover{border-color:var(--line)}
.wb .save-state{display:flex;align-items:center;gap:8px;background:none;font-size:12px;min-height:30px;padding:4px 10px}
.save-state i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.save-state[data-s=ok] i{background:var(--ok)}.save-state[data-s=warn] i{background:var(--warn)}.save-state[data-s=bad] i{background:var(--bad)}
.bar-actions{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.jobs{font-size:12px;color:var(--accent);padding:3px 10px;border:1px solid var(--line);border-radius:99px}
.menu{position:relative}.menu summary{list-style:none;cursor:pointer;color:var(--muted);font-size:13px;padding:7px 10px;border-radius:8px}.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--panel2)}
.menu-body{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:250px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);display:grid;gap:10px;box-shadow:0 12px 40px #0006}
.menu-body label{font-size:12px;color:var(--muted)}.menu-body a{color:var(--muted)}
.restore{max-width:860px;margin:14px auto 0;padding:12px 16px;border:1px solid var(--warn);border-radius:var(--radius);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.restore p{margin:0;flex:1 1 300px}
.wb button.link{background:none;border:0;padding:0;min-height:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* 第一屏：左边是想法（自由写 / 一步步引导），右边是随文字变化的火花预演；下方是其他开始方式 */
.hero{max-width:1120px;margin:0 auto;padding:clamp(28px,6vh,64px) 28px 70px}
.hero-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:clamp(24px,5vw,64px);align-items:center}
.composer h1{font-size:clamp(30px,3.6vw,46px);line-height:1.15;font-weight:650;letter-spacing:-.02em;margin:0 0 12px}
.composer .lead{color:var(--muted);font-size:16px;margin:0 0 24px;max-width:34em}
.hero-box{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:6px 6px 8px;transition:border-color .15s}
.hero-box:focus-within{border-color:var(--accent)}
.wb .hero-box textarea{border:0;background:none;font-size:18px;line-height:1.55;resize:none;padding:12px 14px 6px}
.wb .hero-box textarea:focus-visible{outline:none}
.hero-box-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:0 6px 0 14px}
.wb .hero-box-foot button{padding:9px 20px;border-radius:10px;font-size:15px;white-space:nowrap}
.examples{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.wb .ex{min-height:0;padding:3px 12px;border-radius:99px;font-size:13px;background:none;color:var(--muted)}
.wb .ex:hover{color:var(--text)}
.wb .wizard-open{display:block;width:100%;text-align:left;margin-top:22px;padding:14px 16px;background:none;border:1px dashed var(--line);border-radius:12px;color:var(--text);font-size:14px}
.wizard-open span{color:var(--accent);margin-right:8px;font-weight:600}
.wb .hero-color-lab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:12px;padding:13px 15px;border:1px solid #34464e;border-radius:12px;background:linear-gradient(110deg,#17242b,#10191f);color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.hero-color-lab:hover{border-color:var(--accent);background:#1a292d}.hero-color-lab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-color-lab strong{display:block;font-size:14px}.hero-color-lab small{display:block;color:var(--muted);font-size:11px;margin-top:4px;line-height:1.5}.hero-color-lab>b{margin-left:auto;white-space:nowrap;font-size:12px;color:var(--accent);font-weight:500}
.hero-color-lab-icon{display:flex;align-items:center;gap:2px;flex:none}.hero-color-lab-icon i{width:6px;height:26px;border-radius:3px;background:#ef6671}.hero-color-lab-icon i:nth-child(2){height:34px;background:#7acb81}.hero-color-lab-icon i:nth-child(3){height:40px;background:#7d70d1}.hero-color-lab-icon i:nth-child(4){height:34px;background:#d9a1e6}.hero-color-lab-icon i:nth-child(5){background:#8ce1d7}
.hero-creation-tools{display:grid;gap:8px;margin-top:12px}.wb .hero-creation-tools .hero-color-lab{margin-top:0}.hero-wish-icon{width:35px;flex:none;text-align:center;font-size:28px;line-height:1;color:var(--accent)}
#effect-wish-dialog[open]{display:flex;flex-direction:column;width:min(1268px,98vw);max-width:98vw;height:94dvh;max-height:94dvh;padding:12px;overflow:hidden;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:14px;box-sizing:border-box}
#effect-wish-dialog .dialog-head{flex:none;margin-bottom:6px}
@media(min-width:721px){#effect-wish-dialog[open]{max-width:min(98vw,calc(115dvh + 100px))}}
.wish-popup-body{position:relative;flex:1;min-height:0}.wish-popup-body iframe{display:block;width:100%;height:100%;border:0;background:var(--bg);border-radius:10px}.wish-popup-body iframe[hidden]{display:none!important}
@media(max-width:650px){#effect-wish-dialog[open]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:8px;border-radius:0}.hero-effect-wish small{max-width:230px}}
@media(max-width:560px){.hero-color-lab{gap:9px;padding:12px}.hero-color-lab>b{font-size:10px}.hero-color-lab small{font-size:10px}.hero-color-lab-icon{gap:1px}.hero-color-lab-icon i{width:4px}}
#palette-dialog[open]{width:min(1720px,98vw);max-width:98vw;height:96dvh;max-height:96dvh;padding:12px}
.wizard{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 20px}
.wizard-head{display:flex;justify-content:space-between;align-items:center}
.wizard h2{font-size:21px;margin:8px 0 4px;font-weight:600}
.wizard-options{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.wb .wizard-options button{min-height:0;padding:8px 14px;border-radius:10px;font-size:14px;background:var(--bg)}
.wb .wizard-options button[aria-pressed=true]{background:transparent;color:var(--accent);border-color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.wb .wizard input{font-size:14px}
.wizard-sentence{margin:14px 0 4px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--bg);border-radius:0 8px 8px 0}
.wizard-sentence p{margin:2px 0 0;font-size:16px;min-height:1.5em}
.spark{--spark-1:#16202c;--spark-2:#0c1219;--spark-fg:#8fa0b2;--spark-on:#d4ff68;margin:0;position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center;border-radius:50%;background:radial-gradient(circle at 50% 55%,var(--spark-1) 0,var(--spark-2) 58%,transparent 72%)}
html[data-theme=lightbox] .spark{--spark-1:#f7f5ef;--spark-2:#e6e2d8;--spark-fg:#4a5560;--spark-on:#3f6a0c}
.spark canvas{width:100%;height:100%;display:block}
.spark figcaption{position:absolute;left:0;right:0;bottom:4%;display:flex;justify-content:center;gap:18px;font-size:12px;color:var(--spark-fg)}
.spark figcaption span.on{color:var(--spark-on)}
.entries{margin-top:clamp(36px,7vh,64px)}
.entries h2{font-size:15px;font-weight:600;margin:0 0 12px;color:var(--muted)}
.entry-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.wb .entry{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:18px 18px 20px;border:0;border-left:1px solid var(--line);border-radius:0;background:none;min-height:132px}
.wb .entry:first-child{border-left:0}
.wb .entry:hover,.wb .entry.drop{background:var(--panel2)}
.wb .entry:focus-visible{outline-offset:-3px}
.entry svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.entry b{font-size:15px}.entry span{font-size:13px;color:var(--muted);line-height:1.5}
.drop-hint{margin-top:10px}
.wb.dragging .hero-main,.wb.dragging .entries{outline:2px dashed var(--accent);outline-offset:8px;border-radius:14px}
.path{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:34px 0 0;padding:0}
.path li{counter-increment:s;padding:10px 12px 0 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}
.path li::before{content:counter(s);display:block;font-size:11px;color:var(--accent);margin-bottom:2px}
.path b{display:block;color:var(--text);font-size:13px;font-weight:600}
.doc-preview{max-height:260px;overflow:auto;white-space:pre-wrap;font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0}
/* 工作流 */
.flow{max-width:980px;margin:0 auto;padding:0 24px 150px}
.steps{display:flex;gap:4px;padding:14px 0 10px;position:sticky;top:0;background:var(--bg);z-index:6;overflow-x:auto}
.wb .steps button{background:none;border:0;border-bottom:2px solid var(--line);border-radius:0;padding:6px 10px;font-size:13px;color:var(--muted);flex:1 0 auto;min-height:0}
.wb .steps button[data-state=done]{color:var(--text);border-bottom-color:var(--ok)}
.wb .steps button[data-state=now]{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.wb .steps button[data-state=later]{opacity:.55}
.status{font-size:13px;color:var(--muted);min-height:22px;margin:4px 0}
.status.error{color:var(--bad)}
.guide{position:fixed;left:50%;transform:translateX(-50%);width:min(860px,calc(100vw - 28px));bottom:14px;z-index:6;margin:0 auto;max-width:860px;display:flex;gap:12px;align-items:center;padding:10px 12px 10px 18px;border:1px solid var(--accent);border-radius:14px;background:var(--panel);box-shadow:0 10px 36px #0007;order:99}
.guide p{margin:0;flex:1;font-size:14px}.guide p b{color:var(--accent);font-weight:600;margin-right:6px}
.flow{display:flex;flex-direction:column}
.sec{border-top:1px solid var(--line);padding:24px 0 8px}
.sec>header{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px}
.sec>header h2{margin:0;font-size:19px;font-weight:600}
.sec>header>.no{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);flex:none}
.sec .why{flex-basis:100%;margin:0 0 0 36px;color:var(--muted);font-size:13px}
.more{margin-top:10px}.more summary{cursor:pointer;color:var(--muted);font-size:13px}
.more[open]{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px 14px;background:var(--panel)}
.feel-summary{font-size:13px;color:var(--muted);margin:8px 0 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.feel-summary .t{padding:1px 9px;border-radius:99px;border:1px solid var(--line)}
.feel-summary .t.want{border-color:var(--ok);color:var(--ok)}.feel-summary .t.avoid{border-color:var(--bad);color:var(--bad);text-decoration:line-through}

/* 方向卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.card.chosen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card h3{margin:0;font-size:16px}.card .mem{font-size:15px;line-height:1.5}
.card dl{margin:0;display:grid;grid-template-columns:70px 1fr;gap:3px 8px;font-size:12.5px}.card dt{color:var(--muted)}.card dd{margin:0}
.card .raw{font-size:13px;color:var(--muted);white-space:pre-wrap}
.card .row{margin-top:auto}
.wb .tag{min-height:0;padding:1px 9px;border-radius:99px;font-size:12px;background:none}
.wb .tag[data-v=want]{border-color:var(--ok);color:var(--ok)}.wb .tag[data-v=avoid]{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.card-busy{border:1px dashed var(--line);border-radius:12px;padding:20px;display:flex;gap:10px;align-items:center;color:var(--muted)}

/* 设计要点 */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:10px}
.axis{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel)}
.axis.locked{border-color:var(--accent)}
.axis header{all:unset;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px}
.axis header b{font-weight:600}.axis header small{color:var(--muted);font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.axis .help{font-size:12px;color:var(--muted);margin:2px 0 4px}
.wb .axis .lock{min-height:0;padding:1px 7px;font-size:11px;background:none}
.wb .axis .lock[aria-pressed=true]{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wb .axis textarea{border:0;background:none;padding:2px 0;font-size:14px;resize:none;min-height:24px}
.wb .axis textarea:focus{background:var(--bg)}
.look-tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 12px;font-size:13px}
.swatches{display:inline-flex;gap:3px;vertical-align:middle}.swatches span{width:18px;height:18px;border-radius:4px;border:1px solid #ffffff30}
.sendline{font-size:12px;color:var(--muted);margin:6px 0}.sendline .skip{color:var(--warn)}

/* 制作拆解 */
.layers{width:100%;border-collapse:collapse;font-size:13px}
.layers th,.layers td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.layers th{width:120px;font-weight:600}
.layers .basis{color:var(--text)}.layers .tip{color:var(--muted);font-size:12px;margin-top:3px}
.layers .need{white-space:nowrap}.wb .layers .need button{min-height:0;padding:2px 9px;font-size:12px}
.wb .layers .need button[aria-pressed=true]{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.layers tr.skip-layer td,.layers tr.skip-layer th{opacity:.45}
.timeline{display:flex;gap:4px;margin:14px 0;font-size:12px;overflow-x:auto}
.timeline div{flex:1 0 110px;border-top:3px solid var(--accent);padding:6px 4px;background:var(--panel)}
.timeline small{display:block;color:var(--muted)}
/* 参考卡：借什么 / 不要带入什么 */
.refs{display:grid;gap:10px;margin-bottom:10px}
.ref{border:1px solid var(--line);border-radius:var(--radius);padding:8px;background:var(--panel2)}
.ref img,.ref video{width:100%;height:auto;aspect-ratio:16/9;max-height:none;object-fit:contain;background:var(--stage);border-radius:6px;display:block}
.ref .name{font-size:12px;color:var(--muted);margin:6px 0 4px;display:flex;justify-content:space-between;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.wb .chip{min-height:0;padding:2px 9px;border-radius:99px;font-size:12px;background:none}
.wb .chip[aria-pressed=true]{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ref input{font-size:12px;padding:5px 8px;margin-top:4px}
.ref .row{margin-top:6px}.ref .row button{font-size:12px;padding:3px 8px;min-height:0}
.hint{font-size:12px;color:var(--warn);margin:4px 0}
.miss{border:1px dashed var(--bad);color:var(--bad);border-radius:6px;padding:12px;font-size:12px;text-align:center}

/* 方向矩阵 */
.matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.matrix{border-collapse:separate;border-spacing:0;min-width:100%}
.matrix th,.matrix td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left;min-width:200px;max-width:280px}
.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;background:var(--panel);min-width:104px;width:104px;z-index:1;color:var(--muted);font-weight:500;font-size:12px}
.matrix thead th{background:var(--panel);font-weight:600}
.matrix thead th small{display:block;color:var(--muted);font-weight:400}
.matrix td{background:var(--panel2);font-size:13px;position:relative}
.matrix td.chosen{box-shadow:inset 0 0 0 2px var(--accent)}
.matrix td.locked{opacity:.55}
.wb .matrix td button{margin-top:6px;font-size:12px;padding:2px 8px;min-height:0}
.matrix .round{font-size:11px;color:var(--muted)}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:40px 24px;text-align:center;color:var(--muted)}
.empty h2{color:var(--text);font-size:17px;margin:0 0 6px}
/* 画面舞台与版本条 */
.stage{background:var(--stage);border-radius:var(--radius);min-height:360px;display:grid;place-items:center;position:relative;overflow:hidden;color:#9aa6b2}
.image-job-overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:#03070966;pointer-events:none}
.image-job-overlay>:is(.image-job-status,.err){width:min(390px,100%);min-height:0;max-height:100%;overflow:auto;margin:0;background:var(--panel);border-radius:14px;box-shadow:0 12px 40px #0008;pointer-events:auto;overflow-wrap:anywhere}
.image-job-status{display:grid;justify-items:center;gap:10px;padding:22px 24px;border:1px solid var(--accent);text-align:center;color:var(--text)}
.image-job-status strong{font-size:17px;line-height:1.45;color:var(--text)}
.image-job-status p{margin:0;color:var(--text)}
.image-job-status [data-elapsed]{font-size:18px;color:var(--accent);font-variant-numeric:tabular-nums}
.image-job-status small{font-size:12px;color:var(--muted)}
.image-job-status .spinner{width:36px;height:36px;border-color:var(--line);border-top-color:var(--accent)}
html[data-theme=lightbox] .image-job-overlay{background:#1d262c33}
.stage.bg-grey{background:#5a5f64}.stage.bg-check{background:repeating-conic-gradient(#2a2f35 0 25%,#1a1e22 0 50%) 0 0/24px 24px}
.stage img{max-width:100%;max-height:62vh;display:block}
.stage .pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}
.stage .pair figure{margin:0;position:relative}.stage .pair img{width:100%;max-height:56vh;object-fit:contain}
.stage figcaption,.stage .tagline{position:absolute;left:10px;top:10px;font-size:12px;background:#000a;color:#fff;padding:2px 8px;border-radius:5px}
.stage .wipe{position:relative;width:100%;max-width:100%;display:grid}
.stage .wipe>*{grid-area:1/1}.stage .wipe img{width:100%;max-height:62vh;object-fit:contain}
.stage .wipe .top{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.stage .wipe .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--accent);pointer-events:none}
.stage input[type=range]{position:absolute;bottom:10px;left:10%;width:80%;accent-color:var(--accent)}
.stage .busy,.thumb.busy,.card-busy{display:grid;place-items:center;gap:8px;color:#c7d2db}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #ffffff22;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:#ffffff55}}
.stage-tools{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0}
.verdict{display:flex;gap:6px;flex-wrap:wrap}
.wb .verdict button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.wb .verdict button.no[aria-pressed=true]{border-color:var(--bad);color:var(--bad)}
.meta{font-size:12px;color:var(--muted)}
.reasons{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.reason{font-size:11px;color:var(--warn);border:1px solid currentColor;border-radius:99px;padding:0 8px}
.film{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:6px 0 14px}
.wb .thumb{flex:none;width:118px;padding:4px;background:var(--panel);text-align:left;position:relative;min-height:0}
.thumb img{width:100%;height:72px;object-fit:cover;border-radius:5px;display:block;background:var(--stage)}
.thumb.busy{height:98px}
.thumb small{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:3px}
.wb .thumb[aria-current=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.thumb.compare{outline:2px dashed var(--warn);outline-offset:1px}
.thumb.rejected img{opacity:.35}
.badge{font-size:10px;padding:0 5px;border-radius:4px;background:var(--accent);color:var(--ink)}
.badge.like{background:var(--ok)}.badge.no{background:var(--bad);color:#fff}.badge.stale{background:var(--warn);color:#000}
.edit{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--panel)}
.edit h2{font-size:15px;margin:0 0 8px}
.edit .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.edit label{font-size:12px;color:var(--muted);display:block}
.radio{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:8px 0}
.radio label{display:flex;gap:6px;align-items:center;color:var(--text);font-size:13px}
.radio input{width:auto}
.err{border:1px solid var(--bad);border-radius:var(--radius);padding:12px 14px;margin:10px 0;color:var(--text)}
.err b{color:var(--bad)}
.err.uncertain{border-color:var(--warn)}.err.uncertain b{color:var(--warn)}

/* 分镜 */
.inherit{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:12px;flex-wrap:wrap;font-size:13px}
.inherit img{width:64px;height:42px;object-fit:cover;border-radius:4px}
.inherit.warn{border-color:var(--warn)}
.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px}
.ev{flex:none;width:168px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:6px;position:relative;cursor:pointer}
.ev[aria-current=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ev .pic{height:96px;border-radius:6px;background:var(--stage);display:grid;place-items:center;color:#7f8b96;font-size:12px;overflow:hidden}
.ev .pic img{width:100%;height:100%;object-fit:cover}
.ev .t{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:13px}
.ev .t input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.ev .t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev small{color:var(--muted);font-size:11px}
.cell{margin-top:12px}
.cell .grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.cell label{font-size:12px;color:var(--muted);display:block;margin:8px 0}
.cell .stage{min-height:260px}
/* 弹窗与抽屉 */
dialog{width:min(820px,96vw);max-height:90vh;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:22px;font:14px/1.6 Inter,"Microsoft YaHei",system-ui,sans-serif}
dialog::backdrop{background:#000a}
dialog.wide{width:min(1100px,96vw)}
dialog.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;border-radius:0;width:min(560px,100vw)}
#archive{box-sizing:border-box;inset:0 0 0 auto;margin:0;width:min(600px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;overflow-y:auto}
.archive-tabs{display:flex;gap:6px;padding:8px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.archive-tabs button{flex:1;padding:8px 6px;white-space:nowrap}
.archive-tabs button[aria-pressed="true"]{color:var(--accent);background:transparent;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.archive-list-head{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:8px}.archive-list-head h3{margin:0;font-size:15px}
.archive-search{display:block;font-size:12px;color:var(--muted)}.archive-search input{display:block;box-sizing:border-box;width:100%;margin:6px 0 12px}
#archive .case-info{min-width:0;flex:1 1 240px;overflow-wrap:anywhere}#archive .case-info .meta{margin:4px 0 0}
.case-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.case-more summary{cursor:pointer;color:var(--muted);padding:8px}.case-more[open]{flex-basis:100%}.case-more>div{display:flex;gap:6px;flex-wrap:wrap}
.archive-empty{color:var(--muted);padding:20px 8px}.archive-case[hidden]{display:none}
@media(max-width:600px){#archive{padding:16px}.archive-tabs{gap:4px}.archive-tabs button{font-size:12px}#archive .case-actions{width:100%}}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.dialog-head h2,dialog h2{margin:0;font-size:18px}
iframe{width:100%;height:70vh;border:0;border-radius:8px;background:#fff}
#palette-dialog[open]{display:flex;flex-direction:column;box-sizing:border-box;height:90dvh;max-height:90dvh;overflow:hidden}
#palette-dialog>.dialog-head{flex:none}
#palette-dialog>#palette-frame{display:block;flex:1;min-height:0;height:auto;background:var(--bg)}
.where{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0 16px}
.where th,.where td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left}
.where td.y{color:var(--ok)}.where td.n{color:var(--muted)}
.box{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:10px 0;background:var(--panel2)}
.box h3{margin:0 0 4px;font-size:14px;display:flex;gap:8px;align-items:center}
.box p{margin:4px 0;font-size:13px;color:var(--muted)}
.case{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:8px 0}
.history p{margin:4px 0;font-size:12px;color:var(--muted)}


/* 与现有工作台一致：共享页头里不显示账户提示文字 */
.topbar.site-header #account-label{display:none}
@media(max-width:980px){.hero-main{grid-template-columns:1fr}.spark{max-width:260px;order:-1}.entry-row{grid-template-columns:repeat(2,minmax(0,1fr))}.wb .entry{border-left:0;border-top:1px solid var(--line)}.wb .entry:nth-child(-n+2){border-top:0}.wb .entry:nth-child(even){border-left:1px solid var(--line)}.path{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}}
@media(max-width:760px){.wb-bar{padding:8px 14px}.bar-actions{margin-left:0;width:100%}.flow{padding:0 14px 110px}.hero{padding:18px 16px 50px}.spark{max-width:190px}.sec .why{margin-left:0}.edit .two,.cell .grid2{grid-template-columns:1fr}.stage{min-height:220px}.layers th{width:84px}.guide{bottom:8px}}
.stage-tools .actions{flex-wrap:wrap;justify-content:flex-end}.stage-tools label{display:inline-flex;gap:6px;align-items:center}.wb .stage-tools select{width:auto;padding:4px 8px}
.look-preparation{display:grid;gap:16px;margin:12px 0 24px}.look-preparation>section{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.look-preparation h3,.look-generate-title{margin:0 0 10px;font-size:16px}.look-preparation h3>span,.look-generate-title>span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:6px;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:12px}.look-preparation h3 small{font-size:12px;color:var(--muted);font-weight:400}.look-preparation .look-tools{margin-bottom:0}.look-preparation .refs:empty{display:none}.look-preparation .refs{margin-top:14px}.look-preparation .ref input{margin-bottom:8px}.look-generate-title{margin-top:24px}@media(max-width:760px){.look-preparation>section{padding:14px}}
.wb:has(#hero:not([hidden])) .wb-bar{border-bottom-color:transparent;min-height:44px;padding-top:6px;padding-bottom:0}
/* Per-layer Q&A: fixed viewport panel, independent reading scroll. */
.wb .layers .need .ask-layer{display:block;margin:10px 0 0 auto;color:var(--accent);border-color:var(--line);background:var(--panel);font-size:12px;white-space:nowrap}
.wb-chat{position:fixed;inset:0 0 0 auto;width:460px;height:100dvh;z-index:60;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);box-shadow:-16px 0 60px #0004;color:var(--text)}
.wb-chat-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.wb-chat-head small{color:var(--accent);font-size:11px;letter-spacing:1px}.wb-chat-head h2{font-size:20px;margin:6px 0 0;line-height:1.4}.wb-chat button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);padding:8px 12px;min-height:36px}.wb-chat button:hover{border-color:var(--accent)}.wb-chat button:disabled{opacity:.45;cursor:default}.wb-chat button.primary{background:transparent;color:var(--accent);font-weight:650;border-color:var(--accent)}.wb-chat button.primary:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}.wb-chat button.primary:not(:disabled):active{background:color-mix(in srgb,var(--accent) 12%,transparent)}.wb-chat-head button{font-size:22px;background:transparent;padding:2px 12px}
.wb-chat :is(button,input,textarea,select):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wb-chat-context{padding:12px 24px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);max-height:80px;overflow:auto;flex-shrink:0;white-space:pre-wrap}
.wb-chat-history{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:20px 22px}.wb-chat-empty{font-size:13px;color:var(--muted);line-height:1.8}
.wb-chat-message{margin:0 0 20px;overflow-wrap:anywhere;min-width:0}.wb-chat-message>small{display:block;color:var(--muted);font-size:11px;margin:5px 0 10px}.wb-chat-message.is-user{background:var(--panel2);padding:12px 16px;border:1px solid var(--line);border-radius:12px 12px 2px 12px;margin-left:28px}.wb-chat-message.is-user p{white-space:pre-wrap;margin:0}
.wb-chat .message-body{font-size:14px;line-height:1.85}.wb-chat .message-body p{margin:10px 0}.wb-chat .message-body h2{font-size:18px;margin:22px 0 10px}.wb-chat .message-body h3{font-size:16px;margin:18px 0 8px}.wb-chat .message-body h4{font-size:14px}.wb-chat .message-body a{color:var(--accent)}.wb-chat .message-body pre{padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:auto;white-space:pre;font-size:12px}.wb-chat .message-body code{font-size:.9em}.wb-chat .message-body table{display:block;width:100%;overflow:auto;border-collapse:collapse;font-size:12px}.wb-chat .message-body th,.wb-chat .message-body td{padding:8px;border:1px solid var(--line);min-width:80px}.wb-chat .message-body ul,.wb-chat .message-body ol{padding-left:22px}.wb-chat .qa-diagram{padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow:auto}.wb-chat .qa-diagram svg{max-width:100%;height:auto}.wb-chat .qa-diagram-nodes{display:flex;flex-wrap:wrap;gap:6px}.wb-chat .qa-diagram-node{padding:6px;border:1px solid var(--line);border-radius:5px}
.wb-chat-notice{margin:0;padding:0 22px;font-size:12px;color:var(--warn);max-height:80px;overflow:auto;flex-shrink:0}.wb-chat-notice.has-notice{padding-block:9px;border-top:1px solid var(--line)}
.wb-chat-compose{border-top:1px solid var(--line);padding:16px 22px 20px;flex-shrink:0;background:var(--panel)}.wb-chat-options{display:flex;gap:10px;margin-bottom:10px}.wb-chat-options label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);flex:1;min-width:0}.wb-chat-options label:last-child{max-width:110px}.wb-chat :is(select,textarea){width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px;min-width:0}.wb-chat textarea{resize:vertical;min-height:78px;max-height:160px;font-size:14px;line-height:1.6}.wb-chat-send{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}.wb-chat-send small{color:var(--muted);font-size:10px}.wb-chat-shade{display:none}
@media(min-width:1200px){body.has-wb-chat{padding-right:460px}body.has-wb-chat .flow{max-width:100%}}
@media(max-width:1199px){.wb-chat-shade{display:block;position:fixed;inset:0;border:0;background:#0008;z-index:59}.wb-chat{width:min(460px,100vw)}body.has-wb-chat{overflow:hidden}}
@media(max-width:520px){.wb-chat-head{padding:14px 16px}.wb-chat-history{padding:16px}.wb-chat-compose{padding:12px 16px max(12px,env(safe-area-inset-bottom))}.wb-chat-context{padding:10px 16px}.wb-chat-options{margin-bottom:6px}.wb-chat textarea{min-height:65px;max-height:100px}.wb-chat-head h2{font-size:18px}}

/* A wide desktop is a horizontal workbench; every stage scrolls vertically
   inside its own column. The document itself never becomes a very wide page. */
.workflow-board{display:contents}.board-toolbar{display:none}
@media(min-width:1100px){
  body.is-workspace[data-layout=horizontal]{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  body.is-workspace[data-layout=horizontal]>.site-header{flex:none}
  body.is-workspace[data-layout=horizontal]>.wb{flex:1;min-height:0;display:flex;flex-direction:column}
  body.is-workspace[data-layout=horizontal] .wb-bar{flex:none;padding:8px 16px}
  body.is-workspace[data-layout=horizontal] .restore{flex:none;max-height:100px;overflow:auto;margin:8px 16px}
  body.is-workspace[data-layout=horizontal] .flow{flex:1;min-height:0;max-width:none;width:100%;margin:0;padding:0;overflow:hidden;gap:0}
  body.is-workspace[data-layout=horizontal] .steps{position:static;flex:none;padding:8px 16px 0}
  body[data-layout=horizontal] .wb .steps button[aria-current=step]{background:var(--panel2);color:var(--text);border-radius:6px 6px 0 0}
  body.is-workspace[data-layout=horizontal] #status{flex:none;margin:0;padding:0 16px;min-height:0;max-height:44px;overflow:auto}
  body[data-layout=horizontal] .board-toolbar{display:flex;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;color:var(--muted);font-size:12px}
  body[data-layout=horizontal] .board-toolbar>div{display:flex;gap:6px}body[data-layout=horizontal] .wb .board-toolbar button{font-size:12px;padding:4px 10px;min-height:28px}
  body[data-layout=horizontal] .workflow-board{display:flex;flex:1;min-height:0;gap:16px;padding:0 16px 12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:16px;scrollbar-color:var(--muted) var(--panel);scrollbar-width:auto}
  body[data-layout=horizontal] .workflow-board:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
  body[data-layout=horizontal] .workflow-board>.sec{flex:0 0 var(--column-width,600px);max-width:none;min-width:0;min-height:0;padding:16px;overflow:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
  body[data-layout=horizontal] .workflow-board>#sec-spec{--column-width:480px}body[data-layout=horizontal] .workflow-board>#sec-look{--column-width:760px}body[data-layout=horizontal] .workflow-board>#sec-sequence{--column-width:800px}body[data-layout=horizontal] .workflow-board>#sec-breakdown{--column-width:760px}
  body[data-layout=horizontal] .workflow-board>.sec>header{position:sticky;top:-16px;z-index:4;padding:12px 0;margin-top:-12px;background:var(--bg);cursor:grab;border-bottom:1px solid var(--line)}
  body[data-layout=horizontal] .workflow-board.is-dragging,body[data-layout=horizontal] .workflow-board.is-dragging *{cursor:grabbing!important;user-select:none}
  body[data-layout=horizontal] .workflow-board .sec .why{margin-left:0}body[data-layout=horizontal] .workflow-board .spec-grid{grid-template-columns:1fr}
  body[data-layout=horizontal] .workflow-board .stage{min-height:260px}body[data-layout=horizontal] .workflow-board .stage img{max-height:48vh}
  body[data-layout=horizontal] .workflow-board .look-preparation>section{padding:14px}
  body.is-workspace[data-layout=horizontal] .guide{position:static;transform:none;flex:none;width:auto;max-width:none;margin:0;padding:10px 16px;border-radius:0;border:0;border-top:1px solid var(--line);box-shadow:none;max-height:100px;overflow:auto}
}
.design-library{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.design-library h3{font-size:17px}.design-library h3 small{font-size:12px;color:var(--muted)}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.library-card{min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.library-card.selected{border-color:var(--accent)}
.library-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#090c0f;border-radius:6px}
.library-card p{font-size:12px;margin:0}.library-card small{font-size:11px;overflow-wrap:anywhere;color:var(--muted)}
.library-card .chips{gap:4px}.library-card .chip{font-size:11px;padding:3px 6px}
.library-card input{width:100%;min-width:0}
@media(max-width:480px){.library-grid{grid-template-columns:1fr}}

.layout-switch{display:flex;gap:4px;margin-right:auto}.layout-switch button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.design-model-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.design-model-controls label{font-size:12px;color:var(--muted);min-width:110px;flex:1}.design-model-controls select{margin-top:4px;min-height:36px}
.hero-box-foot{flex-wrap:wrap;gap:10px}.hero-box-foot #hero-count{width:100%}.hero-box-foot .design-model-controls{flex:1;min-width:260px}
#wizard-confirm{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.column-resizer{display:none}.wb .steps button:disabled{cursor:default;opacity:.45}
.prompt-entry{display:block;margin:16px 0}.prompt-entry small{color:var(--muted)}.prompt-entry textarea{margin-top:8px}.prompt-preview textarea{width:100%;resize:vertical;background:var(--bg);color:var(--text);padding:14px;border:1px solid var(--line);line-height:1.65}.reference-crop{width:min(1000px,96vw)}.crop-stage{text-align:center;background:var(--bg);padding:8px}.crop-surface{display:inline-block;position:relative;line-height:0;touch-action:none;user-select:none;cursor:crosshair;max-width:100%}.crop-surface img{display:block;max-width:100%;max-height:55vh;object-fit:contain}.crop-selection{position:absolute;border:2px solid var(--accent);background:#cfff4933;pointer-events:none;box-sizing:border-box}.crop-fields{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.crop-fields label{flex:1;min-width:100px}.crop-fields input{display:block;width:100%;padding:8px;background:var(--bg);color:var(--text);border:1px solid var(--line)}.reference-crop button,.prompt-preview button{padding:8px 14px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);color:var(--text);cursor:pointer}.reference-crop button.primary{background:transparent;color:var(--accent);border-color:var(--accent)}
@media(min-width:1100px){body[data-layout=horizontal] .column-resizer{display:block;flex:0 0 10px;align-self:stretch;cursor:col-resize;touch-action:none;border-radius:5px;background:linear-gradient(var(--line),var(--line)) center/2px 100% no-repeat}body[data-layout=horizontal] .column-resizer:hover,body[data-layout=horizontal] .column-resizer:focus-visible{background-color:var(--panel2);outline:1px solid var(--accent)}body[data-layout=horizontal] .workflow-board{gap:6px}body.is-resizing,body.is-resizing *{cursor:col-resize!important;user-select:none!important}}
@media(max-width:600px){.hero-box-foot .design-model-controls{min-width:100%}.layout-switch{margin-right:0}}

.credit-estimate{margin:10px 0 3px;color:var(--text)}.estimate-note{margin:0 0 10px;line-height:1.5}

.wb .bar-actions>.menu>summary{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);font:inherit;cursor:pointer;min-height:36px}
.wb .bar-actions>.menu>summary::-webkit-details-marker{display:none}
.wb .bar-actions>button{min-height:36px}
.wb .bar-actions>.menu>summary:hover,.wb .bar-actions>.menu[open]>summary{border-color:var(--accent)}
#archive[aria-busy="true"] #archive-body{opacity:.6;pointer-events:none}

.case-loading{padding:14px 0;color:var(--muted,#9eafc3);font-size:13px;line-height:1.6}
.case-loading-track{height:4px;border-radius:4px;overflow:hidden;background:#253240;margin-top:10px}
.case-loading-track i{display:block;width:35%;height:100%;background:var(--accent,#d4ff68);animation:case-loading-slide 1.5s ease-in-out infinite}
@keyframes case-loading-slide{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media(prefers-reduced-motion:reduce){.case-loading-track i{animation:none;width:100%;opacity:.65}}

/* Read-only reference recap; editing stays in the source steps. */
.reference-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:12px;max-height:250px;overflow:auto}
.reference-summary-item{display:flex;gap:9px;align-items:center;min-width:0;margin:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.reference-summary-item img,.reference-summary-missing{width:76px;height:54px;flex:none;object-fit:contain;border-radius:4px;background:var(--stage)}
.reference-summary-missing{display:grid;place-items:center;color:var(--muted);font-size:12px}.reference-summary-item.inactive{opacity:.6}
.reference-summary-item figcaption{min-width:0;display:grid;gap:3px;font-size:12px;line-height:1.5}.reference-summary-item b,.reference-summary-item span,.reference-summary-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-weight:400}.reference-summary-item span,.reference-summary-item small{color:var(--muted)}
.reference-summary>.fine,.reference-summary-note{grid-column:1/-1}

.wb-beta-note{font-size:12px;line-height:1.5;color:var(--muted);flex:0 1 auto}

.library-help{margin-top:8px;font-size:12px;color:var(--muted)}.library-help summary{cursor:pointer;width:fit-content}.library-help p{margin:6px 0}.library-card>p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The workbench keeps the shared dark brand bar; lightbox gets a soft seam.
   These overrides are local to this page, not a site-wide header theme. */
html[data-theme=lightbox] body.wb-body>.topbar.site-header{border-bottom-color:#89957b;box-shadow:0 3px 10px #26321c1a}
html[data-theme=lightbox] .wb button.primary:disabled,html[data-theme=lightbox] dialog button.primary:disabled,html[data-theme=lightbox] .wb-chat button.primary:disabled{opacity:1;background:transparent;border-color:var(--line);color:var(--muted)}
html[data-theme=lightbox] .stage,html[data-theme=lightbox] .ev .pic{color:var(--muted)}
html[data-theme=lightbox] .library-card img{background:var(--stage)}
html[data-theme=lightbox] .stage:is(.bg-grey,.bg-check){color:#f3f4f5}
html[data-theme=lightbox] .case-loading-track{background:var(--line)}

@media(max-width:760px){
 body.wb-body .topbar.site-header{grid-template-rows:var(--site-header-primary-row) var(--site-header-tabs-row);height:var(--site-header-height);min-height:var(--site-header-height)}
 body.wb-body .topbar.site-header>.site-tabs a{min-height:36px;padding:7px 8px}
 body.wb-body .topbar.site-header>.brand{min-height:44px}
 body.wb-body .wb .menu-body>a{display:flex;align-items:center;min-height:44px}
 body.wb-body .topbar.site-header #account-open,body.wb-body .topbar.site-header .account-bar button,body.wb-body .topbar.site-header a.button,
 body.wb-body .wb button,body.wb-body dialog button,
 body.wb-body .wb summary,body.wb-body dialog summary{min-height:44px}
 body.wb-body .wb .bar-actions>.menu>summary{min-height:44px}
 body.wb-body .wb .bar-actions>.menu{margin-left:auto}
 body.wb-body .wb .menu-body{max-width:calc(100vw - 28px);max-height:65dvh;overflow-y:auto}
 body.wb-body .wb select,body.wb-body .wb input:not([type=radio]):not([type=checkbox]):not([type=range]),body.wb-body dialog input:not([type=radio]):not([type=checkbox]):not([type=range]){min-height:44px}
}

body.wb-body:not(.is-workspace) .layout-switch{display:none}
.wb .menu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-theme=lightbox] :is(.wb,dialog) :is(input,textarea)::placeholder{color:var(--muted);opacity:1}

html[data-theme=lightbox] :is(.stage .busy,.thumb.busy,.card-busy){color:var(--muted)}
html[data-theme=lightbox] .badge.stale{color:var(--ink)}
html[data-theme=lightbox] .spinner{border-color:var(--line);border-top-color:var(--accent)}

/* Narrative directions and opt-in AI refinements. */
.concept-story{margin:12px 0}.concept-story p,.spec-suggestion p{white-space:pre-wrap;line-height:1.8;overflow-wrap:anywhere}
.concept-story summary,.concept-details summary,.selected-story summary{cursor:pointer;color:var(--muted);font-size:12px}
.concept-details{margin-bottom:12px}.selected-story{margin-bottom:16px;width:100%;max-width:68ch}.selected-story textarea{display:block;box-sizing:border-box;margin-top:10px;line-height:1.7;min-height:5em;max-height:45vh}
.spec-assistant{margin-bottom:18px}.spec-assistant h3{margin-top:0}.spec-assistant .model-controls{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}.spec-assistant .model-controls label{flex:1;min-width:120px}.spec-assistant select{width:100%}
.spec-suggestion{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.spec-suggestion>b{color:var(--accent)}.spec-suggestion p{font-size:13px}.axis>.row{margin-top:8px}

.cards:has(.concept-story){grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}

/* Full image preview: fit first, original pixels remain scrollable. */
.stage img[data-act="image-zoom"]{cursor:zoom-in}.stage img[data-act="image-zoom"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#image-preview[open]{display:flex;flex-direction:column;box-sizing:border-box;width:96vw;max-width:96vw;height:92dvh;max-height:92dvh;overflow:hidden}
#image-preview>.dialog-head{flex:none;flex-wrap:wrap}#image-preview-info{margin:4px 0 0}
.image-preview-viewport{display:flex;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--bg);border-radius:8px}
#image-preview-image{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:auto}
#image-preview.original-size #image-preview-image{max-width:none;max-height:none}

@media(min-width:1100px){body[data-layout="horizontal"] #palette-dialog{width:min(1560px,96vw);max-width:96vw}}

/* Homepage feedback and its draft stay separate from the creative project. */
.wb .feedback-open{display:inline-flex;align-items:center;gap:7px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.feedback-open svg{width:16px;height:16px}
.feedback-copy{display:flex;flex-direction:column;gap:2px;text-align:left;font-size:12px;line-height:1.5;white-space:normal}.feedback-prompt{color:var(--muted);font-size:11px}.feedback-open svg{flex-shrink:0}.wb .feedback-open{max-width:100%;padding:6px 10px}
.feedback-dialog{width:min(580px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:26px;overflow:auto}.feedback-dialog h2{margin:0;font-size:24px}.feedback-kicker{color:var(--accent);font-size:12px;margin:0 0 5px}.feedback-dialog #feedback-intro{font-size:13px;margin:14px 0 20px;line-height:1.8}.feedback-types{border:0;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}.feedback-types legend{font-weight:600;margin-bottom:10px}.feedback-types label{display:flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer}.feedback-types label:has(:checked){border-color:var(--accent);background:var(--panel2)}.feedback-types input{width:auto;margin:0;accent-color:var(--accent)}.feedback-label{display:flex;justify-content:space-between;font-weight:600}.feedback-guide{font-size:12px;color:var(--muted);line-height:1.8;margin:8px 0 10px}.feedback-dialog textarea{min-height:150px}.feedback-meta{display:flex;justify-content:space-between;gap:12px}.feedback-meta span:last-child{white-space:nowrap}.feedback-status{font-size:13px;overflow-wrap:anywhere}.feedback-status[data-state=error]{color:var(--bad)}.feedback-status[data-state=success]{color:var(--ok)}.feedback-dialog :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.feedback-dialog{padding:20px}.feedback-types label{padding:8px 10px}.feedback-dialog .dialog-head{align-items:flex-start}}

/* Settings is a summary control; match the workbench's green outline actions. */
.wb .menu>summary{display:block;min-height:40px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent)}
.wb .menu>summary:hover,.wb .menu[open]>summary{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.wb .menu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.image-generation-options{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.image-generation-options label{flex:1 1 130px;min-width:0;color:var(--muted);font-size:12px}
.image-generation-options select{display:block;margin-top:5px}
.image-generation-options .image-pixel-hint{flex:1 1 100%;margin:0;line-height:1.6}
.menu-body .image-pixel-hint{white-space:normal;line-height:1.6}
.workbench-consumption{position:fixed;left:16px;bottom:16px;z-index:45;max-width:min(380px,calc(100vw - 32px));padding:12px 16px;border:1px solid var(--accent,#a6de42);border-radius:12px;background:var(--panel,#141d26);color:var(--text,#eef3ec);box-shadow:0 6px 28px #0005;font-size:13px}.workbench-consumption summary{cursor:pointer;margin-top:7px}.workbench-consumption details p{margin:6px 0;font-size:12px}.workbench-consumption strong{display:block}
.workbench-consumption{padding-right:44px;max-height: min(50vh,360px);overflow:auto}.workbench-consumption .consumption-close{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}.workbench-consumption .consumption-close:hover{background:#8883}.workbench-consumption .consumption-close:focus-visible{outline:2px solid var(--accent,#a6de42);outline-offset:-2px}
.workbench-price-list{margin:8px 0;font-size:12px}.workbench-price-list table{width:100%;border-collapse:collapse}.workbench-price-list th,.workbench-price-list td{text-align:left;padding:7px 5px;border-bottom:1px solid #8883}.workbench-price-list summary{cursor:pointer}
.look-wish-guide{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.look-wish-guide h3{margin:0;font-size:15px}.look-wish-guide p{margin:6px 0 12px;color:var(--muted);font-size:12px;line-height:1.5}
.look-wish-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:8px}
.look-wish-options button{display:grid;gap:4px;text-align:left;white-space:normal;padding:9px 12px}
.look-wish-options strong{color:var(--accent)}.look-wish-options small{font-size:11px;color:var(--muted);line-height:1.45}