@charset "utf-8";
/* ==========================================================================
   BILLBYTES FRONT PANEL — bb-theme.css
   The single design system for billbytes.ng. Dark-only. Radius 0.
   Static file, served by nginx. NEVER rename this to .php (db_conn.php
   rate-limits 60 req/60s per IP by writing request_log.json on every PHP hit).
   Reference: /assets/css/README-theme.md
   --------------------------------------------------------------------------
   0. FONTS        1. TOKENS       2. RESET/BASE   3. LAYOUT
   4. TYPE         5. NAV          6. SIDE/SHELL   7. HERO
   8. CODE         9. TILES        10. BUTTONS     11. FORMS
   12. TABLES      13. CARDS       14. LED/BADGE   15. SHEET
   16. TOAST       17. EMPTY       18. TABS        19. PAGINATION
   20. FOOTER      21. SUPPORTING  22. MOTION      23. LEGACY OVERRIDES
   24. REDUCED MOTION
   ========================================================================== */

/* ==========================================================================
   0. FONTS — self-hosted only. woff2 only. No Google Fonts, ever.
   Verified present in /assets/fonts/Manrope/ and /assets/fonts/Roboto/.
   ========================================================================== */
@font-face{font-family:'Manrope';src:url('/assets/fonts/Manrope/Manrope-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/Manrope/Manrope-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/Manrope/Manrope-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/Manrope/Manrope-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ₦ SHIM — MANDATORY. Manrope's cmap returns glyph 0 for U+20A6 in all seven
   faces; there are 436 occurrences of ₦ across 211 files. These three faces
   borrow the naira sign from self-hosted Roboto for that ONE codepoint.
   size-adjust is tuned by eye against Manrope's x-height. */
@font-face{font-family:'Manrope';src:url('/assets/fonts/Roboto/Roboto-Regular.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+20A6;size-adjust:97%}
@font-face{font-family:'Manrope';src:url('/assets/fonts/Roboto/Roboto-Bold.woff2') format('woff2');font-weight:500 900;font-display:swap;unicode-range:U+20A6;size-adjust:97%}
@font-face{font-family:'BB Naira';src:url('/assets/fonts/Roboto/Roboto-Regular.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+20A6}

/* ==========================================================================
   1. TOKENS — bare :root, unconditional. There is NO [data-theme] block
   anywhere in this file. Any legacy script writing data-theme is inert.
   ========================================================================== */
:root{
  /* -- surfaces ------------------------------------------------------- */
  --bb-void:#07090C;          /* page ground */
  --bb-well:#05070A;          /* code wells, deeper than the page */
  --bb-surface:#0C0F14;       /* panels, cards, tables */
  --bb-raised:#11151C;        /* inputs, th, card footers, secondary buttons */
  --bb-hover:#171C25;         /* row / button hover */
  --bb-rule:#1A2029;          /* hairlines INSIDE a panel (decorative) */
  --bb-rule-2:#232A35;        /* panel outer border, section rules */
  --bb-edge:#5A6472;          /* INTERACTIVE control borders — 3.20:1 vs surface (WCAG 1.4.11) */
  --bb-edge-hi:#7C8796;       /* hovered control border */

  /* -- ink ------------------------------------------------------------ */
  --bb-ink-0:#F2F5F9;         /* 17.1:1  headings, readout values */
  --bb-ink-1:#E9EDF3;         /* 16.3:1  body */
  --bb-ink-2:#C3CBD6;         /* 11.7:1  secondary body, table cells, code default */
  --bb-ink-3:#8590A0;         /*  5.9:1  labels, captions, hints (AA everywhere incl. hover) */
  --bb-ink-4:#5A6472;         /*  3.2:1  NON-TEXT ONLY: icons, dividers, disabled, code comments */

  /* -- signal (the one accent; ~2% pixel budget) ---------------------- */
  --bb-signal:#2FE3C0;        /* 11.8:1 on surface; --bb-void on it = 12.2:1 */
  --bb-signal-hi:#5BEDD1;
  --bb-signal-lo:#25C0A3;
  --bb-signal-wash:rgba(47,227,192,.08);
  --bb-signal-line:rgba(47,227,192,.28);
  --bb-signal-ring:rgba(47,227,192,.16);

  /* -- state. The accent DOUBLES as success: no fifth hue, and it
        sidesteps the cyan-vs-green colour-vision problem. -------------- */
  --bb-ok:var(--bb-signal);
  --bb-warn:#F5B841;
  --bb-warn-wash:rgba(245,184,65,.10);
  --bb-warn-line:rgba(245,184,65,.30);
  --bb-fail:#FF7B72;
  --bb-fail-wash:rgba(255,123,114,.10);
  --bb-fail-line:rgba(255,123,114,.32);
  --bb-idle:#5A6472;

  /* -- geometry ------------------------------------------------------- */
  --bb-r:0;                   /* radius, everywhere */
  --bb-r-led:999px;           /* the 6px status LED — the ONLY round object on the site */
  --bb-shadow-overlay:0 24px 64px -16px rgba(0,0,0,.72),0 0 0 1px var(--bb-rule-2);

  /* -- space ---------------------------------------------------------- */
  --bb-sp-1:4px;  --bb-sp-2:8px;  --bb-sp-3:12px; --bb-sp-4:16px;
  --bb-sp-5:24px; --bb-sp-6:32px; --bb-sp-7:48px; --bb-sp-8:64px;
  --bb-sp-9:96px; --bb-sp-10:128px;

  /* -- layout --------------------------------------------------------- */
  --bb-w-page:1200px;
  --bb-w-prose:68ch;
  --bb-gutter:20px;
  --bb-nav-h:56px;
  --bb-side-w:240px;
  --bb-tabbar-h:64px;

  /* -- grid backdrop (exactly two uses site-wide) --------------------- */
  --bb-grid-pitch:32px;
  --bb-grid-line:rgba(133,144,160,.055);

  /* -- motion --------------------------------------------------------- */
  --bb-dur-1:120ms;           /* state */
  --bb-dur-2:180ms;           /* reveal */
  --bb-dur-3:240ms;           /* transport */
  --bb-ease-out:cubic-bezier(.2,.8,.3,1);
  --bb-ease-std:cubic-bezier(.4,0,.2,1);

  /* -- type ----------------------------------------------------------- */
  --bb-font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* 'BB Naira' sits immediately before the generic keyword so ₦ resolves from
     self-hosted Roboto even where the system mono lacks the glyph. */
  --bb-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Roboto Mono','DejaVu Sans Mono','BB Naira',monospace;

  --bb-t-display:clamp(2.25rem,1.30rem + 4.0vw,4rem);
  --bb-t-h1:clamp(1.75rem,1.25rem + 2.1vw,2.75rem);
  --bb-t-h2:clamp(1.375rem,1.14rem + 1.0vw,1.875rem);
  --bb-t-h3:18px;
  --bb-t-body:16px;
  --bb-t-body-sm:15px;
  --bb-t-ui:14px;
  --bb-t-caption:13px;
  --bb-t-label:11px;
  --bb-t-mono:13px;
  --bb-t-mono-xs:12px;
  --bb-t-readout:clamp(1.5rem,1.05rem + 1.9vw,2.125rem);
}
@media (min-width:768px){:root{--bb-gutter:32px}}
@media (min-width:900px){:root{--bb-nav-h:64px}}
@media (min-width:1200px){:root{--bb-gutter:40px}}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bb-void);
  color:var(--bb-ink-1);
  font:400 var(--bb-t-body)/1.65 var(--bb-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--bb-rule-2);margin:var(--bb-sp-6) 0}
a{color:var(--bb-signal);text-decoration:none}
a:hover{color:var(--bb-signal-hi);text-decoration:underline;text-underline-offset:3px}
b,strong{font-weight:600}
small{font-size:var(--bb-t-caption)}
code,kbd,pre,samp{font-family:var(--bb-mono);font-size:var(--bb-t-mono)}
::selection{background:rgba(47,227,192,.28);color:var(--bb-ink-0)}

/* Focus: an OUTLINE, not a box-shadow — box-shadow disappears under
   forced-colors / Windows High Contrast. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--bb-signal);outline-offset:2px;border-radius:0}

/* Square scrollbars. */
*{scrollbar-width:thin;scrollbar-color:var(--bb-rule-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bb-rule-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--bb-edge)}

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.bb-page{width:100%;max-width:var(--bb-w-page);margin-inline:auto;padding-inline:var(--bb-gutter)}
.bb-page--wide{max-width:1440px}
.bb-prose{max-width:var(--bb-w-prose)}
.bb-section{padding-block:var(--bb-sp-8)}
@media (min-width:900px){.bb-section{padding-block:var(--bb-sp-9)}}
.bb-section--tight{padding-block:var(--bb-sp-6)}
.bb-section + .bb-section{border-top:1px solid var(--bb-rule-2)}
.bb-stack{display:flex;flex-direction:column;gap:var(--bb-sp-4)}
.bb-stack--2{gap:var(--bb-sp-2)}
.bb-stack--5{gap:var(--bb-sp-5)}
.bb-stack--6{gap:var(--bb-sp-6)}
.bb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bb-sp-3)}
.bb-cluster--between{justify-content:space-between}
.bb-spacer{flex:1 1 auto}
.bb-divider{height:1px;background:var(--bb-rule-2);border:0;margin:0}

/* --------------------------------------------------------------------------
   .bb-hgrid — THE GAP *IS* THE HAIRLINE.
   The 1px grid-gap shows the container background through as a rule.
   EVERY DIRECT CHILD MUST REPAINT A SOLID BACKGROUND or the mechanic fails
   silently and you get a grey slab. Children carry no borders of their own.
   -------------------------------------------------------------------------- */
.bb-hgrid{display:grid;gap:1px;background:var(--bb-rule);border:1px solid var(--bb-rule-2)}
.bb-hgrid>*{background:var(--bb-surface);padding:var(--bb-sp-4);min-width:0}
.bb-hgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bb-hgrid--3{grid-template-columns:repeat(1,minmax(0,1fr))}
.bb-hgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){
  .bb-hgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-hgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.bb-hgrid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.bb-hgrid--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.bb-hgrid--6{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Grid backdrop. EXACTLY TWO USES SITE-WIDE: landing hero, console page-head. */
.bb-grid{position:relative;isolation:isolate}
.bb-grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--bb-grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--bb-grid-line) 1px,transparent 1px);
  background-size:var(--bb-grid-pitch) var(--bb-grid-pitch);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 78%);
}

