/* THE BUILDER — studio tokens, one screen, two columns. The preview is the hero. */
:root{--bg:#0e0e11;--card:#1b1b20;--card2:#232329;--line:#2c2c33;--ink:#f3efe6;--muted:#a8a49b;--faint:#8a877f;--sun:#ffd731;--onsun:#141310;--ok:#5cd08f;--bad:#ff5c5c;--r:14px;--r-lg:20px;--serif:'Instrument Serif',Georgia,serif;--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:var(--sun)}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}textarea,input{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#2c2c33;border-radius:10px;border:2px solid var(--bg)}
.hidden{display:none!important}
.k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--card2);color:var(--muted);font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.chip.on{background:var(--sun);color:var(--onsun)}.chip.ghost{background:transparent;border-color:var(--line)}.chip:hover{border-color:#3a3a42}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--card2);color:var(--ink);font-weight:600;font-size:13px;border:1px solid var(--line)}
.btn.primary{background:var(--sun);color:var(--onsun);border-color:var(--sun)}.btn.primary:hover{filter:brightness(1.05)}.btn:disabled{opacity:.45;cursor:default}
.btn.sm{padding:6px 11px;font-size:12px}.btn.icon{width:34px;height:34px;padding:0;border-radius:10px}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--card2);color:var(--muted);font-weight:600}
.pill.ok{background:rgba(92,208,143,.14);color:var(--ok)}.pill.bad{background:rgba(255,92,92,.14);color:var(--bad)}.pill.sun{background:rgba(255,215,49,.16);color:var(--sun)}

