.studio-root{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:calc(100vh - 57px);box-sizing:border-box;max-width:100%;overflow-x:hidden}.studio-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.studio-title{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--z-fg,#0f172a)}.studio-topbar-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;-webkit-margin-start:auto;margin-inline-start:auto}.studio-status{flex-basis:100%;margin:0;font-size:.78rem;color:var(--z-danger,#dc2626)}.studio-main{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:1rem;gap:1rem;align-items:start;flex:1 1}@media (min-width:1024px){.studio-main{grid-template-columns:230px minmax(0,1fr) 300px}}.studio-pane{border:1px solid var(--z-border,#e2e8f0);border-radius:12px;background:var(--z-surface,#f8fafc);overflow:hidden}.studio-pane-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--z-muted-fg,#64748b)}.studio-pane-toggle{display:none;border:1px solid var(--z-border,#e2e8f0);border-radius:6px;background:var(--z-bg,#fff);color:var(--z-fg,#0f172a);font:inherit;font-size:.75rem;padding:.15rem .5rem;cursor:pointer}.studio-pane-body{padding:.85rem;-webkit-padding-before:0;padding-block-start:0}@media (max-width:1023.98px){.studio-pane-toggle{display:inline-block}.studio-pane-body[data-open=false]{display:none}}.studio-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:.5rem;gap:.5rem}@media (min-width:1024px){.studio-palette{grid-template-columns:1fr}}.studio-palette-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .65rem;border:1px solid var(--z-border,#e2e8f0);border-radius:8px;background:var(--z-bg,#fff);color:var(--z-fg,#0f172a);font:inherit;font-size:.85rem;text-align:start;cursor:-webkit-grab;cursor:grab}.studio-palette-item:hover{border-color:var(--z-primary,#7c3aed);color:var(--z-primary,#7c3aed)}.studio-palette-item:focus-visible{outline:2px solid var(--z-ring,#8b5cf6);outline-offset:2px}.studio-palette-icon{display:inline-flex;flex-shrink:0;color:var(--z-muted-fg,#64748b)}.studio-palette-item:hover .studio-palette-icon{color:inherit}.studio-canvas-wrap{display:flex;flex-direction:column;gap:1rem;min-width:0}.studio-canvas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:.75rem;gap:.75rem;align-content:start;min-height:420px;padding:.75rem;border:1.5px dashed var(--z-border-strong,#cbd5e1);border-radius:12px;background:var(--z-bg,#fff)}.studio-canvas[data-drop-end=true]:after{content:"";grid-column:1/-1;height:3px;border-radius:2px;background:var(--z-primary,#7c3aed)}.studio-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;text-align:center;color:var(--z-muted-fg,#64748b);font-size:.9rem}.studio-empty p{margin:0;max-width:34rem}.studio-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.studio-canvas-item{position:relative;min-width:0;border:1px solid var(--z-border,#e2e8f0);border-radius:10px;background:var(--z-surface,#f8fafc);padding:.75rem;cursor:-webkit-grab;cursor:grab}.studio-canvas-item:focus-visible{outline:2px solid var(--z-ring,#8b5cf6);outline-offset:2px}.studio-canvas-item[data-selected]{border-color:var(--z-primary,#7c3aed);box-shadow:0 0 0 2px var(--z-primary,#7c3aed)}.studio-canvas-item[data-drop-before]:before{content:"";position:absolute;inset-block:4px;inset-inline-start:-7px;width:3px;border-radius:2px;background:var(--z-primary,#7c3aed)}@media (max-width:699.98px){.studio-canvas-item{grid-column:1/-1!important}}.studio-item-body{min-width:0;overflow-x:auto}.studio-item-body svg{max-width:100%;height:auto}.studio-item-toolbar{position:absolute;top:-13px;inset-inline-end:8px;z-index:5;display:flex;align-items:center;gap:2px;padding:2px 4px;border:1px solid var(--z-border,#e2e8f0);border-radius:8px;background:var(--z-bg,#fff);box-shadow:0 2px 8px rgba(0,0,0,.12)}.studio-item-toolbar button{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;border:0;border-radius:5px;background:transparent;color:var(--z-fg,#0f172a);font:inherit;font-size:.8rem;line-height:1;cursor:pointer}.studio-item-toolbar button:hover:not(:disabled){background:var(--z-muted,#f1f5f9);color:var(--z-primary,#7c3aed)}.studio-item-toolbar button:disabled{opacity:.4;cursor:default}.studio-item-toolbar button:focus-visible{outline:2px solid var(--z-ring,#8b5cf6);outline-offset:1px}.studio-item-span{font-size:.68rem;color:var(--z-muted-fg,#64748b);padding-inline:2px;white-space:nowrap}.studio-inspector{display:flex;flex-direction:column;gap:.85rem}.studio-inspector-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.9rem;color:var(--z-fg,#0f172a)}.studio-inspector-hint{margin:0;font-size:.85rem;color:var(--z-muted-fg,#64748b)}.studio-code{border:1px solid var(--z-border,#e2e8f0);border-radius:12px;overflow:hidden;background:var(--z-surface,#f8fafc)}.studio-code summary{padding:.6rem .85rem;font-size:.8rem;font-weight:600;color:var(--z-muted-fg,#64748b);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.studio-code summary:focus-visible{outline:2px solid var(--z-ring,#8b5cf6);outline-offset:-2px}.studio-code pre{max-height:420px;overflow:auto}.studio-button-row{display:flex;flex-wrap:wrap;gap:.5rem}.studio-toggle-row{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem;color:var(--z-fg,#0f172a)}.studio-slider-row{display:grid;grid-gap:.5rem;gap:.5rem}