/* ==========================================================================
   4. TYPE
   ========================================================================== */
h1,h2,h3,h4,h5,h6{margin:0;color:var(--bb-ink-0);font-family:var(--bb-font)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.bb-display{font:700 var(--bb-t-display)/1.02 var(--bb-font);letter-spacing:-.032em;color:var(--bb-ink-0)}
.bb-h1{font:700 var(--bb-t-h1)/1.08 var(--bb-font);letter-spacing:-.026em;color:var(--bb-ink-0)}
.bb-h2{font:600 var(--bb-t-h2)/1.16 var(--bb-font);letter-spacing:-.020em;color:var(--bb-ink-0)}
.bb-h3{font:600 var(--bb-t-h3)/1.32 var(--bb-font);letter-spacing:-.010em;color:var(--bb-ink-0)}
.bb-body{font:400 var(--bb-t-body)/1.65 var(--bb-font);color:var(--bb-ink-1)}
.bb-body-sm{font:400 var(--bb-t-body-sm)/1.60 var(--bb-font);color:var(--bb-ink-2)}
.bb-ui{font:500 var(--bb-t-ui)/1.40 var(--bb-font);letter-spacing:.005em}
.bb-caption{font:400 var(--bb-t-caption)/1.45 var(--bb-font);color:var(--bb-ink-3)}
.bb-lead{font:400 var(--bb-t-body)/1.6 var(--bb-font);color:var(--bb-ink-2);max-width:52ch}

/* THE LABEL RULE — one class, used unchanged for every panel header, stat
   caption, form label, table th, section eyebrow, sidebar group heading and
   toast kicker. Never below 11px. Never a body style. THE SIGNATURE. */
.bb-label{
  font:600 var(--bb-t-label)/1.2 var(--bb-font);
  text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3);
  display:block;margin:0;
}
.bb-label--signal{color:var(--bb-signal)}
.bb-label--ink{color:var(--bb-ink-2)}

/* THE MONO RULE — machine text only: code, JSON, endpoints, HTTP verbs and
   status codes, API keys and references, phone and account numbers,
   timestamps, every currency amount, every numeric table column, every live
   readout. NEVER prose, headings, buttons, nav or marketing copy. */
.bb-mono{font-family:var(--bb-mono);font-size:var(--bb-t-mono);line-height:1.6;font-variant-numeric:tabular-nums}
.bb-mono-xs{font:500 var(--bb-t-mono-xs)/1.4 var(--bb-mono);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bb-num,.bb-tabular{font-family:var(--bb-mono);font-variant-numeric:tabular-nums}

/* UPPERCASE is only ever mono or the 11px label. No uppercase Manrope. */
.bb-upper{text-transform:uppercase;letter-spacing:.06em;font-family:var(--bb-mono)}

.bb-ink-0{color:var(--bb-ink-0)} .bb-ink-1{color:var(--bb-ink-1)}
.bb-ink-2{color:var(--bb-ink-2)} .bb-ink-3{color:var(--bb-ink-3)}
.bb-ink-4{color:var(--bb-ink-4)} .bb-signal{color:var(--bb-signal)}

/* ==========================================================================
   5. NAV — public topbar
   ========================================================================== */
.bb-nav{
  position:sticky;top:0;z-index:60;
  height:var(--bb-nav-h);
  background:var(--bb-void);            /* solid — NO backdrop-filter (low-end Android) */
  border-bottom:1px solid var(--bb-rule-2);
}
.bb-nav__inner{
  height:100%;display:flex;align-items:center;gap:var(--bb-sp-5);
  max-width:var(--bb-w-page);margin-inline:auto;padding-inline:var(--bb-gutter);
}
/* Brand is TYPE, not an image. */
.bb-nav__brand{display:inline-flex;align-items:center;gap:var(--bb-sp-2);text-decoration:none;flex:0 0 auto}
.bb-nav__brand:hover{text-decoration:none}
.bb-nav__mark{width:6px;height:6px;background:var(--bb-signal);flex:0 0 auto;border-radius:0}
.bb-nav__word{font:700 15px/1 var(--bb-font);color:var(--bb-ink-0);letter-spacing:-.01em}
.bb-nav__tld{font:700 15px/1 var(--bb-font);color:var(--bb-ink-3);letter-spacing:-.01em}

.bb-nav__links{display:none;align-items:center;gap:var(--bb-sp-5);margin:0;padding:0;list-style:none;height:100%}
@media (min-width:900px){.bb-nav__links{display:flex}}
.bb-nav__link{
  position:relative;display:inline-flex;align-items:center;height:100%;
  font:500 var(--bb-t-ui)/1 var(--bb-font);letter-spacing:.005em;
  color:var(--bb-ink-2);text-decoration:none;
  transition:color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-nav__link:hover{color:var(--bb-ink-0);text-decoration:none}
/* The current-page marker sits ON the nav's own bottom rule. */
.bb-nav__link.is-current{color:var(--bb-ink-0)}
.bb-nav__link.is-current::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bb-signal);
}
.bb-nav__right{display:flex;align-items:center;gap:var(--bb-sp-3);margin-left:auto}
.bb-nav__status{display:none;align-items:center;gap:var(--bb-sp-2)}
@media (min-width:768px){.bb-nav__status{display:inline-flex}}
.bb-nav__ghost{display:none}
@media (min-width:640px){.bb-nav__ghost{display:inline-flex}}

/* Hamburger — three hairlines, square. */
.bb-nav__burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0 9px;margin-right:-9px;
  background:none;border:0;cursor:pointer;border-radius:0;
}
@media (min-width:900px){.bb-nav__burger{display:none}}
.bb-nav__burger span{display:block;height:1px;width:100%;background:var(--bb-ink-2);transition:background var(--bb-dur-1) var(--bb-ease-out)}
.bb-nav__burger:hover span{background:var(--bb-ink-0)}

/* ==========================================================================
   6. CONSOLE SHELL — sidebar >=1024px, drawer + tab bar below
   ========================================================================== */
