/* app.css — components: generate, replicate, brain, products */
i[data-ico]{display:inline-flex;width:16px;height:16px;flex:none;vertical-align:middle}i[data-ico] svg{width:100%;height:100%}
.gen b svg,.chip svg{width:14px;height:14px;flex:none}
.hero{border-radius:22px;padding:24px 26px;background:linear-gradient(120deg,var(--accent-soft),transparent 55%),var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;margin-bottom:18px;box-shadow:inset 0 1px 0 var(--spec)}
.hero::after{content:"";position:absolute;right:-80px;top:-100px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 65%);animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-40px,30px)}}
.hero .row{position:relative;z-index:1}
.modeSw{display:inline-flex;background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}
.modeSw button{padding:9px 16px;border-radius:10px;font-weight:700;font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center;transition:all .15s}
.modeSw button.on{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);box-shadow:0 6px 18px var(--glow)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:14px}
.step{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step .num{width:26px;height:26px;border-radius:9px;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);display:grid;place-items:center;font:700 12px var(--ui);flex:none;box-shadow:0 4px 10px var(--glow)}
.step h3{font-size:15px}.step .hint{margin-left:auto;text-align:right}
.srcTabs{display:flex;gap:6px;margin-bottom:10px}
.srcTabs button{flex:1;padding:9px 6px;border-radius:11px;border:1px solid var(--line);background:var(--inset);font-weight:600;font-size:12px;color:var(--ink-2);transition:all .15s}
.srcTabs button.on{border-color:var(--accent-line);color:var(--ink);background:var(--accent-soft)}
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;background:var(--inset);transition:.15s;cursor:pointer}
.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.drop .ico{width:42px;height:42px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex:none}.drop .ico svg{width:18px;height:18px}
.fnsum{border:1px solid var(--ice-line);background:var(--ice-soft);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:9px;animation:fade .35s ease}
.fnsum h4{margin:0;font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.fnsum dl{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:12.5px;margin:0}.fnsum dt{color:var(--ink-3)}.fnsum dd{margin:0}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:12px}.parts div{display:flex;gap:6px;align-items:baseline}.parts b{color:var(--ink)}.parts span{color:var(--ink-2)}
.steps{display:flex;flex-direction:column;gap:4px;font-size:12.5px;counter-reset:st}.steps div{display:flex;gap:8px;color:var(--ink-2)}.steps div::before{counter-increment:st;content:counter(st);width:18px;height:18px;border-radius:50%;background:var(--inset);border:1px solid var(--line);color:var(--ink);font:700 10px var(--ui);display:grid;place-items:center;flex:none}
.usecases{display:flex;flex-wrap:wrap;gap:6px}.usecases button{padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--inset);font-size:12px;font-weight:600;color:var(--ink-2)}.usecases button.on{border-color:var(--ice-line);color:var(--ink);background:var(--ice-soft)}
.think{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2)}
.think .r{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2)}.think .r.done,.think .r.run{color:var(--ink)}
.ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none;position:relative}
.run .ring{border-color:var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite}
.done .ring{border-color:var(--good);background:var(--good-soft)}.done .ring::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font:700 10px var(--ui);color:var(--good)}
@keyframes spin{to{transform:rotate(360deg)}}
.scan{height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:scan 1.2s linear infinite}
@keyframes scan{from{background-position:200% 0}to{background-position:-200% 0}}
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:16px}
.stepper div{padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center;transition:.2s}
.stepper div b{color:var(--ink);font-size:12.5px}.stepper div.done{border-color:var(--mint)}.stepper div.done .dot{background:var(--mint)}.stepper .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}.stepper div.now{border-color:var(--accent-line);background:var(--accent-soft)}.stepper div.now .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.model{border:1px solid var(--line);background:var(--panel-2);border-radius:13px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:5px;position:relative;transition:all .15s}
.model:hover{border-color:var(--line-2)}.model.on{border-color:var(--ice-line);background:var(--ice-soft)}
.model b{font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.model small{font-size:11px;color:var(--ink-3);line-height:1.35}
.model .fit{display:flex;gap:2px;align-items:center}.model .fit i{width:9px;height:4px;border-radius:2px;background:var(--line-2)}.model .fit i.on{background:var(--mint)}
.model .st{font:500 10.5px var(--mono)}.model .st.has{color:var(--mint)}.model .st.comp{color:var(--violet)}
.tog{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2)}
.tog b{font-size:13px;display:block}.tog small{font-size:11.5px;color:var(--ink-3)}.tog .sub{margin-left:auto}.tog .toggle{margin-left:auto}
.dur{display:flex;gap:6px}.dur button{flex:1;padding:8px 8px;border-radius:10px;border:1px solid var(--line);background:var(--inset);font-weight:600;font-size:12.5px;color:var(--ink-2);transition:all .15s;white-space:nowrap}.dur button.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)}
.imgslots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.imgslot{aspect-ratio:1;border:1.5px dashed var(--line-2);border-radius:12px;display:grid;place-items:center;text-align:center;font-size:11px;color:var(--ink-3);padding:6px;cursor:pointer;transition:.15s}
.imgslot.filled{border-style:solid;background:linear-gradient(135deg,var(--raise),var(--bg-2));color:var(--ink)}
.out-card{background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;box-shadow:inset 0 1px 0 var(--spec),var(--shadow);position:relative}
.out-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.editor{width:100%;min-height:300px;background:var(--editor);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:12.5px/1.75 var(--mono);color:var(--ink);resize:vertical}
.editor:focus{border-color:var(--accent);outline:0}.editor.streaming{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.guard{display:flex;flex-direction:column;gap:5px;font-size:12.5px}.guard div{display:flex;gap:8px;align-items:center}.guard .ok{color:var(--good)}.guard .bad{color:var(--crit)}
.out-acts{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.ctx{display:flex;flex-direction:column;gap:8px}.ctx .card{cursor:pointer;transition:.15s}.ctx .card:hover{border-color:var(--accent-line);transform:translateX(2px)}
.timeline{display:flex;gap:3px;height:28px;border-radius:9px;overflow:hidden;margin:10px 0 4px}.timeline div{display:flex;align-items:center;justify-content:center;font:600 10px var(--mono);color:#0b0b0b;min-width:0;overflow:hidden;white-space:nowrap}
.gen{border:1px solid var(--ice-line);border-radius:16px;padding:14px;background:var(--ice-soft);display:flex;flex-direction:column;gap:10px}
.queue{display:flex;flex-direction:column;gap:6px}
.qitem{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:12.5px;animation:fade .3s}
.qitem .thumb.v{width:40px;height:70px}.qitem b{display:block}.qitem small{color:var(--ink-3)}
.blocked{border:1px dashed var(--crit);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;opacity:.85}
.matrix{display:grid;gap:4px;font-size:11.5px}
.matrix .hd{padding:6px 8px;color:var(--ink-3);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-align:center}
.matrix .rl{padding:8px;color:var(--ink-2);display:flex;align-items:center;font-weight:600}
.matrix .cell{border-radius:9px;padding:8px;display:flex;flex-direction:column;gap:2px;min-height:50px;justify-content:center;border:1px solid var(--line);background:var(--panel-2);text-align:left;transition:.15s}
.matrix .cell:hover{border-color:var(--line-2)}.matrix .cell b{font:600 12px var(--mono)}.matrix .cell small{font-size:10.5px;color:var(--ink-3)}
.matrix .cell.has{border-color:var(--mint);background:var(--mint-soft)}.matrix .cell.has b{color:var(--mint)}
.matrix .cell.comp{border-style:dashed;border-color:var(--violet)}.matrix .cell.comp b{color:var(--violet)}
.matrix .cell.on{outline:2px solid var(--accent)}
.pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pipe .no{font-size:30px;line-height:1;color:var(--accent);letter-spacing:-.03em;font-weight:700}.pipe ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:5px}.pipe li b{color:var(--ink)}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:left;transition:.15s}.pcard:hover{transform:translateY(-2px);border-color:var(--line-2)}.pcard.on{border-color:var(--accent-line)}.pcard .thumb.sq{width:100%;height:110px}
.keyrow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.keyrow .lg{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--inset);border:1px solid var(--line)}.keyrow b{font-size:13.5px;display:block}.keyrow small{font-size:11.5px;color:var(--ink-3);line-height:1.4}.keyrow input{width:200px}
.keep{display:flex;flex-wrap:wrap;gap:6px}.keep button{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--inset);font-size:12px;font-weight:600;color:var(--ink-2)}.keep button.on{border-color:var(--accent-line);color:var(--ink);background:var(--accent-soft)}
.brainList{display:flex;flex-direction:column;gap:8px}.bitem{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);text-align:left}.bitem.on{border-color:var(--accent-line);background:var(--accent-soft)}.bitem b{font-size:13px;display:block}.bitem small{font-size:11.5px;color:var(--ink-3)}
@media (max-width:1100px){.two,.pipe,.flow{grid-template-columns:1fr}.plist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.models,.plist{grid-template-columns:1fr}.imgslots{grid-template-columns:repeat(2,1fr)}.stepper{grid-template-columns:1fr}}
.slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--inset);border:1px solid var(--line);border-radius:999px;outline:0}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 2px 8px var(--glow);cursor:pointer}
.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:pointer}
.ticks{display:flex;justify-content:space-between;font:500 10.5px var(--mono);color:var(--ink-3)}
.dval{font:600 14px var(--mono);color:var(--accent)}
.mtabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}.mtab{flex:none;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);text-align:left;min-width:150px;transition:.15s}.mtab:hover{border-color:var(--line-2)}.mtab.on{border-color:var(--accent-line);background:var(--accent-soft)}.mtab b{font-size:12.5px;display:block}.mtab small{font-size:10.5px;color:var(--ink-3)}
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,340px);gap:12px;overflow-x:auto;padding:4px 0 10px;margin-top:12px}.col{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}.col.whole{border-color:var(--accent-line)}.col .ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.col h4{margin:0;font-size:13.5px}.col .editor{min-height:200px;font-size:11.5px;resize:vertical}.col.add{border-style:dashed;align-items:center;justify-content:center;text-align:center;min-height:200px}
/* ============ additions for the API-backed rewrite ============ */
.err{border:1px solid var(--crit);background:var(--crit-soft);color:var(--ink);border-radius:var(--rs);padding:10px 12px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start}
.err b{color:var(--crit)}.err .hint{display:block;margin-top:2px}.err .btn{margin-left:auto}.err svg{width:16px;height:16px;flex:none;color:var(--crit);margin-top:1px}
.warnbox{border:1px solid var(--warn);background:var(--warn-soft);color:var(--ink);border-radius:var(--rs);padding:10px 12px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start}
.warnbox b{color:var(--warn)}.warnbox .hint{display:block;margin-top:2px}.warnbox .btn{margin-left:auto}.warnbox svg{width:16px;height:16px;flex:none;color:var(--warn);margin-top:1px}
.gerr{margin:10px 24px 0}
.overlay{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px}
.overlay .panel{width:min(520px,100%)}
.overlay .panel.wide{width:min(760px,100%);max-height:90vh;overflow:auto}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.jobcard video,.jobcard img{width:100%;border-radius:var(--rs);margin-top:8px;background:#000}
.imgslot input{display:none}.imgslot.uploading{opacity:.6}

/* ============ design pass · motion, states, calm errors, mobile ============ */
:root{--ease:cubic-bezier(.32,.72,0,1)}
.skip{position:absolute;left:12px;top:-48px;z-index:200;background:var(--raise);color:var(--ink);padding:8px 12px;border-radius:var(--rs);border:1px solid var(--line-2);font-weight:600;text-decoration:none}.skip:focus{top:12px}
button,[role=button],.nav a,.imgslot,.drop,label[for]{cursor:pointer}
.btn{transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),opacity .18s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 28px var(--glow)}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:inset 0 1px 0 var(--spec)}
.iconbtn{transition:background .18s var(--ease),transform .18s var(--ease)}.iconbtn:hover{background:var(--raise)}.iconbtn:active{transform:scale(.94)}
.nav a{transition:background .15s var(--ease),color .15s var(--ease)}
.model,.pcard,.angle,.mtab,.srcTabs button,.dur button,.keep button,.usecases button,.bsw button{transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.model:hover,.pcard:hover,.angle:hover{transform:translateY(-1px);border-color:var(--line-2)}
.model:active,.pcard:active,.angle:active{transform:scale(.99)}
.err{border:1px solid transparent;border-left:3px solid var(--crit);background:var(--crit-soft);flex-wrap:wrap;row-gap:8px;line-height:1.45}
.err>div{min-width:0;flex:1 1 220px}.err .btn{margin-left:auto;flex:none}
.warnbox{border:1px solid transparent;border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:var(--rs);padding:10px 12px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.warnbox b{color:var(--warn)}
.mfilter{margin-bottom:4px}
.toast{transition:opacity .25s var(--ease),transform .25s var(--ease)}
@media (max-width:1100px){.two,.pipe,.flow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
 .rail{gap:10px;padding:10px 12px}
 .shell{grid-template-columns:minmax(0,1fr)}.rail{min-width:0;max-width:100%}
 .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;min-width:0;gap:4px}.nav::-webkit-scrollbar{display:none}.nav a{flex:none;white-space:nowrap;padding:8px 11px}
 .rail .foot{width:100%;flex-wrap:wrap;gap:8px}
}
@media (max-width:760px){
 .models,.plist,.cols{grid-template-columns:minmax(0,1fr)}
 .content{padding:14px 14px 56px;gap:14px}.panel{padding:14px}.two{gap:14px}
 h1{font-size:25px}h2{font-size:19px}
 .topbar{flex-wrap:wrap;gap:8px;height:auto;padding:10px 14px}
 .tog{flex-wrap:wrap}.tog .dur,.tog .dur.sub{max-width:100%!important;width:100%;flex-wrap:wrap}.dur button{flex:1 1 auto}
 .stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
 #genOut,#repOut{position:static!important}
 .scroll-x{max-width:100%;margin:0 -14px;padding:0 14px}.tbl{min-width:560px}
 .out-h,.out-acts{flex-wrap:wrap}
 .keyrow{grid-template-columns:36px 1fr}.keyrow>.row{grid-column:1/-1}
 .hero{padding:16px}
}
@media (prefers-reduced-motion:reduce){.btn:hover,.model:hover,.pcard:hover,.angle:hover{transform:none}}

/* ── composable inputs (link + video + images), staged until Analyse ── */
.inputs{display:flex;flex-direction:column;gap:10px}
.drop.mini{flex:1;min-width:180px;padding:10px 12px;gap:10px}
.drop.mini .ico{width:34px;height:34px}
.drop.mini.has{border-color:var(--accent-line);background:var(--accent-soft)}
.staged .chip{max-width:100%}
.staged .chip img{width:22px;height:22px;object-fit:cover;border-radius:5px;margin-right:6px;vertical-align:middle}
.staged .chip .x{margin-left:6px;opacity:.6;cursor:pointer}
.staged .chip .x:hover{opacity:1;color:var(--crit)}
.lib summary{cursor:pointer;list-style:none}.lib summary::-webkit-details-marker{display:none}.lib summary::before{content:"▸ ";opacity:.7}.lib[open] summary::before{content:"▾ "}
/* frames extracted from the analysed video */
.frames{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px}
.frames figure{margin:0;flex:0 0 132px;display:flex;flex-direction:column;gap:4px}
.frames img{width:132px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#000}
.frames figcaption{font:500 10.5px var(--mono);color:var(--ink-3);line-height:1.3}
.frames figcaption b{display:block;color:var(--ink-2);font-family:var(--ui);font-size:11px}
/* selectable picks: hooks, styles, angles */
.picks{display:flex;flex-wrap:wrap;gap:6px}
.picks button{border:1px solid var(--line);background:var(--inset);color:var(--ink-2);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:500;text-align:left;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.picks button:hover{border-color:var(--line-2);color:var(--ink)}
.picks button.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)}
.picks button.on::before{content:"✓ ";color:var(--accent)}
/* simplified model cards: name + brain status only */
.models .model.lite{padding:10px 12px;gap:4px;min-height:0}
.models .model.lite b{font-size:13px}
.models .model.lite .st{margin-top:2px}
.writersw{display:inline-flex;gap:4px;margin:0 4px}
.writersw button{padding:6px 10px;font-size:12px}
/* existing-product picker */
.plist.compact{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.pitem{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:var(--rs);background:var(--inset);color:var(--ink);transition:border-color .18s var(--ease),background .18s var(--ease)}
.pitem:hover{border-color:var(--line-2)}
.pitem.on{border-color:var(--accent-line);background:var(--accent-soft)}
.pitem b{font-size:13px}.pitem small{font:500 10.5px var(--mono);color:var(--ink-3)}
/* requirements + variants */
.reqbox{border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px;background:var(--inset)}
textarea.req{width:100%;min-height:72px;resize:vertical;font:13px/1.5 var(--ui);padding:8px 10px}
.countsw button,.vtabs button{padding:6px 10px;font-size:12px}
.vtabs{flex-wrap:wrap}
.writersw{white-space:nowrap}
.tog .writersw{flex:none}
/* brain playbook editor */
.pb{display:grid;gap:8px;margin-top:10px}
.pb textarea{width:100%;min-height:64px;font:12px/1.45 var(--mono);padding:8px 10px;resize:vertical}
.pb .eyebrow{margin:4px 0 0}
.pb details{border:1px solid var(--line);border-radius:var(--rs);padding:8px 10px;background:var(--inset)}
.pb summary{cursor:pointer;font-weight:600;font-size:12.5px}
/* brain: reference videos */
.refcard{border:1px solid var(--line);border-radius:var(--rs);padding:8px 10px;margin:6px 0;background:var(--panel-2)}
.refcard .frames{margin-top:6px}

/* Brain feeds */
.layer{margin-top:16px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--inset)}
.layer h3{font-size:14px;margin:0}
.layer.type{border-color:var(--accent-line)}
.feeds{display:grid;gap:10px}
.feed{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}
.feed.has{border-color:var(--good)}
.feed .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:12px;flex:none}
.feed h4{font-size:15px}
.feed .tname{font:500 12.5px var(--ui);color:var(--ink-3)}
.feed textarea{width:100%;font:12.5px/1.45 var(--mono);margin-bottom:8px;min-height:64px}

