/* ==========================================================================
   Self-hosted fonts — §2 design spec
   Both fonts are OFL-licensed. woff2 files are embedded via Go embed.FS
   and served at /assets/fonts/*.woff2 by the console asset handler.

   Schibsted Grotesk: latin + latin-ext subsets (same file covers 400–700
   because Google Fonts serves an axis-range woff2 for variable-style families).

   IBM Plex Sans Thai: latin subset for Latin script + thai subset for Thai
   script; separate per-weight files (non-variable family).
   ========================================================================== */

/* -- Schibsted Grotesk: latin-ext -- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* -- Schibsted Grotesk: latin -- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- IBM Plex Sans Thai: latin, weight 400 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -- IBM Plex Sans Thai: latin, weight 500 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -- IBM Plex Sans Thai: latin, weight 600 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -- IBM Plex Sans Thai: latin, weight 700 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- IBM Plex Sans Thai: thai script, weight 400 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-thai-400.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* -- IBM Plex Sans Thai: thai script, weight 500 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-thai-500.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* -- IBM Plex Sans Thai: thai script, weight 600 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-thai-600.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* -- IBM Plex Sans Thai: thai script, weight 700 -- */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-thai-thai-700.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Zetabet Partner Console — BENTO OPS tokens (ported from docs/design/bento-console).
   Tokens live under [data-theme] on <html>; toggled by setting the attribute (no JS inline vars). */
:root,
[data-theme="light"] {
  --bg:#eceef2; --bg2:#f3f5f8; --panel:#ffffff; --panel2:#f4f6f9; --line:#e4e8ee;
  --ink:#141a20; --muted:#69727d; --muted2:#aeb6c0;
  --pri:#0e9488; --pri-ink:#ffffff; --pos:#0e9488; --info:#3b6ef5; --warn:#d98309;
  --crit:#e8453f; --accent2:#f2643d;
  --chip-bg:rgba(20,26,32,.045);
  --shadow:0 2px 6px rgba(20,30,45,.05); --shadow-lg:0 20px 48px rgba(20,30,45,.14);
}
[data-theme="dark"] {
  --bg:#0c1113; --bg2:#10161a; --panel:#161d22; --panel2:#1d262c; --line:#232d34;
  --ink:#eaf1f4; --muted:#8593a0; --muted2:#4a5763;
  --pri:#2dd4bf; --pri-ink:#05201d; --pos:#2dd4bf; --info:#5b8cff; --warn:#f0ac3c;
  --crit:#ff5d57; --accent2:#ff7a52;
  --chip-bg:rgba(255,255,255,.05);
  --shadow:0 1px 0 rgba(255,255,255,.02); --shadow-lg:0 22px 52px rgba(0,0,0,.5);
}

