@import url('/ds/tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ============================================================
   Maki Wi-Fi admin. Light (default) uses the makiwifi.com colours: white and GitHub-grey page, ink
   buttons, amber accents (the lemur's eyes). Dark is optional (Preferences).
   Overrides the shared design tokens for the admin only.
   ============================================================ */
/* Dark (optional, Preferences): the makiwifi.com dark theme (GitHub-like), amber accent. */
:root {
  color-scheme: dark;
  --bg-base:    #0D1117;
  --bg-surface: #151B23;
  --bg-raised:  #1C232D;
  --bg-overlay: #1C232D;
  --bg-inset:   #010409;
  --input-bg:   #0D1117;
  --side-bg:    #010409;
  --line-faint:   #21262D;
  --line-subtle:  #262C36;
  --line-default: #30363D;
  --line-strong:  #3D444D;
  --ink-primary:   #F0F6FC;
  --ink-secondary: #C9D1D9;
  --ink-muted:     #9198A1;
  --ink-faint:     #6E7681;
  --ink-inverse:   #0D1117;
  /* "blue" is the accent slot of the shared tokens: links, focus rings, active items. */
  --blue:      #F5B544;
  --blue-rgb:  245 181 68;
  --blue-dim:  #E69512;
  --blue-deep: #3D2E12;
  --accent-hover: #F8C66A;
  --grad-a: #2A3B56; --grad-a-rgb: 42 59 86;
  --grad-b: #1B2230; --grad-b-rgb: 27 34 48;
  /* Solid buttons: light on dark, like the site */
  --btn-a: #F0F6FC; --btn-b: #F0F6FC; --btn-a-hover: #D1D9E0; --on-btn: #0D1117;
  --lime: #3FB950; --lime-rgb: 63 185 80; --lime-deep: rgb(63 185 80 / 0.15);
  --amber: #D29922; --amber-rgb: 210 153 34; --amber-deep: rgb(210 153 34 / 0.15);
  --red: #F85149; --red-rgb: 248 81 73; --red-deep: rgb(248 81 73 / 0.14);
  --sky: #4DAAFC; --sky-rgb: 77 170 252;
  --row-hover: rgb(240 246 252 / 0.04);
  --head-row: rgb(240 246 252 / 0.02);
  --head-bg: rgb(13 17 23 / 0.88);
  --shadow-c: 0 0 0;
  --active-nav: rgb(245 181 68 / 0.14);
  --maki-amber: #F5A524;
  --glow-cyan-sm: none;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-pop: 0 16px 36px -12px rgb(var(--shadow-c) / 0.7), 0 0 0 1px var(--line-default);
  --shadow-lg: 0 24px 60px -16px rgb(var(--shadow-c) / 0.75);
  --ls-label: 0.05em;
  --side-w: 248px;
}
/* Light: the makiwifi.com page colours (white and GitHub grey), ink buttons, amber accent. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base:    #F6F8FA;
  --bg-surface: #FFFFFF;
  --bg-raised:  #EFF2F5;
  --bg-overlay: #FFFFFF;
  --bg-inset:   #F6F8FA;
  --input-bg:   #FFFFFF;
  --side-bg:    #FFFFFF;
  --line-faint:   #EEF1F4;
  --line-subtle:  #E1E6EB;
  --line-default: #D1D9E0;
  --line-strong:  #B7C0CA;
  --ink-primary:   #121C2C;
  --ink-secondary: #3D4450;
  --ink-muted:     #59636E;
  --ink-faint:     #8C959F;
  --ink-inverse:   #FFFFFF;
  --blue:      #8A5100;
  --blue-rgb:  138 81 0;
  --accent-hover: #A56200;
  --grad-a: #2A3B56; --grad-a-rgb: 42 59 86;
  --grad-b: #121C2C; --grad-b-rgb: 18 28 44;
  --btn-a: #121C2C; --btn-b: #121C2C; --btn-a-hover: #26364F; --on-btn: #FFFFFF;
  --lime: #1A7F37; --lime-rgb: 26 127 55; --lime-deep: rgb(26 127 55 / 0.10);
  --amber: #9A6700; --amber-rgb: 154 103 0; --amber-deep: rgb(154 103 0 / 0.11);
  --red: #CF222E; --red-rgb: 207 34 46; --red-deep: rgb(207 34 46 / 0.09);
  --sky: #0969DA; --sky-rgb: 9 105 218;
  --row-hover: rgb(18 28 44 / 0.03);
  --head-row: rgb(18 28 44 / 0.02);
  --head-bg: rgb(246 248 250 / 0.9);
  --shadow-c: 18 28 44;
  --active-nav: rgb(245 165 36 / 0.20);
  --shadow-pop: 0 14px 32px -12px rgb(var(--shadow-c) / 0.22), 0 0 0 1px var(--line-default);
  --shadow-lg: 0 20px 50px -18px rgb(var(--shadow-c) / 0.25);
  --glow-cyan-sm: none;
}
/* Compact density */
:root[data-density="compact"] body { font-size: 13px; }
:root[data-density="compact"] .dt-th, :root[data-density="compact"] .dt-td { padding: 7px 10px; }
:root[data-density="compact"] .card { padding: 14px; margin-bottom: 12px; }
:root[data-density="compact"] .sidebar nav a { padding: 5px 10px; }

* { box-sizing: border-box; }
/* The sidebar stays put; only the content column scrolls. */
html, body { height: 100%; }
body { margin: 0; display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg-base); color: var(--text-body);
  font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; }

/* ---------- sidebar ---------- */
.sidebar { width: var(--side-w); flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; padding: 18px 14px 14px;
  background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg) 100%); border-right: 1px solid var(--line-subtle); }
/* Logo block sized so "Administration" lines up with the page header's subtitle. */
.sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 1px 6px 18px; text-decoration: none; flex: none; }
.sidebar .brand img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 14px rgb(var(--blue-rgb) / 0.35)); }
.sidebar .brand b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; white-space: nowrap; }
.sidebar .brand small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
/* Only the menu scrolls; the brand and the footer stay in place. */
.sidebar nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; }
.nav-sec { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 14px 10px 5px; }
.nav-sec:first-child { padding-top: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; color: var(--text-body); text-decoration: none; padding: 7px 10px;
  border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500; cursor: pointer; position: relative; transition: background .15s, color .15s; }
.sidebar nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.sidebar nav a:hover { background: var(--row-hover); color: var(--text-strong); }
.sidebar nav a.active { background: var(--active-nav); color: var(--text-strong); }
.sidebar nav a.active svg { opacity: 1; color: var(--blue); }
.sidebar nav a.active::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
.sidebar nav a.ext { color: var(--text-muted); }
.sidebar nav a.ext i { margin-left: auto; font-style: normal; font-size: 12px; opacity: .6; }
.side-foot { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: var(--radius-lg);
  background: rgb(var(--blue-rgb) / 0.06); border: 1px solid var(--line-subtle); }
.side-me { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.side-me > i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 700; font-size: 13px;
  color: #fff; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.side-me b { display: block; font-size: 13px; color: var(--text-strong); font-weight: 600; }
.side-me small { display: block; font-size: 11.5px; color: var(--text-muted); }
.side-logout { width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--line-default); background: transparent;
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer; flex: none; transition: .15s; }
.side-logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-logout:hover { color: var(--red); border-color: rgb(var(--red-rgb) / 0.5); background: var(--red-deep); }
.mtop, .nav-scrim { display: none; }

