:root{--ink:#172033;--muted:#6b7485;--line:#e6e9ef;--surface:#fff;--canvas:#f5f7fa;--nav:#111827;--blue:#2563eb;--green:#059669;--red:#dc2626;--violet:#7c3aed}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--canvas)}body{margin:0;background:var(--canvas)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--nav);color:#cbd5e1;padding:24px 16px;display:flex;flex-direction:column}.logo{display:flex;gap:12px;align-items:center;color:white;padding:0 8px 24px}.logo span,.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#60a5fa,#2563eb);color:white;font-weight:800}.logo strong{font-size:15px}.sidebar nav{overflow:auto}.sidebar nav p{color:#64748b;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:22px 12px 8px}.sidebar nav a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;margin:2px 0}.sidebar nav a:hover{background:#1f2937;color:white}.sidebar-user{border-top:1px solid #293348;margin-top:auto;padding:18px 4px 0;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#334155;color:white;font-weight:700}.sidebar-user strong,.sidebar-user small{display:block;font-size:12px}.sidebar-user small{color:#718096;margin-top:2px}.sidebar-user button{border:0;background:none;color:#94a3b8;font-size:20px}.workspace{min-width:0}.topbar{height:64px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px}.environment{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--green);background:#ecfdf5;padding:6px 9px;border-radius:999px}.topbar time{font-size:13px;color:var(--muted)}.menu-toggle{display:none}.content{padding:34px;max-width:1600px;margin:auto}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:var(--blue);margin:0 0 7px}.page-heading h1{font-size:30px;letter-spacing:-.035em;margin:0}.page-heading p:not(.eyebrow){color:var(--muted);margin:7px 0 0}.freshness{font-size:12px;color:var(--muted);background:white;border:1px solid var(--line);padding:8px 12px;border-radius:999px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.metric{background:white;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:12px;padding:19px;box-shadow:0 2px 6px #17203308}.metric.danger{border-top-color:var(--red)}.metric.success{border-top-color:var(--green)}.metric.violet{border-top-color:var(--violet)}.metric.neutral{border-top-color:#64748b}.metric span,.metric small{display:block;color:var(--muted);font-size:11px}.metric strong{display:block;font-size:27px;margin:11px 0 7px;letter-spacing:-.035em}.metric:not(.static):hover{transform:translateY(-2px);box-shadow:0 8px 25px #17203312}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 6px #17203308}.chart-panel{padding:22px}.chart-panel header{display:flex;justify-content:space-between}.chart-panel h2{margin:0;font-size:17px}.chart-panel header>span{font-size:11px;color:var(--muted)}.line-chart{width:100%;height:260px;margin-top:24px;overflow:visible;background:repeating-linear-gradient(0deg,transparent 0,transparent 24%,#eef1f5 25%)}.line-chart polyline{fill:none;stroke:#3b82f6;stroke-width:1.2;vector-effect:non-scaling-stroke}.line-chart.green polyline{stroke:var(--green)}.table-panel{overflow:hidden}.table-scroll{overflow:auto;max-height:calc(100vh - 210px)}table{border-collapse:collapse;width:100%;font-size:12px}th{position:sticky;top:0;background:#f8fafc;color:#667085;text-align:left;text-transform:uppercase;letter-spacing:.07em;font-size:9px;padding:13px 15px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:12px 15px;border-bottom:1px solid #eef0f4;max-width:420px}tbody tr:hover{background:#f8fbff}.search-box{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700}.search-box input,.form-grid input,.form-grid select,.login-card input{display:block;margin-top:6px;border:1px solid #d5dae3;border-radius:8px;background:white;padding:10px 12px;min-width:250px;color:var(--ink)}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7dce5;background:white;padding:10px 15px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer}.button.primary{background:var(--blue);border-color:var(--blue);color:white}.button.danger{background:var(--red);border-color:var(--red);color:white}.form-grid{display:flex;align-items:end;gap:12px;padding:20px;margin-bottom:20px}.form-grid label{font-size:11px;font-weight:700;color:var(--muted)}.login-page{background:#0f172a}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.25fr .75fr}.login-brand{padding:9vw;color:white;background:radial-gradient(circle at 20% 20%,#1e4d91,#101827 55%);display:flex;flex-direction:column;justify-content:center}.login-brand .brand-mark{margin-bottom:50px}.login-brand h1{font-size:54px;letter-spacing:-.05em;margin:0}.login-brand>p:last-child{color:#a8b4c8;max-width:560px;line-height:1.7}.login-card{background:white;padding:9vw 6vw;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:28px;margin:0 0 30px}.login-card label{display:block;font-size:12px;font-weight:700;color:#596273;margin:15px 0 0}.login-card input{width:100%;margin-top:7px}.login-card .check{display:flex;align-items:center;gap:8px}.login-card .check input{width:auto;margin:0}.login-card .button{width:100%;margin-top:25px}.alert-danger{color:#991b1b;background:#fef2f2;padding:12px;border-radius:8px;font-size:13px}.empty-state{text-align:center;padding:15vh 20px}.status-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--red)}
.table-panel tbody tr:nth-child(even){background:#f1f4f8}.table-panel tbody tr:nth-child(even):hover{background:#e8eef7}.table-panel tbody tr:nth-child(odd):hover{background:#f8fbff}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-brand{display:none}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:10;width:260px;transform:translateX(-100%);transition:.2s}.nav-open .sidebar{transform:none}.menu-toggle{display:block;border:0;background:none;font-size:20px}.topbar{padding:0 18px}.content{padding:22px 16px}.metric-grid{grid-template-columns:1fr}.page-heading{align-items:stretch;flex-direction:column}.search-box input{min-width:0;width:100%}.form-grid{flex-direction:column;align-items:stretch}}