.bb-shell{display:block;min-height:100vh}
@media (min-width:1024px){
  .bb-shell{display:grid;grid-template-columns:var(--bb-side-w) minmax(0,1fr)}
}
.bb-shell__main{min-width:0;padding-bottom:calc(var(--bb-tabbar-h) + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){.bb-shell__main{padding-bottom:var(--bb-sp-8)}}

.bb-side{
  display:none;
  background:var(--bb-surface);border-right:1px solid var(--bb-rule-2);
  padding:var(--bb-sp-5) 0;
}
@media (min-width:1024px){
  .bb-side{display:block;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
}
.bb-side__brand{display:flex;align-items:center;gap:var(--bb-sp-2);padding:0 var(--bb-sp-4) var(--bb-sp-5);text-decoration:none}
.bb-side__group{margin-bottom:var(--bb-sp-5)}
.bb-side__heading{padding:0 var(--bb-sp-4) var(--bb-sp-2)}
.bb-side__link{
  position:relative;display:flex;align-items:center;gap:var(--bb-sp-3);
  height:38px;padding:0 var(--bb-sp-4);
  font:500 var(--bb-t-ui)/1 var(--bb-font);letter-spacing:.005em;
  color:var(--bb-ink-2);text-decoration:none;border-left:2px solid transparent;
  transition:background-color var(--bb-dur-1) var(--bb-ease-out),color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-side__link:hover{background:var(--bb-hover);color:var(--bb-ink-0);text-decoration:none}
/* .is-current, NEVER .active — get_referell.php uses .active for slideshow
   dots AND bottom-menu items, and developer_api.php uses .pill.active as a
   STATUS value. Colliding on .active breaks both. */
.bb-side__link.is-current{background:var(--bb-signal-wash);color:var(--bb-ink-0);border-left-color:var(--bb-signal)}
.bb-side__icon{width:16px;height:16px;flex:0 0 auto;color:var(--bb-ink-4)}
.bb-side__link.is-current .bb-side__icon{color:var(--bb-signal)}
.bb-side__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-side__foot{padding:var(--bb-sp-4) var(--bb-sp-4) 0;border-top:1px solid var(--bb-rule)}

/* Mobile drawer. NOTE: each page keeps its OWN open-state class —
   dashboard/pricing/become_vendor use .show, get_referell uses .active.
   Both are supported here so no page's JS needs to change. */
.bb-drawer{
  position:fixed;inset:0 auto 0 0;z-index:80;
  width:min(84vw,300px);max-width:300px;
  background:var(--bb-surface);border-right:1px solid var(--bb-rule-2);
  box-shadow:var(--bb-shadow-overlay);
  transform:translateX(-100%);
  transition:transform var(--bb-dur-3) var(--bb-ease-out);
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--bb-sp-5) 0;
}
.bb-drawer.show,.bb-drawer.active,.bb-drawer.is-open{transform:translateX(0)}
@media (min-width:1024px){.bb-drawer{display:none}}
.bb-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(3,5,8,.72);
  opacity:0;visibility:hidden;
  transition:opacity var(--bb-dur-2) var(--bb-ease-out),visibility var(--bb-dur-2) var(--bb-ease-out);
}
.bb-scrim.show,.bb-scrim.active,.bb-scrim.is-open{opacity:1;visibility:visible}
@media (min-width:1024px){.bb-scrim{display:none}}

/* Bottom tab bar. */
.bb-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:calc(var(--bb-tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--bb-surface);border-top:1px solid var(--bb-rule-2);
}
@media (min-width:1024px){.bb-tabbar{display:none}}
.bb-tabbar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--bb-ink-3);text-decoration:none;
  font:600 10px/1 var(--bb-font);text-transform:uppercase;letter-spacing:.1em;
  border-top:2px solid transparent;margin-top:-1px;
  transition:color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-tabbar__item:hover{color:var(--bb-ink-1);text-decoration:none}
.bb-tabbar__item .bb-tabbar__icon{width:20px;height:20px;color:currentColor}
.bb-tabbar__item.is-current{color:var(--bb-signal);border-top-color:var(--bb-signal)}

/* Console page head — the SECOND and last permitted .bb-grid use. */
.bb-pagehead{border-bottom:1px solid var(--bb-rule-2);padding-block:var(--bb-sp-6)}
.bb-pagehead__inner{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--bb-sp-4);justify-content:space-between}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.bb-hero{position:relative;border-bottom:1px solid var(--bb-rule-2);padding-block:var(--bb-sp-8) var(--bb-sp-9)}
@media (min-width:900px){.bb-hero{padding-block:var(--bb-sp-9) var(--bb-sp-10)}}
.bb-hero__inner{display:grid;gap:var(--bb-sp-7);align-items:center}
@media (min-width:960px){.bb-hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--bb-sp-8)}}
.bb-hero__eyebrow{margin-bottom:var(--bb-sp-4)}
.bb-hero__title{max-width:14ch;margin-bottom:var(--bb-sp-4)}
.bb-hero__sub{max-width:52ch;color:var(--bb-ink-2);font-size:var(--bb-t-body);line-height:1.65;margin-bottom:var(--bb-sp-6)}
.bb-hero__actions{display:flex;flex-wrap:wrap;gap:var(--bb-sp-3);margin-bottom:var(--bb-sp-6)}
.bb-hero__meta{border-top:1px solid var(--bb-rule-2)}
.bb-hero__metarow{
  display:flex;align-items:center;gap:var(--bb-sp-3);
  padding:var(--bb-sp-3) 0;border-bottom:1px solid var(--bb-rule-2);
  font-family:var(--bb-mono);font-size:var(--bb-t-mono-xs);color:var(--bb-ink-2);
  min-width:0;
}
.bb-hero__metakey{flex:0 0 44px;color:var(--bb-ink-3);font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em}
.bb-hero__metaval{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none}
.bb-hero__metaval::-webkit-scrollbar{display:none}
.bb-hero__visual{min-width:0}

/* ==========================================================================
   8. CODE
   ========================================================================== */
.bb-codewrap{border:1px solid var(--bb-rule-2);background:var(--bb-well);border-radius:0}
.bb-codewrap__bar{
  display:flex;align-items:center;gap:var(--bb-sp-3);
  height:32px;padding:0 var(--bb-sp-3);
  background:var(--bb-raised);border-bottom:1px solid var(--bb-rule-2);
}
.bb-codewrap__name{font:400 var(--bb-t-mono-xs)/1 var(--bb-mono);color:var(--bb-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-codewrap__tools{margin-left:auto;display:flex;align-items:center;gap:var(--bb-sp-2)}
.bb-codewrap__body{margin:0;padding:var(--bb-sp-4);overflow-x:auto;background:var(--bb-well)}
.bb-code,pre.bb-code{
  margin:0;font-family:var(--bb-mono);font-size:var(--bb-t-mono);line-height:1.6;
  color:var(--bb-ink-2);white-space:pre;tab-size:2;
}
.bb-code code{font:inherit;color:inherit;background:none;padding:0}

/* FOUR token colours only. These reuse the .tok-* class names that
   /api/docs/ already emits, so that page needs no markup churn. */
.tok-key{color:var(--bb-ink-0);font-weight:500}
.tok-str{color:var(--bb-signal)}
.tok-num{color:var(--bb-ink-0)}
.tok-com{color:var(--bb-ink-4)}

/* Shell samples: an UNSELECTABLE $ prompt, so copying yields a runnable line. */
.bb-ln{display:block}
.bb-code--sh .bb-ln::before{content:"$ ";color:var(--bb-ink-4);-webkit-user-select:none;user-select:none}
.bb-code--sh .bb-ln--cont::before{content:"  ";-webkit-user-select:none;user-select:none}

/* Inline code. */
.bb-code-inline{
  font-family:var(--bb-mono);font-size:.92em;
  background:var(--bb-raised);border:1px solid var(--bb-rule);
  padding:1px 5px;color:var(--bb-ink-1);border-radius:0;
}

/* HTTP verb chips. */
.bb-verb{
  display:inline-block;min-width:52px;text-align:center;
  font:500 var(--bb-t-mono-xs)/18px var(--bb-mono);letter-spacing:.06em;
  padding:1px 6px;border:1px solid var(--bb-rule-2);background:var(--bb-hover);
  color:var(--bb-ink-2);border-radius:0;
}
.bb-verb--get{color:var(--bb-signal);border-color:var(--bb-signal-line);background:var(--bb-signal-wash)}
.bb-verb--post{color:var(--bb-ink-1);border-color:var(--bb-rule-2);background:var(--bb-hover)}
.bb-verb--del{color:var(--bb-fail);border-color:var(--bb-fail-line);background:var(--bb-fail-wash)}

/* ==========================================================================
   9. TELEMETRY TILE
   Lives inside .bb-hgrid and carries NO border of its own.
   No sparkline, no delta arrow, no icon.
   If a number cannot be computed, DROP THE TILE — never a placeholder.
   ========================================================================== */
.bb-tile{display:flex;flex-direction:column;gap:var(--bb-sp-2);min-width:0}
.bb-tile__label{font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3)}
.bb-tile__value{
  font:500 22px/1.1 var(--bb-mono);color:var(--bb-ink-0);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;
}
.bb-tile__sub{font:400 var(--bb-t-mono-xs)/1.4 var(--bb-mono);color:var(--bb-ink-3)}

/* ==========================================================================
   10. BUTTONS
   Colour changes on hover. No shadow, no gradient, no transform, no scale.
   ========================================================================== */
.bb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bb-sp-2);
  min-height:44px;padding:0 var(--bb-sp-5);
  font:600 var(--bb-t-ui)/1 var(--bb-font);letter-spacing:.005em;
  border:1px solid transparent;border-radius:0;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  -webkit-appearance:none;appearance:none;
  transition:background-color var(--bb-dur-1) var(--bb-ease-out),
             border-color var(--bb-dur-1) var(--bb-ease-out),
             color var(--bb-dur-1) var(--bb-ease-out);
}
@media (pointer:fine){.bb-btn{min-height:40px}}
.bb-btn:hover{text-decoration:none}
.bb-btn:disabled,.bb-btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bb-btn__icon{width:16px;height:16px;flex:0 0 auto}

