*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#1f2937;background:#0f172a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.login-screen{justify-content:center;align-items:center;height:100%;display:flex}.login-card{background:#fff;border-radius:12px;flex-direction:column;gap:14px;width:360px;padding:32px;display:flex;box-shadow:0 20px 60px #00000059}.login-card h1{margin:0;font-size:18px}.login-sub{color:#6b7280;margin:0 0 8px;font-size:13px}.login-card label{color:#374151;flex-direction:column;gap:6px;font-size:12px;display:flex}.login-card input{border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-size:14px}.login-card button{color:#fff;cursor:pointer;background:#111827;border:0;border-radius:8px;margin-top:8px;padding:10px;font-size:14px}.login-card button:disabled{opacity:.6;cursor:default}.login-error{color:#b91c1c;background:#fef2f2;border-radius:6px;padding:8px 10px;font-size:12px}.app{grid-template-columns:230px 1fr 1fr;height:100%;display:grid}.app.sidebar-collapsed{grid-template-columns:1fr 1fr}.app.sidebar-collapsed .sidebar{display:none}.sidebar{color:#e5e7eb;background:#111827;flex-direction:column;min-width:0;padding:16px 12px;display:flex}.brand{letter-spacing:.02em;color:#9ca3af;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 14px;font-size:13px;font-weight:600;display:flex}.collapse-btn{color:#9ca3af;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:2px 6px;font-size:16px;line-height:1}.collapse-btn:hover{color:#e5e7eb;background:#1f2937}.expand-btn{color:#e5e7eb;cursor:pointer;background:#262626;border:1px solid #2a2a2a;border-radius:6px;margin-right:8px;padding:6px 10px;font-size:14px;line-height:1}.expand-btn:hover{background:#333}.type-list{flex-direction:column;flex:1;gap:4px;display:flex}.type-item{color:#d1d5db;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;font-size:13px;display:flex}.type-item:hover{background:#1f2937}.type-item.active{color:#fff;background:#2563eb}.badge{text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 6px;font-size:9px}.badge.custom{color:#fff;background:#16a34a}.badge.system{color:#cbd5e1;background:#374151}.badge.locked{color:#9ca3af;background:#4b5563}.logout{color:#9ca3af;cursor:pointer;background:0 0;border:1px solid #374151;border-radius:8px;margin-top:12px;padding:8px;font-size:12px}.editor-pane{background:#1e1e1e;flex-direction:column;min-width:0;display:flex}.toolbar{background:#181818;border-bottom:1px solid #2a2a2a;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;display:flex}.tabs{gap:4px;display:flex}.tabs button{color:#9ca3af;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 12px;font-size:12px}.tabs button.active{color:#fff;background:#2a2a2a}.actions{align-items:center;gap:8px;display:flex}.actions button{color:#e5e7eb;cursor:pointer;background:#262626;border:1px solid #374151;border-radius:6px;padding:6px 12px;font-size:12px}.actions button.primary{color:#fff;background:#2563eb;border-color:#2563eb}.actions button:disabled{opacity:.5;cursor:default}.notice{color:#9ca3af;font-size:12px}.locked-note{color:#fcd34d;background:#422006;padding:10px 14px;font-size:12px}.code-pane{flex:1;min-height:0}.loading{color:#9ca3af;padding:20px;font-size:13px}.preview-pane{background:#475569;flex-direction:column;min-width:0;display:flex}.preview-head{color:#e2e8f0;background:#334155;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex}.preview-error{color:#fca5a5}.zoom-controls{align-items:center;gap:6px;display:flex}.zoom-controls button{color:#e2e8f0;cursor:pointer;background:#1e293b;border:1px solid #475569;border-radius:5px;padding:5px 9px;font-size:12px;line-height:1}.zoom-controls button:hover{background:#334155}.zoom-controls button.active{background:#2563eb;border-color:#2563eb}.zoom-pct{text-align:center;font-variant-numeric:tabular-nums;min-width:40px}.preview-body{text-align:center;background:#64748b;flex:1;padding:16px;overflow:auto}.preview-frame{vertical-align:top;background:#fff;border:0;width:816px;display:inline-block;box-shadow:0 4px 24px #00000059}