/* ---------- content ---------- */
.content { flex: 1; min-width: 0; padding: 28px 36px 40px; overflow: auto; position: relative;
  background: var(--bg-base); }
#view { max-width: 1440px; margin: 0 auto; }
h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text-strong); }
.sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 22px; }
.card { background: linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent 40%), var(--bg-surface); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px -18px rgb(var(--shadow-c) / 0.8); }
.card h2 { font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 14px; font-weight: 700; }

/* ---------- lists (div tables) ----------
   .dt > .dt-head / .dt-body > .dt-row > .dt-th / .dt-td. Desktop: a grid whose
   rows share the column tracks (subgrid; --n columns set by admin.js). Phones:
   each row becomes a card, every value led by its column label. */
.dt { display: grid; grid-template-columns: repeat(var(--n, 1), auto); width: 100%; font-size: 13.5px; }
.dt-head, .dt-body, .dt-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.dt-row { border-bottom: 1px solid var(--line-subtle); transition: background .12s; }
.dt-body > .dt-row:last-child { border-bottom: 0; }
.dt-body > .dt-row:hover { background: var(--row-hover); }
.dt-th, .dt-td { padding: 11px 12px; min-width: 0; align-self: center; text-align: left; overflow-wrap: anywhere; }
.dt-td { color: var(--text-body); }
.dt-th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--ls-label); }
.dt-head > .dt-row { background: var(--head-row); }
.dt-td[colspan], .dt-th[colspan] { grid-column: 1 / -1; }
.dt-row[hidden], .dt-row.pg-hide, .dt-row.filter-hide { display: none; }
.dt-v { display: contents; }
.mono { font-family: var(--font-mono); color: var(--text-strong); font-size: 12.5px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; line-height: 1.5; white-space: nowrap; }
.pill.unused, .pill.on, .pill.active { background: var(--lime-deep); color: var(--lime); }
.pill.used { background: var(--surface-raised); color: var(--text-muted); }
.pill.revoked, .pill.off, .pill.expired { background: var(--red-deep); color: var(--red); }
.pill.scheduled { background: var(--amber-deep); color: var(--amber); }

.btn { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line-default); background: rgb(255 255 255 / 0.03);
  color: var(--text-strong); border-radius: var(--radius-md); padding: 8px 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--line-strong); background: rgb(var(--blue-rgb) / 0.08); }
.btn.primary { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); border-color: transparent; color: var(--on-btn); box-shadow: var(--glow-cyan-sm); }
.btn.primary:hover { background: var(--btn-a-hover); color: var(--on-btn); }
.btn.danger { color: var(--red); border-color: rgb(var(--red-rgb) / 0.35); background: transparent; }
.btn.danger:hover { background: var(--red-deep); border-color: var(--red); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-body); }
input, select { font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--line-default); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--text-strong); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline: none; border-color: rgb(var(--blue-rgb) / 0.8); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / 0.18); }
input::placeholder { color: var(--text-faint); }

.muted { color: var(--text-muted); }
.empty { color: var(--text-muted); font-size: 13.5px; padding: 26px 8px; text-align: center; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.codes .c { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 10px; text-align: center;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 1px; color: var(--text-strong); background: var(--surface-inset); }
.right { margin-left: auto; }

/* ---------- gated screens (login / wizard) ---------- */
body.gated .sidebar, body.gated .mtop { display: none; }
body.gated .content { display: grid; align-content: start; background: radial-gradient(700px 400px at 50% 0%, rgb(var(--blue-rgb) / 0.16), transparent 70%), var(--bg-base); }
.gate { max-width: 440px; width: 100%; margin: 9vh auto; background: var(--bg-surface); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-lg); }
.gate::before { content: ""; display: block; width: 84px; height: 68px; margin-bottom: 18px;
  background: url('/m/logo.svg') no-repeat left center / contain; filter: drop-shadow(0 8px 18px rgb(var(--blue-rgb) / 0.4)); }
/* Fixed width: the card keeps the same size in French and English. */
body.gated #view { width: 100%; }
.gate { width: min(440px, 100%); }
.gate.gate-wide { width: min(620px, 100% - 32px); max-width: none; }
/* Language and theme toggles, top right of the screen */
.gate-tools { position: fixed; top: 18px; right: 22px; z-index: 5; display: flex; gap: 10px; }
.gate-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--line-default); box-shadow: 0 2px 8px -4px rgb(var(--shadow-c) / 0.3); }
.gate-toggle button { min-width: 38px; height: 30px; padding: 0 10px; display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-muted); font: 700 12px/1 var(--font-sans); letter-spacing: 0.04em; }
.gate-toggle button:hover { color: var(--text-strong); }
.gate-toggle button.on { background: var(--btn-b); color: var(--on-btn); cursor: default; }
.gate-toggle button:focus-visible { outline: 2px solid rgb(var(--blue-rgb) / 0.6); outline-offset: 1px; }
.gate-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate h1 { font-size: 22px; margin: 0 0 4px; }
/* Sign-in card: sized for the French title, centred on the screen, centred header, full-width button. */
body.gated .content:has(.gate-login) { align-content: center; min-height: 100%; }
.gate.gate-login { width: min(372px, 100%); margin: 48px auto; padding: 36px 32px 32px; }
.gate-login::before { width: 64px; height: 64px; margin: 0 auto 18px; background-position: center; }
.gate-login h1 { text-align: center; font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.gate-login .sub { text-align: center; margin-bottom: 26px; }
.gate-login .field { margin-bottom: 12px; }
.gate-login .field input { height: 44px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
.gate-login .btn.primary { width: 100%; height: 44px; margin-top: 8px; font-size: 14px; border-radius: 10px; }
@media (max-width: 400px) { .gate.gate-login { padding: 28px 22px 24px; } .gate-login h1 { font-size: clamp(18px, 6vw, 22px); } }
.gate .sub { margin-bottom: 18px; }
.gate .field { margin-bottom: 12px; }
.gate .field input, .gate .field select { width: 100%; }
.steps { display: flex; gap: 10px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.steps b { color: var(--blue); }
.kvs { font-size: 13px; line-height: 1.8; color: var(--text-body); }
.kvs a { color: var(--link); }
.kvs code { background: var(--surface-inset); padding: 1px 6px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 12px; }
.ok { color: var(--lime); }
.bad { color: var(--red); }
pre.cfg { background: var(--bg-inset); color: var(--text-body); padding: 14px; border-radius: var(--radius-md); font-size: 12px;
  overflow: auto; white-space: pre-wrap; border: 1px solid var(--line-subtle); font-family: var(--font-mono); }

/* ---------- Stage 0.11 additions ---------- */

/* form controls admin.css didn't cover yet */
textarea { font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--line-default); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--text-strong); resize: vertical; width: 100%; }
textarea:focus { outline: none; border-color: rgb(var(--blue-rgb) / 0.7); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / 0.14); }
input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--blue); }

