:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f4ef;--panel:#fff;--panel-strong:#e9eef0;--ink:#152023;--muted:#5c6a6f;--line:#cfd8dc;--accent:#0f766e;--accent-2:#b45309;--danger:#b91c1c;--shadow:0 20px 50px #1520231f}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}button,input,select{font:inherit}input{min-width:0}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.46}.app-shell{grid-template-columns:320px minmax(0,1fr) 340px;height:100vh;display:grid}.sidebar,.inspector{background:var(--panel);border-color:var(--line);flex-direction:column;gap:16px;padding:18px;display:flex;overflow:auto}.sidebar{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.main-stage{grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid}.topbar{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-bottom:1px solid var(--line);background:#ffffffe6;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.canvas-wrap{height:100%;min-height:400px;position:relative}.canvas-wrap canvas{display:block}.brand h1{margin:0;font-size:20px;line-height:1.2}.brand p,.note,.meta,.small{color:var(--muted);margin:4px 0 0;font-size:13px;line-height:1.45}.section{flex-direction:column;gap:10px;display:flex}.section h2{letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:13px}.card{border:1px solid var(--line);background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px #1520230a}.layout-button,.fixture-button,.tool-button{border:1px solid var(--line);color:var(--ink);text-align:left;background:#fff;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;min-height:38px;padding:9px 10px;display:flex}.layout-button.active,.item-button.active,.tool-button.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.layout-button span,.item-button span{gap:2px;display:grid}.layout-button small,.item-button small{color:var(--muted);font-size:11px;font-weight:500;line-height:1.25}.fixture-button{justify-content:flex-start}.fixture-button span:not(.fixture-thumb){flex:1}.fixture-thumb{border:1px solid var(--line);border-radius:6px;flex:none;justify-content:center;align-items:center;width:36px;height:28px;display:inline-flex;overflow:hidden}.fixture-thumb img{object-fit:cover;width:100%;height:100%;display:block}.button-grid{gap:8px;display:grid}.tool-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.view-toggle{border:1px solid var(--line);background:#edf4f5;border-radius:8px;gap:2px;padding:3px;display:inline-flex}.view-toggle button{color:var(--muted);background:0 0;border:0;border-radius:6px;align-items:center;gap:7px;min-height:32px;padding:6px 9px;display:inline-flex}.view-toggle button.active{color:var(--ink);background:#fff;box-shadow:0 1px 3px #1520231f}.toolbar-sep{background:var(--line);flex-shrink:0;align-self:stretch;width:1px}.primary,.secondary{border-radius:8px;align-items:center;gap:8px;min-height:38px;padding:9px 12px;display:inline-flex}.primary{background:var(--accent);border:1px solid var(--accent);color:#fff}.secondary{border:1px solid var(--line);color:var(--ink);background:#fff}.danger-action{color:var(--danger);border-color:#fecaca}.save-status{color:var(--muted);align-items:center;min-height:18px;margin:-2px 0 0;font-size:12px;font-weight:700;line-height:1.35;display:inline-flex}.save-status.dirty{color:var(--accent-2)}.save-status.saved{color:var(--accent)}.selected-title{margin:0;font-size:18px;font-weight:700}.fixture-preview{border:1px solid var(--line);background:#f8fafc;border-radius:8px;margin:0;overflow:hidden}.fixture-preview img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}.fixture-preview figcaption{border-top:1px solid var(--line);color:var(--muted);padding:8px 10px;font-size:12px;line-height:1.35}.fixture-preview a{color:var(--accent);font-weight:700;text-decoration:none}.fixture-preview.empty{color:var(--muted);border-style:dashed;justify-content:center;align-items:center;min-height:96px;font-size:13px;display:flex}.status-pill{color:#115e59;background:#ecfdf5;border:1px solid #99f6e4;border-radius:8px;align-items:center;margin:0;padding:7px 9px;font-size:13px;font-weight:700;display:inline-flex}.status-pill.locked{color:#3730a3;background:#eef2ff;border-color:#c7d2fe}.helper-list{border:1px solid var(--line);background:#f8fafc;border-radius:8px;gap:6px;padding:9px;display:grid}.helper-list p{color:var(--muted);margin:0;font-size:13px;line-height:1.35}.helper-list strong{color:var(--ink)}.metric-grid,.field-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.field-stack{gap:8px;display:grid}.field-stack label,.layout-name-field,.number-field{color:var(--muted);gap:5px;font-size:12px;display:grid}.field-stack input,.layout-name-field input,.number-field input{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;width:100%;min-height:36px;padding:8px}.number-field div{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;display:grid}.number-field b{color:var(--muted);font-size:12px}.metric{background:var(--panel-strong);border-radius:8px;padding:10px}.metric strong{font-size:18px;display:block}.validation-list{flex-direction:column;gap:8px;margin:0;padding:0;display:flex}.hidden-list{gap:8px;display:grid}.item-list{gap:8px;max-height:260px;padding-right:2px;display:grid;overflow:auto}.validation-item{border-left:4px solid var(--accent-2);background:#fff7ed;padding:7px 9px;list-style:none}.validation-item.blocker{border-left-color:var(--danger);background:#fef2f2}.legend{gap:8px;display:grid}.legend span{align-items:center;gap:8px;display:flex}.swatch{border-radius:4px;width:22px;height:14px;display:inline-block}@media (max-width:1100px){.app-shell{grid-template-columns:280px minmax(0,1fr)}.inspector{border-left:0;border-top:1px solid var(--line);grid-column:1/-1}}@media (max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line)}.topbar{flex-direction:column;align-items:flex-start}}