:root { --bg:#0b1220; --panel:#121c2e; --panel-2:#17243a; --border:#263955; --text:#ecf4ff; --muted:#91a4be; --blue:#50a7ff; --mint:#38d7b0; --purple:#ae8cff; --orange:#ffb467; --danger:#ff7f8d; --shadow:0 18px 50px rgba(0,0,0,.22); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 5% -10%,#1b3a5e 0,transparent 30rem),var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1440px,calc(100% - 48px)); margin:0 auto; padding:28px 0 54px; }
.topbar,.brand,.topbar-actions,.hero,.filters,.date-fields,.quick-filters,.panel-heading,.group-row,.metric-card { display:flex; align-items:center; }
.topbar { justify-content:space-between; gap:20px; padding-bottom:28px; }
.brand { gap:12px; } .brand h1 { margin:0; font-size:19px; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#04101c; background:linear-gradient(145deg,var(--mint),var(--blue)); font-weight:900; box-shadow:0 7px 20px rgba(56,215,176,.2); }
.eyebrow { margin:0 0 5px; color:var(--mint); font-size:11px; font-weight:800; letter-spacing:.12em; }
.topbar-actions { gap:14px; } .status { color:var(--muted); font-size:13px; } .status-dot { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--orange); } .status.live .status-dot { background:var(--mint); box-shadow:0 0 0 4px rgba(56,215,176,.12); }
.hero { min-height:174px; justify-content:space-between; gap:24px; padding:30px 34px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(120deg,rgba(30,68,107,.74),rgba(18,28,46,.92)); box-shadow:var(--shadow); }
.hero h2 { margin:0; font-size:clamp(28px,4vw,43px); letter-spacing:-.05em; } .hero-copy { max-width:700px; margin:10px 0 0; color:#bfd0e5; line-height:1.55; }
.last-update { min-width:180px; padding:15px 18px; border:1px solid rgba(255,255,255,.11); border-radius:14px; background:rgba(7,16,30,.28); } .last-update span,.metric-card span,.metric-card small { display:block; color:var(--muted); font-size:12px; } .last-update strong { display:block; margin-top:6px; font-size:14px; }
.filters { justify-content:space-between; gap:18px; margin:22px 0; padding:16px; border:1px solid var(--border); border-radius:16px; background:rgba(18,28,46,.78); }
.quick-filters { flex-wrap:wrap; gap:8px; } .chip { padding:8px 12px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:transparent; font-size:13px; } .chip:hover,.chip.active { color:#06121f; background:var(--mint); border-color:var(--mint); font-weight:700; }
.date-fields { flex-wrap:wrap; justify-content:flex-end; gap:10px; } .date-fields label { color:var(--muted); font-size:11px; font-weight:700; } input,select { display:block; min-height:38px; margin-top:5px; padding:7px 9px; color:var(--text); border:1px solid var(--border); border-radius:9px; background:#0c1627; } select { min-width:170px; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; filter:invert(1) brightness(1.9); opacity:.95; }
.button { min-height:39px; padding:9px 14px; border:0; border-radius:9px; font-weight:750; } .button-primary { color:#06121f; background:var(--mint); } .button-primary:hover { background:#6be7c9; } .button-ghost { color:var(--muted); background:transparent; border:1px solid var(--border); }
.inline-error { min-height:20px; margin:0 0 10px; color:var(--danger); font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .metric-card { position:relative; min-height:130px; flex-direction:column; align-items:flex-start; justify-content:center; padding:21px; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--panel); } .metric-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--blue); } .metric-card.accent-mint::before { background:var(--mint); } .metric-card.accent-purple::before { background:var(--purple); } .metric-card.accent-orange::before { background:var(--orange); } .metric-card strong { margin:8px 0 5px; font-size:31px; letter-spacing:-.05em; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr); gap:14px; margin-top:14px; } .panel { padding:22px; border:1px solid var(--border); border-radius:17px; background:var(--panel); box-shadow:0 10px 28px rgba(0,0,0,.09); } .panel-heading { justify-content:space-between; gap:15px; margin-bottom:19px; } .panel h3 { margin:0; font-size:19px; letter-spacing:-.03em; } .panel-heading span,.table-note { color:var(--muted); font-size:12px; }
.bar-chart { display:flex; align-items:flex-end; gap:8px; height:252px; padding-top:20px; } .bar-slot { position:relative; display:flex; flex:1; min-width:11px; height:100%; align-items:flex-end; } .bar { width:100%; min-height:3px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,var(--blue),#3a75dc); transition:height .25s ease; } .bar-slot:hover .bar { background:linear-gradient(180deg,#82d2ff,var(--mint)); } .bar-slot:hover::after { content:attr(data-label); position:absolute; z-index:2; bottom:calc(var(--bar-height) + 8px); left:50%; transform:translateX(-50%); padding:5px 7px; white-space:nowrap; border:1px solid var(--border); border-radius:6px; color:var(--text); background:#08111f; font-size:11px; }
.group-list { display:grid; gap:12px; } .group-row { gap:10px; } .group-name { min-width:105px; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d8e7f8; font-size:13px; } .group-track { flex:1; height:8px; overflow:hidden; border-radius:999px; background:#0b1525; } .group-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),var(--blue)); } .group-value { width:29px; text-align:right; font-weight:800; font-size:13px; }
.table-panel { margin-top:14px; } .table-wrap { overflow:auto; border:1px solid var(--border); border-radius:11px; } table { width:100%; min-width:680px; border-collapse:collapse; } th,td { padding:12px 14px; border-bottom:1px solid rgba(145,164,190,.15); text-align:center; font-size:13px; } th { position:sticky; top:0; color:#cce8ff; background:#172a43; font-size:11px; letter-spacing:.04em; } th:first-child,td:first-child { text-align:left; } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:rgba(80,167,255,.06); }
.login-layer { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 15% 0,#1b4266,transparent 34rem),#08111e; } .login-layer[aria-hidden="true"] { display:none; } .login-card { width:min(100%,405px); padding:34px; border:1px solid var(--border); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); } .login-card .brand-mark { width:48px; height:48px; margin-bottom:18px; font-size:18px; } .login-card h1 { margin:0; font-size:28px; letter-spacing:-.05em; } .login-card p:not(.eyebrow):not(.form-error) { margin:9px 0 22px; color:var(--muted); line-height:1.5; } .login-card label { display:block; color:#cfe0f2; font-size:13px; font-weight:700; } .login-card input { width:100%; margin:8px 0 4px; } .login-card .button { width:100%; margin-top:12px; } .form-error { min-height:20px; margin:8px 0 0; color:var(--danger); font-size:13px; }
@media (max-width:1050px) { .metrics { grid-template-columns:repeat(2,1fr); } .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .app-shell { width:min(100% - 24px,1440px); padding-top:15px; } .topbar,.hero,.filters { align-items:flex-start; flex-direction:column; } .topbar-actions { width:100%; justify-content:space-between; } .hero { padding:25px 22px; } .date-fields { justify-content:flex-start; } .date-fields label { width:calc(50% - 5px); } .date-fields label:last-of-type { width:100%; } .date-fields input,.date-fields select { width:100%; } .metrics { grid-template-columns:1fr; } .bar-chart { height:190px; gap:4px; } .panel { padding:18px; } }