/* extra severity / state pills */
.pill.info { background: rgb(var(--sky-rgb) / 0.16); color: var(--sky); }
.pill.warning, .pill.warn { background: var(--amber-deep); color: var(--amber); }
.pill.danger { background: var(--red-deep); color: var(--red); }
.pill.success { background: var(--lime-deep); color: var(--lime); }
.pill.disabled { background: var(--surface-raised); color: var(--text-muted); }
.pill.set { background: var(--lime-deep); color: var(--lime); }
.pill.notset { background: var(--surface-raised); color: var(--text-muted); }

/* ---- help tooltip ---- */
.help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface-raised); color: var(--text-muted); font-size: 10px; font-family: var(--font-mono); font-weight: 700;
  cursor: help; position: relative; vertical-align: middle; }
.help:hover, .help:focus { color: var(--text-strong); outline: none; }
.help::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 260px; background: var(--bg-overlay); color: var(--text-strong); border: 1px solid var(--line-default);
  border-radius: var(--radius-md); padding: 8px 10px; font-size: 12px; font-family: var(--font-sans); font-weight: 400; text-align: left;
  line-height: 1.4; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: var(--transition-fast); z-index: 40; }
.help:hover::after, .help:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- inline field hints / errors ---- */
.hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-faint); line-height: 1.4; }
.hint code { background: var(--surface-inset); padding: 0 4px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 11px; }
.field-err { display: block; margin-top: 4px; font-size: 12px; color: var(--red); }
.is-err { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgb(var(--red-rgb) / 0.14) !important; }

/* ---- notices: floating flash messages (bottom-right), not part of the page ---- */
.notices { position: fixed; right: 18px; bottom: 18px; z-index: 44; width: min(380px, calc(100vw - 36px));
  display: flex; flex-direction: column-reverse; gap: 10px; margin: 0; pointer-events: none; }
.notices:empty { display: none; }
.notices > * { pointer-events: auto; animation: flash-in .25s ease-out; }
@keyframes flash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.notice, .notice-line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px;
  background: var(--bg-overlay); border: 1px solid var(--line-default); border-left: 3px solid var(--sky);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 13px; color: var(--text-strong); }
.notice-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notice-body span { color: var(--text-muted); font-size: 12.5px; }
.notice.info { border-left-color: var(--sky); }
.notice.warning, .notice-line.warn { border-left-color: var(--amber); }
.notice.danger, .notice-line.error { border-left-color: var(--red); }
.notice.success { border-left-color: var(--lime); }
.notice-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; margin-left: 4px; }
.notice-x:hover { color: var(--text-strong); }
.notice-line .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.notice-line.warn .dot { background: var(--amber); }
.notice-line.error .dot { background: var(--red); }
.notice-line > span:nth-of-type(2) { flex: 1; min-width: 0; line-height: 1.45; }
.notice-line a { color: var(--link); font-size: 12px; white-space: nowrap; margin-top: 1px; }
.notice-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.notice-when { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* ---- toast stack ---- */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: var(--bg-overlay); color: var(--text-strong); border: 1px solid var(--line-default); padding: 10px 14px;
  border-radius: var(--radius-md); font-size: 13px; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(-6px);
  transition: var(--transition-base); max-width: 320px; }
.toast.show { opacity: 1; transform: none; }
.toast-err { border-color: var(--red); color: var(--red); }
/* Sign-in screen: messages centred at the top, clear of the language/theme toggles. */
body.gated:has(.gate-login) .toasts { left: 50%; right: auto; transform: translateX(-50%); align-items: center; width: max-content; max-width: calc(100% - 32px); }
body.gated:has(.gate-login) .toast { text-align: center; }
.toast-warn { border-color: var(--amber); color: var(--amber); }
.toast-ok { border-color: var(--lime); color: var(--lime); }

/* ---- router setup: step / verify lists ---- */
.v-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.v-row { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line-subtle); background: var(--surface-inset); }
.v-head { font-weight: 600; color: var(--text-strong); }
.v-detail, .v-hint { margin-top: 4px; font-size: 12.5px; }
.v-raw { display: block; margin-top: 6px; background: var(--bg-inset); padding: 8px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-body); white-space: pre-wrap; }
.v-row.v-pass { border-color: rgb(var(--lime-rgb) / 0.3); }
.v-row.v-pass .v-head { color: var(--lime); }
.v-row.v-fail { border-color: rgb(var(--red-rgb) / 0.3); }
.v-row.v-fail .v-head { color: var(--red); }
.v-row.v-unknown { border-color: rgb(var(--amber-rgb) / 0.3); }
.v-row.v-unknown .v-head { color: var(--amber); }

/* ---- logs sub-navigation ---- */
.subnav { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.subnav-b { font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-default); background: var(--surface-raised);
  color: var(--text-muted); border-radius: var(--radius-pill); padding: 6px 14px; cursor: pointer; transition: var(--transition-fast); }
.subnav-b:hover { color: var(--text-strong); border-color: var(--line-strong); }
.subnav-b.is-on { background: rgb(var(--blue-rgb) / 0.14); border-color: rgb(var(--blue-rgb) / 0.4); color: var(--text-strong); }

/* ---- designs tab ---- */
a.btn { display: inline-block; text-decoration: none; line-height: 1.2; }
a.btn.sm { padding: 5px 10px; }
#d-tpls .dt-td { align-self: start; }
#d-tpls .muted { font-size: 12.5px; margin-top: 2px; }

/* ---- reports: simple CSS bar cells ---- */
.bar-cell { width: 160px; height: 10px; background: var(--surface-inset); border-radius: var(--radius-pill); overflow: hidden; }
.bar { height: 100%; background: var(--blue); border-radius: var(--radius-pill); }

/* ---- Stage 0.13-C: guest-lookup plugins + guests ---------------------- */

/* section cards inside the plugin editor */
.pg-sec > .hint { margin: -6px 0 14px; max-width: 78ch; }
.pg-sec .pg-r { align-items: flex-start; row-gap: 14px; }
.pg-sec .pg-f { margin: 14px 0 0; }
.pg-sec .field { min-width: 150px; }
.pg-sec .field input.wide { min-width: 380px; }
.pg-sec h3 { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 8px; font-weight: 600; }
.pg-sub { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-subtle); }
.pg-sub > .hint { margin: -4px 0 10px; }

.pg-chk { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-body); cursor: pointer; }
.pg-toggles { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 4px; }

.pg-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.pg-bar .right { margin-left: auto; }
.pg-errs { border-color: rgb(var(--red-rgb) / 0.4); }
.pg-errs h2 { color: var(--red); }
.pg-errs ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.pg-errs .mono { color: var(--red); }

.pg-actions { white-space: nowrap; }
.pg-actions .btn { margin-bottom: 2px; }

.pg-secret { display: flex; gap: 8px; align-items: center; }
.pg-secret input { flex: 1; min-width: 0; }

/* key/value + field-map row editors */
.kv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.kv-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.kv-row input, .kv-row select { font-size: 13px; padding: 6px 9px; min-width: 0; }
.kv-row .kv-k { flex: 1 1 180px; }
.kv-row .kv-v { flex: 2 1 260px; }
.kv-row .kv-pick { flex: 0 0 130px; color: var(--text-muted); }
.kv-arrow { color: var(--text-faint); font-family: var(--font-mono); flex: none; }
.kv-empty { font-size: 12.5px; margin: 0 0 8px; }
.btn.kv-x { flex: none; padding: 5px 9px; line-height: 1; color: var(--text-muted); }
.btn.kv-x:hover { color: var(--red); border-color: var(--red-deep); }