/* ONE .bb-btn--primary per viewport. */
.bb-btn--primary{background:var(--bb-signal);border-color:var(--bb-signal);color:var(--bb-void)}
.bb-btn--primary:hover{background:var(--bb-signal-hi);border-color:var(--bb-signal-hi);color:var(--bb-void)}
.bb-btn--primary:active{background:var(--bb-signal-lo);border-color:var(--bb-signal-lo)}

.bb-btn--secondary{background:var(--bb-raised);border-color:var(--bb-edge);color:var(--bb-ink-1)}
.bb-btn--secondary:hover{background:var(--bb-hover);border-color:var(--bb-edge-hi);color:var(--bb-ink-0)}

.bb-btn--ghost{background:transparent;border-color:transparent;color:var(--bb-ink-2)}
.bb-btn--ghost:hover{background:var(--bb-hover);color:var(--bb-ink-0)}

/* Outline only — nothing on this site is a solid red button. */
.bb-btn--danger{background:transparent;border-color:var(--bb-fail-line);color:var(--bb-fail)}
.bb-btn--danger:hover{background:var(--bb-fail-wash);border-color:var(--bb-fail);color:var(--bb-fail)}

.bb-btn--sm{min-height:32px;padding:0 var(--bb-sp-3);font-size:var(--bb-t-caption)}
.bb-btn--lg{min-height:48px;padding:0 var(--bb-sp-6);font-size:var(--bb-t-body-sm)}
.bb-btn--block{display:flex;width:100%}
.bb-btn--icon{padding:0;width:40px;min-width:40px}

/* ==========================================================================
   11. FORMS
   The surface steps are only ~1.05:1 apart, so the BORDER identifies the
   control and must carry the 3:1 non-text requirement — hence --bb-edge.
   ========================================================================== */
.bb-field{display:flex;flex-direction:column;gap:var(--bb-sp-2);margin-bottom:var(--bb-sp-4);min-width:0}
.bb-field__row{display:flex;gap:var(--bb-sp-3);flex-wrap:wrap}
.bb-field__row>.bb-field{flex:1 1 180px;margin-bottom:0}

.bb-input,.bb-select,.bb-textarea,
.bb-field input[type="text"],.bb-field input[type="email"],.bb-field input[type="password"],
.bb-field input[type="tel"],.bb-field input[type="number"],.bb-field input[type="url"],
.bb-field input[type="date"],.bb-field input[type="search"],.bb-field select,.bb-field textarea{
  width:100%;min-height:44px;padding:0 var(--bb-sp-3);
  background:var(--bb-raised);color:var(--bb-ink-0);
  border:1px solid var(--bb-edge);border-radius:0;
  font:400 16px/1.4 var(--bb-font);   /* 16px floor below 769px — stops iOS zoom-on-focus */
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--bb-dur-1) var(--bb-ease-out),background-color var(--bb-dur-1) var(--bb-ease-out);
}
@media (min-width:769px){
  .bb-input,.bb-select,.bb-textarea,
  .bb-field input[type="text"],.bb-field input[type="email"],.bb-field input[type="password"],
  .bb-field input[type="tel"],.bb-field input[type="number"],.bb-field input[type="url"],
  .bb-field input[type="date"],.bb-field input[type="search"],.bb-field select,.bb-field textarea{font-size:var(--bb-t-body-sm)}
}
.bb-textarea,.bb-field textarea{min-height:110px;padding:var(--bb-sp-3);line-height:1.6;resize:vertical}
.bb-input::placeholder,.bb-textarea::placeholder,.bb-field input::placeholder,.bb-field textarea::placeholder{color:var(--bb-ink-4);opacity:1}
.bb-input:hover,.bb-select:hover,.bb-textarea:hover,.bb-field input:hover,.bb-field select:hover,.bb-field textarea:hover{border-color:var(--bb-edge-hi)}
.bb-input:focus-visible,.bb-select:focus-visible,.bb-textarea:focus-visible,
.bb-field input:focus-visible,.bb-field select:focus-visible,.bb-field textarea:focus-visible{
  border-color:var(--bb-signal);outline:2px solid var(--bb-signal);outline-offset:2px;
}
.bb-input:disabled,.bb-field input:disabled,.bb-field select:disabled,.bb-field textarea:disabled,
.bb-input[readonly],.bb-field input[readonly]{background:var(--bb-surface);color:var(--bb-ink-3);border-color:var(--bb-rule-2);cursor:default}

