/* Studio chrome (the pieces themselves are styled by pieces.css) */
:root{--acc:#bd3e3e;--ink:#111;--line:#e3e1dc;--bg:#eceae5;--mute:#6b6b66}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{margin:0;font:15px/1.45 'Space Grotesk',sans-serif;color:var(--ink);background:var(--bg)}
[hidden]{display:none!important}
.b{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:700 .95rem 'Space Grotesk',sans-serif;cursor:pointer;white-space:nowrap}
.b.red{background:var(--acc);border-color:var(--acc);color:#fff}.b.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.b.danger{color:#991b1b;background:#fff1f1;border-color:#fecaca}.b:disabled{opacity:.6}
.f{display:grid;gap:5px;margin-bottom:11px;font-weight:700;font-size:.88rem}
.f span{color:var(--mute)}
.f input,.f select,.f textarea,.top select{width:100%;min-height:40px;padding:8px 10px;border:1.5px solid #cfcdc6;border-radius:9px;font:inherit;font-weight:500;background:#fff}
.f textarea{resize:vertical;font-size:.85rem;line-height:1.4}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(189,62,62,.15)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:11px}
.hint{font-size:.82rem;color:var(--mute);margin:4px 0 10px}
/* gate */
.gate{min-height:100dvh;display:grid;place-items:center;padding:20px;background:#111 url(assets/shop-2.jpg) center/cover;position:relative}
.gate::before{content:"";position:absolute;inset:0;background:rgba(17,17,17,.72)}
.gate form{position:relative;width:min(100%,420px);background:#f8f7f3;border-radius:18px;padding:32px 28px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.gate .wm{margin-bottom:16px}
.gate h1{font:400 1.6rem 'Archivo Black',sans-serif;margin:0 0 8px}
.gate p{color:var(--mute);margin:0 0 18px;line-height:1.5}
.gate .err{color:#991b1b;font-weight:700;margin:-6px 0 12px}
.gate button{width:100%;min-height:46px}
/* app */
#app{height:100dvh;display:grid;grid-template-rows:auto 1fr}
.top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#111;color:#fff;min-width:0}
.top .sp{flex:1}.top select{max-width:320px;min-width:0}
.main{display:grid;grid-template-columns:380px 1fr;min-height:0}
.panel{background:#fff;border-right:1px solid var(--line);overflow:auto;padding:16px 18px 40px}
.panel h2{font:400 .95rem 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--acc);margin:14px 0 10px}
.panel h2:first-child{margin-top:2px}
.stage-wrap{position:relative;display:grid;place-items:center;overflow:auto;padding:20px}
#stage{transform-origin:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);flex:none}
.dim{position:absolute;top:10px;right:14px;font-size:.8rem;font-weight:700;color:var(--mute);background:rgba(255,255,255,.85);padding:4px 10px;border-radius:999px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%)}.toast.bad{background:#991b1b}
@media (max-width:900px){.main{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-width:0}.panel{border-right:0;border-bottom:1px solid var(--line);max-height:46vh}.top{gap:6px;padding:8px 10px}.top .wm.sm .wm-a{font-size:.2in}.top .wm.sm .wm-b{display:none}.top .sp{display:none}.top select{flex:1;max-width:none;min-height:36px;font-size:.85rem}.top .b{min-height:36px;padding:0 10px;font-size:.85rem}.row3{grid-template-columns:1fr 1fr 1fr}}