:root {
    --bg: #05090f; --surface: #091721; --surface-2: #0d202b; --line: #173946;
    --cyan: #5eeaff; --cyan-soft: #183b47; --mint: #78f4bd; --amber: #ffc866;
    --red: #ff687d; --violet: #bd8dff; --text: #eafcff; --muted: #88a6af;
    --shadow: 0 22px 70px rgba(0,0,0,.36);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:
    radial-gradient(circle at 78% 12%, rgba(31,108,137,.18), transparent 28%),
    radial-gradient(circle at 12% 62%, rgba(93,48,133,.13), transparent 33%), var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .2; background-image: linear-gradient(rgba(94,234,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(94,234,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
button, input, select { font: inherit; }
button { border: 1px solid var(--cyan); color: #041218; background: var(--cyan); border-radius: 9px; padding: 11px 16px; font-weight: 800; letter-spacing: .04em; cursor: pointer; transition: .18s ease; }
button:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 0 24px rgba(94,234,255,.2); }
button.secondary { color: var(--cyan); background: transparent; }
.topbar { height: 74px; padding: 0 clamp(18px,4vw,64px); border-bottom: 1px solid var(--line); background: rgba(5,13,19,.86); backdrop-filter: blur(18px); display: flex; align-items: center; gap: 28px; position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }
.brand b { display: block; font-size: 16px; letter-spacing: .16em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .18em; }
.brand-mark { display: flex; justify-content: center; align-items: end; gap: 5px; height: 42px; }
.brand-mark span { width: 7px; border-radius: 4px; background: linear-gradient(to top,var(--cyan),white); box-shadow: 0 0 15px var(--cyan); transform: skew(-12deg); }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(3) { height: 24px; opacity: .65; }.brand-mark span:nth-child(2) { height: 40px; }
.brand-mark.small { width: 29px; height: 31px; gap: 3px; }.brand-mark.small span { width: 5px; }.brand-mark.small span:nth-child(1),.brand-mark.small span:nth-child(3){height:17px}.brand-mark.small span:nth-child(2){height:29px}
.status { display: flex; align-items: center; gap: 8px; color: var(--mint); font-size: 11px; letter-spacing: .1em; }.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.logout { color: var(--muted); text-decoration: none; font-size: 11px; letter-spacing: .1em; }.logout:hover { color: white; }
.dashboard { width: min(1600px,calc(100% - 36px)); margin: 0 auto; padding: 48px 0 64px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 18px 2px 34px; }
.eyebrow, .panel-kicker { margin: 0 0 7px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.hero h1 { margin: 0; font-size: clamp(32px,5vw,62px); line-height: 1; letter-spacing: -.045em; }.hero p:last-child { color: var(--muted); max-width: 720px; margin: 14px 0 0; font-size: 16px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-panel { display: grid; grid-template-columns: repeat(6,minmax(120px,1fr)); gap: 10px; padding: 15px; margin-bottom: 18px; background: rgba(9,23,33,.85); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.filter-panel label { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
input, select { width: 100%; height: 40px; margin-top: 6px; padding: 0 10px; border: 1px solid #254654; border-radius: 7px; outline: none; background: #07131b; color: var(--text); }
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(94,234,255,.08); }
.kpi-grid { display: grid; grid-template-columns: repeat(6,minmax(135px,1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { min-height: 122px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(145deg,rgba(15,37,49,.94),rgba(7,18,26,.94)); }
.kpi::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent,var(--cyan)); box-shadow:0 0 18px var(--accent,var(--cyan)); }.kpi small { display:block; color:var(--muted); font-size:9px; letter-spacing:.14em; font-weight:800 }.kpi strong { display:block; margin-top:12px; font-size:clamp(22px,2.4vw,36px); line-height:1; letter-spacing:-.04em }.kpi span { display:block; color:#71909a; margin-top:10px; font-size:11px }.kpi.mint{--accent:var(--mint)}.kpi.amber{--accent:var(--amber)}.kpi.red{--accent:var(--red)}.kpi.violet{--accent:var(--violet)}
.grid { display:grid; gap:12px; margin-bottom:12px }.grid.two { grid-template-columns:1fr 1fr; }
.panel { min-width:0; margin-bottom:12px; padding:20px; border:1px solid var(--line); border-radius:13px; background:rgba(9,23,33,.9); box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px }.panel h2 { margin:0; font-size:19px; letter-spacing:-.02em }.panel-kicker { font-size:9px; margin-bottom:4px }.text-button { padding:6px 9px; background:transparent; border-color:#31515e; color:var(--muted); font-size:10px; }
.chart-panel canvas { width:100%; height:260px; display:block; }
.table-wrap { overflow:auto; max-height:480px; scrollbar-color:#315663 transparent; }
table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; } th { position:sticky; top:0; z-index:1; padding:9px 11px; color:#6e919b; background:#091721; text-align:right; font-size:9px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line); } th:first-child,td:first-child { text-align:left; } td { padding:11px; text-align:right; border-bottom:1px solid rgba(32,70,82,.55); color:#c8dde2; } tr:hover td { background:rgba(94,234,255,.035); } td.primary { color:white; font-weight:750; letter-spacing:.02em; } td.good { color:var(--mint); } td.warn { color:var(--amber); } td.bad { color:var(--red); }
.empty-row { text-align:center !important; color:#58747c; padding:32px; }
.pill { display:inline-flex; border:1px solid currentColor; border-radius:999px; padding:2px 7px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.loading { padding:55px; text-align:center; color:var(--cyan); letter-spacing:.16em; font-size:11px; animation:pulse 1.2s infinite alternate }.error-banner { padding:15px; border:1px solid var(--red); border-radius:10px; color:#ffc5cc; background:#2c1018; }
footer { padding:22px; text-align:center; border-top:1px solid var(--line); color:#55727b; font-size:10px; letter-spacing:.13em; }
.login-body { display:grid; place-items:center; padding:24px; }.login-shell { width:min(440px,100%); text-align:center; }.login-shell h1 { margin:11px 0 0; font-size:40px; letter-spacing:.08em; }.login-shell .subtitle { margin:0 0 30px; color:var(--muted); letter-spacing:.17em; text-transform:uppercase; font-size:12px; }
.login-card { display:grid; gap:13px; padding:27px; text-align:left; border:1px solid var(--line); border-radius:14px; background:rgba(9,23,33,.94); box-shadow:var(--shadow); }.login-card label { color:var(--muted); font-size:11px; letter-spacing:.08em; }.login-card button { margin-top:5px; }.form-error { margin:0; color:var(--red); font-size:12px; }.microcopy { color:#526d75; font-size:10px; letter-spacing:.08em; margin-top:20px; }
@keyframes pulse { to { opacity:.45 } }
@media(max-width:1100px){.filter-panel{grid-template-columns:repeat(3,1fr)}.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.topbar{padding:0 16px}.status{display:none}.dashboard{width:min(100% - 20px,1600px);padding-top:25px}.hero{align-items:flex-start;flex-direction:column}.hero-actions{width:100%}.hero-actions button{flex:1}.filter-panel{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}.panel{padding:14px}.logout{font-size:0}.logout::after{content:'×';font-size:22px}}
@media(max-width:430px){.filter-panel{grid-template-columns:1fr 1fr}.kpi-grid{grid-template-columns:1fr 1fr}.kpi{min-height:108px;padding:14px}.brand small{display:none}}