/* ── 2026-09-16 · UI cleanup: slim heroes, dropdown brief, one draft button + recommendations, overflow fixes ── */
.hero.slim{padding:12px 18px;margin-bottom:14px}.hero.slim::after{display:none}.hero.slim h2{font-size:20px;margin:0}
.hero.slim .stepper{display:flex;gap:6px;flex-wrap:wrap}.hero.slim .stepper div{padding:6px 10px;font-size:11.5px}
.brief3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.brief3 label{display:flex;flex-direction:column;gap:6px;min-width:0}
select.input{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer;text-overflow:ellipsis}
select.input option{background:var(--raise);color:var(--ink)}
#models .st{font:500 11px var(--mono)}#models .st.has{color:var(--mint)}#models .st.comp{color:var(--violet)}
.reco{margin-top:10px;padding:10px 12px;border:1px solid var(--ice-line);border-radius:var(--rs);background:var(--ice-soft);display:flex;flex-direction:column;gap:4px}
.rline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;cursor:pointer}.rline input{margin-top:3px;accent-color:var(--accent);flex:none}
.persona{border:1px solid var(--accent-line);border-radius:var(--rs);padding:10px 12px;background:var(--accent-soft);margin:6px 0}
.persona details{margin-top:6px}.plist-ul{margin:2px 0 0;padding-left:18px;font-size:12px;color:var(--ink-2);line-height:1.5}
/* the rail's status pills must not spill out of the sidebar (long Supabase hosts) */
.live{min-width:0}.live>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Brain feed cards: grid children default to min-width:auto and grow past the panel when a frames strip is inside */
.layer,.feeds,.feed,.refcard,.refcard .frames,.persona{min-width:0;max-width:100%}
@media (max-width:760px){.brief3{grid-template-columns:minmax(0,1fr)}}
/* reference to replicate (Generate) + language & cast switch */
.refstrip{margin-top:8px;padding:8px 10px;border:1px solid var(--accent-line);border-radius:var(--rs);background:var(--accent-soft);min-width:0}
.refstrip .frames{margin-top:6px}.refstrip .frames figure{flex:0 0 108px}.refstrip .frames img{width:108px;height:68px}
.castsw button{padding:7px 12px}
.fnsum .chip,.pitem small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

