:root { color-scheme: dark; --ink: #f3f8fb; --muted: #91a4b5; --muted-2: #64788a; --canvas: #07111e; --surface: #0b1827; --surface-2: #0e1e2e; --line: rgba(158, 193, 219, .14); --aqua: #35e4c5; --blue: #65a6ff; --amber: #ffbd61; --red: #ff7b7b; --radius: 18px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 75% -10%, rgba(48, 150, 181, .13), transparent 34rem), var(--canvas); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.eyebrow { margin: 0 0 .45rem; color: var(--aqua); font-size: .74rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 50% 30%, rgba(33, 208, 181, .12), transparent 25rem), radial-gradient(circle at 5% 100%, rgba(86, 138, 255, .13), transparent 27rem); }
.login-panel { width: min(100%, 29rem); padding: clamp(2rem, 7vw, 3.5rem); border: 1px solid var(--line); border-radius: 24px; background: rgba(10, 23, 37, .86); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.brand-mark { width: 2.55rem; height: 2.55rem; display: grid; align-content: center; gap: .3rem; padding: .45rem; margin-bottom: 1.8rem; border-radius: .75rem; background: linear-gradient(135deg, var(--aqua), #60b8ff); }
.brand-mark i { display: block; height: .16rem; border-radius: 1rem; background: #062131; }
.brand-mark i:nth-child(2) { width: 70%; }.brand-mark i:nth-child(3) { width: 86%; }
.login-panel h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.35rem); letter-spacing: -.045em; }.login-copy { margin: .8rem 0 2rem; color: var(--muted); line-height: 1.55; }
form { display: grid; gap: 1.15rem; } label { display: grid; gap: .48rem; font-size: .88rem; color: #cbd7df; font-weight: 650; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: .7rem; outline: none; background: rgba(2, 11, 20, .55); color: var(--ink); padding: .78rem .85rem; transition: border .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(53,228,197,.13); }.primary-button { display:flex; align-items:center; justify-content:space-between; margin-top:.35rem; padding:.9rem 1rem; border:0; border-radius:.75rem; color:#02201d; background:var(--aqua); font-weight:800; }.primary-button:hover { filter:brightness(1.08); }.primary-button:disabled { cursor:wait; opacity:.7; }.primary-button b { font-size:1.25rem; }.form-error { margin: 0; color: var(--red); font-size: .9rem; }.login-note { margin:1.5rem 0 0; color:var(--muted-2); font-size:.79rem; }
.dashboard { min-height:100vh; display:grid; grid-template-columns: 15rem minmax(0,1fr); }.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:2.4rem; padding:1.7rem 1.15rem 1.35rem; border-right:1px solid var(--line); background:rgba(7,17,30,.78); backdrop-filter:blur(16px); }.sidebar-brand { display:flex; align-items:center; gap:.65rem; padding:.3rem .55rem; color:var(--ink); text-decoration:none; letter-spacing:.06em; font-size:.82rem; }.sidebar-brand .brand-mark { width:2rem; height:2rem; padding:.36rem; margin:0; border-radius:.55rem; gap:.23rem; }.sidebar-brand strong,.sidebar-brand em{display:block;font-style:normal;line-height:.88rem;}.sidebar-brand strong{font-weight:850}.sidebar-brand em{color:var(--aqua);font-weight:650}nav{display:grid;gap:.3rem}nav a{padding:.68rem .8rem;border-radius:.6rem;color:var(--muted);font-size:.9rem;text-decoration:none;font-weight:600}nav a:hover,nav a.active{color:var(--ink);background:rgba(101,166,255,.1)}nav a.active{box-shadow:inset 2px 0 var(--aqua)}.sidebar-bottom{margin-top:auto;padding:.8rem .55rem}.signed-in{display:block;overflow:hidden;color:var(--muted);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.quiet-button{margin-top:.7rem;padding:0;border:0;background:none;color:var(--aqua);font-size:.83rem;font-weight:700}.workspace{min-width:0;padding:clamp(1.25rem,4vw,3.5rem);max-width:110rem;margin:0 auto;width:100%}.topbar{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end}.topbar h1{margin:0;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.055em}.toolbar{display:flex;gap:.65rem;align-items:end}.select-label{font-size:.7rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.select-label select{min-width:7.4rem;margin-top:.3rem;padding:.55rem .7rem;text-transform:none;letter-spacing:normal;font-size:.88rem}.refresh-button{padding:.69rem .9rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface);color:var(--ink);font-size:.88rem;font-weight:700}.refresh-button:hover{border-color:var(--aqua)}.updated{margin:1rem 0 1.8rem;color:var(--muted-2);font-size:.78rem}.dashboard-error{margin-bottom:1.25rem;padding:.85rem 1rem;border:1px solid rgba(255,123,123,.45);border-radius:.7rem;background:rgba(255,123,123,.08);color:#ffc1c1}.section-block{scroll-margin-top:1rem;margin-top:3.2rem}.section-block:first-of-type{margin-top:0}.metric-grid,.data-grid{display:grid;gap:1rem}.metric-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.data-grid.four-up{grid-template-columns:repeat(4,minmax(0,1fr))}.data-grid.three-up{grid-template-columns:repeat(3,minmax(0,1fr))}.data-grid.two-up,.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.metric-card,.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,rgba(14,30,46,.92),rgba(8,21,34,.92));box-shadow:0 14px 34px rgba(0,0,0,.11)}.metric-card{padding:1rem;min-height:7.2rem}.metric-label{display:block;min-height:2.1em;color:var(--muted);font-size:.73rem;font-weight:650;line-height:1.22;text-transform:uppercase;letter-spacing:.07em}.metric-value{display:block;margin-top:.42rem;font-size:clamp(1.36rem,2vw,1.8rem);font-weight:790;letter-spacing:-.055em}.metric-note{display:block;margin-top:.38rem;color:var(--muted-2);font-size:.72rem}.panel{padding:1.2rem}.chart-panel{min-height:18.5rem}.panel h3{margin:0 0 1rem;font-size:1rem;letter-spacing:-.015em}.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.panel-title h2,.panel-title h3{margin:0}.panel-title>span{color:var(--muted-2);font-size:.76rem;white-space:nowrap}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1rem}.section-heading h2{margin:0;font-size:1.45rem;letter-spacing:-.035em}.section-heading>p{max-width:35rem;margin:0;color:var(--muted);font-size:.84rem;line-height:1.5;text-align:right}.line-chart{height:13rem;margin-top:.75rem}.line-chart svg{width:100%;height:100%;overflow:visible}.chart-grid{margin-top:1rem}.bar-list{display:grid;gap:.85rem}.bar-item{display:grid;grid-template-columns:minmax(5rem,1fr) auto;gap:.38rem .8rem;align-items:center}.bar-label{overflow:hidden;color:#c9d6df;font-size:.83rem;text-overflow:ellipsis;white-space:nowrap}.bar-value{color:var(--ink);font-size:.83rem;font-variant-numeric:tabular-nums;font-weight:700}.bar-track{grid-column:1/-1;overflow:hidden;height:.38rem;border-radius:1rem;background:rgba(144,173,195,.12)}.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--aqua),var(--blue))}.bar-item:nth-child(3n+2) .bar-fill{background:linear-gradient(90deg,var(--blue),#9586ff)}.bar-item:nth-child(3n) .bar-fill{background:linear-gradient(90deg,var(--amber),#f97b9e)}.empty{color:var(--muted-2);font-size:.85rem}.table-panel{margin-top:1rem}.metric-grid+.chart-grid{margin-top:1rem}table{width:100%;border-collapse:collapse;font-size:.86rem}th,td{padding:.7rem .15rem;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted-2);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}.table-panel tr:last-child td{border-bottom:0}@media(max-width:1120px){.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.data-grid.four-up{grid-template-columns:repeat(2,minmax(0,1fr))}.data-grid.three-up{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.dashboard{display:block}.sidebar{position:static;height:auto;display:flex;gap:1rem;padding:1rem;border-right:0;border-bottom:1px solid var(--line)}.sidebar nav{display:flex;overflow:auto;gap:.2rem}.sidebar nav a{white-space:nowrap}.sidebar-bottom{display:flex;align-items:center;justify-content:space-between;margin:0;padding:.3rem .55rem}.quiet-button{margin:0}.topbar,.section-heading{align-items:flex-start;flex-direction:column}.toolbar{width:100%;justify-content:space-between}.section-heading>p{text-align:left}.workspace{padding:1.25rem}.metric-grid,.data-grid.four-up,.data-grid.three-up,.data-grid.two-up,.chart-grid{grid-template-columns:1fr}.chart-panel{min-height:16rem}.line-chart{height:11rem}.section-block{margin-top:2.6rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.metric-grid,.data-grid{align-items:start}
.metric-grid+.data-grid,.data-grid+.data-grid{margin-top:1rem}