/* =====================================================================
   STUDIO — app-local layout only. Every color / space / type / motion
   value comes from design-tokens.css. Cherry is signal, never paint.
   ===================================================================== */
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--cherry-12);color:var(--ink-primary)}
.mono{font-family:var(--font-mono)}

/* ---- App frame: rail · canvas · provenance dock (collapsible) ---- */
.app{
  height:100vh;display:grid;
  grid-template-rows:var(--topbar-h) 1fr auto auto;
  grid-template-columns:var(--nav-w) 1fr var(--dock-col);
  --dock-col:var(--rightdock-w);
  transition:grid-template-columns var(--dur-3) var(--ease-out);
}
.app.dock-closed{--dock-col:0px}

/* ---- Top bar ---- */
.topbar{
  grid-column:1/-1;display:flex;align-items:center;gap:var(--s-4);
  padding-inline:var(--s-4);background:var(--surface-base);
  border-bottom:1px solid var(--line-faint);z-index:var(--z-dock);
}
.brand{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-display);font-weight:600;letter-spacing:var(--tracking-tight);font-size:1.05rem}
.brand svg{width:24px;height:24px}
.proj{
  font-size:var(--t-sm);color:var(--ink-secondary);
  padding:6px 12px;border:1px solid var(--line-faint);border-radius:var(--r-sm);
  background:var(--surface-raised);transition:border-color var(--dur-2),color var(--dur-2);
}
.proj:hover{border-color:var(--line-soft);color:var(--ink-primary)}
.proj b{color:var(--ink-primary);font-weight:500}
.topbar .spacer{flex:1}
.credits{
  display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:var(--t-sm);
  padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line-soft);background:var(--surface-raised);box-shadow:var(--edge-top);
}
.credits svg{width:14px;height:14px}
.credits .amt{color:var(--ink-primary);font-variant-numeric:tabular-nums;transition:color var(--dur-2)}
.credits.spending .amt{color:var(--cherry-bright)}
.credits.low .amt{color:var(--status-warn)}
.icon-btn{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-tertiary);transition:background var(--dur-2),color var(--dur-2)}
.icon-btn:hover{background:var(--surface-hover);color:var(--ink-primary)}
.icon-btn.active{color:var(--cherry-bright);background:var(--cherry-12)}
.icon-btn svg{width:19px;height:19px}

/* ---- Rail ---- */
.rail{
  grid-row:2/3;grid-column:1/2;background:var(--surface-base);
  border-right:1px solid var(--line-faint);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:var(--s-3) 0;
  z-index:var(--z-dock);
}
.rail-btn{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink-tertiary);position:relative;transition:color var(--dur-2),background var(--dur-2)}
.rail-btn svg{width:21px;height:21px}
.rail-btn:hover{color:var(--ink-primary);background:var(--surface-hover)}
.rail-btn.active{color:var(--cherry-bright);background:var(--cherry-12)}
.rail-btn.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:2px;background:var(--cherry-core);box-shadow:0 0 10px var(--cherry-40)}
.rail .sep{width:24px;height:1px;background:var(--line-faint);margin:var(--s-1) 0}
.rail .tip{position:absolute;left:54px;top:50%;transform:translateY(-50%) translateX(-6px);background:var(--surface-overlay);border:1px solid var(--line-soft);padding:5px 10px;border-radius:var(--r-sm);font-size:var(--t-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:var(--dur-2);z-index:var(--z-drawer);color:var(--ink-primary);box-shadow:var(--shadow-md)}
.rail-btn:hover .tip{opacity:1;transform:translateY(-50%)}

/* =================== CANVAS =================== */
.canvas{grid-row:2/3;grid-column:2/3;position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 50% -10%,var(--cherry-12),transparent 58%),var(--surface-base)}
.stage{flex:1;display:grid;place-items:center;padding:var(--s-6);position:relative}

