@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--od-bg-base:#07080c;--od-bg-canvas:#0d0e15;--od-bg-surface:#13151f;--od-bg-elevated:#191c2b;--od-bg-glass:#13151fd1;--od-border:#ffffff14;--od-border-light:#ffffff0a;--od-border-active:#00f2fe59;--od-gradient-primary:linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);--od-gradient-accent:linear-gradient(135deg, #7928ca 0%, #ff0080 100%);--od-gradient-emerald:linear-gradient(135deg, #00dfa2 0%, #00b894 100%);--cyan:#00f2fe;--cyan-dim:#00f2fe1f;--violet:#9d4edd;--violet-dim:#9d4edd24;--emerald:#00dfa2;--emerald-dim:#00dfa21f;--amber:#ffb703;--amber-dim:#ffb7031f;--rose:#ff0054;--rose-dim:#ff00541f;--sky:#38bdf8;--sky-dim:#38bdf81f;--indigo:#6366f1;--indigo-dim:#6366f11f;--orange:#fb923c;--orange-dim:#fb923c1f;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--sidebar-w:256px;--header-h:58px;-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5}html,body{background:var(--od-bg-base);height:100%;color:var(--text-primary);overflow:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.workspace{background:var(--od-bg-base);width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--od-bg-surface);border-right:1px solid var(--od-border);z-index:20;flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}.sidebar:before{content:"";background:linear-gradient(90deg, transparent, var(--cyan), transparent);opacity:.5;height:1px;position:absolute;top:0;left:0;right:0}.sidebar-brand{border-bottom:1px solid var(--od-border-light);flex-shrink:0;padding:14px 14px 12px}.sidebar-logo{align-items:center;gap:10px;margin-bottom:12px;text-decoration:none;display:flex}.sidebar-logo-mark{background:var(--od-gradient-primary);color:#000;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:15px;font-weight:800;display:flex;box-shadow:0 0 16px #00f2fe66}.sidebar-logo-name{background:linear-gradient(90deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;letter-spacing:-.3px;-webkit-background-clip:text;font-size:13.5px;font-weight:700}.sidebar-logo-badge{color:var(--cyan);background:var(--cyan-dim);letter-spacing:.5px;text-transform:uppercase;border:1px solid #00f2fe40;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700}.sidebar-nav{flex:1;padding:10px;overflow-y:auto}.sidebar-section-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);padding:12px 10px 4px;font-size:10px;font-weight:700}.nav-link{color:var(--text-secondary);white-space:nowrap;border-radius:9px;align-items:center;gap:10px;margin-bottom:2px;padding:8.5px 11px;font-size:12.5px;font-weight:500;text-decoration:none;transition:all .15s;display:flex;position:relative}.nav-link:hover{color:var(--text-primary);background:#ffffff0d}.nav-link.active{background:var(--cyan-dim);color:var(--cyan);border:1px solid #00f2fe33;box-shadow:0 0 12px #00f2fe1a}.nav-link .nav-icon{flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.nav-link .nav-badge{color:var(--text-muted);background:var(--od-bg-elevated);border:1px solid var(--od-border);border-radius:4px;margin-left:auto;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:9px}.sidebar-footer{border-top:1px solid var(--od-border-light);background:#07080c80;flex-shrink:0;padding:10px}.status-bar{background:var(--od-bg-base);border:1px solid var(--od-border);border-radius:9px;flex-direction:column;gap:5px;margin-bottom:8px;padding:8px 10px;display:flex}.status-item{color:var(--text-muted);justify-content:space-between;align-items:center;font-size:10.5px;display:flex}.status-dot{background:var(--emerald);width:6px;height:6px;box-shadow:0 0 6px var(--emerald);border-radius:50%}.main-frame{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.topbar{height:var(--header-h);background:var(--od-bg-glass);border-bottom:1px solid var(--od-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;flex-shrink:0;align-items:center;gap:14px;padding:0 24px;display:flex}.topbar-title{flex:1;min-width:0}.topbar-title h2{color:var(--text-primary);font-size:13.5px;font-weight:600}.topbar-title p{color:var(--text-muted);align-items:center;gap:5px;font-size:11px;display:flex}.topbar-actions{flex-shrink:0;align-items:center;gap:10px;display:flex}.pill-badge{border:1px solid;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:11px;font-weight:600;display:inline-flex}.pill-emerald{color:var(--emerald);background:var(--emerald-dim);border-color:#00dfa240}.pill-cyan{color:var(--cyan);background:var(--cyan-dim);border-color:#00f2fe40}.pill-amber{color:var(--amber);background:var(--amber-dim);border-color:#ffb70340}.pill-rose{color:var(--rose);background:var(--rose-dim);border-color:#ff005440}.surface{background:var(--od-bg-canvas);flex-direction:column;flex:1;display:flex;overflow-y:auto}.surface-padded{padding:24px}.studio-workbench{background:var(--od-bg-canvas);width:100%;height:100%;display:flex;overflow:hidden}.studio-main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.studio-toolbar{background:var(--od-bg-surface);border-bottom:1px solid var(--od-border);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.studio-viewport{background:radial-gradient(circle,#ffffff05 0%,#0000 70%);flex:1;justify-content:center;align-items:center;padding:24px;display:flex;position:relative;overflow:auto}.studio-frame-desktop{background:var(--od-bg-surface);border:1px solid var(--od-border);border-radius:12px;flex-direction:column;width:100%;max-width:1200px;height:100%;display:flex;overflow:hidden;box-shadow:0 20px 50px #00000080}.studio-frame-mobile{background:var(--od-bg-surface);border:10px solid #1e2235;border-radius:40px;width:390px;height:780px;position:relative;overflow:hidden;box-shadow:0 25px 60px #0009}.studio-panel-right{background:var(--od-bg-surface);border-left:1px solid var(--od-border);flex-direction:column;flex-shrink:0;width:320px;display:flex;overflow:hidden}.card{background:var(--od-bg-surface);border:1px solid var(--od-border);border-radius:14px;transition:border-color .2s,transform .2s;overflow:hidden}.card:hover{border-color:#ffffff24}.card-header{border-bottom:1px solid var(--od-border-light);align-items:center;gap:10px;padding:14px 18px;display:flex}.card-title{color:var(--text-primary);font-size:13.5px;font-weight:600}.card-subtitle{color:var(--text-muted);font-size:11px}.card-body{padding:18px}.metric-card{background:var(--od-bg-surface);border:1px solid var(--od-border);border-radius:14px;padding:18px;transition:border-color .2s,transform .2s;position:relative;overflow:hidden}.metric-card:hover{border-color:var(--cyan);transform:translateY(-2px)}.metric-card:before{content:"";background:linear-gradient(90deg, var(--card-color,var(--cyan)), transparent);height:2px;position:absolute;top:0;left:0;right:0}.metric-value{letter-spacing:-1px;margin-bottom:4px;font-family:JetBrains Mono,monospace;font-size:28px;font-weight:800;line-height:1}.metric-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;font-size:11px;font-weight:600}.data-table{border-collapse:collapse;width:100%}.data-table th{text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--od-border);padding:11px 16px;font-size:10.5px;font-weight:700}.data-table td{border-bottom:1px solid var(--od-border-light);color:var(--text-secondary);padding:12px 16px;font-size:12.5px}.data-table tbody tr:hover td{background:#ffffff08}.data-table td.primary{color:var(--text-primary);font-weight:600}.badge{text-transform:uppercase;letter-spacing:.4px;border-radius:6px;align-items:center;gap:5px;padding:3px 9px;font-size:10.5px;font-weight:700;display:inline-flex}.badge-emerald{background:var(--emerald-dim);color:var(--emerald);border:1px solid #00dfa240}.badge-amber{background:var(--amber-dim);color:var(--amber);border:1px solid #ffb70340}.badge-rose{background:var(--rose-dim);color:var(--rose);border:1px solid #ff005440}.badge-cyan{background:var(--cyan-dim);color:var(--cyan);border:1px solid #00f2fe40}.badge-indigo{background:var(--indigo-dim);color:var(--indigo);border:1px solid #6366f140}.badge-violet{background:var(--violet-dim);color:var(--violet);border:1px solid #9d4edd40}.badge-orange{background:var(--orange-dim);color:var(--orange);border:1px solid #fb923c40}.btn{cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:7px;padding:8.5px 16px;font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background:var(--od-gradient-primary);color:#000;box-shadow:0 0 16px #00f2fe4d}.btn-primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 0 24px #00f2fe80}.btn-secondary{background:var(--od-bg-elevated);color:var(--text-primary);border-color:var(--od-border)}.btn-secondary:hover:not(:disabled){background:#ffffff14;border-color:#fff3}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text-primary);background:#ffffff0f}.btn-sm{border-radius:7px;padding:6px 12px;font-size:11.5px}.input{background:var(--od-bg-base);border:1px solid var(--od-border);width:100%;color:var(--text-primary);border-radius:9px;outline:none;padding:9px 13px;font-family:Inter,sans-serif;font-size:13px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim)}.input::placeholder{color:var(--text-muted)}.input-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-size:11px;font-weight:700;display:block}.grid-2{grid-template-columns:1fr 1fr;gap:18px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.flex-between{justify-content:space-between;align-items:center;gap:12px;display:flex}.flex-row{align-items:center;gap:12px;display:flex}.flex-col{flex-direction:column;gap:12px;display:flex}.chart-container{width:100%;height:260px;position:relative}.divider{background:var(--od-border-light);height:1px;margin:18px 0}