.studio-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 64px)}
.studio-nav{position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto;border-right:1px solid var(--border);padding:18px;background:var(--surface)}
.studio-nav h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:18px 10px 8px}.studio-nav a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}.studio-nav a:hover,.studio-nav a[aria-current=page]{background:var(--surface-2);color:var(--primary)}
.studio-main{min-width:0;padding:28px}.studio-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}.studio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.studio-card{grid-column:span 4;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}.studio-card.wide{grid-column:span 8}.studio-card.full{grid-column:1/-1}.studio-card h2,.studio-card h3{margin-top:0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.canvas{min-height:520px;border:1px solid var(--border);border-radius:16px;background:radial-gradient(circle at 1px 1px,var(--border) 1px,transparent 0);background-size:24px 24px;position:relative;overflow:auto;padding:22px}.palette{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:16px}.node{display:inline-flex;flex-direction:column;gap:4px;min-width:150px;margin:8px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}.node.selected{outline:2px solid var(--primary)}.node small{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid label{display:grid;gap:6px;font-size:.9rem}.form-grid input,.form-grid textarea,.form-grid select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface);color:var(--text)}
.status-row{display:flex;gap:8px;flex-wrap:wrap}.studio-badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:var(--surface-2);font-size:.78rem}.studio-badge.ok{background:color-mix(in srgb,#22c55e 18%,var(--surface));color:#15803d}.studio-badge.warn{background:color-mix(in srgb,#f59e0b 18%,var(--surface));color:#b45309}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor{width:100%;min-height:360px;background:#1e1f22;color:#d4d4d4;border:0;border-radius:14px;padding:16px;font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:4;resize:vertical}.preview{min-height:360px;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface);overflow:auto}.timeline{display:grid;gap:12px}.timeline-item{border-left:3px solid var(--primary);padding:8px 12px;background:var(--surface-2);border-radius:0 12px 12px 0}
.metric{font-size:2rem;font-weight:750}.muted{color:var(--muted)}
@media(max-width:980px){.studio-shell{grid-template-columns:1fr}.studio-nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border);display:flex;gap:6px;overflow:auto}.studio-nav h2{display:none}.studio-nav a{white-space:nowrap}.workspace,.split{grid-template-columns:1fr}.studio-card,.studio-card.wide{grid-column:1/-1}}
@media(max-width:640px){.studio-main{padding:18px}.form-grid{grid-template-columns:1fr}.canvas{min-height:420px}}