/* match rules */
.rule-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rule-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid var(--line-subtle); border-radius: var(--radius-md); background: var(--surface-inset); }
.rule-row select { font-size: 13px; padding: 6px 9px; }
.rule-target { flex: 1 1 260px; min-width: 0; }
.rule-target select { width: 100%; }

/* chips (any-of field sets) */
.chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border-radius: var(--radius-pill);
  background: rgb(var(--blue-rgb) / 0.13); border: 1px solid rgb(var(--blue-rgb) / 0.32); color: var(--text-strong);
  font-family: var(--font-mono); font-size: 11.5px; }
.chip button { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.chip button:hover { color: var(--red); }
.chips .chip-add { font-size: 12px; padding: 4px 8px; color: var(--text-muted); }

/* guest inputs table-ish editor */
.in-head, .in-row { display: grid; grid-template-columns: 1.1fr 1.5fr 100px 100px 1.3fr 116px; gap: 6px; align-items: center; }
.in-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-faint); padding: 0 2px 6px; }
.in-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.in-row input, .in-row select { font-size: 13px; padding: 6px 9px; min-width: 0; width: 100%; }
.in-row .in-req { font-size: 11.5px; color: var(--text-muted); gap: 5px; }
.in-row .in-req input { width: auto; }
.in-move { display: flex; gap: 4px; justify-content: flex-end; }

/* raw JSON view */
textarea.raw-json { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; min-height: 320px;
  height: 58vh; white-space: pre; overflow-wrap: normal; overflow-x: auto; background: var(--bg-inset); }
textarea.mono-ta { font-family: var(--font-mono); font-size: 12.5px; }

/* test panel results */
.test-result { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-top: 16px;
  padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-default); background: var(--surface-inset); }
.test-result .tr-head { font-size: 15px; font-weight: 600; color: var(--text-strong); line-height: 1.4; }
.test-result .tr-ms { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.test-result .tr-detail { font-size: 12.5px; font-weight: 400; margin-top: 6px; }
.tr-ok { border-color: rgb(var(--lime-rgb) / 0.45); background: var(--lime-deep); }
.tr-ok .tr-head { color: var(--lime); }
.tr-warn { border-color: rgb(var(--amber-rgb) / 0.45); background: var(--amber-deep); }
.tr-warn .tr-head { color: var(--amber); }
.tr-fail { border-color: rgb(var(--red-rgb) / 0.45); background: var(--red-deep); }
.tr-fail .tr-head { color: var(--red); }
.tr-h3 { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); margin: 18px 0 6px; font-weight: 600; }
.tr-table { overflow-x: auto; border: 1px solid var(--line-subtle); border-radius: var(--radius-md); }
.tr-table .dt-td, .tr-table .dt-th { white-space: nowrap; font-size: 12px; padding: 7px 10px; overflow-wrap: normal; }
.tr-raw { margin-top: 14px; }
.tr-raw summary { cursor: pointer; font-size: 12.5px; color: var(--text-muted); }
.tr-raw summary:hover { color: var(--text-strong); }
.tr-raw pre.cfg { margin-top: 8px; max-height: 320px; }

/* ---- guest lookup: plugin catalog browser ---- */
.cat-grid { display: flex; flex-direction: column; gap: 10px; }
.cat-row { display: flex; gap: 16px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md); background: var(--surface-inset); flex-wrap: wrap; }
.cat-main { flex: 2 1 240px; min-width: 0; }
.cat-main .muted { font-size: 12.5px; margin-top: 2px; }
.cat-meta { flex: 1.3 1 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cat-meta .chips { margin-top: 2px; }
.cat-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.cat-foot { margin-top: 10px; font-size: 12px; }
.notice-inline { margin-top: 4px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--amber-deep);
  border: 1px solid rgb(var(--amber-rgb) / 0.4); color: var(--amber); font-size: 13px; }
.notice-inline div { margin-top: 4px; font-size: 12.5px; opacity: 0.9; }

@media (max-width: 1100px) {
  .in-head { display: none; }
  .in-row { grid-template-columns: 1fr 1fr; }
  .pg-sec .field input.wide { min-width: 0; }
}

/* even column widths inside the editor's field rows */
.pg-sec .pg-r > .field { flex: 1 1 200px; }
.pg-sec .pg-r > .field > input, .pg-sec .pg-r > .field > select { width: 100%; }
.pg-sec .pg-r > .field:has(input.wide) { flex: 3 1 380px; }

/* ---------- page header / plan cards / accounts (plans & accounts redesign) ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
/* Pinned page header: stays at the top of the scrolling content column. It
   bleeds over the column padding so content scrolls cleanly underneath. */
#view > .page-head { position: sticky; top: -28px; z-index: 6; margin: -28px -36px 22px; padding: 14px 36px 12px; align-items: center;
  background: var(--head-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-subtle); }
#view > .page-head h1 { font-size: 21px; line-height: 1.25; margin-bottom: 2px; }
.page-head .sub { margin: 0; font-size: 12.5px; }
.page-actions { display: flex; gap: 8px; flex: none; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.plan-card { background: var(--bg-surface); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; transition: var(--transition-fast); }
.plan-card:hover { border-color: var(--line-default); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-top h3 { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--text-strong); }
.plan-price { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.plan-price small { font-size: 13px; font-weight: 500; color: var(--text-muted); font-family: var(--font-sans); }
.plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-stats div { background: var(--surface-inset); border-radius: var(--radius-md); padding: 8px 10px; min-width: 0; }
.plan-stats span { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.plan-stats b { display: block; margin-top: 2px; font-size: 14px; color: var(--text-strong); overflow-wrap: anywhere; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-raised); color: var(--text-muted); }
.flag.on { background: rgb(var(--blue-rgb) / 0.14); color: var(--text-strong); }
.plan-actions { display: flex; gap: 8px; margin-top: auto; }
.pill.kind-account { background: rgb(var(--blue-rgb) / 0.16); color: var(--text-strong); }
.pill.kind-voucher { background: var(--amber-deep); color: var(--amber); }
.pill.kind-free { background: var(--lime-deep); color: var(--lime); }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { background: var(--bg-surface); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.stat b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 24px; color: var(--text-strong); }
.card.flush { padding: 0; overflow: hidden; }
.card-tools { padding: 12px 14px; border-bottom: 1px solid var(--line-subtle); }
.card-tools input { width: 100%; max-width: 320px; }
.table-scroll { overflow-x: auto; }
.table-scroll .dt { min-width: 860px; }
.table-scroll .dt-row > :first-child { padding-left: 16px; }
.who-cell { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px;
  background: rgb(var(--blue-rgb) / 0.18); color: var(--text-strong); }
.tiny { font-size: 11px; }
.usage { min-width: 120px; }
.usage-txt { font-size: 12.5px; white-space: nowrap; }
.meter { height: 5px; border-radius: 99px; background: var(--surface-raised); margin-top: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
/* The buttons stay on one line and keep their full width, so they never overlap the
   previous column (the other columns wrap or the table scrolls instead). */
.dt-td.actions { white-space: nowrap; text-align: right; padding-right: 16px; justify-self: end; min-width: max-content; }
.dt-td .pill { white-space: nowrap; }
.dt-td.actions .btn + .btn { margin-left: 6px; }
/* Icon-only row actions; the name is in the tooltip. */
.btn.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; vertical-align: middle; }
.btn.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dt-td.actions .btn.icon-btn + .btn.icon-btn { margin-left: 4px; }
.page-actions .btn.icon-btn { width: 38px; height: 38px; }
.mtop-act.danger { color: var(--red); }
/* Accounts: the name opens the account page */
a.who-link { color: inherit; text-decoration: none; }
a.who-link:hover .mono { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
/* Account page */
.crumb { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.crumb:hover { color: var(--link); }
.crumb-sep { margin: 0 4px; color: var(--text-faint); font-weight: 400; white-space: pre; }
.crumb-name { font-family: var(--font-mono); font-size: 0.9em; }
.stat-row.stat-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat b.stat-sm { font-size: 17px; }
.stat-usage .usage { margin-top: 6px; }
.stat-usage .usage-txt { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-strong); }
.acct-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.acct-side { display: grid; gap: 14px; }
.acct-side .card { margin-bottom: 0; }
.acct-offers .add-offer { margin-bottom: 4px; }
/* Offer history scrolls on its own; "Load more" sits at its end. */
.offer-scroll { max-height: 460px; overflow-y: auto; margin-top: 12px; padding-right: 4px; overscroll-behavior: contain; }
.offers-more { display: block; margin: 10px auto 2px; }
.kv-list { display: grid; }
.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-subtle); font-size: 13.5px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row > span:first-child { color: var(--text-muted); }
.kv-row > span:last-child { text-align: right; color: var(--text-strong); }
@media (max-width: 1100px) { .acct-page { grid-template-columns: 1fr; } .stat-row.stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- side drawer ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); opacity: 0; transition: opacity .2s; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--bg-surface);
  border-left: 1px solid var(--line-default); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease; }
