:root { --ink:#0b1020; --panel:#121a2d; --panel-2:#19233b; --line:#2a3654; --muted:#9aa7c1; --text:#eef3ff; --teal:#5be4c5; --amber:#ffbe5c; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--ink); color:var(--text); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.welcome-overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:1.25rem; background:rgba(3,7,18,.75); backdrop-filter:blur(10px); transition:opacity .28s ease,visibility .28s ease; }.welcome-overlay.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }.welcome-card { position:relative; width:min(100%,610px); padding:clamp(1.7rem,5vw,3.2rem); overflow:hidden; border:1px solid rgba(91,228,197,.36); border-radius:20px; background:radial-gradient(circle at 92% 4%,rgba(91,228,197,.16),transparent 31%),linear-gradient(145deg,#172440,#0c1426 72%); box-shadow:0 28px 90px rgba(0,0,0,.52); }.welcome-card::after { content:"V"; position:absolute; right:-.12em; bottom:-.48em; color:rgba(91,228,197,.055); font-size:16rem; font-weight:900; line-height:1; pointer-events:none; }.welcome-kicker { margin:0 0 .85rem; color:var(--teal); font-size:.73rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }.welcome-card h1 { position:relative; z-index:1; max-width:12ch; margin:0; font-size:clamp(2rem,5vw,3.55rem); line-height:1.01; letter-spacing:-.06em; }.welcome-card > p:not(.welcome-kicker) { position:relative; z-index:1; max-width:50ch; margin:1.25rem 0 0; color:#d7e2f7; font-size:1.04rem; line-height:1.65; }.welcome-rule { position:relative; z-index:1; width:54px; height:3px; margin:1.55rem 0 1.15rem; border-radius:99px; background:var(--amber); }.welcome-card .welcome-signoff { margin-top:0; color:#f7dfb5; font-style:italic; }.welcome-signoff span { color:var(--amber); font-style:normal; font-weight:700; white-space:nowrap; }.welcome-close { position:absolute; z-index:2; top:1rem; right:1rem; width:34px; height:34px; border:1px solid #3b4a68; border-radius:50%; background:rgba(10,18,34,.65); color:#dce7f9; font-size:1.4rem; line-height:1; cursor:pointer; }.welcome-close:hover { border-color:var(--teal); color:var(--teal); }.welcome-action { position:relative; z-index:1; margin-top:1.65rem; padding:.78rem 1rem; border:1px solid var(--teal); border-radius:9px; background:var(--teal); color:#05211d; font:700 .9rem/1 inherit; cursor:pointer; }.welcome-action span { margin-left:.35rem; font-size:1.1rem; }.welcome-action:hover { background:#83eed7; }
.shell { min-height:100vh; display:grid; grid-template-columns:245px minmax(0,1fr); } .sidebar { border-right:1px solid var(--line); padding:1.4rem 1rem; display:flex; flex-direction:column; background:#0d1425; } .brand { display:flex; gap:.7rem; align-items:center; color:var(--text); text-decoration:none; font-weight:750; letter-spacing:-.03em; font-size:1.1rem; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:var(--teal); color:#06211d; font-weight:900; }.muted,.sidebar-label,small,.panel-note { color:var(--muted); }.sidebar-label { margin:2.25rem .65rem .6rem; font-size:.77rem; text-transform:uppercase; letter-spacing:.1em; }.nav-list { display:grid; gap:.3rem; }.nav-item { border:0; border-radius:8px; padding:.65rem .75rem; text-align:left; cursor:pointer; color:#bdc8dc; background:transparent; font:inherit; }.nav-item:hover,.nav-item.active { background:#1d2944; color:white; }.sidebar-foot { margin-top:auto; padding:.9rem .7rem 0; border-top:1px solid var(--line); color:#dce7f9; font-size:.9rem; }.sidebar-foot p { color:var(--muted); margin:.2rem 0 0 1.2rem; font-size:.78rem; }.status-dot { display:inline-block; width:.52rem; height:.52rem; background:var(--amber); border-radius:50%; margin-right:.45rem; }
.workspace { padding:2.2rem clamp(1rem,4vw,4.2rem); max-width:1550px; width:100%; margin:0 auto; }.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }.eyebrow { color:var(--teal); font-size:.75rem; letter-spacing:.11em; margin:0 0 .25rem; text-transform:uppercase; font-weight:720; }.topbar h1 { margin:0; letter-spacing:-.045em; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.1; }.demo-badge { border:1px solid #74552a; background:#312514; color:#ffd28f; padding:.45rem .7rem; border-radius:999px; font-size:.82rem; white-space:nowrap; }.notice { border-left:3px solid var(--amber); background:#241d15; color:#f7dfb5; padding:.8rem 1rem; margin-bottom:1.35rem; border-radius:0 8px 8px 0; }.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }.metric-card,.panel { background:linear-gradient(145deg,var(--panel),#10182a); border:1px solid var(--line); border-radius:12px; }.metric-card { padding:1rem 1.05rem; display:grid; gap:.1rem; }.metric-card span { color:var(--muted); font-size:.8rem; }.metric-card strong { font-size:1.45rem; letter-spacing:-.04em; }.metric-card strong span { font-size:1rem; }.metric-card .status-text { color:var(--amber); font-size:1rem; letter-spacing:.04em; }.metric-card small { font-size:.76rem; }.split-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,.8fr); gap:1rem; }.panel { padding:1.2rem; }.panel h2 { margin:.05rem 0 .7rem; font-size:1.22rem; letter-spacing:-.025em; }.panel-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }.panel-head > span { color:var(--muted); font-size:.78rem; }.chart-panel { min-height:360px; }.line-chart { height:245px; display:grid; grid-template-columns:43px 1fr; align-items:stretch; margin-top:1rem; }.y-labels { display:flex; flex-direction:column; justify-content:space-between; padding:.1rem .55rem .05rem 0; color:var(--muted); font-size:.7rem; text-align:right; }.line-chart svg { width:100%; height:100%; overflow:visible; }.grid-line { stroke:#293651; stroke-width:1; }.area { fill:url(#none); fill:#5be4c5; opacity:.08; }.series { fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.line-chart circle { fill:var(--amber); stroke:#21180a; stroke-width:4; }.x-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; margin-left:43px; }.evidence-list { list-style:none; padding:0; margin:1.1rem 0; display:grid; gap:.85rem; }.evidence-list li { display:flex; align-items:center; gap:.7rem; color:#dce7f9; }.check,.blocked { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; font-size:.78rem; }.check { background:#153d38; color:var(--teal); }.blocked { background:#382c19; color:var(--amber); }.wide-panel { margin-top:1rem; }.wide-panel p:last-child { color:#c2cce0; max-width:70ch; margin-bottom:0; }.view { display:none; }.view.active { display:block; }.table-panel { overflow:auto; } table { width:100%; border-collapse:collapse; margin-top:.8rem; min-width:530px; } th,td { padding:.8rem; border-bottom:1px solid var(--line); text-align:left; } th { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; } td { color:#dfe7f5; }.feature-pills { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.2rem; }.feature-pills span { background:#1d2944; border:1px solid #34425f; border-radius:99px; padding:.35rem .55rem; color:#cbd7ed; font-size:.78rem; }.bars { height:135px; display:flex; align-items:flex-end; gap:.75rem; padding:1rem .2rem .2rem; border-bottom:1px solid var(--line); }.bars i { flex:1; min-width:12px; background:linear-gradient(#5be4c5,#278a79); border-radius:4px 4px 0 0; }
@media (max-width:900px) { .shell { grid-template-columns:1fr; }.sidebar { padding:.9rem 1rem; border-right:0; border-bottom:1px solid var(--line); }.sidebar-label,.sidebar-foot { display:none; }.nav-list { display:flex; overflow:auto; }.nav-item { white-space:nowrap; }.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.split-grid { grid-template-columns:1fr; }.workspace { padding:1.3rem 1rem; } }
@media (max-width:520px) { .welcome-card { padding:1.55rem 1.35rem 1.45rem; }.welcome-card h1 { max-width:11ch; }.welcome-card > p:not(.welcome-kicker) { font-size:.95rem; }.welcome-action { width:100%; } }
@media (max-width:520px) { .topbar { display:grid; }.metric-grid { grid-template-columns:1fr; }.demo-badge { justify-self:start; }.nav-item { padding:.5rem .65rem; font-size:.88rem; } }