/* Shared by the five main pages (dashboard, insights, payoff, breakdown, audit): colors, base
   text, the top bar and a few small helpers. Each page's own <style> comes after this one and
   holds only what is particular to that page. */

:root{--bg:#f5f6f8;--card:#fff;--fg:#0f1419;--muted:#6b7280;--line:#e5e7eb;--accent:#0a66ff;--accent2:#00b386;--warn:#d97706;--err:#dc2626;--chip:#eef2ff;--r:14px}
@media (prefers-color-scheme:dark){:root{--bg:#0d1014;--card:#161a20;--fg:#e8eaed;--muted:#9aa3ad;--line:#262c34;--chip:#1e2533}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}

/* Top bar. The dashboard writes its own; the other pages get theirs from PC.topBar() in app.js,
   marked .topbar. A page can set --bar-gap for the space between the bar's items. */
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{max-width:1100px;margin:auto;display:flex;align-items:center;gap:var(--bar-gap,14px);padding:12px 20px}
.logo{font-weight:700;display:flex;align-items:center;gap:8px;color:var(--fg)}
.logo i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-block}
.badge{font-size:12px;padding:2px 8px;border-radius:99px;background:#f59e0b22;color:var(--warn);font-weight:600}
.sp{flex:1}
nav a{color:var(--muted);font-weight:600;font-size:14px;padding:6px 10px;border-radius:8px}
nav a.on{color:var(--fg);background:var(--chip)}
#out{font:inherit;font-weight:600;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:9px;padding:7px 12px;cursor:pointer}
/* Narrow screens: the bar tightens and drops the badge, then the logo's name, and the links
   scroll sideways. Nothing may run off the screen, or Safari zooms the whole page out. */
@media (max-width:820px){.bar{gap:8px;padding:10px 14px}.topbar .badge{display:none}nav a{padding:6px 8px}}
@media (max-width:560px){.topbar .logo{font-size:0;gap:0}.topbar .sp{display:none}nav{flex:1;display:flex;overflow-x:auto;scrollbar-width:none}nav a{white-space:nowrap}}

/* Small helpers */
.muted{color:var(--muted)} .small{font-size:13px}
.up{color:var(--err)} .down{color:var(--accent2)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse} td,th{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
th{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
@media (max-width:820px){.hide-sm{display:none}}