.drawer-wrap.open { pointer-events: auto; }
.drawer-wrap.open .drawer-scrim { opacity: 1; }
.drawer-wrap.open .drawer { transform: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line-subtle); }
.drawer-head h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; color: var(--text-strong); }
.drawer-head .sub { margin: 0; }
.icon-x { background: none; border: 0; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.icon-x:hover { color: var(--text-strong); }
.drawer-body { flex: 1; overflow-y: auto; padding: 6px 22px 22px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line-subtle); }
.form-sec { padding: 16px 0; border-bottom: 1px solid var(--line-subtle); }
.form-sec:last-child { border-bottom: 0; }
.form-sec h3 { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 .field input, .grid2 .field select { width: 100%; min-width: 0; }
.combo { display: flex; }
.combo input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.combo select { width: auto !important; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0 0; cursor: pointer; }
.switch-row b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.switch-row small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
input.switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--surface-raised);
  border: 1px solid var(--line-default); position: relative; flex: none; cursor: pointer; transition: var(--transition-fast); padding: 0; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted); transition: var(--transition-fast); }
input.switch:checked { background: var(--blue); border-color: var(--blue); }
input.switch:checked::after { left: 18px; background: #fff; }

@media (max-width: 760px) {
  .page-head { flex-direction: column; }
  .stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .stat b { font-size: 20px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---------- pagination ---------- */

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid var(--line-subtle); }
.card > .pager { margin: 14px -18px -18px; }
.pager-info { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.pager-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.pager-btns .btn:disabled { opacity: .4; cursor: default; }
.pager-gap { padding: 5px 4px; color: var(--text-faint); }

/* ---------- account offers (drawer) ---------- */
.offer-list { display: grid; gap: 8px; }
.offer-row { background: var(--surface-inset); border: 1px solid var(--line-subtle); border-radius: var(--radius-md);
  padding: 10px 12px; display: grid; gap: 6px; position: relative; }
.offer-row.past { opacity: .6; }
.offer-row .btn { position: absolute; top: 8px; right: 8px; }
.offer-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 70px; }
.offer-main b { color: var(--text-strong); font-size: 13.5px; }
.offer-meta { font-size: 12px; color: var(--text-muted); }
.add-offer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.add-offer select { flex: 1 1 220px; min-width: 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-body); white-space: nowrap; cursor: pointer; }

/* ---------- small screens: top bar + slide-in sidebar ---------- */
@media (max-width: 860px) {
  body { flex-direction: column; }
  .mtop { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 14px; background: var(--side-bg); border-bottom: 1px solid var(--line-subtle); }
  .mtop-btn { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--line-default); background: transparent; color: var(--text-strong);
    display: grid; place-items: center; cursor: pointer; }
  .mtop-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mtop-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
  .mtop-brand img { width: 40px; height: 33px; }
  .mtop-brand b { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text-strong); }
  .sidebar { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); transform: translateX(-102%);
    transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgb(var(--shadow-c) / 0.6); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .content { padding: 18px 14px 28px; }
  .card { padding: 16px; overflow-x: auto; }
  .card > .pager { margin: 12px -16px -16px; }
}

/* ---------- slim scrollbars ---------- */
/* Chromium/Safari use the ::-webkit-scrollbar rules (no arrow buttons); the
   standard properties are applied only where those aren't supported (Firefox),
   because Chromium ignores ::-webkit-scrollbar once scrollbar-width is set. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgb(var(--blue-rgb) / 0.35) transparent; }
}
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--blue-rgb) / 0.3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--blue-rgb) / 0.55); }
::-webkit-scrollbar-corner { background: transparent; }
@media (max-width: 860px) {
  #view > .page-head { top: -18px; margin: -18px -14px 16px; padding: 18px 14px 12px; }
}

/* ---------- accounting ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--bg-surface); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); padding: 16px 18px;
  display: grid; gap: 4px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line-default); }
.kpi.warn::before { background: var(--amber); }
.kpi.good::before { background: var(--lime); }
.kpi span { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.kpi b { font-family: var(--font-display); font-size: 22px; color: var(--text-strong); overflow-wrap: anywhere; }
.kpi.warn b { color: var(--amber); }
.kpi small { font-size: 12px; color: var(--text-faint); }
.card-tools.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tools-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tools-right input[type="search"] { width: 220px; }
.seg { display: inline-flex; background: var(--surface-inset); border: 1px solid var(--line-default); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.seg button { font: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; color: var(--text-muted); padding: 6px 14px;
  border-radius: calc(var(--radius-md) - 2px); cursor: pointer; }
.seg button.on { background: var(--surface-raised); color: var(--text-strong); box-shadow: 0 1px 0 rgb(0 0 0 / 0.2); }
.amt { display: inline-block; font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.amt.due { background: var(--amber-deep); color: var(--amber); }
.amt.credit { background: rgb(var(--sky-rgb) / 0.14); color: var(--sky); }
.amt.settled { background: var(--lime-deep); color: var(--lime); }
b.pos { color: var(--lime); }
b.neg { color: var(--text-strong); }
.dt-row.voided > .dt-td { opacity: .5; text-decoration: line-through; }
.dt-row.voided > .dt-td.actions { text-decoration: none; }
.pill.method { background: var(--surface-raised); color: var(--text-body); }
.st-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 0 4px; }
.st-summary div { background: var(--surface-inset); border: 1px solid var(--line-subtle); border-radius: var(--radius-md); padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.st-summary > div > span:first-child { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.st-summary b { color: var(--text-strong); font-size: 14px; overflow-wrap: anywhere; }
.st-summary .amt { justify-self: start; }
.unpaid, .statement { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.unpaid li { display: flex; align-items: center; gap: 10px; background: var(--amber-deep); border: 1px solid rgb(var(--amber-rgb) / 0.25);
  border-radius: var(--radius-md); padding: 8px 10px; }
.unpaid li > div { flex: 1; min-width: 0; }
.unpaid b, .st-main b { display: block; font-size: 13px; color: var(--text-strong); }
.unpaid small, .st-main small, .st-amt small { display: block; font-size: 11.5px; color: var(--text-muted); }
.st-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-subtle); }
.st-row:last-child { border-bottom: 0; }
.st-row.voided { opacity: .45; }
.st-row.voided .st-amt b { text-decoration: line-through; }
.st-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; }
.st-ic.ch { background: var(--surface-raised); color: var(--text-muted); }
.st-ic.pa { background: var(--lime-deep); color: var(--lime); }
.st-main { flex: 1; min-width: 0; }
.st-amt { text-align: right; white-space: nowrap; }
.st-amt b { font-size: 13px; }
.icon-x.sm { font-size: 18px; opacity: .5; }
.icon-x.sm:hover { opacity: 1; color: var(--red); }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tools-right input[type="search"] { width: 100%; } .st-summary { grid-template-columns: 1fr; } }

/* ---------- multi-select with search (offer visibility) ---------- */
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; }
.flag.vis { background: var(--amber-deep); color: var(--amber); }
.ms { display: grid; gap: 8px; margin-top: 10px; }
.ms[hidden] { display: none; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.ms-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px;
  background: rgb(var(--blue-rgb) / 0.16); border: 1px solid rgb(var(--blue-rgb) / 0.35); color: var(--text-strong); font-size: 12.5px; font-weight: 600; }
