:root{color-scheme:dark;--bg: #090b10;--surface: #10141b;--surface-2: #171c25;--line: #272f3d;--text: #e5e7eb;--muted: #99a2b3;--accent: #0ea5e9;--accent-2: #0284c7;--good: #22c55e}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;font-family:Segoe UI,Tahoma,sans-serif;background:radial-gradient(circle at top left,#111827,var(--bg) 35%);color:var(--text)}button,input{font:inherit}.login-shell{height:100%;display:grid;place-items:center}.login-card{width:min(420px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:10px}.login-card h1{margin:0;font-size:1.2rem}.login-card p{margin:0;color:var(--muted)}.login-card input,.login-card button{height:42px;border-radius:10px;border:1px solid var(--line);padding:0 12px}.login-card input{background:var(--surface-2);color:var(--text)}.login-card button{border:none;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;font-weight:700;cursor:pointer}.login-card small{color:#fda4af}.app-shell{height:100%;display:grid;grid-template-rows:64px 1fr}.topbar{border-bottom:1px solid var(--line);background:#090b10cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0 18px;display:flex;align-items:center;justify-content:space-between}.topbar h1{margin:0;font-size:1rem;letter-spacing:.3px}.topbar-metrics{display:flex;gap:12px;color:var(--muted);font-size:.88rem}.topbar-metrics .live{color:var(--good)}.layout{min-height:0;display:grid;grid-template-columns:290px 1fr}.sidebar{border-right:1px solid var(--line);padding:16px;overflow:auto;background:#10141bb3}.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sidebar-head h2{margin:0;font-size:.9rem;text-transform:uppercase;color:var(--muted)}.sidebar-head button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer}.scene-list{display:grid;gap:8px}.scene-item{text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:10px;cursor:pointer;display:grid;gap:4px}.scene-item small{color:var(--muted)}.scene-item.active{border-color:var(--accent);box-shadow:0 0 0 1px #0ea5e940}.alerts-box{margin-top:20px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}.alerts-box h3{margin:0;font-size:.86rem;color:var(--muted);text-transform:uppercase}.alert-item{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px;display:flex;justify-content:space-between;gap:8px}.alert-item small{color:var(--muted)}.editor{min-width:0;min-height:0;padding:16px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px}.editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.scene-name{width:240px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 10px}.editor-actions{display:flex;gap:8px}.editor-actions button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 10px;cursor:pointer}.preview-toolbar{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:.86rem}.preview-toolbar label{display:flex;gap:6px;align-items:center}.preview-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview-stage{position:relative;border:1px solid var(--line);background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;border-radius:12px;overflow:hidden}.preview-stage.no-grid{background-image:none}.layer-box{border:1px solid rgba(14,165,233,.85);background:#0ea5e929;border-radius:8px;color:#bae6fd;padding:8px}.layer-box.selected{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b66}.layer-box.locked{border-style:dashed;background:#99a2b333}.layer-title{font-weight:700;font-size:.85rem}.layer-type{font-size:.78rem;color:#cbd5e1}.overlay-frame{width:100%;min-height:360px;border:1px solid var(--line);border-radius:12px;background:#000}.bottom-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;min-height:0}.layers-table{border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--surface);min-height:240px}.layer-row{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid var(--line);cursor:pointer}.layer-row.selected{background:#0284c72e}.layer-row:last-child{border-bottom:none}.layer-main{display:grid;gap:4px;flex:1}.layer-main input{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px 10px}.layer-main small{color:var(--muted)}.layer-controls{display:grid;gap:6px;align-content:center}.layer-controls label{color:var(--muted);display:flex;align-items:center;gap:6px}.layer-controls button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:6px 8px;cursor:pointer}.props-panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;min-height:240px;overflow:auto}.props-panel h3{margin:0 0 10px;font-size:.88rem;color:var(--muted);text-transform:uppercase}.props-empty{margin:0;color:var(--muted)}.props-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.props-grid label{display:grid;gap:4px;color:var(--muted);font-size:.84rem}.props-grid input{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px}.z-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}.z-actions button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px;cursor:pointer}.props-line{margin-top:10px;display:flex;align-items:center;gap:8px;color:var(--muted)}.error-box{margin:0;border:1px solid #7f1d1d;background:#7f1d1d40;color:#fecaca;border-radius:8px;padding:8px 10px}@media (max-width: 1380px){.preview-wrap{grid-template-columns:1fr}.preview-stage{width:100%!important;height:auto!important;aspect-ratio:16 / 9}.overlay-frame{min-height:280px}.bottom-grid{grid-template-columns:1fr}}@media (max-width: 1200px){.layout{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--line)}.editor-head{flex-direction:column;align-items:flex-start}.editor-actions{flex-wrap:wrap}}