/* Welcome */
.welcome{text-align:center;max-width:500px;animation:rise var(--dur-4) var(--ease-out)}
.welcome .orb{width:96px;height:96px;margin:0 auto var(--s-6);position:relative;animation:float 6s var(--ease-inout) infinite}
.welcome .orb svg{width:100%;height:100%;filter:drop-shadow(0 12px 30px rgba(225,29,56,.35))}
.welcome h1{font-family:var(--font-display);font-size:var(--t-h1);font-weight:600;letter-spacing:var(--tracking-display);line-height:var(--leading-snug);margin-bottom:var(--s-3)}
.welcome p{color:var(--ink-secondary);font-size:var(--t-body-lg);line-height:var(--leading-body);margin-bottom:var(--s-5)}
.seeds{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap}
.seed-chip{font-size:var(--t-sm);color:var(--ink-secondary);padding:8px 14px;border:1px solid var(--line-faint);border-radius:var(--r-pill);background:var(--surface-raised);transition:var(--dur-2)}
.seed-chip:hover{border-color:var(--cherry-40);color:var(--ink-primary);background:var(--cherry-12)}

/* Generation card */
.gen-card{width:100%;max-width:580px;animation:rise var(--dur-3) var(--ease-out)}
.gen-frame{aspect-ratio:16/10;border-radius:var(--r-lg);background:var(--surface-raised);border:1px solid var(--line-faint);position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:var(--shadow-md)}
.gen-frame.rendering{border-color:var(--line-soft)}
.gen-progress{text-align:center;padding:var(--s-5)}
.gen-progress .ring{width:54px;height:54px;margin:0 auto var(--s-4);border-radius:50%;border:3px solid var(--surface-active);border-top-color:var(--cherry-core);animation:spin .9s linear infinite}
.gen-progress .lbl{font-family:var(--font-mono);font-size:var(--t-sm);color:var(--ink-secondary)}
.gen-progress .sub{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-tertiary);margin-top:6px}
.gen-caption{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-3);padding:0 var(--s-1)}
.gen-caption .meta{font-family:var(--font-mono);font-size:var(--t-sm);color:var(--ink-tertiary)}
.gen-actions{display:flex;gap:var(--s-2)}
.mini-act{font-size:var(--t-sm);color:var(--ink-secondary);padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--line-faint);transition:var(--dur-2)}
.mini-act:hover{border-color:var(--line-soft);color:var(--ink-primary);background:var(--surface-hover)}

/* Reroute flash — failover made visible, but NO vendor names */
.reroute-flash{position:absolute;top:var(--s-4);left:50%;transform:translateX(-50%) translateY(-12px);display:flex;align-items:center;gap:9px;background:var(--surface-overlay);border:1px solid var(--status-queued);color:var(--ink-primary);font-size:var(--t-sm);padding:9px 15px;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:var(--dur-3) var(--ease-out);z-index:5}
.reroute-flash.show{opacity:1;transform:translateX(-50%)}
.reroute-flash .dot{width:7px;height:7px;border-radius:50%;background:var(--status-queued);box-shadow:0 0 8px var(--status-queued)}
.reroute-flash b{color:var(--status-queued);font-weight:600}

/* =================== INPUT SPINE =================== */
.spine{grid-row:3/4;grid-column:2/3;padding:var(--s-3) var(--s-5) var(--s-2);background:linear-gradient(0deg,var(--surface-base),transparent);z-index:var(--z-dock)}
.spine-inner{max-width:760px;margin:0 auto;background:var(--surface-raised);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-md);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.spine-inner:focus-within{border-color:var(--cherry-40);box-shadow:var(--shadow-md),var(--cherry-glow)}
.modality-row{display:flex;align-items:center;gap:6px;padding:9px 10px 0;overflow-x:auto}
.mod-chip{display:flex;align-items:center;gap:7px;font-size:var(--t-sm);font-weight:500;color:var(--ink-tertiary);padding:7px 12px;border-radius:var(--r-sm);transition:var(--dur-2);white-space:nowrap;flex-shrink:0}
.mod-chip .pdot{width:7px;height:7px;border-radius:50%;background:var(--pd);transition:var(--dur-2)}
.mod-chip[data-mod=image]{--pd:var(--p-image)}
.mod-chip[data-mod=video]{--pd:var(--p-video)}
.mod-chip[data-mod=audio]{--pd:var(--p-audio)}
.mod-chip[data-mod=vfx]{--pd:var(--p-vfx)}
.mod-chip[data-mod=remove_bg],.mod-chip[data-mod=enhance],.mod-chip[data-mod=subtitles]{--pd:var(--p-vfx)}
.mod-chip[data-mod=transcribe],.mod-chip[data-mod=loudness]{--pd:var(--p-audio)}
.mod-chip[data-mod=auto_shorts],.mod-chip[data-mod=interpolate],.mod-chip[data-mod=denoise],.mod-chip[data-mod=stabilize],.mod-chip[data-mod=open_video],.mod-chip[data-mod=video_restyle]{--pd:var(--p-video)}
.mod-chip[data-mod=storyboard]{--pd:var(--status-info)}
.mod-chip:hover{color:var(--ink-secondary);background:var(--surface-hover)}
.mod-chip.active{color:var(--ink-primary);background:var(--surface-active)}
.mod-chip.active .pdot{box-shadow:0 0 8px var(--pd)}
.modality-row .flex{flex:1}
.route-badge{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-tertiary);padding:5px 10px;border:1px solid var(--line-faint);border-radius:var(--r-sm)}
.route-badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--status-success);box-shadow:0 0 6px var(--status-success)}