/* ── home ── */
.home{height:100%;overflow:auto;padding:36px 32px 60px}
.home .wrap{max-width:1080px;margin:0 auto}
.hero{padding:26px 0 18px}.hero h1{margin:0;font:400 44px/1.05 var(--serif);letter-spacing:.005em}.hero p{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:600px}
.composer-big{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 12px}
.composer-big textarea{width:100%;min-height:96px;resize:vertical;background:transparent;border:0;outline:0;font-size:16px;line-height:1.5;color:var(--ink)}
.composer-big textarea::placeholder{color:var(--faint)}
.composer-big .row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}.composer-big .row .grow{flex:1}
.examples{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.examples .chip{cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;cursor:pointer;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:#3a3a42;transform:translateY(-1px)}.pcard h3{margin:0;font:400 22px/1.15 var(--serif)}.pcard .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pcard .del{opacity:0;position:absolute;top:10px;right:10px}.pcard{position:relative}.pcard:hover .del{opacity:1}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin-top:34px}.sec h2{margin:0;font:400 24px var(--serif)}
.empty{color:var(--faint);padding:24px 0}

/* ── workspace ── */
.ws{display:grid;grid-template-columns:minmax(340px,36%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%;position:relative}
.left,.right{min-height:0}
.left{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:var(--bg)}
.lhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);min-height:54px}
.lhead .name{font:400 20px/1.1 var(--serif);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread{flex:1;overflow:auto;overflow-x:hidden;padding:16px 14px 8px;display:flex;flex-direction:column;gap:14px}
.you{align-self:flex-end;max-width:92%;background:var(--card2);border-radius:16px 16px 4px 16px;padding:10px 14px;white-space:pre-wrap;word-break:break-word}
.said{max-width:100%;padding:0 2px}.said .txt{white-space:pre-wrap;word-break:break-word;line-height:1.55}.said .txt b{color:var(--ink)}.said .txt code{font-family:var(--mono);font-size:12px;background:var(--card2);padding:1px 5px;border-radius:5px}
.said .who{display:flex;align-items:center;gap:8px;margin-bottom:6px}.said .who i{width:8px;height:8px;border-radius:50%;background:var(--sun);display:inline-block}
.said .who i.live{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.acts{margin:8px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.acts summary{list-style:none;cursor:pointer;padding:8px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.acts summary::-webkit-details-marker{display:none}
.acts summary .n{color:var(--ink);font-weight:600}
.act{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--mono)}
.act .p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.act .s{color:var(--faint)}.act.bad .s{color:var(--bad)}
.act i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}.act.run i{background:var(--sun);animation:pulse 1s infinite}.act.ok i{background:var(--ok)}.act.bad i{background:var(--bad)}
.verdict{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cost{margin-top:8px;font-size:11px;color:var(--faint);display:flex;gap:10px;flex-wrap:wrap}
.plancard{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.plancard h4{margin:0 0 4px;font:400 20px var(--serif)}.plancard p{margin:0 0 10px;color:var(--muted)}.plancard ul{margin:0;padding-left:18px;color:var(--ink)}.plancard li{margin:3px 0}.plancard .row{display:flex;gap:8px;margin-top:12px}
.composer{border-top:1px solid var(--line);padding:10px 12px 12px;background:var(--bg)}
.composer .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px 8px}
.composer textarea{width:100%;min-height:52px;max-height:200px;resize:none;background:transparent;border:0;outline:0;font-size:14px;line-height:1.5}
.composer .row{display:flex;align-items:center;gap:6px;margin-top:4px}.composer .row .grow{flex:1}
.modes{display:flex;gap:4px;background:var(--card2);padding:3px;border-radius:999px}.modes .chip{padding:5px 10px;background:transparent}.modes .chip.on{background:var(--sun);color:var(--onsun)}
.send{width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--onsun);display:inline-flex;align-items:center;justify-content:center;font-weight:700}.send.stop{background:var(--bad);color:#fff}
.hint{font-size:11px;color:var(--faint);margin-top:6px;padding:0 4px}

.right{display:flex;flex-direction:column;min-width:0;background:#0a0a0c}
.rbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg);min-height:54px;flex-wrap:wrap}
.seg{display:flex;background:var(--card2);border-radius:999px;padding:3px}.seg .chip{background:transparent;padding:5px 12px}.seg .chip.on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.rbar .sp{flex:1}
.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(1200px 600px at 50% 110%,#17171c 0,#0a0a0c 60%)}
.frame{position:relative;background:#000;border-radius:44px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px #2a2a30,0 0 0 8px #141418;overflow:hidden;transform-origin:center center}
.frame.iphone{width:390px;height:844px}.frame.android{width:412px;height:915px;border-radius:30px}.frame.web{width:1180px;height:760px;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px #2a2a30}
.frame iframe{width:100%;height:100%;border:0;background:#0e0e11;display:block}
.frame .notch{display:none}
.frame.android .notch{width:14px;height:14px;border-radius:50%;top:12px}.frame.web .notch{display:none}
.frame .bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:130px;height:5px;background:rgba(255,255,255,.7);border-radius:5px;pointer-events:none}.frame.web .bar{display:none}
.stat{position:absolute;left:14px;bottom:12px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.stat i{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block}.stat i.on{background:var(--ok)}.stat i.boot{background:var(--sun);animation:pulse 1s infinite}.stat i.bad{background:var(--bad)}
.errcard{position:absolute;right:14px;bottom:12px;max-width:440px;background:var(--card);border:1px solid rgba(255,92,92,.5);border-radius:var(--r-lg);padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.errcard .k{color:var(--bad)}.errcard pre{margin:6px 0 10px;font-size:11px;white-space:pre-wrap;word-break:break-word;color:var(--muted);max-height:120px;overflow:auto;font-family:var(--mono)}.errcard .row{display:flex;gap:8px}
.panel{flex:1;min-height:0;display:flex;background:var(--bg)}
.tree{width:260px;border-right:1px solid var(--line);overflow:auto;padding:10px 0}.tree div{padding:5px 14px;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree div:hover{color:var(--ink)}.tree div.on{color:var(--ink);background:var(--card)}.tree div.hot{color:var(--sun)}
.viewer{flex:1;overflow:auto;padding:14px 18px}.viewer pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre;color:var(--ink);tab-size:2}
.viewer .path{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:10px}
.logs{flex:1;overflow:auto;padding:14px 18px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;color:var(--muted);line-height:1.5}.logs .err{color:var(--bad)}
.phone-tab{flex:1;display:flex;align-items:center;justify-content:center;padding:30px}
.qr{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;max-width:420px;text-align:center}
.qr img{width:240px;height:240px;border-radius:14px;background:#fff;padding:8px}.qr h3{margin:14px 0 4px;font:400 24px var(--serif)}.qr p{color:var(--muted);margin:0 0 10px}.qr code{font-family:var(--mono);font-size:12px;background:var(--card2);padding:4px 8px;border-radius:8px;word-break:break-all}
.drawer{position:absolute;top:0;right:0;bottom:0;width:340px;background:var(--card);border-left:1px solid var(--line);z-index:5;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.drawer .dh h3{margin:0;font:400 20px var(--serif)}
.drawer .list{overflow:auto;flex:1}.rev{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}.rev .m{flex:1;min-width:0}.rev .m b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rev .m span{font-size:11px;color:var(--faint)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#141310;padding:10px 16px;border-radius:999px;font-weight:600;font-size:13px;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.4)}.toast.bad{background:var(--bad);color:#fff}
.menu{position:absolute;top:48px;right:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px;z-index:6;min-width:220px;box-shadow:0 20px 50px rgba(0,0,0,.5)}.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-size:13px}.menu button:hover{background:var(--card2)}.menu small{display:block;color:var(--faint);font-size:11px}
@media (max-width:900px){.ws{grid-template-columns:1fr}.right{display:none}}

/* ── design step ── */
.design{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.design h4{margin:4px 0 2px;font:400 22px var(--serif)}.design .sub{margin:0 0 12px;color:var(--muted);font-size:13px}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--bg);transition:border-color .15s,transform .15s}.dcard:hover{border-color:#4a4a52;transform:translateY(-1px)}.dcard.on{border-color:var(--sun);box-shadow:0 0 0 1px var(--sun)}
.dprev{height:150px;overflow:hidden;position:relative;pointer-events:none}.dprev iframe{width:390px;height:600px;border:0;transform:scale(.385);transform-origin:top left;position:absolute;left:0;top:0;pointer-events:none}
.dsw{display:flex;height:100%}.dsw i{flex:1}
.dname{display:flex;justify-content:space-between;align-items:baseline;padding:8px 10px 0}.dname b{font-weight:600;font-size:13px}.dname span{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.dess{padding:2px 10px 10px;font-size:11px;color:var(--muted);line-height:1.4}
.swatches{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}.sw{width:24px;height:24px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.15)}.sw.on{border-color:var(--ink)}
.dstatus{font-size:12px;color:var(--muted);margin-top:8px;min-height:16px}
.similar{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.simlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.simapp{display:flex;gap:8px;align-items:center;padding:6px;border-radius:10px;border:1px solid var(--line);cursor:pointer;background:var(--bg)}.simapp.on{border-color:var(--sun)}.simapp img,.simapp i{width:34px;height:34px;border-radius:9px;background:var(--card2);flex:none;display:block}
.simapp .m{min-width:0}.simapp b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.simapp span{font-size:11px;color:var(--faint)}
.design .row{display:flex;gap:8px;margin-top:12px}.muted{color:var(--muted)}

.simbox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;overflow:auto}
.simframe{width:400px;height:840px;max-height:calc(100vh - 170px);border:0;border-radius:32px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.simframe.fleet{width:560px;border-radius:18px}   /* the scrcpy embed carries its own toolbar on the right */