:root { --ink:#e9edf4; --muted:#8e9aad; --line:#273244; --canvas:#0a0f18; --panel:#101926; --accent:#c8ff4a; --danger:#ff8c8c; }
.logout-mobile { display:none; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; } .shell { display:grid; grid-template-columns:235px minmax(0,1fr); min-height:100vh; } .sidebar { padding:28px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:44px; } .brand { color:var(--ink); text-decoration:none; font-size:23px; font-weight:750; letter-spacing:-.06em; } .brand span, h1 span { color:var(--accent); } .brand small { display:block; color:var(--muted); font-size:9px; letter-spacing:.12em; margin-top:5px; } nav { display:grid; gap:7px; } nav a { color:var(--muted); padding:10px 12px; border-radius:7px; text-decoration:none; } nav a[aria-current="page"], nav a:hover { color:var(--ink); background:#172335; } .logout { margin-top:auto; } button { border:0; border-radius:7px; background:var(--accent); color:#0c1302; cursor:pointer; font:inherit; font-weight:700; padding:11px 14px; } .logout button { color:var(--muted); background:transparent; padding:8px 0; } main { padding:clamp(28px,5vw,72px); max-width:1280px; width:100%; } .page-heading { margin-bottom:35px; } h1,h2,p { margin-top:0; } h1 { font-size:clamp(32px,4vw,50px); letter-spacing:-.06em; line-height:1; margin-bottom:12px; } h2 { font-size:16px; margin:0; } .eyebrow { color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.13em; } .page-heading > p:last-child,.muted { color:var(--muted); } .metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:17px; } .metrics article,.panel,.login-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; } .metrics article { padding:20px; } .metrics p { color:var(--muted); font-size:12px; margin-bottom:10px; } .metrics strong { font-size:27px; letter-spacing:-.05em; }.metrics .state { font-size:17px; text-transform:capitalize; } .panel { padding:22px; margin-bottom:17px; } .panel-title { align-items:center; display:flex; justify-content:space-between; margin-bottom:20px; }.badge { border:1px solid var(--line); border-radius:99px; color:var(--accent); display:inline-block; font-size:11px; padding:3px 8px; text-transform:capitalize; }.details { display:flex; gap:52px; }.details dt { color:var(--muted); font-size:12px; }.details dd { margin:4px 0 0; }.table-scroll { overflow-x:auto; } table { border-collapse:collapse; min-width:640px; width:100%; } th { color:var(--muted); font-size:11px; letter-spacing:.08em; text-align:left; text-transform:uppercase; } td,th { border-bottom:1px solid var(--line); padding:12px 8px; } .empty { color:var(--muted); margin:0; }.login-page { align-items:center; display:flex; justify-content:center; min-height:100vh; padding:24px; }.login-card { max-width:420px; padding:34px; width:100%; }.login-card h1 { font-size:43px; }.login-card form { display:grid; gap:18px; }.login-card label { color:var(--muted); display:grid; font-size:13px; gap:6px; } input { background:#0b121d; border:1px solid var(--line); border-radius:6px; color:var(--ink); font:inherit; padding:11px; }.error { color:var(--danger); }.login-card button { margin-top:4px; }
.filters { align-items:end; background:color-mix(in srgb, var(--panel) 82%, transparent); border:1px solid var(--line); border-radius:10px; display:flex; flex-wrap:wrap; gap:12px; margin:0 0 17px; padding:16px; }.filters label { color:var(--muted); display:grid; flex:1 1 210px; font-size:12px; gap:5px; }.filters-wide label { flex-basis:155px; }.filters button { padding:10px 14px; }.filters select { appearance:none; background:#0b121d; border:1px solid var(--line); border-radius:6px; color:var(--ink); font:inherit; min-height:42px; padding:9px 11px; }.quiet-link,.external-link { color:var(--accent); font-size:13px; text-decoration:none; }.quiet-link { align-self:center; padding:10px 3px; }.external-link:hover,.quiet-link:hover { text-decoration:underline; }.pagination { align-items:center; display:flex; gap:14px; justify-content:flex-end; margin-top:19px; }.pagination a,.pagination span { font-size:13px; }.pagination a { color:var(--accent); text-decoration:none; }.pagination span { color:var(--muted); }.pagination a:hover { text-decoration:underline; }
@media (max-width:700px) { .shell { display:block; }.sidebar { align-items:center; border-bottom:1px solid var(--line); border-right:0; flex-direction:row; gap:18px; overflow-x:auto; padding:13px 18px; }.brand small,.logout-desktop { display:none; }.logout-mobile { display:block; }.logout-mobile button { color:var(--muted); background:transparent; font-size:13px; padding:7px; }nav { display:flex; margin-left:auto; }nav a { font-size:13px; padding:7px; } main { padding:30px 18px; }.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.details { display:grid; gap:16px; }.filters { align-items:stretch; display:grid; }.filters label { min-width:0; }.filters button,.quiet-link { width:100%; text-align:center; }.pagination { justify-content:space-between; } }