:root{
  --bg:#f5f6fa; --ink:#0b1220; --ink2:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --card:#ffffff; --soft:#f9fafb; --accent:#c9a14a; --accent2:#9a7b33;
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; --up:#10b981; --down:#ef4444;
  --radius:12px; --shadow:0 1px 3px rgba(11,18,32,.06), 0 8px 24px rgba(11,18,32,.04);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--accent2); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ color:var(--ink); margin:0 0 12px; line-height:1.25; }
h1{ font-size:26px; font-weight:800; letter-spacing:-.01em; }
h2{ font-size:18px; font-weight:700; }
h3{ font-size:14px; font-weight:700; }
.muted{ color:var(--muted); }
.small{ font-size:12.5px; }
code{ font:12.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--soft); padding:1px 6px; border-radius:5px; border:1px solid var(--line); }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:var(--ink); color:#fff; border-bottom:3px solid var(--accent); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ font-weight:900; letter-spacing:1px; color:var(--accent); }
.brand-mark-light{ font-weight:900; letter-spacing:1px; color:#fff; }
.brand-tag{ margin-left:12px; color:#9aa4b2; font-size:11px; letter-spacing:.6px; text-transform:uppercase; }
.topnav{ display:flex; align-items:center; gap:18px; font-size:14px; }
.navlink{ color:#cbd2db; }
.navlink:hover{ color:#fff; text-decoration:none; }
.useremail{ color:#9aa4b2; font-size:12.5px; }
.linkbtn{ background:none; border:none; color:#cbd2db; cursor:pointer; padding:0; font:inherit; }
.linkbtn:hover{ color:#fff; text-decoration:underline; }
.linkbtn.danger{ color:#fca5a5; }
.linkbtn.danger:hover{ color:#fff; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container{ max-width:1180px; margin:0 auto; padding:28px 24px 64px; }
.pagefoot{ max-width:1180px; margin:24px auto 32px; padding:18px 24px; color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); }
.pagefoot a{ color:var(--muted); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:8px 4px 22px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.eyebrow{ color:var(--accent2); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700; }

.rangepicker{ display:flex; align-items:center; gap:6px; }
.rangebtn{ background:var(--card); border:1px solid var(--line); padding:6px 12px; border-radius:999px; color:var(--ink2); font-size:13px; }
.rangebtn:hover{ text-decoration:none; border-color:var(--accent2); }
.rangebtn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:18px 0; box-shadow:var(--shadow); }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.card-head h2{ margin:0; }
.card.empty{ text-align:center; padding:40px 24px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0; }
.two-col.tight{ gap:14px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

/* ── KPIs ──────────────────────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:8px 0 12px; }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); border-top:3px solid var(--accent); }
.kpi-label{ font-size:11.5px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; font-weight:700; }
.kpi-value{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-top:6px; }
.kpi-foot{ font-size:12px; color:var(--muted); margin-top:4px; }

.kpis-inline{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.kpis-inline > div{ background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.kpis-inline strong{ font-size:20px; font-weight:800; color:var(--ink); }
.kpis-inline em{ font-style:normal; font-weight:700; font-size:12px; }
.kpis-inline em.up{ color:var(--up); }
.kpis-inline em.down{ color:var(--down); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th,.table td{ padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th{ color:var(--muted); font-weight:700; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; background:var(--soft); }
.table td.num,.table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.table.small th,.table.small td{ padding:6px 8px; font-size:12.5px; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form{ display:flex; flex-direction:column; gap:12px; max-width:520px; }
.form label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink2); font-weight:600; }
.form input,.form select{ font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.form input:focus,.form select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,161,74,.18); }
.form.card{ max-width:none; }
.inlineform{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.actions{ display:flex; gap:10px; align-items:center; margin-top:6px; }
.inline{ display:inline; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.btn:hover{ text-decoration:none; border-color:var(--ink2); }
.btn.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.primary:hover{ background:var(--ink2); border-color:var(--ink2); }

/* ── Pills + Alerts ────────────────────────────────────────────────────── */
.pill{ display:inline-block; padding:2px 9px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--ink2); font-size:11.5px; font-weight:600; }
.pill.ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.pill.warn{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.alert{ padding:11px 14px; border-radius:8px; margin:0 0 14px; border:1px solid var(--line); }
.alert.error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.alert.ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }

/* ── Auth-Card ─────────────────────────────────────────────────────────── */
body.auth main{ display:flex; align-items:center; justify-content:center; min-height:60vh; }
.auth-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; max-width:420px; width:100%; box-shadow:var(--shadow); }
.auth-card h1{ margin-bottom:6px; }
.auth-card .form{ margin-top:16px; }

/* ── Chart ─────────────────────────────────────────────────────────────── */
.chart{ width:100%; height:240px; }

/* ── Device row ────────────────────────────────────────────────────────── */
.device-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.device-row > div{ background:var(--soft); border-radius:8px; padding:8px 12px; }
.dev-label{ display:block; color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.device-row strong{ font-size:18px; font-weight:800; color:var(--ink); }

.sub{ margin-bottom:8px; color:var(--ink2); font-size:13px; font-weight:700; }
.footnote{ margin-top:24px; }