.prompt-wrap{display:flex;align-items:flex-end;gap:var(--s-3);padding:10px 12px 12px}
.prompt-input{flex:1;background:none;border:none;color:var(--ink-primary);font-size:var(--t-body-lg);font-family:inherit;resize:none;outline:none;line-height:var(--leading-snug);max-height:120px;min-height:24px;padding:5px 4px}
.prompt-input::placeholder{color:var(--ink-disabled)}
.generate-btn{display:flex;align-items:center;gap:8px;background:var(--cherry-core);color:var(--ink-inverse);font-size:var(--t-body);font-weight:600;padding:11px 20px;border-radius:var(--r-md);box-shadow:var(--shadow-md);transition:transform var(--dur-1) var(--ease-out),background var(--dur-2),box-shadow var(--dur-2);white-space:nowrap}
.generate-btn:hover:not(:disabled){background:var(--cherry-bright);box-shadow:var(--cherry-glow);transform:translateY(-1px)}
.generate-btn:active{transform:scale(.97)}
.generate-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.generate-btn svg{width:16px;height:16px}
.agent-btn{display:flex;align-items:center;gap:8px;background:var(--surface-active);color:var(--ink-primary);font-size:var(--t-body);font-weight:600;padding:11px 16px;border:1px solid var(--line-soft);border-radius:var(--r-md);transition:transform var(--dur-1) var(--ease-out),background var(--dur-2),border-color var(--dur-2);white-space:nowrap}
.agent-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--cherry-40);transform:translateY(-1px)}
.agent-btn:active{transform:scale(.97)}
.agent-btn:disabled{opacity:.4;cursor:not-allowed}
.agent-btn svg{width:16px;height:16px}
.agent-plan{width:min(760px,calc(100vw - 48px));max-height:min(620px,calc(100vh - 220px));overflow:auto;background:var(--surface-raised);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:18px}
.agent-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.agent-plan-head h2{font-size:var(--t-title);font-weight:650;margin:0}
.agent-plan-state{font:var(--t-xs)/1 var(--font-mono);color:var(--ink-secondary);padding:6px 8px;border:1px solid var(--line-faint);border-radius:var(--r-sm)}
.agent-step{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line-faint)}
.agent-step:first-of-type{border-top:none}
.agent-step-num{font:var(--t-xs)/1 var(--font-mono);color:var(--ink-tertiary);padding-top:3px}
.agent-step-title{font-size:var(--t-body);font-weight:600;color:var(--ink-primary)}
.agent-step-detail{font-size:var(--t-sm);line-height:1.45;color:var(--ink-tertiary);margin-top:4px}
.agent-step-lane{font:var(--t-xs)/1 var(--font-mono);color:var(--ink-secondary);white-space:nowrap;padding:5px 7px;border-radius:var(--r-sm);background:var(--surface-inset)}

.calc-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--line-faint);font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-tertiary)}
.calc-bar .est{display:flex;align-items:center;gap:8px}
.calc-bar .est b{color:var(--ink-primary);font-weight:500}
.calc-bar .est svg{width:12px;height:12px;color:var(--cherry-bright)}
.calc-bar .breakdown{display:flex;gap:14px}
.calc-bar .breakdown span b{color:var(--ink-secondary);font-weight:400}

