/* Studio: builder rail on the left, canvas on the right. */
.studio-shell{margin:22px 0 70px}
.st-mast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:34px 36px;border:1px solid var(--border);border-radius:var(--arena-radius,18px);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel) 60%)}
.st-mast h1{margin:8px 0 10px;font-size:clamp(30px,4vw,52px);letter-spacing:-1.8px;line-height:1.02;max-width:20ch}
.st-lede{margin:0;max-width:64ch;color:var(--muted);font-size:15px;line-height:1.6}
.st-mast-facts{display:grid;grid-template-columns:repeat(3,auto);gap:22px;margin:0}
.st-mast-facts dt{font:800 10px/1 var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.st-mast-facts dd{margin:6px 0 0;font:700 22px/1 var(--font-heading,inherit);letter-spacing:-.5px}
.st-templates{margin:18px 0 14px}
.st-templates-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.st-template{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:82px;padding:14px;text-align:left;border-radius:14px;border:1px solid var(--border);background:var(--panel)}
.st-template strong{font-size:14px}.st-template small{font-size:11px;color:var(--muted);line-height:1.35}
.st-template.active{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));background:color-mix(in srgb,var(--accent) 12%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.st-template.active strong{color:var(--accent)}
.st-workspace{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}
.st-builder{position:sticky;top:76px;display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:var(--arena-radius,18px);background:var(--panel);max-height:calc(100vh - 90px);overflow:auto;scrollbar-width:thin}
.st-status{margin:0;padding:9px 12px;border-radius:10px;background:var(--soft);font-size:12px;color:var(--muted);border-left:3px solid var(--accent)}
.st-step{margin:0;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.st-step summary{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;font-weight:800;background:transparent;border-radius:12px}
.st-step[open] summary{border-bottom:1px solid var(--border);border-radius:12px 12px 0 0}
.st-step-num{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font:800 11px/1 var(--font-mono,monospace);color:var(--bg);background:var(--accent)}
.st-step>*:not(summary){margin:10px 12px}
.st-field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:var(--muted)}
.st-field input,.st-field select{width:100%;max-width:none;min-height:38px;padding:7px 10px;font-size:13px}
.st-label{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;color:var(--muted)}.st-label small{font-weight:500}
.st-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-seg{display:flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.st-seg button{flex:1;min-height:32px;padding:0 6px;border:0;border-radius:8px;background:transparent;font-size:12px;font-weight:700;color:var(--muted)}
.st-seg button[aria-pressed="true"]{background:var(--panel);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.st-chips{display:flex;flex-wrap:wrap;gap:6px}
.st-chips button{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-size:12px;font-weight:700;color:var(--muted)}
.st-chips button[aria-pressed="true"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.st-chips button[aria-pressed="true"]:first-of-type{box-shadow:inset 0 0 0 1px var(--accent)}
.st-players{display:flex;flex-wrap:wrap;gap:6px;min-height:20px}
.st-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ink);font-size:12px}
.st-chip small{color:var(--muted);font-weight:500}
.st-chip button{width:22px;height:22px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:14px;line-height:1}
.st-chip button:hover{background:var(--soft);color:var(--ink)}
.st-chip-empty{font-size:11px;font-weight:500;color:var(--muted)}
.st-add{display:grid;grid-template-columns:1fr auto;gap:6px}
.st-run{display:flex;gap:8px}.st-run .primary{flex:1;min-height:42px;font-size:14px}
.st-canvas-col{min-width:0;display:grid;gap:12px}
.st-canvas-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.st-tabs{display:flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.st-tabs button{min-height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:750;color:var(--muted)}
.st-tabs button[aria-selected="true"]{background:var(--panel);color:var(--accent)}
.st-exports{display:flex;flex-wrap:wrap;gap:6px}.st-exports button{font-size:12px;padding:8px 12px}
.st-frame{display:grid;place-items:center;padding:24px;min-height:520px;border:1px solid var(--border);border-radius:var(--arena-radius,18px);background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--bg) 70%);overflow:auto}
.st-frame svg{width:100%;height:auto;max-width:1200px;border-radius:14px;box-shadow:0 30px 80px -30px #000c}
.st-frame[data-size="square"] svg{max-width:720px}.st-frame[data-size="portrait"] svg{max-width:460px}
.studio-empty{margin:0;color:var(--muted);text-align:center;max-width:44ch}
.st-note{margin:0;width:100%;font-size:11px;color:var(--muted);text-align:left;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-note button{font-size:11px;padding:5px 9px}
.st-table .table-wrap{margin:0}
.st-sql{display:grid;gap:8px}
.studio-query{margin:0;max-height:360px;overflow:auto;padding:14px 16px;border-radius:12px;background:#0c1a2e;color:#d9e8ff;font:12px/1.6 var(--font-mono,ui-monospace,Consolas,monospace);white-space:pre-wrap;word-break:break-word}
.card-photo-editor summary{font-size:12px}
.card-photo-grid{display:grid;gap:10px}
.card-photo-slot{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.card-photo-slot h3{margin:0 0 6px;font-size:13px}
.card-photo-preview{display:flex;gap:10px;align-items:center;margin-bottom:6px}.card-photo-preview img{border-radius:8px;object-fit:cover}
.card-photo-slot label{margin:6px 0}.card-photo-slot .note{margin:6px 0 0}
.studio-method{margin-top:26px}
@media(max-width:1100px){.st-workspace{grid-template-columns:1fr}.st-builder{position:static;max-height:none}.st-mast{grid-template-columns:1fr}.st-mast-facts{grid-template-columns:repeat(3,auto);justify-content:start}}
@media(max-width:640px){.st-mast{padding:22px 18px}.st-templates-row{grid-auto-columns:minmax(150px,1fr)}.st-frame{padding:12px;min-height:320px}.st-grid2{grid-template-columns:1fr}.st-canvas-bar{align-items:flex-start}}