/* Mono inputs: phone numbers, meter numbers, amounts, PINs, references. */
.bb-input--mono,.bb-field input.bb-input--mono{font-family:var(--bb-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Selects stay NATIVE <select>. appearance:none + an inline-SVG chevron. */
.bb-select,.bb-field select{
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238590A0' stroke-width='1.25' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.bb-select option,.bb-field select option{background:var(--bb-raised);color:var(--bb-ink-0)}

.bb-check{display:inline-flex;align-items:flex-start;gap:var(--bb-sp-2);cursor:pointer;font-size:var(--bb-t-body-sm);color:var(--bb-ink-2)}
.bb-check input[type="checkbox"],.bb-check input[type="radio"]{
  width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;
  accent-color:var(--bb-signal);border-radius:0;cursor:pointer;
}

.bb-hint{font:400 var(--bb-t-caption)/1.45 var(--bb-font);color:var(--bb-ink-3)}
/* Error text is a PLAIN TEXT NODE. The auth pages write to
   #numberError/#emailError/#passwordError with .textContent, so these
   elements must never gain icon children. */
.bb-error{font:400 var(--bb-t-caption)/1.45 var(--bb-font);color:var(--bb-fail);min-height:0}
.bb-error:empty{display:none}
.bb-field.is-invalid .bb-input,.bb-field.is-invalid input,.bb-field.is-invalid select,
.bb-input.is-invalid,.is-invalid>.bb-input{border-color:var(--bb-fail)}
.bb-field.is-valid .bb-input,.bb-input.is-valid{border-color:var(--bb-signal-line)}

.bb-form{max-width:520px}
.bb-form--wide{max-width:none}
.bb-fieldset{border:1px solid var(--bb-rule-2);padding:var(--bb-sp-4);margin:0 0 var(--bb-sp-4);border-radius:0}
.bb-fieldset>legend{padding:0 var(--bb-sp-2);font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3)}

/* ==========================================================================
   12. TABLES
   ========================================================================== */
.bb-tablewrap{width:100%;overflow-x:auto;border:1px solid var(--bb-rule-2);background:var(--bb-surface)}
.bb-table{width:100%;border-collapse:collapse;font-size:var(--bb-t-ui);background:var(--bb-surface)}
.bb-table th{
  position:sticky;top:0;z-index:1;
  background:var(--bb-raised);
  font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;
  color:var(--bb-ink-3);text-align:left;white-space:nowrap;
  padding:var(--bb-sp-3) var(--bb-sp-4);
  border-bottom:1px solid var(--bb-rule-2);
}
.bb-table td{
  padding:var(--bb-sp-3) var(--bb-sp-4);
  color:var(--bb-ink-2);
  border-bottom:1px solid var(--bb-rule);   /* row separators. NO ZEBRA. */
  vertical-align:middle;
}
.bb-table tbody tr:last-child td{border-bottom:0}
.bb-table tbody tr{transition:background-color var(--bb-dur-1) var(--bb-ease-out)}
.bb-table tbody tr:hover{background:var(--bb-hover)}
.bb-table td.bb-num,.bb-table th.bb-num{font-family:var(--bb-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bb-table td.bb-mono-cell{font-family:var(--bb-mono);font-size:var(--bb-t-mono-xs);color:var(--bb-ink-2);white-space:nowrap}
.bb-table--compact td,.bb-table--compact th{padding:var(--bb-sp-2) var(--bb-sp-3)}
.bb-table caption{caption-side:bottom;padding-top:var(--bb-sp-3);text-align:left;font:400 var(--bb-t-mono-xs)/1.4 var(--bb-mono);color:var(--bb-ink-3)}

/* SERVER-RENDERED mobile stacking. Emit BOTH the <table> and the .bb-rows
   block markup from PHP and let the media query choose. This avoids
   injecting data-label into all_orders_history.php's $rowsHtml builder. */
/* OPT-IN: put .bb-stacked on BOTH the .bb-tablewrap and the .bb-rows block.
   A .bb-tablewrap without .bb-stacked keeps its normal horizontal scroll on
   every width, so no existing table is hidden by accident. */
.bb-rows{display:none}
.bb-rows.bb-stacked{display:block}
@media (min-width:640px){
  .bb-rows,.bb-rows.bb-stacked{display:none}
}
@media (max-width:639px){
  .bb-tablewrap.bb-stacked{display:none}
}
.bb-row{border:1px solid var(--bb-rule-2);background:var(--bb-surface);padding:var(--bb-sp-4);margin-bottom:-1px}
.bb-row__line{display:flex;gap:var(--bb-sp-3);justify-content:space-between;align-items:baseline;padding:3px 0;min-width:0}
.bb-row__k{flex:0 0 auto;font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3)}
.bb-row__v{flex:1 1 auto;min-width:0;text-align:right;color:var(--bb-ink-1);font-size:var(--bb-t-body-sm);overflow-wrap:anywhere}
.bb-row__v.bb-num{font-family:var(--bb-mono);font-variant-numeric:tabular-nums}

/* ==========================================================================
   13. CARDS
   No hover lift, no shadow transition.
   ========================================================================== */
.bb-card{background:var(--bb-surface);border:1px solid var(--bb-rule-2);border-radius:0;min-width:0}
.bb-card__head{
  display:flex;align-items:center;gap:var(--bb-sp-3);
  padding:var(--bb-sp-3) var(--bb-sp-4);
  border-bottom:1px solid var(--bb-rule-2);
  min-height:44px;
}
.bb-card__title{flex:1 1 auto;min-width:0;font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3)}
.bb-card__tools{margin-left:auto;display:flex;align-items:center;gap:var(--bb-sp-2);flex:0 0 auto}
.bb-card__body{padding:var(--bb-sp-4)}
.bb-card__body--flush{padding:0}
.bb-card__foot{padding:var(--bb-sp-3) var(--bb-sp-4);background:var(--bb-raised);border-top:1px solid var(--bb-rule-2)}
.bb-card--pad{padding:var(--bb-sp-5)}

/* Hover changes background and border colour ONLY. */
.bb-card--link{display:block;text-decoration:none;color:inherit;transition:background-color var(--bb-dur-1) var(--bb-ease-out),border-color var(--bb-dur-1) var(--bb-ease-out)}
.bb-card--link:hover{background:var(--bb-hover);border-color:var(--bb-edge);text-decoration:none}

/* 2px left signal bar — the one-time key reveal, and notes. */
.bb-card--rail{border-left:2px solid var(--bb-signal)}
.bb-card--rail-warn{border-left:2px solid var(--bb-warn)}
.bb-card--rail-fail{border-left:2px solid var(--bb-fail)}

.bb-card--auth{max-width:400px;margin-inline:auto;width:100%}

/* ==========================================================================
   14. STATUS LED + BADGE
   ABSOLUTE RULE: an LED NEVER appears without an adjacent text label.
   ========================================================================== */
.bb-led{
  display:inline-block;width:6px;height:6px;flex:0 0 auto;
  border-radius:var(--bb-r-led);          /* the ONLY round object on the site */
  background:var(--bb-idle);
  box-shadow:0 0 0 3px rgba(90,100,114,.16);   /* the only halo in the system */
  vertical-align:middle;
}
.bb-led--live,.bb-led--ok,.bb-led--success{background:var(--bb-signal);box-shadow:0 0 0 3px var(--bb-signal-ring)}
.bb-led--pending,.bb-led--warn,.bb-led--refunded{background:var(--bb-warn);box-shadow:0 0 0 3px rgba(245,184,65,.16)}
.bb-led--fail,.bb-led--failed{background:var(--bb-fail);box-shadow:0 0 0 3px rgba(255,123,114,.16)}
.bb-led--idle,.bb-led--neutral{background:var(--bb-idle);box-shadow:0 0 0 3px rgba(90,100,114,.16)}
.bb-led--test{background:var(--bb-ink-3);box-shadow:0 0 0 3px rgba(133,144,160,.16)}
.bb-led--live{animation:bb-pulse 2400ms steps(1,end) infinite}

.bb-ledline{display:inline-flex;align-items:center;gap:var(--bb-sp-2)}
.bb-ledline__text{font:500 var(--bb-t-mono-xs)/1 var(--bb-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--bb-ink-2)}

.bb-badge{
  display:inline-flex;align-items:center;gap:6px;
  font:500 var(--bb-t-mono-xs)/1 var(--bb-mono);
  text-transform:uppercase;letter-spacing:.06em;
  padding:4px 8px;border:1px solid var(--bb-rule-2);
  background:var(--bb-hover);color:var(--bb-ink-2);border-radius:0;white-space:nowrap;
}
/* Variant suffixes match the real API statuses AND developer_api.php's
   `.pill <?= $app['status'] ?>` interpolation, so that PHP keeps working. */
.bb-badge--live,.bb-badge--success,.bb-badge--ok,.bb-badge--active{color:var(--bb-signal);border-color:var(--bb-signal-line);background:var(--bb-signal-wash)}
.bb-badge--pending,.bb-badge--refunded,.bb-badge--warn,.bb-badge--suspended{color:var(--bb-warn);border-color:var(--bb-warn-line);background:var(--bb-warn-wash)}
.bb-badge--fail,.bb-badge--failed,.bb-badge--danger{color:var(--bb-fail);border-color:var(--bb-fail-line);background:var(--bb-fail-wash)}
.bb-badge--neutral,.bb-badge--revoked,.bb-badge--idle{color:var(--bb-ink-3);border-color:var(--bb-rule-2);background:var(--bb-raised)}
.bb-badge--test{color:var(--bb-ink-2);border-color:var(--bb-edge);background:var(--bb-raised)}

/* ==========================================================================
   15. SHEET — FOR NEW SURFACES ONLY.
   The six VTU pages KEEP .modals/.modal-contents, their display:none<->flex
   toggle and their window.onclick backdrop dismiss. Repaint in place
   (see section 23), never restructure the nesting.
   ========================================================================== */
.bb-sheet{position:fixed;inset:0;z-index:90;display:none}
.bb-sheet.is-open,.bb-sheet.show{display:block}
.bb-sheet__backdrop{position:absolute;inset:0;background:rgba(3,5,8,.76)}
.bb-sheet__panel{
  position:absolute;left:0;right:0;bottom:0;
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bb-surface);border-top:1px solid var(--bb-rule-2);
  box-shadow:var(--bb-shadow-overlay);border-radius:0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  animation:bb-sheet-in var(--bb-dur-3) var(--bb-ease-out) both;
}
@media (min-width:640px){
  .bb-sheet__panel{
    left:50%;right:auto;top:50%;bottom:auto;
    transform:translate(-50%,-50%);
    width:min(560px,calc(100vw - 2 * var(--bb-gutter)));
    border:1px solid var(--bb-rule-2);
    animation:bb-sheet-in-c var(--bb-dur-2) var(--bb-ease-out) both;
  }
}
.bb-sheet__head{display:flex;align-items:center;gap:var(--bb-sp-3);padding:var(--bb-sp-4);border-bottom:1px solid var(--bb-rule-2)}
.bb-sheet__title{flex:1 1 auto;font:600 var(--bb-t-h3)/1.32 var(--bb-font);color:var(--bb-ink-0);letter-spacing:-.01em}
.bb-sheet__body{padding:var(--bb-sp-4)}
.bb-sheet__foot{display:flex;gap:var(--bb-sp-3);justify-content:flex-end;padding:var(--bb-sp-4);border-top:1px solid var(--bb-rule-2);background:var(--bb-raised)}
@keyframes bb-sheet-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bb-sheet-in-c{from{transform:translate(-50%,calc(-50% + 8px));opacity:0}to{transform:translate(-50%,-50%);opacity:1}}

/* ==========================================================================
   16. TOAST
   A 2px full-height STATE RAIL in the first grid column — not a coloured
   icon circle. .response-modal is styled in the same block so the six VTU
   pages' showResponse()/hideResponseModal() need ZERO JS change.
   ========================================================================== */
.bb-toast,.response-modal{
  position:fixed;left:var(--bb-gutter);right:var(--bb-gutter);bottom:-120px;z-index:100;
  display:grid;grid-template-columns:2px minmax(0,1fr);
  align-items:stretch;
  background:var(--bb-surface);border:1px solid var(--bb-rule-2);border-left:0;
  box-shadow:var(--bb-shadow-overlay);border-radius:0;
  color:var(--bb-ink-1);font-size:var(--bb-t-body-sm);line-height:1.5;
  transition:bottom var(--bb-dur-3) var(--bb-ease-out);
  max-width:520px;margin-inline:auto;overflow:hidden;
}
.bb-toast::before,.response-modal::before{content:"";display:block;background:var(--bb-idle)}
.bb-toast.show,.response-modal.show{bottom:calc(var(--bb-tabbar-h) + 12px)}
@media (min-width:1024px){.bb-toast.show,.response-modal.show{bottom:24px}}
.bb-toast__body,.response-modal>*:not(.bb-toast__rail){padding:var(--bb-sp-4);min-width:0}
.bb-toast__kicker{font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3);margin-bottom:var(--bb-sp-1);display:block}
.bb-toast--success::before,.response-modal.success::before{background:var(--bb-signal)}
.bb-toast--warn::before,.response-modal.warning::before{background:var(--bb-warn)}
.bb-toast--error::before,.response-modal.error::before{background:var(--bb-fail)}
.response-modal .close-btn,.bb-toast__close{
  background:none;border:0;color:var(--bb-ink-3);cursor:pointer;
  font-size:18px;line-height:1;padding:var(--bb-sp-2);border-radius:0;
}
.response-modal .close-btn:hover,.bb-toast__close:hover{color:var(--bb-ink-0)}