/* =================== PROVENANCE DOCK =================== */
.dock{grid-row:2/4;grid-column:3/4;background:var(--surface-base);border-left:1px solid var(--line-faint);overflow:hidden auto;z-index:var(--z-dock)}
.app.dock-closed .dock{border-left:none}
.dock-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-4) var(--s-3);position:sticky;top:0;background:var(--surface-base);z-index:2}
.dock-head h3{font-family:var(--font-display);font-size:var(--t-h3);font-weight:600}
.dock-head .x{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-tertiary);transition:var(--dur-2)}
.dock-head .x:hover{background:var(--surface-hover);color:var(--ink-primary)}
.dock-tabs{display:flex;gap:2px;padding:0 var(--s-3);border-bottom:1px solid var(--line-faint)}
.dock-tab{font-size:var(--t-sm);color:var(--ink-tertiary);padding:9px 12px;position:relative;transition:color var(--dur-2)}
.dock-tab.active{color:var(--ink-primary)}
.dock-tab.active::after{content:"";position:absolute;bottom:-1px;left:8px;right:8px;height:2px;background:var(--cherry-core);border-radius:2px}
.dock-body{padding:var(--s-4)}
.recipe-empty{text-align:center;padding:var(--s-8) var(--s-4);color:var(--ink-disabled);font-size:var(--t-sm)}
.recipe-empty svg{width:34px;height:34px;margin:0 auto var(--s-3);opacity:.5}

.recipe-block{margin-bottom:var(--s-4);animation:rise var(--dur-3) var(--ease-out)}
.recipe-label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--ink-disabled);margin-bottom:var(--s-2);font-weight:600}
.recipe-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-faint);font-size:var(--t-sm)}
.recipe-row:last-child{border-bottom:none}
.recipe-row .k{color:var(--ink-tertiary)}
.recipe-row .v{color:var(--ink-primary);font-family:var(--font-mono);font-size:var(--t-sm)}
.recipe-row .v.cap{display:flex;align-items:center;gap:7px}
.recipe-row .v.cap .pdot{width:7px;height:7px;border-radius:50%}
.recipe-row .v.failover{color:var(--status-queued)}
.seed-pill{font-family:var(--font-mono);font-size:var(--t-sm);background:var(--surface-inset);border:1px solid var(--line-faint);padding:3px 8px;border-radius:var(--r-xs);color:var(--ink-secondary)}
.recipe-prompt{font-size:var(--t-sm);color:var(--ink-secondary);line-height:var(--leading-body);background:var(--surface-inset);border:1px solid var(--line-faint);border-radius:var(--r-sm);padding:10px 12px}
.recipe-foot{margin-top:var(--s-2);display:flex;gap:var(--s-2)}
.recipe-foot button{flex:1;font-size:var(--t-sm);color:var(--ink-secondary);padding:9px;border-radius:var(--r-sm);border:1px solid var(--line-faint);transition:var(--dur-2);display:flex;align-items:center;justify-content:center;gap:6px}
.recipe-foot button:hover{border-color:var(--line-soft);color:var(--ink-primary);background:var(--surface-hover)}
.recipe-foot button.primary{background:var(--cherry-12);border-color:var(--cherry-40);color:var(--cherry-bright)}

.lineage{position:relative;padding-left:18px;margin-top:4px}
.lineage::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-soft)}
.lineage-node{position:relative;padding:7px 0 7px 4px;font-size:var(--t-sm);color:var(--ink-secondary)}
.lineage-node::before{content:"";position:absolute;left:-16px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--surface-raised);border:2px solid var(--cherry-deep)}
.lineage-node.cur::before{background:var(--cherry-core);box-shadow:0 0 8px var(--cherry-40)}
.lineage-node small{display:block;color:var(--ink-disabled);font-family:var(--font-mono);font-size:var(--t-xs);margin-top:2px}