/* mode-independent family / radius / spacing (from docs/design/bento-console/theme.css .bento) */
.bento {
  --font:"Schibsted Grotesk","IBM Plex Sans Thai",system-ui,-apple-system,sans-serif; /* §2 Thai fallback */
  --radius-xl:22px; --radius:18px; --radius-sm:14px; --radius-pill:999px;
  --pad-tile:18px; --gap:14px;
  font-family:var(--font);
  background-color:var(--bg); color:var(--ink);
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease, color .3s ease;
}
.bento *, .bento *::before, .bento *::after { box-sizing:border-box; }
.bento ::selection { background: color-mix(in srgb, var(--pri) 26%, transparent); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- scrollbars (themed, slim) ---- */
.bento *::-webkit-scrollbar { width: 10px; height: 10px; }
.bento *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.bento *::-webkit-scrollbar-thumb:hover { background: var(--muted2); background-clip: padding-box; }

/* ==========================================================================
   Card / tile
   ========================================================================== */
.b-card {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background-color .3s ease, border-color .3s ease, transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.b-card.hoverable { cursor: default; }
.b-card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.b-card.flush { padding: 0; overflow: hidden; }

/* ==========================================================================
   Nav — collapsed icon rail that expands on hover to reveal labels
   ========================================================================== */
.b-railitem {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0; overflow: hidden;
  width: 48px; height: 44px; padding: 0 10px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--muted); background-color: transparent;
  font-family: inherit; border: none; text-decoration: none;
  transition: background-color .15s, color .15s, width .2s cubic-bezier(.2,.7,.3,1);
}
/* collapsed: highlight is a rounded square fitting the rail; widens to a pill on hover */
.b-rail:hover .b-railitem, .b-rail:focus-within .b-railitem { width: 208px; }
.b-railitem:hover { color: var(--ink); background-color: var(--chip-bg); }
.b-railitem.active { color: var(--pri); background-color: color-mix(in srgb, var(--pri) 14%, transparent); }
.b-railicon { flex-shrink: 0; width: 28px; display: flex; align-items: center; justify-content: center; }
.b-raillabel { font-size: 13.5px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .15s ease; }
.b-rail:hover .b-raillabel, .b-rail:focus-within .b-raillabel { opacity: 1; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.b-btn {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-pill); padding: 10px 18px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background-color .16s, color .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.b-btn:active { transform: scale(.975); }
.b-btn-primary { background-color: var(--pri); color: var(--pri-ink); }
.b-btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--pri) 38%, transparent); transform: translateY(-1px); }
.b-btn-ghost { background-color: var(--panel); color: var(--ink); border-color: var(--line); }
.b-btn-ghost:hover { background-color: var(--chip-bg); border-color: var(--muted2); }

.b-iconbtn {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--line); background-color: var(--panel); color: var(--muted);
  transition: background-color .15s, color .15s, border-color .15s, transform .12s;
  position: relative;
}
.b-iconbtn:hover { color: var(--ink); border-color: var(--muted2); transform: translateY(-1px); }
.b-iconbtn:active { transform: scale(.95); }

/* notification dot */
.b-dot-badge { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--crit); border: 2px solid var(--panel); }

/* ==========================================================================
   Theme toggle
   ========================================================================== */
.b-toggle {
  display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background-color: var(--panel2); cursor: pointer;
}
.b-toggle span {
  width: 32px; height: 30px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: background-color .2s, color .2s;
}
.b-toggle span.on { background-color: var(--panel); color: var(--pri); box-shadow: var(--shadow); }

.b-lang-toggle {
  display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background-color: var(--panel2);
}
.b-lang-toggle button {
  min-width: 34px; height: 30px; padding: 0 9px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; letter-spacing: .02em;
}
.b-lang-toggle button.on { background-color: var(--panel); color: var(--pri); box-shadow: var(--shadow); }

/* ==========================================================================
   Search field (top bar) + form inputs
   ========================================================================== */
.b-search {
  display: flex; align-items: center; gap: 9px; padding: 0 15px; height: 40px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background-color: var(--panel); color: var(--muted); font-size: 13.5px; min-width: 230px;
  transition: border-color .15s, background-color .15s;
}
.b-search:hover { border-color: var(--muted2); }
.b-search:focus-within { border-color: var(--pri); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pri) 18%, transparent); }

/* topbar search form wrapper: anchors the absolute-positioned results dropdown */
.b-search-wrap { position: relative; margin-right: auto; max-width: 340px; flex: 1 1 auto; }
.b-search-input {
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: transparent; border: 0; outline: none; flex: 1 1 auto; min-width: 0; padding: 0;
}
.b-search-input::placeholder { color: var(--muted); }
.b-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* results dropdown (htmx target) */
.b-search-results:empty { display: none; }
.b-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
}
.b-search-panel {
  background-color: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 6px; max-height: 60vh; overflow-y: auto;
}
.b-search-empty { padding: 12px 14px; font-size: 13.5px; }
.b-search-group + .b-search-group { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.b-search-grouplabel {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted2); padding: 6px 10px 4px;
}
.b-search-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
  transition: background-color .12s;
}
.b-search-item:hover, .b-search-item:focus { background-color: var(--chip-bg); outline: none; }
.b-search-item-main { font-size: 13.5px; font-weight: 600; }
.b-search-item-sub { font-size: 12px; }

