/* Studio (wave6924): plain, dark, on brand. Outfit comes from /styles/fonts.css. */
:root{--night:#0d0a1f;--card:#17122e;--line:rgba(255,255,255,.22);--violet:#7c3aed;--text:#fff;--muted:#b9b4cf;--bad:#ff8a8a}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night)}
body{font-family:Outfit,system-ui,-apple-system,sans-serif;background:var(--night);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
.screen{min-height:100vh}
.center{display:flex;align-items:center;justify-content:center;padding:24px}
.muted{color:var(--muted)}.small{font-size:14px}.grow{flex:1}
.logo{height:34px;display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px;width:min(420px,100%)}
.card.wide{width:min(760px,100%);margin:40px auto}
.card .logo{margin-bottom:22px}
h1{font-size:34px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
label{display:block;font-size:14px;font-weight:600;margin:18px 0 6px}
input{width:100%;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px}
input:focus{outline:2px solid var(--violet);outline-offset:1px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border:0;border-radius:14px;background:var(--violet);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;width:100%;margin-top:22px}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--line);width:auto}
.btn.small{height:38px;margin:0;font-size:14px;padding:0 16px}
.error{color:var(--bad);margin-top:14px;font-size:15px}
.bar{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--line)}
.bar .logo{height:30px}
.pill{border:1px solid var(--line);border-radius:99px;padding:5px 14px;font-weight:600;font-size:14px}
@media(max-width:600px){.bar{padding:12px 16px}.card{padding:24px}}

/* the tool (wave6926) */
main{display:block}
.tool{display:grid;grid-template-columns:380px 1fr;gap:24px;padding:24px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.panel h2{font-size:15px;font-weight:700;margin:20px 0 10px}.panel h2:first-child{margin-top:0}
.tiles{display:grid;gap:8px}
.tile,.opt{display:block;text-align:left;font:inherit;color:#fff;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.tile b{display:block;font-size:16px}.tile span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.tile.on,.opt.on{border-color:#fff;background:rgba(124,58,237,.35)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{text-align:center;padding:10px 6px;font-weight:600;font-size:14px}.opt small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.subj{margin-bottom:10px}.subj label{margin:0 0 6px}
.picked{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05)}
.picked img{width:38px;height:52px;object-fit:contain;border-radius:6px;background:rgba(0,0,0,.3)}.picked .pname{flex:1;font-weight:600;font-size:15px;min-width:0}
.results{list-style:none;margin-top:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-height:340px;overflow-y:auto}
.results button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.1);padding:8px 10px;cursor:pointer}
.results button:hover{background:rgba(255,255,255,.1)}
.results img{width:34px;height:47px;object-fit:contain;flex:none;border-radius:5px;background:rgba(0,0,0,.3)}
.results b{display:block;font-size:15px}.results small{display:block;font-size:13px;color:var(--muted)}
textarea{width:100%;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;padding:12px;resize:vertical}
.row{display:flex;align-items:center;gap:12px;margin-top:10px}
.stage{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.canvaswrap{width:100%;display:flex;align-items:center;justify-content:center;min-height:300px}
#out{max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:12px;border:1px solid var(--line);display:none}
.hint{color:var(--muted);text-align:center;padding:40px;max-width:420px}
@media(max-width:900px){.tool{grid-template-columns:1fr}.panel{position:static;max-height:none}}