/* =================== STATUS QUEUE FOOTER =================== */
.queue-footer{grid-column:2/-1;grid-row:4/5;background:var(--surface-base);border-top:1px solid var(--line-faint);z-index:var(--z-dock)}
.queue-tick{display:flex;align-items:center;gap:var(--s-4);padding:9px var(--s-5);height:44px;cursor:pointer}
.q-status{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-secondary)}
.q-status .live-dot{width:7px;height:7px;border-radius:50%;background:var(--status-live);box-shadow:0 0 8px var(--cherry-40);animation:blink 1.6s var(--ease-inout) infinite}
.q-status.idle .live-dot{background:var(--ink-disabled);box-shadow:none;animation:none}
.tick-items{flex:1;display:flex;gap:18px;overflow:hidden;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-tertiary)}
.tick-item{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tick-item .s{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tick-item .s.run{background:var(--status-live);animation:blink 1.4s infinite}
.tick-item .s.done{background:var(--status-success)}
.tick-item .s.fail{background:var(--status-error)}
.tick-item .s.reroute{background:var(--status-queued)}
.expand-ind{color:var(--ink-disabled);transition:transform var(--dur-3);display:flex}
.queue-footer.open .expand-ind{transform:rotate(180deg)}
.queue-panel{max-height:0;overflow:hidden;transition:max-height var(--dur-3) var(--ease-out)}
.queue-footer.open .queue-panel{max-height:280px;border-top:1px solid var(--line-faint);overflow-y:auto}
.queue-list{padding:var(--s-2) var(--s-4) var(--s-3)}
.q-job{display:flex;align-items:center;gap:var(--s-4);padding:11px 12px;border-radius:var(--r-sm);transition:background var(--dur-2);margin-bottom:4px}
.q-job:hover{background:var(--surface-hover)}
.q-job .q-icon{width:34px;height:34px;border-radius:var(--r-sm);flex-shrink:0;display:grid;place-items:center;background:var(--surface-overlay);color:var(--ink-tertiary)}
.q-job .q-icon svg{width:17px;height:17px}
.q-main{flex:1;min-width:0}
.q-title{font-size:var(--t-sm);color:var(--ink-primary);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-sub{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-disabled);display:flex;align-items:center;gap:8px}
.q-bar{width:120px;height:5px;background:var(--surface-active);border-radius:3px;overflow:hidden;flex-shrink:0}
.q-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cherry-deep),var(--cherry-core));border-radius:3px;transition:width var(--dur-3)}
.q-state{font-family:var(--font-mono);font-size:var(--t-xs);width:74px;text-align:right;flex-shrink:0}
.q-state.run{color:var(--status-live)}
.q-state.done{color:var(--status-success)}
.q-state.fail{color:var(--status-error)}
.q-state.reroute{color:var(--status-queued)}

/* =================== STORYBOARD TRAY =================== */
.tray-toggle{grid-column:2/-1;grid-row:5/6;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px;background:var(--surface-void);border-top:1px solid var(--line-faint);font-size:var(--t-sm);color:var(--ink-tertiary);cursor:pointer;transition:var(--dur-2)}
.tray-toggle:hover{color:var(--ink-secondary);background:var(--surface-base)}
.tray-toggle svg{width:14px;height:14px}
.storyboard-tray{position:fixed;left:var(--nav-w);right:0;bottom:0;background:var(--surface-base);border-top:1px solid var(--line-soft);box-shadow:var(--shadow-lg);transform:translateY(100%);transition:transform var(--dur-3) var(--ease-out);z-index:var(--z-drawer);padding:var(--s-4) var(--s-5) var(--s-5)}
.storyboard-tray.open{transform:translateY(0)}
.tray-head{display:flex;align-items:center;margin-bottom:var(--s-3)}
.tray-head h4{font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;flex:1}
.tray-head .x{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-tertiary)}
.tray-head .x:hover{background:var(--surface-hover);color:var(--ink-primary)}
.shot-strip{display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-2)}
.shot{flex-shrink:0;width:150px}
.shot-thumb{width:150px;height:94px;border-radius:var(--r-sm);border:1px solid var(--line-faint);background:var(--surface-raised);position:relative;overflow:hidden;display:grid;place-items:center;transition:border-color var(--dur-2);cursor:pointer}
.shot-thumb:hover{border-color:var(--cherry-40)}
.shot-thumb .num{position:absolute;top:6px;left:8px;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-secondary);background:rgba(8,7,10,.55);padding:2px 6px;border-radius:var(--r-xs)}
.shot-thumb.add{border-style:dashed;color:var(--ink-disabled)}
.shot-thumb.add:hover{color:var(--cherry-bright)}
.shot-meta{margin-top:7px;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-tertiary);display:flex;align-items:center;gap:6px}
.shot-meta .d{width:5px;height:5px;border-radius:50%;background:var(--status-success)}
.shot-arrow{display:flex;align-items:center;color:var(--ink-disabled);flex-shrink:0}