.setup{font-size:12.5px;line-height:1.45;margin-bottom:4px}.setup div:first-child{font-weight:600;color:var(--ink)}.setup div{color:var(--ink-2)}

/* ── 2026-09-21 · simplified layout: Brain indicator, prompt plan, empty editor ── */
.panel.has-brain{border-color:var(--mint);box-shadow:inset 0 1px 0 var(--spec),0 0 0 1px var(--mint-soft)}
.brainbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--line);color:var(--ink-3);background:var(--inset);white-space:nowrap}
.brainbadge.on{border-color:var(--mint);color:var(--mint);background:var(--mint-soft)}
select.input.has-brain{border-color:var(--mint)}
.plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.plan label{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--rs);background:var(--inset);min-width:0}
.plan label b{font-size:12.5px}.plan label small{font-size:11px;color:var(--ink-3)}
.plan input[type=number]{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:600 14px var(--mono);color:var(--ink)}
.plan label.on{border-color:var(--accent-line);background:var(--accent-soft)}
.editor::placeholder{color:var(--ink-3);font-family:var(--ui);font-size:13px}
@media (max-width:760px){.plan{grid-template-columns:minmax(0,1fr)}}

/* winners library rows + the concept line above the editor */
.wrow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:4px 0;border-top:1px solid var(--line);min-width:0}
.wrow:first-of-type{border-top:0}.wrow b{font-size:12.5px}.wrow .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.concept{display:flex;gap:8px;align-items:center;margin-bottom:6px;padding:6px 10px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--rs);font-size:12.5px;line-height:1.4}
.concept svg{width:14px;height:14px;flex:none;color:var(--accent)}

