* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input { font: inherit; } button, a { color: inherit; } button { cursor: pointer; } a { text-decoration: none; }
.page { display: none; min-height: 100vh; } .page.active { display: block; }
.auth-pending .page { display: none; }.app-loading { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--text); background: var(--bg); }.app-loading small { color: var(--muted); }.app-loading .brand-mark { width: 44px; height: 44px; }
body:not(.auth-pending) .app-loading { display: none; }
.dashboard-ticker { top: 0; }.dashboard-ticker + .dashboard { padding-top: 40px; }.dashboard-ticker + .dashboard .sidebar { top: 40px; }.dashboard-ticker + .dashboard .dash-topbar { top: 40px; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 850; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--cyan); background: rgba(53,208,230,.1); border: 1px solid rgba(53,208,230,.22); border-radius: 10px; }
.btn, .small-btn, .icon-btn { border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; background: transparent; }
.btn-primary { border: 0; color: #061018; font-weight: 800; background: linear-gradient(135deg, var(--cyan), #22b8cf); }
.btn-secondary { color: var(--cyan); background: rgba(53,208,230,.08); border-color: rgba(53,208,230,.25); }
.small-btn { padding: 7px 10px; color: var(--muted); background: #101a2b; }
.small-btn:disabled { color: var(--cyan); border-color: rgba(53,208,230,.45); background: rgba(53,208,230,.09); cursor: default; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.side-item.ready { color: var(--green); }.side-item.ready:not(.active) .side-icon::after { content: "•"; margin-left: 3px; color: var(--green); }
.side-item.ready:hover, .side-item.ready.active { color: var(--green); background: rgba(74,222,128,.09); }
.pill { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 800; }
.pill.cyan { color: var(--cyan); background: rgba(53,208,230,.11); }.pill.green { color: var(--green); background: rgba(74,222,128,.1); }.pill.amber { color: var(--amber); background: rgba(251,191,36,.1); }.pill.red { color: var(--red); background: rgba(251,113,133,.1); }
.up { color: var(--green); }.down { color: var(--red); }.muted { color: var(--muted); }.small { font-size: 11px; }
.surface-card, .chart-card, .info-card, .panel, .metric-card { background: linear-gradient(180deg, rgba(23,36,58,.98), rgba(16,26,45,.98)); border: 1px solid var(--line); border-radius: var(--radius); }
.section { padding: 84px 0; }.section.alt { background: #090f1b; border-block: 1px solid rgba(148,163,184,.06); }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }.section-head h2 { font-size: 34px; margin: 0 0 12px; }.section-head p, p { color: var(--muted); line-height: 1.7; }
canvas { display: block; width: 100%; height: 100%; }
table { width: 100%; border-collapse: collapse; } th, td { padding: 11px 9px; text-align: left; border-bottom: 1px solid var(--line); font-size: 12px; } th { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.empty-state { text-align: center; padding: 56px 20px; }.prototype-note { font-size: 11px; color: var(--muted); text-align: center; }