.b-field { display: grid; gap: 8px; }
.b-field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.b-input {
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background-color: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.b-input::placeholder { color: var(--muted2); }
.b-input:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pri) 18%, transparent); background-color: var(--panel); }

.b-alert {
  font-size: 13.5px; font-weight: 600; color: var(--crit);
  background-color: color-mix(in srgb, var(--crit) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent);
  border-radius: var(--radius-sm); padding: 11px 14px;
}

/* ==========================================================================
   Pills / tags
   ========================================================================== */
.b-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.b-pill .b-dot { width: 7px; height: 7px; border-radius: 999px; }
.b-tag {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 8px;
  font-size: 12px; font-weight: 600; background-color: var(--chip-bg); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* delta chip */
.b-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; }

/* ==========================================================================
   Tables
   ========================================================================== */
.b-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.b-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted2); padding: 15px 16px 11px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.b-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.b-table tbody tr { transition: background-color .14s; }
.b-table tbody tr:hover { background-color: var(--chip-bg); }
.b-table tbody tr:last-child td { border-bottom: none; }
.b-table .num { font-variant-numeric: tabular-nums; }
.b-table .mono { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.b-link { color: var(--pri); font-weight: 600; text-decoration: none; cursor: pointer; transition: opacity .14s ease; }
.b-link:hover { text-decoration: none; opacity: .72; }

/* progress bar */
.b-progress { height: 6px; border-radius: 999px; background-color: var(--chip-bg); overflow: hidden; min-width: 54px; }
.b-progress i { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.3,1); }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.b-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.b-h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.025em; }
.b-h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.b-metric { font-size: 33px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.b-muted { color: var(--muted); }

/* entrance: opacity-safe (animate transform only, never trap at opacity 0) */
@keyframes bRise { from { transform: translateY(10px); } to { transform: none; } }
.b-rise { animation: bRise .45s cubic-bezier(.2,.7,.3,1) both; }

/* page transition: transform only — never trap content at opacity 0 */
@keyframes bFade { from { transform: translateY(7px); } to { transform: none; } }
.b-page { animation: bFade .32s ease both; }

@media (prefers-reduced-motion: reduce) { .b-rise, .b-page { animation: none; } .b-rail-inner, .b-railitem { transition: none; } }
.bento :focus-visible { outline: 3px solid color-mix(in srgb, var(--pri) 55%, transparent); outline-offset: 2px; }

/* ---- shell ---- */
.b-shell { height:100vh; display:flex; overflow:hidden; }
/* rail keeps a fixed 76px slot in flow; the inner panel overlays + expands on hover (no content reflow) */
.b-rail { width:76px; flex-shrink:0; position:relative; z-index:40; }
.b-rail-inner {
  position:absolute; top:0; left:0; bottom:0; width:76px; overflow:hidden;
  background-color:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; padding:16px 14px; gap:5px;
  transition:width .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.b-rail:hover .b-rail-inner, .b-rail:focus-within .b-rail-inner { width:236px; box-shadow:var(--shadow-lg); }
.b-rail-brand { width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,var(--pri),var(--info)); margin:0 0 12px 4px; flex-shrink:0; }
.b-rail-spacer { flex:1; }
.b-rail-logout { width:208px; flex-shrink:0; }
.b-main-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.b-topbar { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:14px 24px; border-bottom:1px solid var(--line); flex-shrink:0; }
.b-topbar .b-search-wrap { margin-right:auto; max-width:340px; }
.b-topbar .b-search { width:100%; cursor:text; }
.b-kbd { font-size:11px; font-weight:700; color:var(--muted2); border:1px solid var(--line); border-radius:6px; padding:2px 6px; margin-left:auto; }
.b-userchip { display:flex; align-items:center; gap:10px; padding-left:6px; }
.b-userchip .avatar { width:38px; height:38px; border-radius:999px; background:linear-gradient(135deg,var(--pri),var(--info)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; flex-shrink:0; }
.b-userchip .meta { line-height:1.2; }
.b-userchip .meta .name { font-size:13.5px; font-weight:700; }
.b-userchip .meta .sub { font-size:11.5px; color:var(--muted); }
.b-content { flex:1; min-height:0; overflow-y:auto; padding:22px 24px; }
.b-page { display:flex; flex-direction:column; gap:16px; min-height:100%; }

/* ---- dashboard ---- */
.b-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.b-bento { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); align-items:stretch; }
.b-hero { grid-column:span 2; padding:20px; border:none; color:#fff; display:flex; flex-direction:column; min-height:200px; overflow:hidden; border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--pri), color-mix(in srgb, var(--pri) 60%, #000)); }
.b-hero .head { display:flex; justify-content:space-between; align-items:center; }
.b-hero .value { font-size:34px; font-weight:700; letter-spacing:-.025em; margin:8px 0 2px; }
.b-hero .chart { flex:1; min-height:0; display:flex; align-items:flex-end; opacity:.95; }
.b-hero .hours { display:flex; justify-content:space-between; font-size:11px; opacity:.78; margin-top:6px; }
.b-tile { padding:18px; display:flex; flex-direction:column; gap:10px; }
.b-tile-center { align-items:center; justify-content:center; }
.b-tilelabel { font-size:13px; color:var(--muted); font-weight:600; align-self:flex-start; }
.b-legend { width:100%; display:flex; flex-direction:column; gap:7px; }
.b-legend .row { display:flex; align-items:center; gap:8px; font-size:12px; }
.b-legend .row .swatch { width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.b-legend .row .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-legend .row .pct { color:var(--muted); }
.b-grid2 { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:var(--gap); }
.b-rowgrid { display:grid; grid-template-columns:1.4fr .7fr 1fr .8fr; align-items:center; }
.b-rowgrid.head { font-size:10.5px; color:var(--muted2); font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding-bottom:8px; border-bottom:1px solid var(--line); }
.b-rowgrid.row { padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.b-incident { display:flex; gap:11px; padding:11px; border-radius:var(--radius-sm); border:1px solid var(--line); align-items:flex-start; }
.b-incident .body { flex:1; min-width:0; }
.b-incident .body .kind { font-size:13px; font-weight:600; }
.b-incident .body .detail { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.b-incident .age { font-size:11.5px; color:var(--muted2); font-variant-numeric:tabular-nums; }
@media (max-width:1024px){ .b-kpis,.b-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } .b-hero{ grid-column:span 2; } .b-grid2{ grid-template-columns:1fr; } }
@media (max-width:620px){ .b-kpis,.b-bento{ grid-template-columns:1fr; } }

/* ==========================================================================
   Auth (login / MFA) — centered card on the bento surface
   ========================================================================== */
.b-auth-shell {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--pri) 12%, transparent), transparent 60%),
    var(--bg);
}
.b-auth-controls { position: absolute; top: 22px; right: 24px; display: flex; gap: 10px; align-items: center; }
.b-auth-card { width: 100%; max-width: 396px; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 22px; }
.b-auth-brand { display: flex; flex-direction: column; gap: 7px; }
.b-auth-logo {
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--pri), var(--info));
}
.b-auth-brand .b-h1 { font-size: 24px; }
.b-auth-copy { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.b-auth-form { display: flex; flex-direction: column; gap: 16px; }
.b-auth-form .b-btn { width: 100%; padding: 12px 18px; }
@media (max-width:620px){ .b-auth-card { padding: 24px 22px; } }

/* ==========================================================================
   Reports page — bento card grid (§9.5)
   Reuses existing tokens (var(--…)); no new color system.
   ========================================================================== */
.b-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.b-report-card {
  padding: var(--pad-tile);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b-report-desc {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  flex: 1;
}
.b-report-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  font-size: 13.5px;
}
@media (max-width:1024px) { .b-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px)  { .b-report-grid { grid-template-columns: 1fr; } }