/* =================== ANIM =================== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =================== RESPONSIVE =================== */
@media(max-width:960px){
  .app{grid-template-columns:var(--nav-w) 1fr 0}
  .dock{display:none}
  .icon-btn.dock-toggle{display:none}
}
@media(max-width:560px){
  .calc-bar .breakdown,.proj,.route-badge{display:none}
}

/* =================== SETTINGS SIDEBAR =================== */
.settings-sidebar { position: fixed; top: 0; right: -360px; width: 320px; height: 100vh; background: var(--bg-mid); border-left: 1px solid var(--line-soft); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; display: flex; flex-direction: column; }
.settings-sidebar.open { right: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.5); }
.settings-head { padding: 16px; border-bottom: 1px solid var(--line-faint); display: flex; justify-content: space-between; align-items: center; }
.settings-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-primary); margin: 0; }
.settings-head .x { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-tertiary); transition: var(--dur-2); }
.settings-head .x:hover { background: var(--surface-hover); color: var(--ink-primary); }
.settings-body { padding: 16px; overflow-y: auto; flex: 1; }
.settings-sidebar .form-group { margin-bottom: 16px; }
.settings-sidebar label { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-secondary); margin-bottom: 6px; }
.settings-sidebar input { width: 100%; box-sizing: border-box; background: var(--surface-base); border: 1px solid var(--line-soft); color: var(--ink-primary); padding: 8px 12px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px; }
.settings-sidebar input:focus { border-color: var(--cherry-core); outline: none; }
.key-status { font-size: 11px; font-family: var(--font-mono); font-weight: normal; }
.key-status.set { color: var(--status-success); }
.key-status.unset { color: var(--status-error); }

/* ── Download Toast ── */
#sq-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #1a1a2e; border: 1px solid #6c3fff; border-radius: 10px;
  padding: 12px 18px; display: flex; align-items: center; gap: 14px;
  color: #fff; font-size: 14px; box-shadow: 0 4px 20px rgba(108,63,255,0.4);
  animation: slideUp 0.3s ease;
}
#sq-toast a { color: #a78bfa; font-weight: 600; text-decoration: none; }
#sq-toast button { background: none; border: none; color: #888; cursor: pointer; font-size: 16px; }

/* ── Download Center ── */
#downloadCenter { transition: transform 0.2s ease; }
.dl-row:hover { background: #12121a; }
.dl-row input[type="checkbox"] { width: 16px; height: 16px; }
#dl-fab { transition: transform 0.2s ease, opacity 0.2s ease; }
#dl-fab:hover { transform: scale(1.1); }
@keyframes slideUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
.sq-asset-row {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid #1e1e2e;
}
.sq-asset-prompt { flex: 1; font-size: 12px; color: #aaa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes slideUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }

/* ── Credit Panel ── */
.credits { cursor:pointer; }

/* ── Prompt Library ── */
.plib-row { display:flex; align-items:center; gap:8px; padding:6px 8px; cursor:pointer; border-radius:6px; margin-bottom:2px; font-size:13px; color:#c4c4cc; }
.plib-row:hover { background:#16161e; }
.plib-txt { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.plib-star { cursor:pointer; color:#888; font-size:14px; flex-shrink:0; }
.plib-star:hover { color:#f0c040; }
.seeds-more { margin-top:8px; }
.seed-more { background:transparent; border:1px solid #333; color:#888; font-size:12px; padding:4px 12px; border-radius:16px; cursor:pointer; }
.seed-more:hover { border-color:#6c3fff; color:#a78bfa; }