.ms-chip button { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.ms-chip button:hover { color: var(--red); }
.ms-empty { font-size: 12.5px; }
.ms-box { border: 1px solid var(--line-default); border-radius: var(--radius-md); background: var(--surface-inset); overflow: hidden; }
.ms-search { width: 100%; border: 0 !important; border-bottom: 1px solid var(--line-subtle) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.ms-tools { display: flex; justify-content: flex-end; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line-subtle); }
button.link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ms-list { max-height: 220px; overflow-y: auto; padding: 4px; }
.ms-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--text-strong); }
.ms-row:hover { background: var(--surface-raised); }
.ms-row small { margin-left: 6px; font-size: 11px; color: var(--text-faint); }
.ms-none { padding: 10px; font-size: 12.5px; }
/* Search-only picker (customers): results float over the form while typing
   (below the box, or above it with .ms-up), a click adds a chip. */
.ms-search-only .ms-box { position: relative; overflow: visible; }
.ms-search-only .ms-search { border-bottom: 0 !important; }
.ms-search-only .ms-list { display: none; position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 20; max-height: none; overflow-y: auto;
  padding: 4px; background: var(--bg-overlay); border: 1px solid var(--line-default); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.ms-search-only.ms-open .ms-list { display: block; }
.ms-search-only.ms-up .ms-list { top: auto; bottom: calc(100% + 6px); }
.ms-hit { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; font-size: 13.5px; color: var(--text-strong); text-align: left; cursor: pointer; }
.ms-hit:hover, .ms-hit:focus-visible { background: var(--surface-raised); outline: none; }
.ms-hit .ms-sub { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-hit small { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.ms-search-only .ms-none { margin: 0; padding: 4px 10px 6px; font-size: 12px; }
.ms-search-only .ms-tools { border-top: 1px solid var(--line-subtle); border-bottom: 0; justify-content: flex-start; margin-top: 2px; padding: 6px 10px 4px; }
.ms-clear { font-size: 12px; margin-left: 4px; }
.ms-search-only .ms-chips { margin-bottom: 8px; }
/* Segmented choices never wrap their labels */
.seg button { white-space: nowrap; }
/* Every choice looks like a button (white, thin border); the chosen one is filled. */
.seg { gap: 4px; }
.seg button { background: var(--bg-surface); border: 1px solid var(--line-default); color: var(--text-body); transition: background-color .12s, border-color .12s, color .12s; }
.seg button:hover:not(.on) { border-color: var(--line-strong); color: var(--text-strong); background: var(--bg-raised); }
.seg button.on { border-color: transparent; }
#pf-vis-sec[hidden] { display: none; }

/* ============================================================
   Refresh layer: labels in plain type (the code font is kept for
   codes, MACs and IPs), friendlier tiles, drawers and controls.
   ============================================================ */
.form-sec h3, .pg-sec h3, .tr-h3, .in-head,
.stat span, .kpi span, .plan-stats span, .st-summary > div > span:first-child {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--text-muted); }
.pager-info, .notice-count { font-family: var(--font-sans); font-size: 12px; }
.steps { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

.stat, .kpi { background: linear-gradient(160deg, rgb(var(--blue-rgb) / 0.10), transparent 60%), var(--bg-surface);
  border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); padding: 16px 18px; }
.stat b, .kpi b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.stat b { font-size: 26px; }
.kpi::before { width: 4px; border-radius: 0 4px 4px 0; top: 14px; bottom: 14px; }

.plan-card { background: linear-gradient(180deg, rgb(var(--blue-rgb) / 0.07), transparent 45%), var(--bg-surface); border-radius: var(--radius-lg); padding: 20px; }
.plan-card:hover { border-color: rgb(var(--blue-rgb) / 0.45); transform: translateY(-1px); box-shadow: 0 16px 34px -20px rgb(var(--blue-rgb) / 0.6); }
.plan-top h3 { font-family: var(--font-display); font-weight: 800; }
.plan-price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.plan-stats div { border: 1px solid var(--line-faint); }
.flag { font-weight: 600; }

.drawer { background: var(--bg-surface); border-left: 1px solid var(--line-default); border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.drawer-scrim { background: rgb(var(--shadow-c) / 0.6); backdrop-filter: blur(2px); }
.drawer-head h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.drawer-foot { background: rgb(255 255 255 / 0.015); }

.subnav-b { font-family: var(--font-sans); }
.subnav-b.is-on { background: var(--blue); border-color: var(--blue); color: var(--ink-inverse); }
.seg { border-radius: var(--radius-md); }
.seg button.on { background: var(--blue); color: var(--ink-inverse); }

.avatar { background: linear-gradient(135deg, rgb(var(--grad-a-rgb) / 0.35), rgb(var(--grad-b-rgb) / 0.5)); color: #fff; }
.meter { background: rgb(var(--blue-rgb) / 0.12); }
.meter i { background: linear-gradient(90deg, var(--grad-a), var(--btn-b)); }
.bar { background: linear-gradient(90deg, var(--grad-a), var(--btn-b)); }

.toast { border-radius: var(--radius-md); backdrop-filter: blur(8px); }
.notice, .notice-line { border-radius: var(--radius-md); }
.help { background: rgb(var(--blue-rgb) / 0.14); color: var(--sky); font-family: var(--font-sans); }
a { color: var(--sky); }
::selection { background: rgb(var(--blue-rgb) / 0.35); }
.form-sec .switch-row + .field, .form-sec .switch-row + .fieldH { margin-top: 16px; }

/* Lists become compact items when their box is narrow (container queries on
   .card): wide lists (6+ columns) below 900px, the others below 560px. An item
   shows its title and one or two key values; tapping it opens the details
   (every other field) and the actions. Label/value lists (System) stay as is. */
.card { container-type: inline-size; }
.table-scroll .dt { min-width: 0; }
.dt-more, .dt-br { display: none; }
@container (max-width: 900px) {
  .dt.dt-wide, .table-scroll .dt.dt-wide { display: block; min-width: 0; }
  .dt.dt-wide > .dt-head { display: none; }
  .dt.dt-wide > .dt-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; padding: 10px; align-items: start; }
  .dt.dt-wide > .dt-body > .dt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; grid-column: auto; padding: 10px 12px;
    border: 1px solid var(--line-subtle); border-radius: var(--radius-md); background: var(--bg-raised); cursor: pointer; }
  .dt.dt-wide > .dt-body > .dt-row:hover { background: var(--bg-raised); border-color: var(--line-default); }
  .dt.dt-wide > .dt-body > .dt-row[hidden], .dt.dt-wide > .dt-body > .dt-row.pg-hide, .dt.dt-wide > .dt-body > .dt-row.filter-hide { display: none; }
  .dt.dt-wide > .dt-body > .dt-row.open { border-color: rgb(var(--blue-rgb) / 0.55); cursor: default; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-td { display: none; padding: 0; min-width: 0; text-align: left; white-space: normal; font-size: 13px; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-td[colspan] { display: block; flex-basis: 100%; }
  .dt.dt-wide > .dt-body > .dt-row:has(> .dt-td[colspan]) { cursor: default; }
  /* line 1: title + chevron */
  .dt.dt-wide > .dt-body > .dt-row > .dt-title { display: block; flex: 1 1 0; order: 0; font-size: 14.5px; font-weight: 600; color: var(--text-strong); overflow: hidden; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-more { display: grid; place-items: center; order: 1; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; background: none;
    color: var(--text-muted); cursor: pointer; border-radius: 50%; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-more svg { transform: rotate(90deg); }
  .dt.dt-wide > .dt-body > .dt-row > .dt-br { display: block; order: 2; flex-basis: 100%; height: 0; }
  /* line 2: the key values, no labels, separated by dots */
  .dt.dt-wide > .dt-body > .dt-row > .dt-sum { display: inline-flex; align-items: center; order: 3; flex: 0 1 auto; color: var(--text-body); font-size: 12.5px; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-sum .dt-v { display: contents; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-sum ~ .dt-sum::before { content: "·"; margin-right: 10px; color: var(--text-faint); }
  .dt.dt-wide > .dt-body > .dt-row > .dt-sum .meter { width: 70px; display: inline-block; margin: 0 0 0 8px; }
  .dt.dt-wide > .dt-body > .dt-row > .dt-sum .usage { min-width: 0; display: inline-flex; align-items: center; }
  /* details (open): label / value lines, then the actions */
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-det { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; align-items: baseline; flex-basis: 100%; order: 4;
    padding: 7px 0 0; margin-top: 4px; border-top: 1px solid var(--line-subtle); }
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-det::before { content: attr(data-label); color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-det > .dt-v { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--text-strong); }
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-act { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; order: 5; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line-subtle); }
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-act .dt-v { display: contents; }
  .dt.dt-wide > .dt-body > .dt-row.open > .dt-act .btn { flex: 1 1 0; margin: 0 !important; min-height: 36px; }
}
@container (max-width: 560px) {
  .dt:not(.dt-kv), .table-scroll .dt:not(.dt-kv) { display: block; min-width: 0; }
  .dt:not(.dt-kv) > .dt-head { display: none; }
  .dt:not(.dt-kv) > .dt-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; padding: 10px; align-items: start; }
  .dt:not(.dt-kv) > .dt-body > .dt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; grid-column: auto; padding: 10px 12px;
    border: 1px solid var(--line-subtle); border-radius: var(--radius-md); background: var(--bg-raised); cursor: pointer; }
  .dt:not(.dt-kv) > .dt-body > .dt-row:hover { background: var(--bg-raised); border-color: var(--line-default); }
  .dt:not(.dt-kv) > .dt-body > .dt-row[hidden], .dt:not(.dt-kv) > .dt-body > .dt-row.pg-hide, .dt:not(.dt-kv) > .dt-body > .dt-row.filter-hide { display: none; }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open { border-color: rgb(var(--blue-rgb) / 0.55); cursor: default; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-td { display: none; padding: 0; min-width: 0; text-align: left; white-space: normal; font-size: 13px; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-td[colspan] { display: block; flex-basis: 100%; }
  .dt:not(.dt-kv) > .dt-body > .dt-row:has(> .dt-td[colspan]) { cursor: default; }
  /* line 1: title + chevron */
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-title { display: block; flex: 1 1 0; order: 0; font-size: 14.5px; font-weight: 600; color: var(--text-strong); overflow: hidden; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-more { display: grid; place-items: center; order: 1; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; background: none;
    color: var(--text-muted); cursor: pointer; border-radius: 50%; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-more svg { transform: rotate(90deg); }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-br { display: block; order: 2; flex-basis: 100%; height: 0; }
  /* line 2: the key values, no labels, separated by dots */
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-sum { display: inline-flex; align-items: center; order: 3; flex: 0 1 auto; color: var(--text-body); font-size: 12.5px; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-sum .dt-v { display: contents; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-sum ~ .dt-sum::before { content: "·"; margin-right: 10px; color: var(--text-faint); }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-sum .meter { width: 70px; display: inline-block; margin: 0 0 0 8px; }
  .dt:not(.dt-kv) > .dt-body > .dt-row > .dt-sum .usage { min-width: 0; display: inline-flex; align-items: center; }
  /* details (open): label / value lines, then the actions */
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-det { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; align-items: baseline; flex-basis: 100%; order: 4;
    padding: 7px 0 0; margin-top: 4px; border-top: 1px solid var(--line-subtle); }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-det::before { content: attr(data-label); color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-det > .dt-v { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--text-strong); }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-act { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; order: 5; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line-subtle); }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-act .dt-v { display: contents; }
  .dt:not(.dt-kv) > .dt-body > .dt-row.open > .dt-act .btn { flex: 1 1 0; margin: 0 !important; min-height: 36px; }
  .card:not(.flush) > .dt:not(.dt-kv) > .dt-body, .card:not(.flush) > .table-scroll > .dt:not(.dt-kv) > .dt-body { padding: 0; }
}
/* Label/value lists: keep the two columns, value can wrap. */
.dt.dt-kv { grid-template-columns: minmax(120px, max-content) 1fr; }
.dt-kv > .dt-body > .dt-row > .dt-td:first-child { color: var(--text-muted); }
@media (max-width: 760px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat span { font-size: 10.5px; }
  .card.flush .dt-body { padding: 10px; }
  /* Forms: every field takes the full width on phones. */
  .row { align-items: stretch; }
  .row > .field, .field { width: 100%; min-width: 0; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea,
  .row > input:not([type="checkbox"]):not([type="radio"]), .row > select { width: 100%; max-width: 100%; min-width: 0; }
  .page-actions { flex-wrap: wrap; }
}
/* A checkbox stays next to its text. */
label.row { flex-wrap: nowrap; align-items: flex-start; }
label.row > input[type="checkbox"] { flex: none; margin-top: 3px; }

/* ---------- preferences (sidebar footer) ---------- */
button.side-me { font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; border-radius: var(--radius-md); }
button.side-me:hover b { color: var(--sky); }
.side-cog { width: 16px; height: 16px; margin-left: auto; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.side-me:hover .side-cog { stroke: var(--text-strong); }
.side-me > span { min-width: 0; }
.prefs-pop { position: fixed; z-index: 70; left: 14px; bottom: 76px; width: 280px; padding: 14px 16px 12px; border-radius: var(--radius-lg);
  background: var(--bg-overlay); border: 1px solid var(--line-default); box-shadow: var(--shadow-pop); display: grid; gap: 6px; }
.prefs-pop[hidden] { display: none; }
.prefs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.prefs-head b { font-family: var(--font-display); font-size: 15px; color: var(--text-strong); }
.prefs-pop label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 6px; }
.prefs-pop .seg button { font-size: 12.5px; padding: 6px 8px; }
.prefs-pop .hint { margin-top: 8px; }
@media (max-width: 860px) { .prefs-pop { z-index: 80; } }
:root[data-theme="light"] .avatar { color: #fff; }
/* Usage bars in amber (both themes); light: the sign-in screen on the plain page colour. */
.meter i, .bar { background: var(--maki-amber); }
:root[data-theme="light"] .sidebar .brand img { filter: none; }
:root[data-theme="light"] body.gated .content { background: var(--bg-base); }
:root[data-theme="light"] .gate { border-color: var(--line-subtle); border-radius: 22px; }
:root[data-theme="light"] .gate::before { filter: none; }
/* Sign-in screen: one plain surface, the card blends into the page (no border or shadow). */
body.gated .content:has(.gate-login), :root[data-theme="light"] body.gated .content:has(.gate-login) { background: var(--bg-surface); }
.gate.gate-login, :root[data-theme="light"] .gate.gate-login { border-color: transparent; box-shadow: none; }
:root[data-theme="light"] .steps b { color: var(--blue); }

/* ---------- phones: page-wide polish ---------- */
@media (max-width: 760px) {
  h1 { font-size: 22px; }
  .sub { font-size: 13px; }
  #view > .page-head { gap: 12px; }
  .page-head { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .page-head > div:first-child { flex: 1 1 200px; min-width: 0; }
  .card { padding: 14px; border-radius: var(--radius-lg); margin-bottom: 14px; }
  .card h2 { margin-bottom: 12px; }
  .btn { min-height: 38px; }
  .btn.sm { min-height: 32px; }
  /* Tab strips scroll in one line instead of wrapping. */
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 16px; padding: 0 14px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav-b { flex: none; }
  /* Drawers take the whole screen. */
  .drawer { width: 100%; border-radius: 0; border-left: 0; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 16px; padding-right: 16px; }
  .drawer-foot .btn { flex: 1; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi b { font-size: 19px; }
  .plan-grid { grid-template-columns: 1fr; }
  .seg { display: flex; }
  .seg button { flex: 1; }
  .notices { right: 10px; left: 10px; bottom: 10px; width: auto; }
  .toasts { left: 10px; right: 10px; align-items: stretch; }
  .toast { max-width: none; }
  .card-tools input, .tools-right input[type="search"] { max-width: none; width: 100%; }
  .tools-right { width: 100%; }
}
.switch-row.is-disabled { opacity: .5; cursor: not-allowed; }

/* ---------- phones: one slim top bar with the page title and main action ---------- */
.mtop-title, .mtop-actions { display: none; }
@media (max-width: 860px) {
  .mtop { gap: 10px; padding: 8px 12px; position: relative; z-index: 7; }
  .mtop-btn { width: 36px; height: 36px; }
  .mtop-brand img { width: 34px; height: 28px; }
  .mtop-brand b { display: none; }
  .mtop-title { display: block; flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtop-title:empty + .mtop-actions { display: none; }
  .mtop-actions { display: flex; gap: 6px; flex: none; }
  .mtop-act { height: 36px; min-width: 36px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line-default); background: transparent;
    color: var(--text-strong); font: inherit; font-size: 13px; font-weight: 600; display: grid; place-items: center; cursor: pointer; white-space: nowrap; }
  .mtop-act.primary { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); border-color: transparent; color: var(--on-btn); }
  .mtop-act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .mtop-act:has(svg) { padding: 0; width: 36px; }
  /* The page header moves into the top bar. */
  #view > .page-head { display: none; }
  .content { padding-top: 14px; }
  /* Stat tiles: one compact strip. */
  .stat-row { gap: 8px; margin-bottom: 12px; }
  .stat { padding: 10px 12px; border-radius: var(--radius-md); }
  .stat b { font-size: 20px; margin-top: 2px; }
  .stat span { font-size: 10px; line-height: 1.25; }
}

/* ---------- multi-site: current site, super-admin-only entries ---------- */
.site-box:empty { display: none; }
.site-box { flex: none; margin: -6px 2px 12px; }
.site-pick { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-md);
  background: var(--row-hover); border: 1px solid var(--line-subtle); font-size: 13px; }
.site-pick span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.site-pick b { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-pick select { flex: 1; min-width: 0; padding: 4px 8px; font-size: 13px; }
body.role-admin [data-super] { display: none !important; }
@media (max-width: 760px) {
  body.gated:has(.gate-login) .toasts { top: 70px; left: 16px; right: 16px; transform: none; width: auto; max-width: none; }
}

/* ---------- Login page (fixed portal: options, venue, preview) ---------- */
.portal-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.portal-form { display: grid; gap: 14px; }
.portal-form .card { margin-bottom: 0; }
.portal-preview { position: sticky; top: 90px; margin-bottom: 0; }
.pp-phone { width: 100%; max-width: 360px; height: 640px; margin: 0 auto; border: 8px solid var(--text-strong); border-radius: 34px; overflow: hidden; background: #fff; }
.pp-phone iframe { display: block; width: 100%; height: 100%; border: 0; }
.pp-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-logo-box { display: grid; place-items: center; width: 160px; height: 64px; padding: 6px; border: 1px dashed var(--line-default); border-radius: var(--radius-md); background: var(--bg-surface); }
.pp-logo-box img { max-width: 100%; max-height: 100%; }
@media (max-width: 1100px) { .portal-page { grid-template-columns: 1fr; } .portal-preview { position: static; } }

/* ---------- router onboarding (Router setup → Router status) ---------- */
.ob-steps { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ob-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-subtle); border-radius: var(--radius-md); background: var(--bg-inset); }
.ob-step b { display: block; font-size: 13px; color: var(--text-strong); }
.ob-step small { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.ob-dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line-default); color: var(--text-muted); background: var(--bg-surface); }
.ob-step.done .ob-dot { background: var(--lime); border-color: var(--lime); color: #fff; }
.ob-step.now { border-color: rgb(var(--blue-rgb) / 0.5); background: rgb(var(--blue-rgb) / 0.06); }
.ob-step.now .ob-dot { background: var(--btn-b); border-color: var(--btn-b); color: var(--on-btn); }
.ob-msg { margin: 0 0 10px; }
@media (max-width: 900px) { .ob-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ob-steps { grid-template-columns: 1fr; } }