.devgrp{padding:8px 0;border-top:1px solid var(--line)}.devgrp:first-child{border-top:0}.devgrp b{font-size:12.5px}
/* morph guard */
.guardbox{margin-top:8px;padding:10px 12px;border-radius:var(--rs);border:1px solid var(--line);background:var(--inset)}
.guardbox.bad{border-color:var(--crit);background:var(--crit-soft)}
.guardbox.good{border-color:var(--good);background:var(--good-soft)}
.guardbox b{font-size:12.5px;display:flex;gap:6px;align-items:center}.guardbox b svg{width:14px;height:14px}
.gline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;margin-top:4px}
.gline>span{width:14px;flex:none;color:var(--good)}.gline.bad>span{color:var(--crit)}
.guardbox details{margin-top:6px}
/* render review: the generated video came out wrong */
.reviewbox{margin-top:8px;padding:10px 12px;border-radius:var(--rs);border:1px dashed var(--line-2);background:var(--panel-2)}
.reviewbox.bad{border-style:solid;border-color:var(--crit);background:var(--crit-soft)}
.reviewbox.warn{border-style:solid;border-color:var(--warn);background:var(--warn-soft)}
.reviewbox.good{border-style:solid;border-color:var(--good);background:var(--good-soft)}
.reviewbox b{font-size:12.5px;display:flex;gap:6px;align-items:center}.reviewbox b svg{width:14px;height:14px}
.reviewbox .mono{font:500 11px var(--mono);color:var(--ink-3);white-space:pre-wrap}
/* admin-only parts (Brain, the admin chip, the Higgsfield status) stay hidden until /api/me says the signed-in person is an admin */
html:not([data-admin="1"]) [data-admin],html:not([data-admin="1"]) [data-go="brain"]{display:none!important}