/* Inline (non-fixed) alert, same grammar. */
.bb-alert{display:grid;grid-template-columns:2px minmax(0,1fr);background:var(--bb-surface);border:1px solid var(--bb-rule-2);border-left:0;margin-bottom:var(--bb-sp-4)}
.bb-alert::before{content:"";display:block;background:var(--bb-idle)}
.bb-alert__body{padding:var(--bb-sp-3) var(--bb-sp-4);font-size:var(--bb-t-body-sm);color:var(--bb-ink-1)}
.bb-alert--success::before{background:var(--bb-signal)}
.bb-alert--warn::before{background:var(--bb-warn)}
.bb-alert--error::before{background:var(--bb-fail)}

/* ==========================================================================
   17. EMPTY STATE
   .bb-empty__query echoes the EXACT filter that returned nothing.
   Replaces the placehold.co remote images in get_referell.php.
   ========================================================================== */
.bb-empty{border:1px solid var(--bb-rule-2);background:var(--bb-surface);padding:var(--bb-sp-7) var(--bb-sp-5);text-align:center;border-radius:0}
.bb-empty__query{
  display:inline-block;font:500 var(--bb-t-mono-xs)/1.4 var(--bb-mono);
  text-transform:uppercase;letter-spacing:.06em;color:var(--bb-ink-3);
  border:1px solid var(--bb-rule-2);background:var(--bb-raised);
  padding:5px 10px;margin-bottom:var(--bb-sp-4);max-width:100%;overflow-wrap:anywhere;
}
.bb-empty__text{color:var(--bb-ink-2);font-size:var(--bb-t-body-sm);max-width:46ch;margin:0 auto var(--bb-sp-5)}
.bb-empty__text:last-child{margin-bottom:0}

/* ==========================================================================
   18. TABS
   ========================================================================== */
.bb-tabs{display:flex;gap:0;border-bottom:1px solid var(--bb-rule-2);overflow-x:auto;scrollbar-width:none}
.bb-tabs::-webkit-scrollbar{display:none}
.bb-tab{
  position:relative;display:inline-flex;align-items:center;
  min-height:40px;padding:0 var(--bb-sp-4);
  font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;
  color:var(--bb-ink-3);background:none;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-tab:hover{color:var(--bb-ink-1);text-decoration:none}
.bb-tab.is-current,.bb-tab[aria-selected="true"]{color:var(--bb-ink-0)}
.bb-tab.is-current::after,.bb-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bb-signal)}

/* ==========================================================================
   19. PAGINATION
   ========================================================================== */
.bb-pager{display:flex;align-items:center;gap:var(--bb-sp-2);flex-wrap:wrap;padding-block:var(--bb-sp-4)}
.bb-pager__meta{font:400 var(--bb-t-mono-xs)/1.4 var(--bb-mono);color:var(--bb-ink-3);margin-right:auto}
.bb-pager__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 var(--bb-sp-2);
  font:500 var(--bb-t-mono-xs)/1 var(--bb-mono);font-variant-numeric:tabular-nums;
  color:var(--bb-ink-2);background:var(--bb-raised);
  border:1px solid var(--bb-rule-2);border-radius:0;text-decoration:none;
  transition:background-color var(--bb-dur-1) var(--bb-ease-out),border-color var(--bb-dur-1) var(--bb-ease-out),color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-pager__link:hover{background:var(--bb-hover);border-color:var(--bb-edge);color:var(--bb-ink-0);text-decoration:none}
.bb-pager__link.is-current{background:var(--bb-signal-wash);border-color:var(--bb-signal-line);color:var(--bb-signal)}
.bb-pager__link.is-disabled{opacity:.4;pointer-events:none}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.bb-footer{border-top:1px solid var(--bb-rule-2);background:var(--bb-void);padding-block:var(--bb-sp-8) var(--bb-sp-5);margin-top:var(--bb-sp-8)}
.bb-footer__grid{display:grid;gap:var(--bb-sp-6);grid-template-columns:1fr}
@media (min-width:640px){.bb-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.bb-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.bb-footer__col{min-width:0}
.bb-footer__list{list-style:none;margin:var(--bb-sp-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--bb-sp-2)}
.bb-footer__link{color:var(--bb-ink-2);font-size:var(--bb-t-body-sm);text-decoration:none;transition:color var(--bb-dur-1) var(--bb-ease-out)}
.bb-footer__link:hover{color:var(--bb-ink-0);text-decoration:none}
.bb-footer__social{display:flex;gap:var(--bb-sp-2);margin-top:var(--bb-sp-4)}
.bb-footer__sociallink{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--bb-rule-2);color:var(--bb-ink-3);border-radius:0;
  transition:border-color var(--bb-dur-1) var(--bb-ease-out),color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-footer__sociallink:hover{border-color:var(--bb-edge);color:var(--bb-ink-0)}
.bb-footer__sociallink svg{width:18px;height:18px}
.bb-footer__bottom{
  margin-top:var(--bb-sp-7);padding-top:var(--bb-sp-4);border-top:1px solid var(--bb-rule-2);
  display:flex;flex-wrap:wrap;gap:var(--bb-sp-3);align-items:center;justify-content:space-between;
}
.bb-footer__legal{font-size:var(--bb-t-caption);color:var(--bb-ink-3)}
.bb-footer__status{font:500 var(--bb-t-mono-xs)/1.4 var(--bb-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--bb-ink-3);display:inline-flex;align-items:center;gap:var(--bb-sp-2)}

/* Proof strip — 72px band, hairline top and bottom, mono facts on vertical rules. */
.bb-strip{border-top:1px solid var(--bb-rule-2);border-bottom:1px solid var(--bb-rule-2)}
.bb-strip__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.bb-strip__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bb-strip__item{
  display:flex;align-items:center;justify-content:center;min-height:72px;padding:var(--bb-sp-3);
  font:500 var(--bb-t-mono-xs)/1.4 var(--bb-mono);text-transform:uppercase;letter-spacing:.06em;
  color:var(--bb-ink-2);text-align:center;border-left:1px solid var(--bb-rule-2);
}
.bb-strip__item:first-child{border-left:0}
@media (max-width:639px){.bb-strip__item:nth-child(odd){border-left:0}.bb-strip__item:nth-child(n+3){border-top:1px solid var(--bb-rule-2)}}

/* ==========================================================================
   21. SUPPORTING COMPONENTS
   ========================================================================== */
/* .bb-copy — 32px ghost button. Swaps to a check + --bb-signal for 1.4s and
   announces the change through a visually-hidden aria-live region. */
.bb-copy{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;min-width:32px;padding:0 var(--bb-sp-2);
  background:transparent;border:1px solid transparent;color:var(--bb-ink-3);
  cursor:pointer;border-radius:0;
  font:500 var(--bb-t-mono-xs)/1 var(--bb-mono);text-transform:uppercase;letter-spacing:.06em;
  transition:color var(--bb-dur-1) var(--bb-ease-out),border-color var(--bb-dur-1) var(--bb-ease-out),background-color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-copy:hover{color:var(--bb-ink-0);background:var(--bb-hover);border-color:var(--bb-rule-2)}
.bb-copy.is-done{color:var(--bb-signal);border-color:var(--bb-signal-line);background:var(--bb-signal-wash)}
.bb-copy svg{width:14px;height:14px}
.bb-copy__done{display:none}
.bb-copy.is-done .bb-copy__idle{display:none}
.bb-copy.is-done .bb-copy__done{display:inline-flex}

/* .bb-kv — label / mono value pair. */
.bb-kv{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:var(--bb-sp-2) var(--bb-sp-4);align-items:baseline}
.bb-kv__k{font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3)}
.bb-kv__v{font-family:var(--bb-mono);font-size:var(--bb-t-mono);color:var(--bb-ink-1);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.bb-kv--rows{grid-template-columns:1fr;gap:var(--bb-sp-1)}

/* .bb-readout — the console's hero object: label + value + LED + sync line. */
.bb-readout{display:flex;flex-direction:column;gap:var(--bb-sp-2);min-width:0}
.bb-readout__label{font:600 var(--bb-t-label)/1.2 var(--bb-font);text-transform:uppercase;letter-spacing:.14em;color:var(--bb-ink-3)}
.bb-readout__value{
  display:flex;align-items:baseline;gap:6px;min-width:0;
  font:500 var(--bb-t-readout)/1.05 var(--bb-mono);
  color:var(--bb-ink-0);font-variant-numeric:tabular-nums;letter-spacing:-.020em;
}
.bb-readout__unit{color:var(--bb-ink-3);font-size:.62em;flex:0 0 auto}
.bb-readout__num{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bb-readout__sub{display:inline-flex;align-items:center;gap:var(--bb-sp-2);font:500 var(--bb-t-mono-xs)/1.4 var(--bb-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--bb-ink-3)}
.bb-readout__actions{display:flex;align-items:center;gap:var(--bb-sp-1)}

/* .bb-key — 56px mono numpad key. Keeps the inline addNumber('N') /
   deleteNumber() handlers the VTU pages already carry. */
.bb-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--bb-rule);border:1px solid var(--bb-rule-2)}
.bb-key{
  display:flex;align-items:center;justify-content:center;
  height:56px;background:var(--bb-surface);border:0;border-radius:0;cursor:pointer;
  font:500 20px/1 var(--bb-mono);color:var(--bb-ink-0);font-variant-numeric:tabular-nums;
  transition:background-color var(--bb-dur-1) var(--bb-ease-out);
}
.bb-key:hover{background:var(--bb-hover)}
.bb-key:active{background:var(--bb-raised)}
.bb-key--fn{color:var(--bb-ink-3);font-size:15px}
.bb-pindots{display:flex;gap:var(--bb-sp-3);justify-content:center}
.bb-pindot{
  width:44px;height:52px;background:var(--bb-raised);border:1px solid var(--bb-edge);border-radius:0;
  text-align:center;font:500 22px/50px var(--bb-mono);color:var(--bb-ink-0);
}
.bb-pindot.error,.bb-pindot.is-invalid{border-color:var(--bb-fail)}

/* .bb-skel — skeleton placeholder. */
.bb-skel{background:var(--bb-raised);position:relative;overflow:hidden;border-radius:0;min-height:1em}
.bb-skel::after{content:"";position:absolute;inset:0;background:var(--bb-hover);animation:bb-skel 1200ms steps(3,end) infinite}
@keyframes bb-skel{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

/* Accessibility helpers. */
.bb-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.bb-skip{
  position:absolute;left:var(--bb-sp-4);top:-64px;z-index:200;
  background:var(--bb-signal);color:var(--bb-void);
  padding:10px var(--bb-sp-4);font:600 var(--bb-t-ui)/1 var(--bb-font);
  text-decoration:none;border-radius:0;
  transition:top var(--bb-dur-2) var(--bb-ease-out);
}
.bb-skip:focus{top:var(--bb-sp-3);text-decoration:none;color:var(--bb-void)}

/* Page-level indeterminate loading bar: 2px, LINEAR (an indeterminate bar
   must not appear to accelerate — the one correct use of linear). */
.bb-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:110;background:transparent;overflow:hidden}
.bb-progress::after{content:"";position:absolute;inset-block:0;width:34%;background:var(--bb-signal);animation:bb-progress 1100ms linear infinite}
@keyframes bb-progress{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

/* The ticking square. Replaces every rotating spinner. */
.bb-tick{display:inline-block;width:12px;height:12px;background:var(--bb-signal);border-radius:0;animation:bb-tick 800ms steps(4,end) infinite}
.bb-loading{display:flex;align-items:center;justify-content:center;gap:var(--bb-sp-3);padding:var(--bb-sp-6);color:var(--bb-ink-3);font:500 var(--bb-t-mono-xs)/1 var(--bb-mono);text-transform:uppercase;letter-spacing:.06em}

.bb-hide{display:none!important}
@media (max-width:639px){.bb-hide-sm{display:none!important}}
@media (min-width:640px){.bb-show-sm-only{display:none!important}}

/* ==========================================================================
   22. MOTION — THREE ANIMATIONS, TOTAL.
   Animatable properties, closed list: opacity, transform (translate only),
   background-color, border-color, color, outline-color, box-shadow on the
   LED halo, max-height/grid-template-rows for accordions.
   NEVER width/height/top/left/filter/backdrop-filter.
   ========================================================================== */
/* 1. bb-pulse — the LIVE LED halo. STEPPED, not eased: an indicator that
      fades smoothly is a designed animation; one that snaps is an indicator. */
@keyframes bb-pulse{
  0%  {box-shadow:0 0 0 3px rgba(47,227,192,.14)}
  50% {box-shadow:0 0 0 3px rgba(47,227,192,.32)}
  100%{box-shadow:0 0 0 3px rgba(47,227,192,.14)}
}
/* 2. bb-count — counters count up ONCE on first IntersectionObserver entry,
      900ms, then stop. Never re-triggered. (JS-driven; token only.) */
/* 3. bb-tick — four 90-degree snaps. */
@keyframes bb-tick{
  0%  {transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* Scroll reveal. THE HIDDEN STATE LIVES INSIDE no-preference, so a JS
   failure leaves content VISIBLE rather than invisible forever. */
@media (prefers-reduced-motion:no-preference){
  .bb-reveal{opacity:0;transform:translateY(10px);transition:opacity var(--bb-dur-3) var(--bb-ease-out),transform var(--bb-dur-3) var(--bb-ease-out)}
  .bb-reveal.is-in{opacity:1;transform:none}
}

/* ==========================================================================
   23. LEGACY OVERRIDES — shipped day one.
   Without these, SweetAlert2 (on ~15 pages) renders as a WHITE BOX on a
   near-black site, and Bootstrap's .spinner-border (injected as a hardcoded
   innerHTML string on the auth pages) renders as a light ring.
   ========================================================================== */
.swal2-container{background:rgba(3,5,8,.76)!important}
.swal2-popup{
  background:var(--bb-surface)!important;color:var(--bb-ink-1)!important;
  border:1px solid var(--bb-rule-2)!important;border-radius:0!important;
  box-shadow:var(--bb-shadow-overlay)!important;font-family:var(--bb-font)!important;
}
.swal2-title{color:var(--bb-ink-0)!important;font:600 20px/1.3 var(--bb-font)!important;letter-spacing:-.01em!important}
.swal2-html-container,.swal2-content{color:var(--bb-ink-2)!important;font:400 var(--bb-t-body-sm)/1.6 var(--bb-font)!important}
.swal2-actions{gap:var(--bb-sp-2)!important}
.swal2-styled{border-radius:0!important;box-shadow:none!important;font:600 var(--bb-t-ui)/1 var(--bb-font)!important;min-height:40px!important;padding:0 var(--bb-sp-5)!important}
.swal2-styled:focus{box-shadow:none!important;outline:2px solid var(--bb-signal)!important;outline-offset:2px!important}
.swal2-confirm,.swal2-styled.swal2-confirm{background:var(--bb-signal)!important;background-color:var(--bb-signal)!important;color:var(--bb-void)!important;border:1px solid var(--bb-signal)!important}
.swal2-cancel,.swal2-styled.swal2-cancel{background:var(--bb-raised)!important;background-color:var(--bb-raised)!important;color:var(--bb-ink-1)!important;border:1px solid var(--bb-edge)!important}
.swal2-deny,.swal2-styled.swal2-deny{background:transparent!important;color:var(--bb-fail)!important;border:1px solid var(--bb-fail-line)!important}
.swal2-input,.swal2-textarea,.swal2-select,.swal2-file{
  background:var(--bb-raised)!important;color:var(--bb-ink-0)!important;
  border:1px solid var(--bb-edge)!important;border-radius:0!important;box-shadow:none!important;
  font-family:var(--bb-font)!important;font-size:16px!important;
}
.swal2-input:focus,.swal2-textarea:focus{border-color:var(--bb-signal)!important;box-shadow:none!important}
.swal2-validation-message{background:var(--bb-fail-wash)!important;color:var(--bb-fail)!important;border-radius:0!important}
.swal2-icon{border-color:var(--bb-rule-2)!important}
.swal2-icon.swal2-success [class^='swal2-success-line']{background-color:var(--bb-signal)!important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:var(--bb-signal-line)!important}
.swal2-icon.swal2-error{border-color:var(--bb-fail-line)!important;color:var(--bb-fail)!important}
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:var(--bb-fail)!important}
.swal2-icon.swal2-warning,.swal2-icon.swal2-info,.swal2-icon.swal2-question{border-color:var(--bb-warn-line)!important;color:var(--bb-warn)!important}
.swal2-timer-progress-bar{background:var(--bb-signal)!important}
.swal2-close{color:var(--bb-ink-3)!important;box-shadow:none!important}
.swal2-close:hover{color:var(--bb-ink-0)!important}

/* Bootstrap spinner -> the ticking square. It arrives as a hardcoded
   innerHTML string on user_login / user_register / create_new_pin, so it
   must be restyled here rather than replaced in markup. */
.spinner-border,.spinner-border-sm{
  display:inline-block;width:12px!important;height:12px!important;
  border:0!important;border-radius:0!important;
  background:currentColor;vertical-align:-1px;
  animation:bb-tick 800ms steps(4,end) infinite!important;
}
.spinner-grow{border-radius:0!important;background:currentColor!important}

/* Bootstrap form/button primitives still loaded on the auth pages. */
.form-control{
  background:var(--bb-raised);color:var(--bb-ink-0);
  border:1px solid var(--bb-edge);border-radius:0;min-height:44px;
  font-family:var(--bb-font);font-size:16px;
}
.form-control:focus{background:var(--bb-raised);color:var(--bb-ink-0);border-color:var(--bb-signal);box-shadow:none;outline:2px solid var(--bb-signal);outline-offset:2px}
.form-control::placeholder{color:var(--bb-ink-4)}
.btn{border-radius:0;font-family:var(--bb-font);font-weight:600}
.btn-primary{background-color:var(--bb-signal);border-color:var(--bb-signal);color:var(--bb-void)}
.btn-primary:hover,.btn-primary:focus{background-color:var(--bb-signal-hi);border-color:var(--bb-signal-hi);color:var(--bb-void);box-shadow:none}
.btn-secondary{background-color:var(--bb-raised);border-color:var(--bb-edge);color:var(--bb-ink-1)}

/* VTU pages: repaint .modals / .modal-contents IN PLACE. Their JS toggles
   element.style.display between 'none' and 'flex' and window.onclick
   dismisses on the backdrop, so the nesting must not change. */
.modals{background:rgba(3,5,8,.76);align-items:center;justify-content:center;padding:var(--bb-gutter)}
.modal-contents{
  background:var(--bb-surface);color:var(--bb-ink-1);
  border:1px solid var(--bb-rule-2);border-radius:0;
  box-shadow:var(--bb-shadow-overlay);
  width:min(440px,100%);padding:var(--bb-sp-5);
}
.modal-contents h2,.modal-contents h3{color:var(--bb-ink-0)}

/* VTU network / provider icons keep their bare <img onclick=...> markup —
   data.php matches the literal onclick attribute STRING, and three pages
   rely on event.target being the <img> itself. Only .selected is restyled.
   Any label placed next to an icon MUST carry pointer-events:none. */
#networks img,#networks .exam-service{
  border:1px solid var(--bb-rule-2);background:var(--bb-raised);border-radius:0;
  transition:border-color var(--bb-dur-1) var(--bb-ease-out),background-color var(--bb-dur-1) var(--bb-ease-out);
  cursor:pointer;
}
#networks img:hover,#networks .exam-service:hover{border-color:var(--bb-edge)}
#networks img.selected,#networks .exam-service.selected{border-color:var(--bb-signal);background:var(--bb-signal-wash)}
#networks .bb-iconlabel{pointer-events:none}

/* Legacy nav shells the console pages still emit. */
.offcanvas-menu{background:var(--bb-surface);border-right:1px solid var(--bb-rule-2);border-radius:0}
.overlay{background:rgba(3,5,8,.72)}
.bottom-menu{background:var(--bb-surface);border-top:1px solid var(--bb-rule-2)}

/* developer_api.php interpolates the status straight into the class name
   (`class="pill <?= $app['status'] ?>"`). Retint .pill rather than replacing
   it; ADD .bb-badge alongside, never instead. */
.pill{
  display:inline-flex;align-items:center;border-radius:0!important;
  font:500 var(--bb-t-mono-xs)/1 var(--bb-mono)!important;
  text-transform:uppercase;letter-spacing:.06em;
  padding:4px 8px!important;border:1px solid var(--bb-rule-2);
  background:var(--bb-raised)!important;color:var(--bb-ink-3)!important;
}
.pill.active,.pill.live,.pill.success{background:var(--bb-signal-wash)!important;color:var(--bb-signal)!important;border-color:var(--bb-signal-line)}
.pill.pending,.pill.suspended,.pill.refunded{background:var(--bb-warn-wash)!important;color:var(--bb-warn)!important;border-color:var(--bb-warn-line)}
.pill.failed{background:var(--bb-fail-wash)!important;color:var(--bb-fail)!important;border-color:var(--bb-fail-line)}
.pill.revoked{background:var(--bb-raised)!important;color:var(--bb-ink-3)!important;border-color:var(--bb-rule-2)}
.pill.test{background:var(--bb-raised)!important;color:var(--bb-ink-2)!important;border-color:var(--bb-edge)}

/* THEME TOGGLE — the site is DARK-ONLY, but dashboard.php, become_vendor.php
   and get_referell.php all reach into #themeToggle on load (one mutates a
   child <i>'s classList, another overwrites innerHTML). A null deref there
   throws and kills every handler defined after it. HIDE IT, DO NOT REMOVE IT. */
#themeToggle{display:none!important}

/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  /* Blanket-killing the pulse would make LIVE identical to IDLE — pin it
     to a static mid-pulse halo instead. */
  .bb-led--live{animation:none!important;box-shadow:0 0 0 3px rgba(47,227,192,.32)!important}
  .bb-skel::after{animation:none!important;opacity:1;background:var(--bb-hover)}
  .bb-tick{animation:none!important}
  .bb-progress::after{animation:none!important;width:100%;opacity:.5}
  /* Counters jump straight to their final value (JS reads this flag). */
  .bb-reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   FORCED COLORS
   ========================================================================== */
@media (forced-colors:active){
  .bb-led{forced-color-adjust:none;background:CanvasText}
  .bb-btn,.bb-card,.bb-table,.bb-input,.bb-select{border-color:CanvasText}
}