/*!
 * BijoyPay Design System v1.0
 * Generated file - do not edit directly.
 * Sources live in design-system/ and are concatenated by build-product.ps1:
 *   01-tokens  02-base  03-components  04-layout  06-app-shim
 * Prefix: bx-  |  No legacy framework classes are used or referenced.
 */

/* ================= 01-tokens.css ================= */
/* ==========================================================================
   BIJOY DESIGN SYSTEM — v1.0
   File 1 of 4 : TOKENS
   --------------------------------------------------------------------------
   Every visual decision in the product comes from this file. Nothing in the
   application may hard-code a colour, size, radius or shadow again.
   Prefix: `bx-`  — chosen so that no legacy Bootstrap / Blithe class can
   ever collide with the new system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOUR — LIGHT (default)
   Contrast notes are measured against --bx-surface (#FFFFFF) unless stated.
   -------------------------------------------------------------------------- */
:root {

  /* Brand — deep navy foundation */
  --bx-navy-950: #050F1F;
  --bx-navy-900: #081A31;
  --bx-navy-800: #0B2545;
  --bx-navy-700: #123A63;
  --bx-navy-600: #1B4C7E;
  --bx-navy-300: #8FA9C4;
  --bx-navy-100: #D6E1EE;

  /* Primary — brand blue.  White text on 600 = 5.9:1  (AA pass) */
  --bx-blue-700: #0A46A8;
  --bx-blue-600: #0B57D0;
  --bx-blue-500: #2F79E8;
  --bx-blue-300: #93BAF3;
  --bx-blue-100: #DCE8FB;
  --bx-blue-50:  #EEF4FE;

  /* Accent — teal.  White text on 700 = 5.4:1 (AA pass) */
  --bx-teal-700: #0B7C72;
  --bx-teal-600: #0D9488;
  --bx-teal-300: #7ED7CE;
  --bx-teal-100: #C9EDE9;
  --bx-teal-50:  #E9F8F6;

  /* Status */
  --bx-green-700: #0B6A40;
  --bx-green-600: #0F7A4A;
  --bx-green-50:  #E7F6EE;
  --bx-amber-700: #92400E;
  --bx-amber-600: #B45309;
  --bx-amber-50:  #FEF6E7;
  --bx-red-700:   #A21C15;
  --bx-red-600:   #C0271F;
  --bx-red-50:    #FDECEB;
  --bx-violet-600:#6D28D9;
  --bx-violet-50: #F1EBFE;

  /* Neutrals — text.  ink-700 on white = 12.6:1, ink-500 on white = 8.6:1 */
  --bx-ink-900: #0B1220;
  --bx-ink-800: #141E2E;
  --bx-ink-700: #1F2A3A;
  --bx-ink-600: #33415A;
  --bx-ink-500: #4A5A70;
  --bx-ink-400: #6B7C93;
  --bx-ink-300: #9AA9BC;
  --bx-ink-200: #C3CDDB;

  /* Neutrals — structure */
  --bx-line:        #E4E9F0;
  --bx-line-strong: #CFD8E3;
  --bx-surface:     #FFFFFF;
  --bx-surface-2:   #F6F8FC;
  --bx-surface-3:   #EDF1F7;
  --bx-overlay:     rgba(8, 26, 49, .48);

  /* Semantic aliases — components reference THESE, never the raw scales */
  --bx-bg:              var(--bx-surface-2);
  --bx-bg-elevated:     var(--bx-surface);
  --bx-bg-sunken:       var(--bx-surface-3);
  --bx-text:            var(--bx-ink-700);
  --bx-text-strong:     var(--bx-ink-900);
  --bx-text-muted:      var(--bx-ink-500);
  --bx-text-subtle:     var(--bx-ink-400);
  --bx-text-onDark:     #EAF1FA;
  --bx-text-onDark-dim: #A9C0DA;
  --bx-border:          var(--bx-line);
  --bx-border-strong:   var(--bx-line-strong);
  --bx-focus:           var(--bx-blue-500);

  --bx-primary:         var(--bx-blue-600);
  --bx-primary-hover:   var(--bx-blue-700);
  --bx-primary-soft:    var(--bx-blue-50);
  --bx-primary-text:    var(--bx-blue-700);

  --bx-accent:          var(--bx-teal-600);
  --bx-accent-hover:    var(--bx-teal-700);
  --bx-accent-soft:     var(--bx-teal-50);
  --bx-accent-text:     var(--bx-teal-700);

  --bx-success: var(--bx-green-600);   --bx-success-soft: var(--bx-green-50);   --bx-success-text: var(--bx-green-700);
  --bx-warning: var(--bx-amber-600);   --bx-warning-soft: var(--bx-amber-50);   --bx-warning-text: var(--bx-amber-700);
  --bx-danger:  var(--bx-red-600);     --bx-danger-soft:  var(--bx-red-50);     --bx-danger-text:  var(--bx-red-700);
  --bx-info:    var(--bx-blue-500);    --bx-info-soft:    var(--bx-blue-50);    --bx-info-text:    var(--bx-blue-700);
  --bx-neutral: var(--bx-ink-400);     --bx-neutral-soft: var(--bx-surface-3);  --bx-neutral-text: var(--bx-ink-600);

  /* Brand gradient — hero / marketing surfaces only */
  --bx-gradient-brand: linear-gradient(135deg, var(--bx-navy-800) 0%, #123A63 55%, #0E4C63 100%);
  --bx-gradient-accent: linear-gradient(135deg, var(--bx-blue-600), var(--bx-teal-600));

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --bx-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
  --bx-font-bn:   "Noto Sans Bengali", "Inter", "Segoe UI", Roboto, sans-serif;
  --bx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — 14px base keeps dense data tables readable */
  --bx-fs-2xs: 11px;
  --bx-fs-xs:  12px;
  --bx-fs-sm:  13px;
  --bx-fs-md:  14px;   /* base body */
  --bx-fs-lg:  15px;
  --bx-fs-xl:  17px;
  --bx-fs-2xl: 20px;
  --bx-fs-3xl: 24px;
  --bx-fs-4xl: 30px;
  --bx-fs-5xl: 38px;
  --bx-fs-6xl: 48px;

  --bx-lh-tight: 1.15;
  --bx-lh-snug:  1.35;
  --bx-lh-base:  1.6;
  --bx-lh-loose: 1.75;

  --bx-fw-regular: 400;
  --bx-fw-medium:  500;
  --bx-fw-semi:    600;
  --bx-fw-bold:    700;
  --bx-fw-black:   800;

  --bx-tracking-tight: -0.02em;
  --bx-tracking-wide:   0.04em;
  --bx-tracking-caps:   0.09em;

  /* Fluid display sizes for marketing headings */
  --bx-fs-display:  clamp(1.85rem, 4.2vw, 3rem);
  --bx-fs-section:  clamp(1.4rem, 2.6vw, 2.05rem);

  /* ------------------------------------------------------------------------
     3. SPACE — 4px base grid
     ------------------------------------------------------------------------ */
  --bx-sp-0:  0;
  --bx-sp-1:  4px;
  --bx-sp-2:  8px;
  --bx-sp-3:  12px;
  --bx-sp-4:  16px;
  --bx-sp-5:  20px;
  --bx-sp-6:  24px;
  --bx-sp-7:  28px;
  --bx-sp-8:  32px;
  --bx-sp-10: 40px;
  --bx-sp-12: 48px;
  --bx-sp-14: 56px;
  --bx-sp-16: 64px;
  --bx-sp-20: 80px;
  --bx-sp-24: 96px;

  /* ------------------------------------------------------------------------
     4. RADIUS — restrained; fintech should read as precise, not pill-shaped
     ------------------------------------------------------------------------ */
  --bx-r-xs:   6px;
  --bx-r-sm:   8px;
  --bx-r-md:   10px;
  --bx-r-lg:   14px;
  --bx-r-xl:   18px;
  --bx-r-2xl:  24px;
  --bx-r-full: 999px;

  /* ------------------------------------------------------------------------
     5. ELEVATION — low-spread, navy-tinted so shadows stay neutral on white
     ------------------------------------------------------------------------ */
  --bx-shadow-xs: 0 1px 2px rgba(11, 37, 69, .06);
  --bx-shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 1px 3px rgba(11, 37, 69, .08);
  --bx-shadow-md: 0 4px 12px rgba(11, 37, 69, .08), 0 1px 3px rgba(11, 37, 69, .06);
  --bx-shadow-lg: 0 12px 32px rgba(11, 37, 69, .12), 0 2px 8px rgba(11, 37, 69, .06);
  --bx-shadow-xl: 0 24px 60px rgba(11, 37, 69, .16), 0 4px 12px rgba(11, 37, 69, .08);
  --bx-shadow-focus: 0 0 0 4px rgba(47, 121, 232, .26);
  --bx-shadow-inset: inset 0 1px 2px rgba(11, 37, 69, .06);

  /* ------------------------------------------------------------------------
     6. MOTION
     ------------------------------------------------------------------------ */
  --bx-dur-instant: 90ms;
  --bx-dur-fast:    150ms;
  --bx-dur-base:    220ms;
  --bx-dur-slow:    340ms;
  --bx-ease-out:    cubic-bezier(.22, .61, .36, 1);
  --bx-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --bx-ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* ------------------------------------------------------------------------
     7. LAYOUT
     ------------------------------------------------------------------------ */
  --bx-sidebar-w:        268px;
  --bx-sidebar-w-collapsed: 74px;
  --bx-topbar-h:         62px;
  --bx-container:        1200px;
  --bx-container-wide:   1400px;
  --bx-container-narrow: 760px;

  /* ------------------------------------------------------------------------
     8. Z-INDEX — one place, no magic numbers in components
     ------------------------------------------------------------------------ */
  --bx-z-base:      1;
  --bx-z-sticky:    100;
  --bx-z-sidebar:   200;
  --bx-z-topbar:    300;
  --bx-z-drawer:    400;
  --bx-z-dropdown:  500;
  --bx-z-modal:     600;
  --bx-z-toast:     700;
  --bx-z-tooltip:   800;
}

/* --------------------------------------------------------------------------
   9. COLOUR — DARK
   Activated by [data-bx-theme="dark"] on <html>.  Only the semantic layer is
   overridden — components never need a dark-mode branch.
   -------------------------------------------------------------------------- */
[data-bx-theme="dark"] {
  --bx-surface:     #0E1A2B;
  --bx-surface-2:   #0A1421;
  --bx-surface-3:   #16243A;
  --bx-line:        #22334B;
  --bx-line-strong: #33475F;
  --bx-overlay:     rgba(2, 8, 18, .66);

  --bx-ink-900: #F2F6FB;
  --bx-ink-800: #E4EBF4;
  --bx-ink-700: #D3DDEA;
  --bx-ink-600: #B6C4D6;
  --bx-ink-500: #93A6BE;
  --bx-ink-400: #7C90A9;
  --bx-ink-300: #5E7288;
  --bx-ink-200: #43566B;

  --bx-bg:          var(--bx-surface-2);
  --bx-bg-elevated: var(--bx-surface);
  --bx-bg-sunken:   #060E1A;
  --bx-text:        var(--bx-ink-700);
  --bx-text-strong: var(--bx-ink-900);
  --bx-text-muted:  var(--bx-ink-500);
  --bx-text-subtle: var(--bx-ink-400);

  --bx-primary-soft: #14294A;
  --bx-primary-text: #9CC0F8;
  --bx-accent-soft:  #0C2E2B;
  --bx-accent-text:  #7ED7CE;

  --bx-success-soft: #0B2A1D;  --bx-success-text: #6FD9A4;
  --bx-warning-soft: #2C2008;  --bx-warning-text: #F3C36B;
  --bx-danger-soft:  #2E1210;  --bx-danger-text:  #F5A19B;
  --bx-info-soft:    #12203A;  --bx-info-text:    #9CC0F8;
  --bx-neutral-soft: #1B293C;  --bx-neutral-text: #B6C4D6;

  --bx-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --bx-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --bx-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --bx-shadow-lg: 0 14px 36px rgba(0, 0, 0, .5);
  --bx-shadow-xl: 0 26px 64px rgba(0, 0, 0, .58);
  --bx-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .4);

  --bx-gradient-brand: linear-gradient(135deg, #071527 0%, #0C2338 55%, #0A2E3C 100%);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY & PLATFORM PREFERENCES
   -------------------------------------------------------------------------- */
:root { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --bx-dur-instant: 0ms;
    --bx-dur-fast:    0ms;
    --bx-dur-base:    0ms;
    --bx-dur-slow:    0ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --bx-text:        var(--bx-ink-900);
    --bx-text-muted:  var(--bx-ink-600);
    --bx-border:      var(--bx-line-strong);
  }
}

/* Density modes — data-heavy admin tables can opt into a tighter grid */
[data-bx-density="compact"] { --bx-sp-3: 10px; --bx-sp-4: 12px; --bx-sp-6: 18px; }


/* ================= 02-base.css ================= */
/* ==========================================================================
   BIJOY DESIGN SYSTEM — v1.0
   File 2 of 4 : BASE (reset, elements, typography, layout helpers, utilities)
   Depends on: 01-tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--bx-font-sans);
  font-size: var(--bx-fs-md);
  line-height: var(--bx-lh-base);
  font-weight: var(--bx-fw-regular);
  color: var(--bx-text);
  background: var(--bx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Bengali copy needs a touch more line-height to breathe */
:lang(bn), .bx-bn { font-family: var(--bx-font-bn); line-height: var(--bx-lh-loose); }

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

ul[class], ol[class] { list-style: none; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--bx-border);
  margin: var(--bx-sp-6) 0;
}

::selection { background: var(--bx-blue-100); color: var(--bx-ink-900); }
[data-bx-theme="dark"] ::selection { background: #1D3A63; color: #fff; }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--bx-text-strong);
  font-weight: var(--bx-fw-bold);
  line-height: var(--bx-lh-tight);
  letter-spacing: var(--bx-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--bx-fs-4xl); }
h2 { font-size: var(--bx-fs-3xl); }
h3 { font-size: var(--bx-fs-xl); }
h4 { font-size: var(--bx-fs-lg); }
h5 { font-size: var(--bx-fs-md); }
h6 {
  font-size: var(--bx-fs-xs);
  font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps);
  text-transform: uppercase;
  color: var(--bx-text-muted);
}

p { text-wrap: pretty; }

small, .bx-small { font-size: var(--bx-fs-sm); }
strong, b { font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); }

a { color: var(--bx-primary-text); text-decoration: none; transition: color var(--bx-dur-fast) var(--bx-ease-out); }
a:hover { color: var(--bx-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp, pre { font-family: var(--bx-font-mono); font-size: .92em; }
code {
  background: var(--bx-bg-sunken);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-xs);
  padding: .1em .4em;
}
pre {
  background: var(--bx-navy-900);
  color: #D6E4F5;
  border-radius: var(--bx-r-lg);
  padding: var(--bx-sp-5);
  overflow-x: auto;
  line-height: 1.7;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

blockquote {
  border-left: 3px solid var(--bx-accent);
  padding-left: var(--bx-sp-4);
  color: var(--bx-text-muted);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   3. FOCUS — visible, consistent, never removed
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bx-focus);
  outline-offset: 2px;
  border-radius: var(--bx-r-xs);
}
.bx-focus-ring:focus-visible { box-shadow: var(--bx-shadow-focus); outline: 2px solid transparent; }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.bx-container {
  width: 100%;
  max-width: var(--bx-container);
  margin-inline: auto;
  padding-inline: var(--bx-sp-5);
}
.bx-container--wide   { max-width: var(--bx-container-wide); }
.bx-container--narrow { max-width: var(--bx-container-narrow); }
.bx-container--flush  { padding-inline: 0; }

.bx-stack     { display: flex; flex-direction: column; }
.bx-stack--xs { gap: var(--bx-sp-2); }
.bx-stack--sm { gap: var(--bx-sp-3); }
.bx-stack--md { gap: var(--bx-sp-4); }
.bx-stack--lg { gap: var(--bx-sp-6); }
.bx-stack--xl { gap: var(--bx-sp-8); }

.bx-row { display: flex; align-items: center; gap: var(--bx-sp-3); }
.bx-row--between { justify-content: space-between; }
.bx-row--start   { align-items: flex-start; }
.bx-row--wrap    { flex-wrap: wrap; }
.bx-row--end     { justify-content: flex-end; }

/* Auto-fit grids — minmax(0,…) is deliberate: it prevents long content from
   blowing a track open and forcing horizontal page scroll. */
.bx-grid { display: grid; gap: var(--bx-sp-5); }
/* Grid tracks stretch by default, which is right for stat rows and pricing
   cards but leaves a tall empty void under a short content panel. `--top`
   sizes each panel to its own content. */
.bx-grid--top { align-items: start; }
.bx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.bx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.bx-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.bx-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asymmetric "content + side rail" layout. Class-based on purpose: an inline
   grid-template-columns would beat the media query below and keep two columns
   on a phone, which is exactly how a layout silently overflows. */
/* `align-items: start` stops the main card from stretching to match the height
   of the side rail, which would leave a large blank area under its content. */
.bx-grid--main-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 980px) { .bx-grid--main-side { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
  .bx-grid--cols-3, .bx-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bx-grid--cols-2, .bx-grid--cols-3, .bx-grid--cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   5. SECTION SPACING (marketing pages)
   -------------------------------------------------------------------------- */
.bx-section { padding: var(--bx-sp-16) 0; }
.bx-section--sm  { padding: var(--bx-sp-10) 0; }
.bx-section--lg  { padding: var(--bx-sp-24) 0; }
.bx-section--alt { background: var(--bx-bg-elevated); }
.bx-section--sunken { background: var(--bx-bg-sunken); }

.bx-section-head {
  max-width: 720px;
  margin: 0 auto var(--bx-sp-10);
  text-align: center;
}
.bx-section-head > :last-child { margin-bottom: 0; }

.bx-eyebrow {
  display: inline-block;
  font-size: var(--bx-fs-xs);
  font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps);
  text-transform: uppercase;
  color: var(--bx-primary-text);
  margin-bottom: var(--bx-sp-3);
}

/* --------------------------------------------------------------------------
   6. SURFACE HELPERS
   -------------------------------------------------------------------------- */
.bx-surface   { background: var(--bx-bg-elevated); }
.bx-sunken    { background: var(--bx-bg-sunken); }
.bx-border    { border: 1px solid var(--bx-border); }
.bx-rounded   { border-radius: var(--bx-r-lg); }
.bx-rounded--lg { border-radius: var(--bx-r-xl); }
.bx-shadow    { box-shadow: var(--bx-shadow-sm); }
.bx-shadow--md { box-shadow: var(--bx-shadow-md); }
.bx-shadow--lg { box-shadow: var(--bx-shadow-lg); }

.bx-divider { height: 1px; background: var(--bx-border); border: 0; }

/* --------------------------------------------------------------------------
   7. TEXT / COLOUR UTILITIES
   -------------------------------------------------------------------------- */
.bx-t-strong { color: var(--bx-text-strong); }
.bx-t-muted  { color: var(--bx-text-muted); }
.bx-t-subtle { color: var(--bx-text-subtle); }
.bx-t-primary{ color: var(--bx-primary-text); }
.bx-t-accent { color: var(--bx-accent-text); }
.bx-t-success{ color: var(--bx-success-text); }
.bx-t-warning{ color: var(--bx-warning-text); }
.bx-t-danger { color: var(--bx-danger-text); }

.bx-fs-2xs { font-size: var(--bx-fs-2xs); }
.bx-fs-xs  { font-size: var(--bx-fs-xs); }
.bx-fs-sm  { font-size: var(--bx-fs-sm); }
.bx-fs-lg  { font-size: var(--bx-fs-lg); }
.bx-fs-xl  { font-size: var(--bx-fs-xl); }
.bx-fs-2xl { font-size: var(--bx-fs-2xl); }
.bx-fs-3xl { font-size: var(--bx-fs-3xl); }

.bx-fw-medium { font-weight: var(--bx-fw-medium); }
.bx-fw-semi   { font-weight: var(--bx-fw-semi); }
.bx-fw-bold   { font-weight: var(--bx-fw-bold); }

.bx-caps { text-transform: uppercase; letter-spacing: var(--bx-tracking-caps); font-weight: var(--bx-fw-bold); }
.bx-mono { font-family: var(--bx-font-mono); font-variant-numeric: tabular-nums; }
.bx-nums { font-variant-numeric: tabular-nums; }

.bx-nowrap  { white-space: nowrap; }
.bx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bx-balance { text-wrap: balance; }

/* --------------------------------------------------------------------------
   8. SPACING / DISPLAY UTILITIES
   -------------------------------------------------------------------------- */
.bx-mt-0{margin-top:0}.bx-mt-2{margin-top:var(--bx-sp-2)}.bx-mt-3{margin-top:var(--bx-sp-3)}
.bx-mt-4{margin-top:var(--bx-sp-4)}.bx-mt-6{margin-top:var(--bx-sp-6)}.bx-mt-8{margin-top:var(--bx-sp-8)}
.bx-mb-0{margin-bottom:0}.bx-mb-2{margin-bottom:var(--bx-sp-2)}.bx-mb-3{margin-bottom:var(--bx-sp-3)}
.bx-mb-4{margin-bottom:var(--bx-sp-4)}.bx-mb-6{margin-bottom:var(--bx-sp-6)}.bx-mb-8{margin-bottom:var(--bx-sp-8)}
.bx-ml-auto{margin-left:auto}.bx-mr-auto{margin-right:auto}.bx-mx-auto{margin-inline:auto}

.bx-flex{display:flex}.bx-inline-flex{display:inline-flex}
.bx-block{display:block}.bx-inline-block{display:inline-block}
.bx-hidden{display:none !important}
.bx-grow{flex:1 1 auto; min-width:0}
.bx-shrink-0{flex-shrink:0}
.bx-relative{position:relative}.bx-absolute{position:absolute}
.bx-text-center{text-align:center}.bx-text-right{text-align:right}.bx-text-left{text-align:left}
.bx-w-full{width:100%}.bx-h-full{height:100%}
.bx-overflow-hidden{overflow:hidden}
.bx-rounded-full{border-radius:var(--bx-r-full)}

/* Breakpoint utilities.
   Names state the condition they hide UNDER, so there is no ambiguity about
   which side of the breakpoint they act on.
     .bx-hide-below-md  -> hidden while the viewport is narrower than 768px
     .bx-hide-from-md   -> hidden once the viewport reaches 768px
   Every rule that hides something is `!important` so a component class can
   never accidentally win the specificity fight. */
@media (max-width: 479px)  { .bx-hide-below-sm { display: none !important; } }
@media (max-width: 767px)  { .bx-hide-below-md { display: none !important; } }
@media (max-width: 1023px) { .bx-hide-below-lg { display: none !important; } }
@media (min-width: 768px)  { .bx-hide-from-md  { display: none !important; } }
@media (min-width: 1024px) { .bx-hide-from-lg  { display: none !important; } }
@media (min-width: 480px)  { .bx-show-under-sm-only { display: none !important; } }
@media (min-width: 768px)  { .bx-show-under-md-only { display: none !important; } }

/* --------------------------------------------------------------------------
   9. ACCESSIBILITY HELPERS
   -------------------------------------------------------------------------- */
.bx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bx-skip-link {
  position: absolute;
  top: var(--bx-sp-3);
  left: var(--bx-sp-3);
  z-index: var(--bx-z-tooltip);
  background: var(--bx-navy-800);
  color: #fff;
  padding: var(--bx-sp-3) var(--bx-sp-5);
  border-radius: var(--bx-r-md);
  transform: translateY(-200%);
  transition: transform var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-skip-link:focus { transform: translateY(0); color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. SCROLLBARS — subtle, themed
   -------------------------------------------------------------------------- */
.bx-scroll { scrollbar-width: thin; scrollbar-color: var(--bx-ink-200) transparent; }
.bx-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.bx-scroll::-webkit-scrollbar-track { background: transparent; }
.bx-scroll::-webkit-scrollbar-thumb {
  background: var(--bx-ink-200);
  border-radius: var(--bx-r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
.bx-scroll::-webkit-scrollbar-thumb:hover { background: var(--bx-ink-300); background-clip: content-box; }

/* Horizontal scroll container for wide data tables — keeps the PAGE from
   ever scrolling sideways. */
.bx-table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   11. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .bx-no-print, .bx-sidebar, .bx-topbar, .bx-toast-region { display: none !important; }
  .bx-card, .bx-panel { box-shadow: none !important; border-color: #999 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}


/* ================= 03-components.css ================= */
/* ==========================================================================
   BIJOY DESIGN SYSTEM — v1.0
   File 3 of 4 : COMPONENTS
   Depends on: 01-tokens.css, 02-base.css
   --------------------------------------------------------------------------
   Rule: components reference the SEMANTIC token layer only. That is what makes
   dark mode, high-contrast and density modes free — no component ever needs a
   theme branch. No legacy Bootstrap / Blithe class is referenced or reused.
   ========================================================================== */

/* ==========================================================================
   A. BUTTONS
   ========================================================================== */
.bx-btn {
  --_bg: var(--bx-primary);
  --_fg: #fff;
  --_bd: var(--bx-primary);
  --_bg-hover: var(--bx-primary-hover);
  --_bd-hover: var(--bx-primary-hover);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bx-sp-2);
  position: relative;

  min-height: 40px;
  padding: var(--bx-sp-3) var(--bx-sp-5);
  border: 1px solid var(--_bd);
  border-radius: var(--bx-r-md);
  background: var(--_bg);
  color: var(--_fg);

  font-family: inherit;
  font-size: var(--bx-fs-sm);
  font-weight: var(--bx-fw-semi);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  transition:
    background-color var(--bx-dur-fast) var(--bx-ease-out),
    border-color     var(--bx-dur-fast) var(--bx-ease-out),
    color            var(--bx-dur-fast) var(--bx-ease-out),
    box-shadow       var(--bx-dur-fast) var(--bx-ease-out),
    transform        var(--bx-dur-instant) var(--bx-ease-out);
}
.bx-btn:hover { background: var(--_bg-hover); border-color: var(--_bd-hover); text-decoration: none; color: var(--_fg); }
.bx-btn:active { transform: translateY(1px); }
.bx-btn:focus-visible { outline: 2px solid var(--bx-focus); outline-offset: 2px; }

/* --- shapes / sizes --- */
.bx-btn--sm { min-height: 32px; padding: var(--bx-sp-2) var(--bx-sp-3); font-size: var(--bx-fs-xs); border-radius: var(--bx-r-sm); }
.bx-btn--lg { min-height: 48px; padding: var(--bx-sp-4) var(--bx-sp-7); font-size: var(--bx-fs-md); border-radius: var(--bx-r-lg); }
.bx-btn--block { width: 100%; }
.bx-btn--pill { border-radius: var(--bx-r-full); }
.bx-btn--icon { min-width: 40px; padding-inline: var(--bx-sp-2); }
.bx-btn--icon.bx-btn--sm { min-width: 32px; }
.bx-btn--icon.bx-btn--lg { min-width: 48px; }

/* --- variants --- */
.bx-btn--secondary {
  --_bg: var(--bx-bg-elevated); --_fg: var(--bx-text-strong);
  --_bd: var(--bx-border-strong);
  --_bg-hover: var(--bx-bg-sunken); --_bd-hover: var(--bx-ink-300);
}
.bx-btn--ghost { --_bg: transparent; --_fg: var(--bx-text); --_bd: transparent; --_bg-hover: var(--bx-bg-sunken); --_bd-hover: transparent; }
.bx-btn--accent { --_bg: var(--bx-accent); --_fg: #fff; --_bd: var(--bx-accent); --_bg-hover: var(--bx-accent-hover); --_bd-hover: var(--bx-accent-hover); }
.bx-btn--success { --_bg: var(--bx-success); --_fg: #fff; --_bd: var(--bx-success); --_bg-hover: var(--bx-green-700); --_bd-hover: var(--bx-green-700); }
.bx-btn--danger { --_bg: var(--bx-danger); --_fg: #fff; --_bd: var(--bx-danger); --_bg-hover: var(--bx-red-700); --_bd-hover: var(--bx-red-700); }
.bx-btn--dark { --_bg: var(--bx-navy-800); --_fg: #fff; --_bd: var(--bx-navy-800); --_bg-hover: var(--bx-navy-700); --_bd-hover: var(--bx-navy-700); }
.bx-btn--white { --_bg: #fff; --_fg: var(--bx-navy-800); --_bd: #fff; --_bg-hover: var(--bx-blue-50); --_bd-hover: var(--bx-blue-50); }
.bx-btn--link {
  --_bg: transparent; --_fg: var(--bx-primary-text); --_bd: transparent;
  --_bg-hover: transparent; --_bd-hover: transparent;
  min-height: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px;
}

.bx-btn[disabled], .bx-btn[aria-disabled="true"], .bx-btn.is-disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.bx-btn[disabled]:hover, .bx-btn[aria-disabled="true"]:hover { background: var(--_bg); border-color: var(--_bd); }

/* --- loading --- */
.bx-btn.is-loading { color: transparent !important; pointer-events: none; }
.bx-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--_fg);
  animation: bx-spin .7s linear infinite;
}
.bx-btn--secondary.is-loading::after, .bx-btn--ghost.is-loading::after { color: var(--bx-primary); }
@keyframes bx-spin { to { transform: rotate(360deg); } }

/* --- button group --- */
.bx-btn-group { display: inline-flex; }
.bx-btn-group > .bx-btn { border-radius: 0; }
.bx-btn-group > .bx-btn:first-child { border-start-start-radius: var(--bx-r-md); border-end-start-radius: var(--bx-r-md); }
.bx-btn-group > .bx-btn:last-child  { border-start-end-radius: var(--bx-r-md);   border-end-end-radius: var(--bx-r-md); }
.bx-btn-group > .bx-btn + .bx-btn { margin-inline-start: -1px; }
.bx-btn-group > .bx-btn:hover { z-index: 1; }

/* --- icon-only button used in topbars / table rows --- */
.bx-iconbtn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 1px solid transparent; border-radius: var(--bx-r-md);
  background: transparent; color: var(--bx-text-muted);
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out), color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-iconbtn:hover { background: var(--bx-bg-sunken); color: var(--bx-text-strong); }
.bx-iconbtn:focus-visible { outline: 2px solid var(--bx-focus); outline-offset: 1px; }
.bx-iconbtn svg { width: 18px; height: 18px; }

/* ==========================================================================
   B. BADGES / PILLS / STATUS
   ========================================================================== */
.bx-badge {
  display: inline-flex; align-items: center; gap: var(--bx-sp-1);
  padding: 3px var(--bx-sp-2);
  border: 1px solid transparent;
  border-radius: var(--bx-r-xs);
  background: var(--bx-neutral-soft);
  color: var(--bx-neutral-text);
  font-size: var(--bx-fs-2xs);
  font-weight: var(--bx-fw-bold);
  line-height: 1.5;
  letter-spacing: var(--bx-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.bx-badge--pill { border-radius: var(--bx-r-full); padding-inline: var(--bx-sp-3); text-transform: none; letter-spacing: 0; }
.bx-badge--lg { font-size: var(--bx-fs-xs); padding: 5px var(--bx-sp-3); }
.bx-badge--success { background: var(--bx-success-soft); color: var(--bx-success-text); }
.bx-badge--warning { background: var(--bx-warning-soft); color: var(--bx-warning-text); }
.bx-badge--danger  { background: var(--bx-danger-soft);  color: var(--bx-danger-text); }
.bx-badge--info    { background: var(--bx-info-soft);    color: var(--bx-info-text); }
.bx-badge--primary { background: var(--bx-primary-soft); color: var(--bx-primary-text); }
.bx-badge--accent  { background: var(--bx-accent-soft);  color: var(--bx-accent-text); }
.bx-badge--outline { background: transparent; border-color: var(--bx-border-strong); color: var(--bx-text-muted); }

.bx-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.bx-dot--live { box-shadow: 0 0 0 0 currentColor; animation: bx-pulse 2.2s var(--bx-ease-out) infinite; }
@keyframes bx-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.bx-status { display: inline-flex; align-items: center; gap: var(--bx-sp-2); font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-medium); color: var(--bx-text); }

.bx-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--bx-r-full); background: var(--bx-primary); color: #fff;
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold); line-height: 1;
}

/* ==========================================================================
   C. AVATAR
   ========================================================================== */
.bx-avatar {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: var(--bx-r-full);
  background: var(--bx-primary-soft); color: var(--bx-primary-text);
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-bold);
  line-height: 1; overflow: hidden;
  border: 1px solid var(--bx-border);
}
.bx-avatar--sm { width: 28px; height: 28px; font-size: var(--bx-fs-2xs); }
.bx-avatar--lg { width: 48px; height: 48px; font-size: var(--bx-fs-lg); }
.bx-avatar--xl { width: 64px; height: 64px; font-size: var(--bx-fs-2xl); }
.bx-avatar--square { border-radius: var(--bx-r-md); }
.bx-avatar--accent { background: var(--bx-accent-soft); color: var(--bx-accent-text); }
.bx-avatar--dark { background: var(--bx-navy-800); color: #fff; border-color: transparent; }
.bx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bx-avatar-stack { display: flex; }
.bx-avatar-stack > .bx-avatar + .bx-avatar { margin-inline-start: -10px; }
.bx-avatar-stack > .bx-avatar { box-shadow: 0 0 0 2px var(--bx-bg-elevated); }

/* ==========================================================================
   D. ALERTS / BANNERS
   ========================================================================== */
.bx-alert {
  display: flex; gap: var(--bx-sp-3); align-items: flex-start;
  padding: var(--bx-sp-4);
  border: 1px solid var(--bx-border);
  border-inline-start: 3px solid var(--bx-neutral);
  border-radius: var(--bx-r-md);
  background: var(--bx-bg-elevated);
  font-size: var(--bx-fs-sm);
}
.bx-alert__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--bx-neutral); }
.bx-alert__body { min-width: 0; flex: 1 1 auto; }
.bx-alert__title { display: block; font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); margin-bottom: 2px; }
.bx-alert__text { color: var(--bx-text-muted); margin: 0; }
.bx-alert__close { margin-inline-start: auto; flex: 0 0 auto; }

.bx-alert--success { background: var(--bx-success-soft); border-color: transparent; border-inline-start-color: var(--bx-success); }
.bx-alert--success .bx-alert__icon { color: var(--bx-success-text); }
.bx-alert--success .bx-alert__text { color: var(--bx-success-text); }
.bx-alert--warning { background: var(--bx-warning-soft); border-color: transparent; border-inline-start-color: var(--bx-warning); }
.bx-alert--warning .bx-alert__icon, .bx-alert--warning .bx-alert__text { color: var(--bx-warning-text); }
.bx-alert--danger  { background: var(--bx-danger-soft);  border-color: transparent; border-inline-start-color: var(--bx-danger); }
.bx-alert--danger .bx-alert__icon, .bx-alert--danger .bx-alert__text { color: var(--bx-danger-text); }
.bx-alert--info    { background: var(--bx-info-soft);    border-color: transparent; border-inline-start-color: var(--bx-info); }
.bx-alert--info .bx-alert__icon, .bx-alert--info .bx-alert__text { color: var(--bx-info-text); }

/* ==========================================================================
   E. CARDS & PANELS
   ========================================================================== */
.bx-card {
  background: var(--bx-bg-elevated);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-lg);
  box-shadow: var(--bx-shadow-xs);
  min-width: 0;
}
.bx-card--pad { padding: var(--bx-sp-6); }
.bx-card--flush { overflow: hidden; }
.bx-card--raised { box-shadow: var(--bx-shadow-md); border-color: transparent; }
.bx-card--interactive { transition: transform var(--bx-dur-base) var(--bx-ease-out), box-shadow var(--bx-dur-base) var(--bx-ease-out), border-color var(--bx-dur-base) var(--bx-ease-out); }
.bx-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--bx-shadow-md); border-color: var(--bx-blue-300); }
.bx-card--accent-line { border-top: 3px solid var(--bx-primary); }
.bx-card--dark { background: var(--bx-navy-800); border-color: transparent; color: var(--bx-text-onDark); }
.bx-card--dark h1, .bx-card--dark h2, .bx-card--dark h3, .bx-card--dark h4 { color: #fff; }

.bx-card__head {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-4) var(--bx-sp-6);
  border-bottom: 1px solid var(--bx-border);
  min-width: 0;
}
.bx-card__head--wrap { flex-wrap: wrap; }
/* The text slot is the only part allowed to shrink; the actions cluster keeps
   its intrinsic width and wraps within itself instead. */
.bx-card__heading { min-width: 0; flex: 1 1 auto; }
.bx-card__title { font-size: var(--bx-fs-md); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); margin: 0; line-height: 1.35; min-width: 0; }
.bx-card__sub   { font-size: var(--bx-fs-xs); color: var(--bx-text-muted); margin: 2px 0 0; }
.bx-card__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--bx-sp-2); flex-wrap: wrap; }
.bx-card__body  { padding: var(--bx-sp-6); min-width: 0; }
.bx-card__body--tight { padding: var(--bx-sp-4); }
.bx-card__body--flush { padding: 0; }
.bx-card__foot {
  display: flex; align-items: center; gap: var(--bx-sp-3); flex-wrap: wrap;
  padding: var(--bx-sp-4) var(--bx-sp-6);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-sunken);
  border-radius: 0 0 var(--bx-r-lg) var(--bx-r-lg);
}

/* --- stat card --- */
.bx-stat {
  display: flex; flex-direction: column; gap: var(--bx-sp-2);
  padding: var(--bx-sp-5);
  background: var(--bx-bg-elevated);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-lg);
  min-width: 0;
}
.bx-stat__label { font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi); color: var(--bx-text-muted); letter-spacing: var(--bx-tracking-wide); text-transform: uppercase; }
.bx-stat__value { font-size: var(--bx-fs-3xl); font-weight: var(--bx-fw-black); color: var(--bx-text-strong); letter-spacing: var(--bx-tracking-tight); line-height: 1.1; overflow-wrap: anywhere; }
.bx-stat__value--sm { font-size: var(--bx-fs-2xl); }
.bx-stat__foot { display: flex; align-items: center; gap: var(--bx-sp-2); font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }
.bx-stat__icon {
  width: 40px; height: 40px; border-radius: var(--bx-r-md);
  display: grid; place-items: center; flex: 0 0 40px;
  background: var(--bx-primary-soft); color: var(--bx-primary-text);
}
.bx-stat__icon svg { width: 20px; height: 20px; }
.bx-stat__icon--accent  { background: var(--bx-accent-soft);  color: var(--bx-accent-text); }
.bx-stat__icon--success { background: var(--bx-success-soft); color: var(--bx-success-text); }
.bx-stat__icon--warning { background: var(--bx-warning-soft); color: var(--bx-warning-text); }
.bx-stat__icon--danger  { background: var(--bx-danger-soft);  color: var(--bx-danger-text); }

.bx-trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi); }
.bx-trend--up   { color: var(--bx-success-text); }
.bx-trend--down { color: var(--bx-danger-text); }
.bx-trend--flat { color: var(--bx-text-muted); }

/* --- key/value rows (used heavily in detail pages) --- */
.bx-kv { display: grid; gap: 0; }
.bx-kv__row {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: var(--bx-sp-4); padding: var(--bx-sp-3) 0;
  border-bottom: 1px solid var(--bx-border);
  align-items: start;
}
.bx-kv__row:last-child { border-bottom: 0; }
.bx-kv__k { font-size: var(--bx-fs-sm); color: var(--bx-text-muted); font-weight: var(--bx-fw-medium); }
.bx-kv__v { font-size: var(--bx-fs-sm); color: var(--bx-text-strong); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .bx-kv__row { grid-template-columns: minmax(0, 1fr); gap: var(--bx-sp-1); } }

/* ==========================================================================
   F. FORMS
   ========================================================================== */
.bx-field { display: block; margin-bottom: var(--bx-sp-5); min-width: 0; }
.bx-field:last-child { margin-bottom: 0; }

.bx-label {
  display: block;
  font-size: var(--bx-fs-sm);
  font-weight: var(--bx-fw-semi);
  color: var(--bx-text-strong);
  margin-bottom: var(--bx-sp-2);
}
.bx-label__req { color: var(--bx-danger); margin-inline-start: 3px; }
.bx-label__opt { font-weight: var(--bx-fw-regular); color: var(--bx-text-subtle); font-size: var(--bx-fs-xs); margin-inline-start: 5px; }

.bx-input, .bx-select, .bx-textarea {
  display: block; width: 100%;
  min-height: 42px;
  padding: 10px var(--bx-sp-3);
  border: 1px solid var(--bx-border-strong);
  border-radius: var(--bx-r-md);
  background: var(--bx-surface);
  color: var(--bx-text-strong);
  font-family: inherit; font-size: var(--bx-fs-sm); line-height: 1.4;
  transition: border-color var(--bx-dur-fast) var(--bx-ease-out), box-shadow var(--bx-dur-fast) var(--bx-ease-out);
  appearance: none;
}
.bx-textarea { min-height: 104px; resize: vertical; padding-block: var(--bx-sp-3); }
.bx-input::placeholder, .bx-textarea::placeholder { color: var(--bx-text-subtle); }
.bx-input:hover, .bx-select:hover, .bx-textarea:hover { border-color: var(--bx-ink-300); }
.bx-input:focus, .bx-select:focus, .bx-textarea:focus {
  outline: none;
  border-color: var(--bx-primary);
  box-shadow: var(--bx-shadow-focus);
}
.bx-input[disabled], .bx-select[disabled], .bx-textarea[disabled] {
  background: var(--bx-bg-sunken); color: var(--bx-text-subtle); cursor: not-allowed;
}
.bx-input[readonly] { background: var(--bx-bg-sunken); }

.bx-select {
  padding-inline-end: var(--bx-sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5A70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--bx-sp-3) center;
  cursor: pointer;
}
[dir="rtl"] .bx-select { background-position: left var(--bx-sp-3) center; }
.bx-select--sm, .bx-input--sm { min-height: 34px; padding-block: 5px; font-size: var(--bx-fs-xs); }

/* --- input with leading / trailing addon --- */
.bx-inputgroup { display: flex; align-items: stretch; min-width: 0; }
.bx-inputgroup > .bx-input { border-radius: 0; min-width: 0; }
.bx-inputgroup > :first-child { border-start-start-radius: var(--bx-r-md); border-end-start-radius: var(--bx-r-md); }
.bx-inputgroup > :last-child  { border-start-end-radius: var(--bx-r-md);   border-end-end-radius: var(--bx-r-md); }
.bx-inputgroup > * + * { margin-inline-start: -1px; }
.bx-inputgroup > .bx-input:focus { z-index: 2; position: relative; }

.bx-addon {
  display: inline-flex; align-items: center; gap: var(--bx-sp-2);
  padding: 10px var(--bx-sp-3);
  border: 1px solid var(--bx-border-strong);
  background: var(--bx-bg-sunken);
  color: var(--bx-text-muted);
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-medium);
  white-space: nowrap; flex: 0 0 auto;
}

/* --- help / error / success text --- */
.bx-help { display: block; margin-top: var(--bx-sp-2); font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }
.bx-error-text { display: flex; align-items: center; gap: 5px; margin-top: var(--bx-sp-2); font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-medium); color: var(--bx-danger-text); }
.bx-success-text { display: flex; align-items: center; gap: 5px; margin-top: var(--bx-sp-2); font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-medium); color: var(--bx-success-text); }

.bx-input.is-invalid, .bx-select.is-invalid, .bx-textarea.is-invalid { border-color: var(--bx-danger); }
.bx-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(192, 39, 31, .18); }
.bx-input.is-valid { border-color: var(--bx-success); }

/* --- checkbox & radio (real inputs, restyled) --- */
.bx-check { display: inline-flex; align-items: flex-start; gap: var(--bx-sp-3); font-size: var(--bx-fs-sm); color: var(--bx-text); cursor: pointer; min-width: 0; }
.bx-check input[type="checkbox"], .bx-check input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px;
  border: 1.5px solid var(--bx-border-strong);
  border-radius: var(--bx-r-xs);
  background: var(--bx-surface);
  cursor: pointer; position: relative;
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out), border-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-check input[type="radio"] { border-radius: 50%; }
.bx-check input:hover { border-color: var(--bx-primary); }
.bx-check input:checked { background: var(--bx-primary); border-color: var(--bx-primary); }
.bx-check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.bx-check input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
.bx-check input:focus-visible { outline: 2px solid var(--bx-focus); outline-offset: 2px; }
.bx-check input:disabled { background: var(--bx-bg-sunken); border-color: var(--bx-border); cursor: not-allowed; }
.bx-check__text { min-width: 0; }
.bx-check__text small { display: block; color: var(--bx-text-muted); font-size: var(--bx-fs-xs); margin-top: 2px; }

/* --- switch --- */
.bx-switch { display: inline-flex; align-items: center; gap: var(--bx-sp-3); cursor: pointer; font-size: var(--bx-fs-sm); }
.bx-switch input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; width: 0; height: 0; }
.bx-switch__track {
  position: relative; flex: 0 0 40px; width: 40px; height: 22px;
  border-radius: var(--bx-r-full);
  background: var(--bx-ink-200);
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--bx-shadow-xs);
  transition: transform var(--bx-dur-base) var(--bx-ease-spring);
}
.bx-switch input:checked + .bx-switch__track { background: var(--bx-primary); }
.bx-switch input:checked + .bx-switch__track::after { transform: translateX(18px); }
.bx-switch input:focus-visible + .bx-switch__track { outline: 2px solid var(--bx-focus); outline-offset: 2px; }
.bx-switch input:disabled + .bx-switch__track { opacity: .5; cursor: not-allowed; }
.bx-switch--sm .bx-switch__track { flex-basis: 32px; width: 32px; height: 18px; }
.bx-switch--sm .bx-switch__track::after { width: 14px; height: 14px; }
.bx-switch--sm input:checked + .bx-switch__track::after { transform: translateX(14px); }

/* --- fieldset / form section --- */
.bx-fieldset { border: 0; padding: 0; margin: 0 0 var(--bx-sp-8); min-width: 0; }
.bx-fieldset:last-child { margin-bottom: 0; }
.bx-fieldset__legend {
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold); letter-spacing: var(--bx-tracking-caps);
  text-transform: uppercase; color: var(--bx-text-subtle);
  padding: 0 0 var(--bx-sp-4); margin: 0;
  border-bottom: 1px solid var(--bx-border);
  width: 100%; margin-bottom: var(--bx-sp-5);
}

/* --- form grid --- */
.bx-form-grid { display: grid; gap: 0 var(--bx-sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-form-grid > .bx-field--full { grid-column: 1 / -1; }
@media (max-width: 700px) { .bx-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- file drop --- */
.bx-file {
  display: grid; place-items: center; gap: var(--bx-sp-2);
  padding: var(--bx-sp-8) var(--bx-sp-5);
  border: 1.5px dashed var(--bx-border-strong);
  border-radius: var(--bx-r-lg);
  background: var(--bx-bg-sunken);
  text-align: center; cursor: pointer;
  transition: border-color var(--bx-dur-fast) var(--bx-ease-out), background-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-file:hover { border-color: var(--bx-primary); background: var(--bx-primary-soft); }
.bx-file svg { width: 26px; height: 26px; color: var(--bx-primary-text); }
.bx-file__title { font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); }
.bx-file__hint { font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }
.bx-file input[type="file"] { display: none; }

/* --- copyable code / secret field --- */
.bx-copyfield {
  display: flex; align-items: center; gap: var(--bx-sp-2);
  padding: var(--bx-sp-2) var(--bx-sp-2) var(--bx-sp-2) var(--bx-sp-3);
  border: 1px solid var(--bx-border-strong);
  border-radius: var(--bx-r-md);
  background: var(--bx-bg-sunken);
  min-width: 0;
}
.bx-copyfield code {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0;
  font-family: var(--bx-font-mono); font-size: var(--bx-fs-xs);
  color: var(--bx-text-strong); overflow-wrap: anywhere;
}

/* ==========================================================================
   G. TABLES
   Wide tables scroll INSIDE .bx-table-scroll — the page itself never does.
   ========================================================================== */
.bx-table-wrap {
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-lg);
  background: var(--bx-bg-elevated);
  overflow: hidden;
  min-width: 0;
}
.bx-table { width: 100%; border-collapse: collapse; font-size: var(--bx-fs-sm); }
.bx-table caption {
  caption-side: top; text-align: start;
  padding: var(--bx-sp-4) var(--bx-sp-5) 0;
  font-size: var(--bx-fs-xs); color: var(--bx-text-muted);
}
.bx-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: start;
  padding: var(--bx-sp-3) var(--bx-sp-4);
  background: var(--bx-bg-sunken);
  border-bottom: 1px solid var(--bx-border);
  font-size: var(--bx-fs-2xs);
  font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps);
  text-transform: uppercase;
  color: var(--bx-text-muted);
  white-space: nowrap;
}
.bx-table td {
  padding: var(--bx-sp-3) var(--bx-sp-4);
  border-bottom: 1px solid var(--bx-border);
  color: var(--bx-text);
  vertical-align: middle;
}
.bx-table tbody tr:last-child td { border-bottom: 0; }
.bx-table tbody tr { transition: background-color var(--bx-dur-fast) var(--bx-ease-out); }
.bx-table tbody tr:hover { background: var(--bx-bg-sunken); }
.bx-table tbody tr.is-selected { background: var(--bx-primary-soft); }
.bx-table tbody tr.is-muted td { color: var(--bx-text-subtle); }

.bx-table--compact th, .bx-table--compact td { padding: var(--bx-sp-2) var(--bx-sp-3); }
.bx-table--bordered th, .bx-table--bordered td { border-inline-end: 1px solid var(--bx-border); }
.bx-table--bordered th:last-child, .bx-table--bordered td:last-child { border-inline-end: 0; }
.bx-table--fixed { table-layout: fixed; }

.bx-table .bx-cell-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bx-table .bx-cell-strong { font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); }
.bx-table .bx-cell-muted { color: var(--bx-text-muted); font-size: var(--bx-fs-xs); }
.bx-table .bx-cell-actions { text-align: end; white-space: nowrap; }
.bx-table .bx-cell-actions .bx-iconbtn { width: 30px; height: 30px; flex-basis: 30px; }

.bx-table__primary { display: block; font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); line-height: 1.3; }
.bx-table__secondary { display: block; font-size: var(--bx-fs-xs); color: var(--bx-text-muted); line-height: 1.35; }
.bx-table__id { font-family: var(--bx-font-mono); font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }

/* sortable header */
.bx-th-sort {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.bx-th-sort:hover { color: var(--bx-text-strong); }
.bx-th-sort svg { width: 12px; height: 12px; opacity: .45; }
.bx-th-sort[aria-sort="ascending"] svg, .bx-th-sort[aria-sort="descending"] svg { opacity: 1; color: var(--bx-primary-text); }

.bx-table__empty { padding: var(--bx-sp-12) var(--bx-sp-5); text-align: center; }

/* ==========================================================================
   H. PAGINATION
   ========================================================================== */
.bx-pagination {
  display: flex; align-items: center; gap: var(--bx-sp-3); flex-wrap: wrap;
  padding: var(--bx-sp-4) var(--bx-sp-5);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-elevated);
}
.bx-pagination__meta { font-size: var(--bx-fs-xs); color: var(--bx-text-muted); margin-inline-end: auto; }
.bx-pagination__list { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bx-page {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 var(--bx-sp-2);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-sm);
  background: var(--bx-bg-elevated);
  color: var(--bx-text);
  font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi);
  cursor: pointer;
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out), border-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-page:hover { background: var(--bx-bg-sunken); border-color: var(--bx-border-strong); text-decoration: none; }
.bx-page[aria-current="page"] { background: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }
.bx-page[disabled], .bx-page.is-disabled { opacity: .45; pointer-events: none; }
.bx-page--gap { border-color: transparent; background: none; cursor: default; }

/* ==========================================================================
   I. TABS / SEGMENTED CONTROL
   ========================================================================== */
.bx-tabs { border-bottom: 1px solid var(--bx-border); }
.bx-tabs__list {
  display: flex; gap: var(--bx-sp-1); overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bx-tabs__list::-webkit-scrollbar { display: none; }
.bx-tab {
  position: relative;
  padding: var(--bx-sp-3) var(--bx-sp-4);
  border: 0; background: none;
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi);
  color: var(--bx-text-muted);
  white-space: nowrap; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--bx-dur-fast) var(--bx-ease-out), border-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-tab:hover { color: var(--bx-text-strong); }
.bx-tab[aria-selected="true"], .bx-tab.is-active { color: var(--bx-primary-text); border-bottom-color: var(--bx-primary); }
.bx-tab__count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  margin-inline-start: 6px; padding: 0 5px; border-radius: var(--bx-r-full);
  background: var(--bx-bg-sunken); color: var(--bx-text-muted);
  font-size: 10px; font-weight: var(--bx-fw-bold);
}
.bx-tab[aria-selected="true"] .bx-tab__count { background: var(--bx-primary-soft); color: var(--bx-primary-text); }
.bx-tabpanel { padding-top: var(--bx-sp-5); }
.bx-tabpanel[hidden] { display: none; }

/* pill-style tab bar (used inside cards).
   `max-width` + `overflow-x` keep a long segmented control scrolling inside
   its own rounded box instead of widening the page on a phone. */
.bx-tabpill {
  display: inline-flex; gap: 3px; padding: 3px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bx-bg-sunken); border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-md);
}
.bx-tabpill::-webkit-scrollbar { display: none; }
.bx-tabpill__item { flex: 0 0 auto; }
.bx-tabpill__item {
  padding: 6px var(--bx-sp-3);
  border: 0; border-radius: var(--bx-r-sm);
  background: transparent; color: var(--bx-text-muted);
  font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out), color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-tabpill__item:hover { color: var(--bx-text-strong); }
.bx-tabpill__item.is-active { background: var(--bx-bg-elevated); color: var(--bx-text-strong); box-shadow: var(--bx-shadow-xs); }

/* ==========================================================================
   J. ACCORDION
   ========================================================================== */
.bx-accordion { display: grid; gap: var(--bx-sp-3); }
.bx-acc {
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-md);
  background: var(--bx-bg-elevated);
  overflow: hidden;
  transition: border-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-acc[open] { border-color: var(--bx-blue-300); }
.bx-acc__summary {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-4) var(--bx-sp-5);
  cursor: pointer; list-style: none;
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong);
}
.bx-acc__summary::-webkit-details-marker { display: none; }
.bx-acc__summary::after {
  content: ""; margin-inline-start: auto; flex: 0 0 16px;
  width: 16px; height: 16px;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--bx-dur-base) var(--bx-ease-out);
}
.bx-acc[open] .bx-acc__summary::after { transform: rotate(180deg); }
.bx-acc__summary:hover { background: var(--bx-bg-sunken); }
.bx-acc__body { padding: 0 var(--bx-sp-5) var(--bx-sp-5); font-size: var(--bx-fs-sm); color: var(--bx-text-muted); border-top: 1px solid var(--bx-border); padding-top: var(--bx-sp-4); }
.bx-acc__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   K. MODAL / DRAWER / TOAST / DROPDOWN / TOOLTIP
   ========================================================================== */
.bx-overlay {
  position: fixed; inset: 0; z-index: var(--bx-z-modal);
  background: var(--bx-overlay);
  display: grid; place-items: center;
  padding: var(--bx-sp-4);
  backdrop-filter: blur(2px);
}
.bx-modal {
  width: min(560px, 100%);
  max-height: min(86dvh, 900px);
  display: flex; flex-direction: column;
  background: var(--bx-bg-elevated);
  border-radius: var(--bx-r-xl);
  box-shadow: var(--bx-shadow-xl);
  overflow: hidden;
}
.bx-modal--sm { width: min(400px, 100%); }
.bx-modal--lg { width: min(820px, 100%); }
.bx-modal--xl { width: min(1080px, 100%); }
.bx-modal__head {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-5) var(--bx-sp-6);
  border-bottom: 1px solid var(--bx-border);
  flex: 0 0 auto;
}
.bx-modal__title { font-size: var(--bx-fs-xl); font-weight: var(--bx-fw-bold); color: var(--bx-text-strong); margin: 0; min-width: 0; }
.bx-modal__body { padding: var(--bx-sp-6); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.bx-modal__foot {
  display: flex; align-items: center; gap: var(--bx-sp-3); flex-wrap: wrap;
  justify-content: flex-end;
  padding: var(--bx-sp-4) var(--bx-sp-6);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-sunken);
  flex: 0 0 auto;
}
.bx-modal__foot .bx-btn--link, .bx-modal__foot .bx-mr-auto { margin-inline-end: auto; }

/* --- drawer --- */
.bx-drawer {
  position: fixed; top: 0; bottom: 0; z-index: var(--bx-z-drawer);
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: var(--bx-bg-elevated);
  box-shadow: var(--bx-shadow-xl);
}
.bx-drawer--end   { inset-inline-end: 0; }
.bx-drawer--start { inset-inline-start: 0; }
.bx-drawer__head {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-4) var(--bx-sp-5);
  border-bottom: 1px solid var(--bx-border); flex: 0 0 auto;
}
.bx-drawer__body { padding: var(--bx-sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.bx-drawer__foot { padding: var(--bx-sp-4) var(--bx-sp-5); border-top: 1px solid var(--bx-border); display: flex; gap: var(--bx-sp-3); flex: 0 0 auto; }

/* --- toast --- */
.bx-toast-region {
  position: fixed; z-index: var(--bx-z-toast);
  inset-block-end: var(--bx-sp-5); inset-inline-end: var(--bx-sp-5);
  display: grid; gap: var(--bx-sp-3);
  width: min(380px, calc(100vw - var(--bx-sp-8)));
  pointer-events: none;
}
.bx-toast {
  display: flex; gap: var(--bx-sp-3); align-items: flex-start;
  padding: var(--bx-sp-4);
  background: var(--bx-navy-800);
  color: var(--bx-text-onDark);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-shadow-lg);
  pointer-events: auto;
  animation: bx-toast-in var(--bx-dur-base) var(--bx-ease-out);
}
.bx-toast__icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.bx-toast__body { min-width: 0; flex: 1 1 auto; font-size: var(--bx-fs-sm); }
.bx-toast__title { display: block; font-weight: var(--bx-fw-semi); color: #fff; }
.bx-toast--success .bx-toast__icon { color: var(--bx-teal-300); }
.bx-toast--danger  { background: var(--bx-red-700); color: #FBDDDB; }
.bx-toast--danger .bx-toast__icon { color: #FBDDDB; }
.bx-toast--warning { background: var(--bx-amber-700); color: #FDF0D9; }
.bx-toast--warning .bx-toast__icon { color: #FDF0D9; }
@keyframes bx-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .bx-toast-region { inset-inline: var(--bx-sp-3); width: auto; } }

/* --- dropdown menu --- */
.bx-menu {
  min-width: 200px;
  padding: var(--bx-sp-2);
  background: var(--bx-bg-elevated);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-shadow-lg);
}
.bx-menu__item {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  width: 100%; padding: var(--bx-sp-2) var(--bx-sp-3);
  border: 0; border-radius: var(--bx-r-sm);
  background: none; color: var(--bx-text);
  font-size: var(--bx-fs-sm); text-align: start; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-menu__item:hover { background: var(--bx-bg-sunken); text-decoration: none; color: var(--bx-text-strong); }
.bx-menu__item svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--bx-text-subtle); }
.bx-menu__item--danger { color: var(--bx-danger-text); }
.bx-menu__item--danger:hover { background: var(--bx-danger-soft); color: var(--bx-danger-text); }
.bx-menu__item--danger svg { color: currentColor; }
.bx-menu__sep { height: 1px; background: var(--bx-border); margin: var(--bx-sp-2) 0; border: 0; }
.bx-menu__label {
  padding: var(--bx-sp-2) var(--bx-sp-3) 4px;
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps); text-transform: uppercase; color: var(--bx-text-subtle);
}

/* --- tooltip (CSS-only, uses data-bx-tip) --- */
[data-bx-tip] { position: relative; }
[data-bx-tip]::after {
  content: attr(data-bx-tip);
  position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 5px var(--bx-sp-2);
  background: var(--bx-ink-900); color: #fff;
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-medium); line-height: 1.4;
  border-radius: var(--bx-r-xs); white-space: nowrap; max-width: 260px;
  opacity: 0; pointer-events: none; z-index: var(--bx-z-tooltip);
  transition: opacity var(--bx-dur-fast) var(--bx-ease-out);
}
[data-bx-tip]:hover::after, [data-bx-tip]:focus-visible::after { opacity: 1; }
@media (hover: none) { [data-bx-tip]::after { display: none; } }

/* ==========================================================================
   L. PROGRESS / METER / SPINNER
   ========================================================================== */
.bx-progress { width: 100%; height: 8px; border-radius: var(--bx-r-full); background: var(--bx-bg-sunken); overflow: hidden; }
.bx-progress--sm { height: 5px; }
.bx-progress--lg { height: 12px; }
.bx-progress__bar {
  height: 100%; width: 0;
  border-radius: inherit;
  background: var(--bx-primary);
  transition: width var(--bx-dur-slow) var(--bx-ease-out);
}
.bx-progress__bar--accent  { background: var(--bx-accent); }
.bx-progress__bar--success { background: var(--bx-success); }
.bx-progress__bar--warning { background: var(--bx-warning); }
.bx-progress__bar--danger  { background: var(--bx-danger); }
.bx-progress__bar--striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent);
  background-size: 14px 14px;
  animation: bx-stripes 1s linear infinite;
}
@keyframes bx-stripes { to { background-position: 14px 0; } }

.bx-spinner {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  border: 2px solid var(--bx-blue-100);
  border-top-color: var(--bx-primary);
  animation: bx-spin .7s linear infinite;
}
.bx-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.bx-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
.bx-spinner--onDark { border-color: rgba(255,255,255,.28); border-top-color: #fff; }

/* ==========================================================================
   M. SKELETON / EMPTY / LOADING
   ========================================================================== */
.bx-skeleton {
  display: block; border-radius: var(--bx-r-xs);
  background: linear-gradient(90deg, var(--bx-bg-sunken) 25%, var(--bx-surface-3) 37%, var(--bx-bg-sunken) 63%);
  background-size: 400% 100%;
  animation: bx-shimmer 1.4s ease-in-out infinite;
}
[data-bx-theme="dark"] .bx-skeleton { background-image: linear-gradient(90deg, #16243A 25%, #1E3049 37%, #16243A 63%); }
.bx-skeleton--text { height: 12px; margin-bottom: 8px; }
.bx-skeleton--title { height: 20px; width: 45%; margin-bottom: var(--bx-sp-3); }
.bx-skeleton--circle { border-radius: 50%; width: 38px; height: 38px; }
.bx-skeleton--block { height: 120px; border-radius: var(--bx-r-md); }
@keyframes bx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.bx-empty {
  display: grid; place-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-14) var(--bx-sp-6);
  text-align: center;
}
.bx-empty__art {
  width: 60px; height: 60px; border-radius: var(--bx-r-xl);
  display: grid; place-items: center;
  background: var(--bx-bg-sunken); color: var(--bx-text-subtle);
  margin-bottom: var(--bx-sp-1);
}
.bx-empty__art svg { width: 28px; height: 28px; }
.bx-empty__title { font-size: var(--bx-fs-lg); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); margin: 0; }
.bx-empty__text { font-size: var(--bx-fs-sm); color: var(--bx-text-muted); margin: 0; max-width: 44ch; }
.bx-empty__actions { margin-top: var(--bx-sp-3); display: flex; gap: var(--bx-sp-3); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   N. BREADCRUMB / PAGE HEADER / STEPPER
   ========================================================================== */
.bx-breadcrumb { display: flex; align-items: center; gap: var(--bx-sp-2); flex-wrap: wrap; font-size: var(--bx-fs-xs); }
.bx-breadcrumb a { color: var(--bx-text-muted); text-decoration: none; }
.bx-breadcrumb a:hover { color: var(--bx-primary-text); text-decoration: none; }
.bx-breadcrumb__sep { color: var(--bx-ink-300); }
.bx-breadcrumb [aria-current="page"] { color: var(--bx-text-strong); font-weight: var(--bx-fw-medium); }

.bx-pagehead { display: flex; align-items: flex-start; gap: var(--bx-sp-4); flex-wrap: wrap; margin-bottom: var(--bx-sp-6); }
.bx-pagehead__main { min-width: 0; flex: 1 1 auto; }
.bx-pagehead h1 { font-size: var(--bx-fs-2xl); margin-bottom: var(--bx-sp-1); }
.bx-pagehead__sub { font-size: var(--bx-fs-sm); color: var(--bx-text-muted); margin: 0; }
.bx-pagehead__actions { display: flex; align-items: center; gap: var(--bx-sp-2); flex-wrap: wrap; }

.bx-steps { display: flex; gap: 0; counter-reset: bxstep; }
.bx-step { flex: 1 1 0; min-width: 0; position: relative; padding-top: 34px; }
.bx-step::before {
  content: counter(bxstep); counter-increment: bxstep;
  position: absolute; top: 0; inset-inline-start: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bx-bg-sunken); color: var(--bx-text-muted);
  border: 1.5px solid var(--bx-border-strong);
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold);
}
.bx-step::after {
  content: ""; position: absolute; top: 13px; inset-inline-start: 30px; inset-inline-end: 4px;
  height: 1.5px; background: var(--bx-border);
}
.bx-step:last-child::after { display: none; }
.bx-step__title { font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi); color: var(--bx-text-muted); }
.bx-step.is-done::before { content: "✓"; background: var(--bx-success); border-color: var(--bx-success); color: #fff; }
.bx-step.is-done::after { background: var(--bx-success); }
.bx-step.is-current::before { background: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }
.bx-step.is-current .bx-step__title { color: var(--bx-text-strong); }

/* ==========================================================================
   O. ACTIVITY FEED / TIMELINE
   ========================================================================== */
.bx-feed { display: grid; gap: 0; min-width: 0; }
.bx-feed__item { position: relative; display: flex; gap: var(--bx-sp-3); padding-bottom: var(--bx-sp-5); min-width: 0; }
.bx-feed__item:last-child { padding-bottom: 0; }
.bx-feed__item::before {
  content: ""; position: absolute; inset-inline-start: 15px; top: 32px; bottom: 0;
  width: 1.5px; background: var(--bx-border);
}
.bx-feed__item:last-child::before { display: none; }
.bx-feed__dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bx-bg-sunken); color: var(--bx-text-muted);
  border: 1px solid var(--bx-border);
}
.bx-feed__dot svg { width: 15px; height: 15px; }
.bx-feed__dot--success { background: var(--bx-success-soft); color: var(--bx-success-text); border-color: transparent; }
.bx-feed__dot--warning { background: var(--bx-warning-soft); color: var(--bx-warning-text); border-color: transparent; }
.bx-feed__dot--danger  { background: var(--bx-danger-soft);  color: var(--bx-danger-text);  border-color: transparent; }
.bx-feed__dot--primary { background: var(--bx-primary-soft); color: var(--bx-primary-text); border-color: transparent; }
.bx-feed__body { min-width: 0; flex: 1 1 auto; }
.bx-feed__title { font-size: var(--bx-fs-sm); color: var(--bx-text-strong); font-weight: var(--bx-fw-medium); line-height: 1.45; }
.bx-feed__meta { font-size: var(--bx-fs-xs); color: var(--bx-text-muted); margin-top: 2px; }

/* ==========================================================================
   P. CHART CONTAINER
   ========================================================================== */
.bx-chart { display: flex; flex-direction: column; min-width: 0; }
/* A DEFINITE height, not just min-height: the pure-CSS bar strip inside sets
   `height: 100%`, and a percentage height cannot resolve against an auto-height
   parent — the bars silently collapse to nothing. */
.bx-chart__canvas { position: relative; width: 100%; height: 220px; }
.bx-chart__canvas--sm { height: 150px; }
.bx-chart__canvas--lg { height: 320px; }
.bx-chart__canvas > svg, .bx-chart__canvas > canvas { width: 100%; height: 100%; }
.bx-chart__legend { display: flex; flex-wrap: wrap; gap: var(--bx-sp-4); margin-top: var(--bx-sp-4); }
.bx-chart__legend-item { display: inline-flex; align-items: center; gap: var(--bx-sp-2); font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }
.bx-legend-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--bx-primary); flex: 0 0 10px; }
.bx-legend-swatch--accent  { background: var(--bx-accent); }
.bx-legend-swatch--navy    { background: var(--bx-navy-700); }
.bx-legend-swatch--warning { background: var(--bx-warning); }

/* Sparkline / bar column strip — pure CSS, no JS dependency */
.bx-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.bx-bars--fill { height: 100%; }
.bx-bars--gap { gap: 7px; }
.bx-bars > span { flex: 1 1 0; min-width: 0; background: var(--bx-blue-300); border-radius: 3px 3px 0 0; }
.bx-bars > span:nth-child(odd) { background: var(--bx-primary); }

/* ==========================================================================
   Q. MARKETING PIECES (used by the public site)
   ========================================================================== */
.bx-hero {
  position: relative; overflow: hidden;
  background: var(--bx-gradient-brand);
  color: var(--bx-text-onDark);
}
.bx-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, transparent);
}
.bx-hero > * { position: relative; z-index: 2; }
.bx-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--bx-sp-12); align-items: center;
  padding: var(--bx-sp-16) 0 var(--bx-sp-20);
}
.bx-hero h1 { color: #fff; font-size: var(--bx-fs-display); margin-bottom: var(--bx-sp-4); }
.bx-hero__lead { font-size: var(--bx-fs-lg); color: #C2D3E6; max-width: 56ch; margin: 0; }
.bx-hero__cta { display: flex; flex-wrap: wrap; gap: var(--bx-sp-3); margin: var(--bx-sp-8) 0 var(--bx-sp-5); }
.bx-hero__points { display: flex; flex-wrap: wrap; gap: var(--bx-sp-2) var(--bx-sp-5); font-size: var(--bx-fs-sm); color: #9FB6CE; }
.bx-hero__points li { display: flex; align-items: center; gap: var(--bx-sp-2); }
.bx-tick { width: 16px; height: 16px; flex: 0 0 16px; color: var(--bx-teal-300); }
@media (max-width: 940px) { .bx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bx-sp-10); padding: var(--bx-sp-12) 0 var(--bx-sp-14); } }

.bx-chip {
  display: inline-flex; align-items: center; gap: var(--bx-sp-2);
  padding: 5px var(--bx-sp-3);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--bx-r-full);
  background: rgba(255,255,255,.07);
  color: #D7E5F5;
  font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-medium);
  white-space: nowrap;
}
.bx-chip--light { border-color: var(--bx-border); background: var(--bx-bg-elevated); color: var(--bx-text); }
.bx-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bx-teal-300); flex: 0 0 7px; }

/* trust bar / channel strip */
.bx-chanstrip { display: flex; flex-wrap: wrap; gap: var(--bx-sp-2); justify-content: center; }
.bx-chan {
  display: inline-flex; align-items: center; gap: var(--bx-sp-2);
  padding: 7px var(--bx-sp-4);
  border: 1px solid var(--bx-border); border-radius: var(--bx-r-full);
  background: var(--bx-bg-elevated); color: var(--bx-text);
  font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi);
  white-space: nowrap;
}
.bx-chan__mark { width: 9px; height: 9px; border-radius: 3px; background: var(--bx-primary); flex: 0 0 9px; }
.bx-chan--teal  .bx-chan__mark { background: var(--bx-accent); }
.bx-chan--navy  .bx-chan__mark { background: var(--bx-navy-700); }
.bx-chan--amber .bx-chan__mark { background: var(--bx-amber-600); }
.bx-chan--slate .bx-chan__mark { background: var(--bx-ink-400); }

/* feature icon tile */
.bx-ico {
  width: 44px; height: 44px; border-radius: var(--bx-r-md);
  display: grid; place-items: center; margin-bottom: var(--bx-sp-4);
  background: var(--bx-primary-soft); color: var(--bx-primary-text);
}
.bx-ico svg { width: 22px; height: 22px; }
.bx-ico--accent  { background: var(--bx-accent-soft);  color: var(--bx-accent-text); }
.bx-ico--navy    { background: var(--bx-navy-800);     color: #fff; }
.bx-ico--success { background: var(--bx-success-soft); color: var(--bx-success-text); }
.bx-ico--warning { background: var(--bx-warning-soft); color: var(--bx-warning-text); }

/* plan / pricing card */
.bx-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--bx-sp-7) var(--bx-sp-6);
  background: var(--bx-bg-elevated);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-xl);
  box-shadow: var(--bx-shadow-xs);
  min-width: 0;
}
.bx-plan--featured { border: 2px solid var(--bx-primary); box-shadow: var(--bx-shadow-lg); }
.bx-plan__flag {
  position: absolute; top: calc(var(--bx-sp-4) * -1); inset-inline-start: var(--bx-sp-6);
  padding: 4px var(--bx-sp-3);
  background: var(--bx-primary); color: #fff;
  border-radius: var(--bx-r-full);
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-wide); text-transform: uppercase;
}
.bx-plan__name { font-size: var(--bx-fs-md); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); margin-bottom: var(--bx-sp-1); }
.bx-plan__price { font-size: var(--bx-fs-5xl); font-weight: var(--bx-fw-black); color: var(--bx-text-strong); letter-spacing: var(--bx-tracking-tight); line-height: 1; }
.bx-plan__price small { font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-medium); color: var(--bx-text-muted); }
.bx-plan__note { font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi); color: var(--bx-accent-text); margin-top: var(--bx-sp-2); }
.bx-plan__list { display: grid; gap: var(--bx-sp-3); margin: var(--bx-sp-6) 0; padding: 0; list-style: none; }
.bx-plan__list li { display: flex; gap: var(--bx-sp-3); font-size: var(--bx-fs-sm); align-items: flex-start; }
.bx-plan__list svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--bx-accent); margin-top: 2px; }
.bx-plan__list li.is-off { color: var(--bx-text-subtle); }
.bx-plan__list li.is-off svg { color: var(--bx-ink-200); }
.bx-plan__foot { margin-top: auto; }

/* logo wall placeholder */
.bx-logobox {
  min-height: 72px; display: grid; place-items: center; padding: var(--bx-sp-3);
  border: 1px dashed var(--bx-border-strong);
  border-radius: var(--bx-r-md);
  background: var(--bx-bg-elevated);
  color: var(--bx-text-subtle);
  font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi);
  text-align: center;
}

/* quote / testimonial */
.bx-quote { display: flex; flex-direction: column; gap: var(--bx-sp-4); }
.bx-quote__text { font-size: var(--bx-fs-md); color: var(--bx-text); margin: 0; }
.bx-quote__who { display: flex; align-items: center; gap: var(--bx-sp-3); margin-top: auto; }
.bx-quote__name { font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); line-height: 1.3; }
.bx-quote__role { font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }
.bx-stars { color: var(--bx-amber-600); letter-spacing: 2px; font-size: var(--bx-fs-sm); }

/* ==========================================================================
   R. PUBLIC SITE CHROME (header / footer)
   ========================================================================== */
.bx-siteheader {
  position: sticky; top: 0; z-index: var(--bx-z-sticky);
  background: var(--bx-bg-elevated);
  border-bottom: 1px solid var(--bx-border);
}
.bx-siteheader__inner {
  display: flex; align-items: center; gap: var(--bx-sp-5);
  min-height: 66px;
  flex-wrap: wrap;
  row-gap: var(--bx-sp-3);
  padding-block: var(--bx-sp-3);
}
.bx-siteheader__actions {
  display: flex; align-items: center; gap: var(--bx-sp-2);
  margin-inline-start: auto; flex: 0 1 auto; min-width: 0;
}
.bx-brand { display: inline-flex; align-items: center; gap: var(--bx-sp-3); text-decoration: none; flex: 0 0 auto; min-width: 0; }
.bx-brand__text { min-width: 0; }
.bx-brand:hover { text-decoration: none; }
.bx-brand__mark {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--bx-r-md);
  display: grid; place-items: center;
  background: var(--bx-gradient-accent); color: #fff;
  font-size: var(--bx-fs-md); font-weight: var(--bx-fw-black); line-height: 1;
}
.bx-brand__name { font-size: var(--bx-fs-md); font-weight: var(--bx-fw-black); color: var(--bx-text-strong); letter-spacing: var(--bx-tracking-tight); line-height: 1.15; }
.bx-brand__tag { display: block; font-size: 10px; font-weight: var(--bx-fw-semi); letter-spacing: var(--bx-tracking-caps); text-transform: uppercase; color: var(--bx-text-subtle); }
.bx-sitenav { display: flex; align-items: center; gap: var(--bx-sp-1); margin-inline: auto; }
.bx-sitenav a {
  padding: var(--bx-sp-2) var(--bx-sp-3);
  border-radius: var(--bx-r-sm);
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-medium);
  color: var(--bx-text-muted); text-decoration: none;
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out), color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-sitenav a:hover { background: var(--bx-bg-sunken); color: var(--bx-text-strong); text-decoration: none; }
.bx-sitenav a[aria-current="page"] { color: var(--bx-primary-text); background: var(--bx-primary-soft); }

.bx-sitefooter { background: var(--bx-navy-900); color: #93A8C0; padding: var(--bx-sp-14) 0 var(--bx-sp-6); font-size: var(--bx-fs-sm); }
.bx-sitefooter__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--bx-sp-8); }
.bx-sitefooter h4 { color: #fff; font-size: var(--bx-fs-2xs); letter-spacing: var(--bx-tracking-caps); text-transform: uppercase; margin-bottom: var(--bx-sp-4); }
.bx-sitefooter a { color: #B7C9DD; display: block; padding: 5px 0; text-decoration: none; }
.bx-sitefooter a:hover { color: #fff; text-decoration: none; }
.bx-sitefooter__bottom {
  margin-top: var(--bx-sp-10); padding-top: var(--bx-sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: var(--bx-sp-4); flex-wrap: wrap;
  font-size: var(--bx-fs-xs);
}
@media (max-width: 900px) { .bx-sitefooter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .bx-sitefooter__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   S. MISC
   ========================================================================== */
.bx-list { display: grid; gap: 0; }
.bx-list__item {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-3) var(--bx-sp-4);
  border-bottom: 1px solid var(--bx-border);
  min-width: 0;
}
.bx-list__item:last-child { border-bottom: 0; }
.bx-list__item--hover:hover { background: var(--bx-bg-sunken); }

.bx-code-inline { font-family: var(--bx-font-mono); font-size: var(--bx-fs-xs); background: var(--bx-bg-sunken); border: 1px solid var(--bx-border); border-radius: var(--bx-r-xs); padding: 1px 5px; color: var(--bx-text-strong); }

.bx-method {
  display: inline-block; padding: 2px 7px; border-radius: var(--bx-r-xs);
  font-family: var(--bx-font-mono); font-size: 10px; font-weight: var(--bx-fw-bold);
  letter-spacing: .04em; background: var(--bx-accent-soft); color: var(--bx-accent-text);
}
.bx-method--post { background: var(--bx-primary-soft); color: var(--bx-primary-text); }
.bx-method--del  { background: var(--bx-danger-soft);  color: var(--bx-danger-text); }

.bx-underline-tabs { display: flex; gap: var(--bx-sp-5); border-bottom: 1px solid var(--bx-border); overflow-x: auto; }

.bx-note {
  padding: var(--bx-sp-4) var(--bx-sp-5);
  background: var(--bx-primary-soft);
  border-radius: var(--bx-r-md);
  font-size: var(--bx-fs-sm);
  color: var(--bx-primary-text);
}

.bx-watermark {
  position: absolute; inset-block-end: var(--bx-sp-3); inset-inline-end: var(--bx-sp-4);
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps); text-transform: uppercase;
  color: var(--bx-text-subtle); pointer-events: none;
}

.bx-divider-label {
  display: flex; align-items: center; gap: var(--bx-sp-4);
  color: var(--bx-text-muted); font-size: var(--bx-fs-xs);
  margin: var(--bx-sp-5) 0;
}
.bx-divider-label::before, .bx-divider-label::after { content: ""; height: 1px; background: var(--bx-border); flex: 1; }

.bx-scrollshadow-x { position: relative; }
.bx-scrollshadow-x::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 28px;
  background: linear-gradient(to left, var(--bx-bg-elevated), transparent);
  pointer-events: none; opacity: .9;
}


/* ================= 04-layout.css ================= */
/* ==========================================================================
   BIJOY DESIGN SYSTEM — v1.0
   File 4 of 4 : APPLICATION SHELL
   Depends on: 01-tokens.css, 02-base.css, 03-components.css
   --------------------------------------------------------------------------
   One shell serves BOTH the merchant panel and the admin panel. The only
   difference between them is which nav groups they render and what colour the
   top rail uses (.bx-app--admin). No duplicated layout code.
   ========================================================================== */

.bx-app {
  display: grid;
  grid-template-columns: var(--bx-sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--bx-bg);
}

/* ==========================================================================
   1. SIDEBAR
   ========================================================================== */
.bx-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: var(--bx-z-sidebar);
  display: flex;
  flex-direction: column;
  background: var(--bx-navy-900);
  color: var(--bx-text-onDark);
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
  transition: width var(--bx-dur-base) var(--bx-ease-out);
}

.bx-sidebar__head {
  display: flex; align-items: center; gap: var(--bx-sp-3);
  min-height: var(--bx-topbar-h);
  padding: 0 var(--bx-sp-4);
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  min-width: 0;
}
.bx-sidebar__head .bx-brand__name { color: #fff; }
.bx-sidebar__head .bx-brand__tag { color: #7E96B2; }
.bx-sidebar__head .bx-brand__mark { flex: 0 0 32px; width: 32px; height: 32px; font-size: var(--bx-fs-sm); }
.bx-sidebar__toggle { margin-inline-start: auto; flex: 0 0 auto; color: #93A8C0; }
.bx-sidebar__toggle:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.bx-sidebar__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bx-sp-4) var(--bx-sp-3);
}

.bx-sidebar__foot {
  flex: 0 0 auto;
  padding: var(--bx-sp-3);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* --- nav groups --- */
.bx-navgroup + .bx-navgroup { margin-top: var(--bx-sp-6); }
.bx-navgroup__label {
  display: block;
  padding: 0 var(--bx-sp-3) var(--bx-sp-2);
  font-size: 10px;
  font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps);
  text-transform: uppercase;
  color: #6C86A4;
  white-space: nowrap;
}
.bx-navgroup__list { display: grid; gap: 2px; }

.bx-navitem {
  position: relative;
  display: flex; align-items: center; gap: var(--bx-sp-3);
  padding: var(--bx-sp-3) var(--bx-sp-3);
  border-radius: var(--bx-r-md);
  color: #AEC2D8;
  font-size: var(--bx-fs-sm);
  font-weight: var(--bx-fw-medium);
  text-decoration: none;
  min-width: 0;
  transition: background-color var(--bx-dur-fast) var(--bx-ease-out), color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-navitem:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.bx-navitem:focus-visible { outline: 2px solid var(--bx-blue-300); outline-offset: -2px; }
.bx-navitem svg, .bx-navitem .bx-navitem__icon { width: 18px; height: 18px; flex: 0 0 18px; color: #8BA4C0; transition: color var(--bx-dur-fast) var(--bx-ease-out); }
.bx-navitem:hover svg, .bx-navitem:hover .bx-navitem__icon { color: #fff; }
.bx-navitem__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.bx-navitem__meta { margin-inline-start: auto; flex: 0 0 auto; display: flex; align-items: center; gap: var(--bx-sp-2); }

.bx-navitem.is-active {
  background: linear-gradient(90deg, rgba(47, 121, 232, .28), rgba(47, 121, 232, .08));
  color: #fff;
}
.bx-navitem.is-active svg, .bx-navitem.is-active .bx-navitem__icon { color: var(--bx-blue-300); }
.bx-navitem.is-active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--bx-blue-500);
}

.bx-navitem__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: var(--bx-r-full);
  background: rgba(255, 255, 255, .12); color: #D6E4F5;
  font-size: 10px; font-weight: var(--bx-fw-bold); line-height: 1;
}
.bx-navitem.is-active .bx-navitem__count { background: var(--bx-blue-600); color: #fff; }

/* custom scrollbar on the dark rail */
.bx-sidebar__body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.bx-sidebar__body::-webkit-scrollbar { width: 8px; }
.bx-sidebar__body::-webkit-scrollbar-track { background: transparent; }
.bx-sidebar__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: var(--bx-r-full); border: 2px solid transparent; background-clip: content-box; }
.bx-sidebar__body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); background-clip: content-box; }

/* --- sidebar promo / support card --- */
.bx-sidecard {
  padding: var(--bx-sp-4);
  border-radius: var(--bx-r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--bx-fs-xs);
  color: #AEC2D8;
}
.bx-sidecard__title { display: block; color: #fff; font-weight: var(--bx-fw-semi); font-size: var(--bx-fs-sm); margin-bottom: 3px; }
.bx-sidecard .bx-btn { margin-top: var(--bx-sp-3); }

/* --- admin variant: differentiate by top rail, not by a different layout --- */
.bx-app--admin .bx-sidebar { background: #0A1F3C; }
.bx-app--admin .bx-sidebar__head { border-bottom-color: rgba(126, 215, 206, .18); }
.bx-app--admin .bx-navitem.is-active {
  background: linear-gradient(90deg, rgba(13, 148, 136, .3), rgba(13, 148, 136, .07));
}
.bx-app--admin .bx-navitem.is-active svg, .bx-app--admin .bx-navitem.is-active .bx-navitem__icon { color: var(--bx-teal-300); }
.bx-app--admin .bx-navitem.is-active::before { background: var(--bx-teal-600); }
.bx-app--admin .bx-navitem.is-active .bx-navitem__count { background: var(--bx-teal-700); }

/* ==========================================================================
   2. TOPBAR
   ========================================================================== */
.bx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
}

.bx-topbar {
  position: sticky;
  top: 0;
  z-index: var(--bx-z-topbar);
  display: flex; align-items: center; gap: var(--bx-sp-3);
  min-height: var(--bx-topbar-h);
  padding: 0 var(--bx-sp-5);
  background: var(--bx-bg-elevated);
  border-bottom: 1px solid var(--bx-border);
}
.bx-topbar__left  { display: flex; align-items: center; gap: var(--bx-sp-3); min-width: 0; }
.bx-topbar__right { display: flex; align-items: center; gap: var(--bx-sp-2); margin-inline-start: auto; flex: 0 0 auto; }
.bx-topbar__title { font-size: var(--bx-fs-md); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bx-search {
  display: flex; align-items: center; gap: var(--bx-sp-2);
  width: min(340px, 100%);
  padding: 0 var(--bx-sp-3);
  min-height: 36px;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-md);
  background: var(--bx-bg-sunken);
  transition: border-color var(--bx-dur-fast) var(--bx-ease-out), box-shadow var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-search:focus-within { border-color: var(--bx-primary); background: var(--bx-surface); box-shadow: var(--bx-shadow-focus); }
.bx-search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--bx-text-subtle); }
.bx-search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font-size: var(--bx-fs-sm); color: var(--bx-text-strong); }
.bx-search input::placeholder { color: var(--bx-text-subtle); }
.bx-search kbd {
  flex: 0 0 auto; font-family: var(--bx-font-mono); font-size: 10px;
  padding: 2px 5px; border: 1px solid var(--bx-border); border-radius: var(--bx-r-xs);
  background: var(--bx-bg-elevated); color: var(--bx-text-subtle);
}

/* notification bell with badge */
.bx-bell { position: relative; }
.bx-bell__badge {
  position: absolute; top: 4px; inset-inline-end: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--bx-r-full);
  background: var(--bx-danger); color: #fff;
  font-size: 10px; font-weight: var(--bx-fw-bold); line-height: 16px; text-align: center;
  border: 2px solid var(--bx-bg-elevated);
}

/* user chip in the topbar */
.bx-userchip {
  display: inline-flex; align-items: center; gap: var(--bx-sp-2);
  padding: 4px var(--bx-sp-2) 4px 4px;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-full);
  background: var(--bx-bg-elevated);
  cursor: pointer; min-width: 0;
  transition: border-color var(--bx-dur-fast) var(--bx-ease-out), background-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-userchip:hover { border-color: var(--bx-border-strong); background: var(--bx-bg-sunken); }
.bx-userchip__name { font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); white-space: nowrap; }
.bx-userchip__role { display: block; font-size: 10px; color: var(--bx-text-subtle); line-height: 1.2; }
.bx-userchip__caret { width: 14px; height: 14px; color: var(--bx-text-subtle); flex: 0 0 14px; }

/* demo / environment ribbon.
   `min-width: 0` on the children is load-bearing: a flex item defaults to
   min-width:auto, which is its longest unbreakable word. A long Bengali
   sentence would then refuse to wrap and push the page sideways at 320px. */
.bx-envbar {
  display: flex; align-items: center; gap: var(--bx-sp-2); flex-wrap: wrap;
  padding: var(--bx-sp-2) var(--bx-sp-5);
  background: var(--bx-warning-soft);
  color: var(--bx-warning-text);
  font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-semi);
  border-bottom: 1px solid rgba(180, 83, 9, .18);
}
.bx-envbar > * { min-width: 0; }
.bx-envbar svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* Text-holding children in horizontal bars need to be allowed to shrink below
   their intrinsic width, otherwise a long word sets a floor the bar cannot go
   under. This is applied to the TEXT slots deliberately: a blanket
   `> * { min-width: 0 }` would also let action clusters (button groups,
   segmented controls) be squeezed into an internal scroll on wide screens. */
.bx-topbar__left,
.bx-topbar__title,
.bx-pagination__meta { min-width: 0; }

/* ==========================================================================
   3. CONTENT REGION
   ========================================================================== */
.bx-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--bx-sp-6) var(--bx-sp-5) var(--bx-sp-12);
}
.bx-content--tight { padding: var(--bx-sp-5); }

.bx-content__inner {
  width: 100%;
  max-width: var(--bx-container-wide);
  margin-inline: auto;
  min-width: 0;
}
.bx-content__inner--narrow { max-width: var(--bx-container); }

.bx-stackgrid { display: grid; gap: var(--bx-sp-5); min-width: 0; }

/* ==========================================================================
   4. COLLAPSED RAIL  (desktop only)
   ========================================================================== */
@media (min-width: 1024px) {
  .bx-app.is-collapsed { grid-template-columns: var(--bx-sidebar-w-collapsed) minmax(0, 1fr); }
  .bx-app.is-collapsed .bx-sidebar { width: var(--bx-sidebar-w-collapsed); }
  .bx-app.is-collapsed .bx-sidebar__head { padding-inline: 0; justify-content: center; }
  .bx-app.is-collapsed .bx-brand__text,
  .bx-app.is-collapsed .bx-navgroup__label,
  .bx-app.is-collapsed .bx-navitem__text,
  .bx-app.is-collapsed .bx-navitem__meta,
  .bx-app.is-collapsed .bx-sidecard { display: none; }
  .bx-app.is-collapsed .bx-sidebar__toggle { position: absolute; top: 18px; inset-inline-end: 8px; }
  .bx-app.is-collapsed .bx-sidebar__head { position: relative; }
  .bx-app.is-collapsed .bx-navitem { justify-content: center; padding-inline: 0; }
  .bx-app.is-collapsed .bx-navgroup + .bx-navgroup { margin-top: var(--bx-sp-4); }

  /* tooltip on hover so a collapsed rail is still usable */
  .bx-app.is-collapsed .bx-navitem::after {
    content: attr(data-label);
    position: absolute; inset-inline-start: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) scale(.96);
    padding: 5px var(--bx-sp-3);
    background: var(--bx-ink-900); color: #fff;
    font-size: var(--bx-fs-xs); font-weight: var(--bx-fw-medium);
    border-radius: var(--bx-r-sm); white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: var(--bx-z-tooltip);
    transition: opacity var(--bx-dur-fast) var(--bx-ease-out), transform var(--bx-dur-fast) var(--bx-ease-out);
  }
  .bx-app.is-collapsed .bx-navitem:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ==========================================================================
   5. RESPONSIVE — off-canvas sidebar below 1024px
   ========================================================================== */

/* The scrim is a mobile-only device, and it lives INSIDE the .bx-app grid.
   Without a base rule it would still be a grid item at desktop widths, taking
   the second track and pushing .bx-main onto an implicit second row — the
   whole content region then collapses to ~228px. `display: none` outside the
   mobile query is what prevents that. */
.bx-navscrim { display: none; }

@media (max-width: 1023px) {
  .bx-app { grid-template-columns: minmax(0, 1fr); }

  .bx-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(288px, 86vw);
    height: 100dvh;
    transform: translateX(-102%);
    transition: transform var(--bx-dur-base) var(--bx-ease-in-out);
    box-shadow: var(--bx-shadow-xl);
  }
  [dir="rtl"] .bx-sidebar { transform: translateX(102%); }

  .bx-app.is-nav-open .bx-sidebar { transform: none; }

  .bx-navscrim {
    display: block;
    position: fixed; inset: 0; z-index: calc(var(--bx-z-sidebar) - 1);
    background: var(--bx-overlay);
    opacity: 0; visibility: hidden;
    transition: opacity var(--bx-dur-base) var(--bx-ease-out), visibility var(--bx-dur-base);
  }
  .bx-app.is-nav-open .bx-navscrim { opacity: 1; visibility: visible; }

  .bx-content { padding: var(--bx-sp-5) var(--bx-sp-4) var(--bx-sp-12); }
  .bx-topbar { padding-inline: var(--bx-sp-4); }
  .bx-search kbd { display: none; }
}

/* hide the desktop collapse control on touch widths */
@media (max-width: 1023px) { .bx-sidebar__toggle { display: none; } }
@media (min-width: 1024px) { .bx-navtoggle { display: none; } }

/* ==========================================================================
   6. NARROW PHONE POLISH (down to 320px)
   ========================================================================== */
@media (max-width: 640px) {
  .bx-topbar__title { display: none; }
  .bx-search { width: 100%; }
  .bx-userchip__text { display: none; }
  .bx-userchip { padding: 4px; border-radius: var(--bx-r-full); }
  .bx-pagehead { gap: var(--bx-sp-3); }
  .bx-pagehead h1 { font-size: var(--bx-fs-xl); }
  .bx-pagehead__actions { width: 100%; }
  .bx-pagehead__actions .bx-btn { flex: 1 1 auto; }
  .bx-card__head, .bx-card__body, .bx-card__foot { padding-inline: var(--bx-sp-4); }
  .bx-modal__head, .bx-modal__body, .bx-modal__foot { padding-inline: var(--bx-sp-4); }
  .bx-pagination { padding-inline: var(--bx-sp-4); }
  .bx-pagination__meta { width: 100%; margin-bottom: var(--bx-sp-2); }
  .bx-quote, .bx-plan { padding: var(--bx-sp-5); }
  .bx-toast-region { inset-block-end: var(--bx-sp-3); }
}

/* ==========================================================================
   7. PRINT — panels should print as a clean document
   ========================================================================== */
@media print {
  .bx-app { display: block; }
  .bx-sidebar, .bx-topbar, .bx-navscrim, .bx-envbar { display: none !important; }
  .bx-content { padding: 0; }
  .bx-content__inner { max-width: none; }
}


/* ================= 06-app-shim.css ================= */
/* ==========================================================================
   BIJOY DESIGN SYSTEM — v1.0
   File 6 of 6 : APPLICATION SHIM
   --------------------------------------------------------------------------
   The bridge between the new design system and the parts of the application
   that are NOT being rewritten:
     * the existing page-loading overlay contract used by assets/js/general.js
     * rich text that comes out of the database (terms, privacy, blog posts)
     * the small reveal / counter behaviours that replaced AOS + PureCounter
   Nothing here invents a second design language; it only styles what already
   exists in the DOM.
   ========================================================================== */

/* ==========================================================================
   1. PAGE OVERLAY
   Contract: assets/js/process.js does
       $('#page-overlay').addClass('active')
       $('#page-overlay .page-loading-image').removeClass('d-none')
   so these exact ids/classes have to exist and be styled here.
   ========================================================================== */
#page-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--bx-z-modal);
  display: none;
  place-items: center;
  background: var(--bx-overlay);
  backdrop-filter: blur(2px);
}
/* ONLY `.active` may reveal the overlay.
   The markup carries `class="visible incoming"` permanently, and the legacy
   stylesheet deliberately ships `#page-overlay.visible { display: none }` so
   that nothing shows until JS opts in. Matching `.visible` here overrode that
   and pinned the spinner over every page. Both process.js (public site) and
   process2.js (panels) add `.active`, so this single rule is the whole
   contract. */
#page-overlay.active { display: grid; }
#page-overlay .page-loading-image {
  display: grid;
  place-items: center;
  gap: var(--bx-sp-4);
  padding: var(--bx-sp-6) var(--bx-sp-8);
  background: var(--bx-bg-elevated);
  border-radius: var(--bx-r-lg);
  box-shadow: var(--bx-shadow-xl);
  font-size: var(--bx-fs-sm);
  color: var(--bx-text-muted);
  text-align: center;
}
#page-overlay .page-loading-image::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--bx-blue-100);
  border-top-color: var(--bx-primary);
  animation: bx-spin .7s linear infinite;
}
/* the JS toggles Bootstrap's `.d-none`; keep that class meaningful */
.d-none { display: none !important; }

/* ==========================================================================
   2. DATABASE RICH TEXT
   Terms, privacy policy and blog bodies are stored as HTML in the options
   table. `.bx-prose` gives that arbitrary markup a readable measure without
   depending on any legacy stylesheet.
   ========================================================================== */
.bx-prose {
  font-size: var(--bx-fs-md);
  line-height: 1.75;
  color: var(--bx-text);
  max-width: 78ch;
  overflow-wrap: break-word;
}
.bx-prose > :first-child { margin-top: 0; }
.bx-prose > :last-child { margin-bottom: 0; }

.bx-prose h1, .bx-prose h2, .bx-prose h3, .bx-prose h4, .bx-prose h5, .bx-prose h6 {
  color: var(--bx-text-strong);
  margin: var(--bx-sp-8) 0 var(--bx-sp-3);
  line-height: 1.3;
}
.bx-prose h1 { font-size: var(--bx-fs-2xl); }
.bx-prose h2 { font-size: var(--bx-fs-xl); }
.bx-prose h3 { font-size: var(--bx-fs-lg); }
.bx-prose p, .bx-prose ul, .bx-prose ol, .bx-prose blockquote, .bx-prose table, .bx-prose pre {
  margin: 0 0 var(--bx-sp-4);
}
.bx-prose ul, .bx-prose ol { padding-inline-start: var(--bx-sp-6); }
.bx-prose ul { list-style: disc; }
.bx-prose ol { list-style: decimal; }
.bx-prose li { margin-bottom: var(--bx-sp-2); }
.bx-prose a { color: var(--bx-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.bx-prose strong, .bx-prose b { color: var(--bx-text-strong); font-weight: var(--bx-fw-semi); }
.bx-prose blockquote {
  border-inline-start: 3px solid var(--bx-primary);
  padding: var(--bx-sp-2) 0 var(--bx-sp-2) var(--bx-sp-5);
  color: var(--bx-text-muted);
  font-style: italic;
}
.bx-prose hr { border: 0; border-top: 1px solid var(--bx-border); margin: var(--bx-sp-8) 0; }
.bx-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bx-r-md);
  margin: var(--bx-sp-4) 0;
}
.bx-prose code {
  font-family: var(--bx-font-mono);
  font-size: .92em;
  background: var(--bx-bg-sunken);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-xs);
  padding: 1px 5px;
}
.bx-prose pre {
  background: var(--bx-navy-900);
  color: #D7E5F5;
  border-radius: var(--bx-r-md);
  padding: var(--bx-sp-5);
  overflow-x: auto;
  font-size: var(--bx-fs-sm);
  line-height: 1.6;
}
.bx-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
/* Tables inside DB content must scroll in their own box, never widen the page. */
.bx-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--bx-fs-sm);
}
.bx-prose th, .bx-prose td {
  border: 1px solid var(--bx-border);
  padding: var(--bx-sp-3);
  text-align: start;
  vertical-align: top;
}
.bx-prose th { background: var(--bx-bg-sunken); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); }
.bx-prose iframe, .bx-prose video { max-width: 100%; }

/* ==========================================================================
   3. REVEAL ON SCROLL  (replaces the AOS vendor library)
   Progressive enhancement: without JS the elements are simply visible.
   ========================================================================== */
.bx-reveal { opacity: 1; }
html.bx-js .bx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--bx-dur-slow) var(--bx-ease-out), transform var(--bx-dur-slow) var(--bx-ease-out);
  transition-delay: var(--bx-reveal-delay, 0ms);
}
html.bx-js .bx-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.bx-js .bx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   4. COUNTER  (replaces the PureCounter vendor library)
   ========================================================================== */
.bx-counter { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4b. PUBLIC SITE HEADER BEHAVIOUR
   The desktop nav is a centred horizontal bar. Below 900px it becomes a
   full-width panel that drops out of the sticky header. Because
   .bx-siteheader is `position: sticky` it is also a containing block, so the
   absolutely-positioned panel resolves against the header itself.
   ========================================================================== */
.bx-siteheader { transition: box-shadow var(--bx-dur-base) var(--bx-ease-out); }
.bx-siteheader.is-scrolled { box-shadow: var(--bx-shadow-sm); }

.bx-sitenav-toggle { display: none; }

.bx-brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.bx-brand__mark { overflow: hidden; }

/* The uploaded site logo is usually a wide banner. Forcing it into a square
   mark squashes it, so the header shows it at its natural aspect ratio. */
.bx-brand__logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(190px, 46vw);
  object-fit: contain;
}
@media (max-width: 480px) { .bx-brand__logo { height: 30px; } }

@media (max-width: 899px) {
  .bx-sitenav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: var(--bx-sp-3);
    background: var(--bx-bg-elevated);
    border-bottom: 1px solid var(--bx-border);
    box-shadow: var(--bx-shadow-lg);
    max-height: calc(100dvh - var(--bx-topbar-h));
    overflow-y: auto;
  }
  .bx-sitenav.is-open { display: flex; }
  .bx-sitenav a { padding: var(--bx-sp-3); font-size: var(--bx-fs-md); }
  .bx-sitenav-toggle { display: inline-grid; }
}
@media (min-width: 900px) {
  .bx-sitenav { display: flex; }
}

/* back-to-top */
.bx-backtotop {
  position: fixed;
  inset-block-end: var(--bx-sp-6);
  inset-inline-end: var(--bx-sp-6);
  z-index: var(--bx-z-sticky);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-full);
  background: var(--bx-bg-elevated);
  color: var(--bx-text-strong);
  box-shadow: var(--bx-shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--bx-dur-base) var(--bx-ease-out),
              transform var(--bx-dur-base) var(--bx-ease-out),
              visibility var(--bx-dur-base);
}
.bx-backtotop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bx-backtotop:hover { background: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }
.bx-backtotop svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .bx-backtotop { inset-block-end: var(--bx-sp-4); inset-inline-end: var(--bx-sp-4); }
}

/* ==========================================================================
   4c. PUBLIC MARKETING EXTRAS
   Only what the public pages need on top of the shared component library.
   ========================================================================== */
.bx-hero__visual { position: relative; min-width: 0; }

/* Confirmation badge that appears to float over the bottom-right of the mock.
   It is IN FLOW with a negative top margin rather than absolutely positioned:
   an absolutely-positioned badge sitting outside the column gets clipped by
   .bx-hero's `overflow: hidden` on mid-width screens, whereas an in-flow one
   can never clip or push the page sideways. The -16px lift lands inside the
   card's own 24px padding, so no content is covered. */
.bx-hero__float {
  display: flex;
  align-items: center;
  gap: var(--bx-sp-3);
  width: fit-content;
  margin-inline-start: auto;
  margin-inline-end: var(--bx-sp-5);
  margin-top: -14px;   /* stays inside the card's 24px bottom padding */
  position: relative;
  z-index: 2;
  padding: var(--bx-sp-3) var(--bx-sp-4);
  background: var(--bx-bg-elevated);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-shadow-lg);
}
.bx-hero__float .t1 { display: block; font-size: var(--bx-fs-2xs); color: var(--bx-text-muted); font-weight: var(--bx-fw-semi); }
.bx-hero__float .t2 { display: block; font-size: var(--bx-fs-sm); color: var(--bx-text-strong); font-weight: var(--bx-fw-bold); }
@media (max-width: 560px) {
  .bx-hero__float { margin-inline-end: var(--bx-sp-3); margin-top: var(--bx-sp-4); }
}

/* real gateway / platform logos inside the pill strip and logo tiles */
.bx-chan img { height: 20px; width: auto; max-width: 88px; object-fit: contain; }
.bx-logobox img { max-height: 30px; max-width: 100%; object-fit: contain; }
.bx-logobox--tall { min-height: 92px; }

/* horizontal scroller for long logo strips — scrolls in place, never widens
   the page, and shows snap points on touch devices */
.bx-scroller {
  display: flex;
  gap: var(--bx-sp-3);
  overflow-x: auto;
  padding-bottom: var(--bx-sp-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.bx-scroller > * { flex: 0 0 auto; scroll-snap-align: start; }
.bx-scroller::-webkit-scrollbar { height: 6px; }
.bx-scroller::-webkit-scrollbar-thumb { background: var(--bx-border-strong); border-radius: var(--bx-r-full); }
.bx-scroller::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 900px) {
  /* enough room on desktop: wrap instead of scrolling */
  .bx-scroller { flex-wrap: wrap; overflow: visible; }
}

/* closing call-to-action band */
.bx-ctaband {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: var(--bx-sp-8);
  align-items: center;
  padding: var(--bx-sp-12);
  border-radius: var(--bx-r-xl);
  background: var(--bx-gradient-brand);
  color: var(--bx-text-onDark);
}
.bx-ctaband h2 { color: #fff; }
.bx-ctaband p { margin: 0; max-width: 54ch; color: #C2D3E6; }
.bx-ctaband__actions { display: flex; gap: var(--bx-sp-3); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
  .bx-ctaband { grid-template-columns: minmax(0, 1fr); padding: var(--bx-sp-8) var(--bx-sp-6); }
  .bx-ctaband__actions { justify-content: flex-start; }
}

/* ==========================================================================
   4d. AUTH SHELL
   Used by sign-in, sign-up, password reset and activation. Deliberately
   framework-free: the only script contract these pages rely on is jQuery +
   $.toast + process.js + general.js for the .actionForm AJAX submit.
   ========================================================================== */
.bx-auth-page { padding: var(--bx-sp-10) 0 var(--bx-sp-14); }
.bx-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: 1000px;
  margin-inline: auto;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-r-xl);
  overflow: hidden;
  background: var(--bx-bg-elevated);
  box-shadow: var(--bx-shadow-lg);
}
.bx-auth__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bx-gradient-brand);
  color: var(--bx-text-onDark);
  padding: var(--bx-sp-10) var(--bx-sp-8);
  min-width: 0;
}
.bx-auth__aside h2 { color: #fff; font-size: var(--bx-fs-2xl); margin-bottom: var(--bx-sp-3); }
.bx-auth__aside p { color: #C2D3E6; margin: 0; }
.bx-auth__aside ul { display: grid; gap: var(--bx-sp-3); margin: var(--bx-sp-6) 0 0; padding: 0; list-style: none; }
.bx-auth__aside li { display: flex; gap: var(--bx-sp-3); font-size: var(--bx-fs-sm); align-items: flex-start; }
.bx-auth__aside li svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--bx-teal-300); margin-top: 2px; }
.bx-auth__main { padding: var(--bx-sp-10) var(--bx-sp-8); min-width: 0; }
.bx-auth__head { margin-bottom: var(--bx-sp-6); }
.bx-auth__head h1 { font-size: var(--bx-fs-2xl); margin-bottom: var(--bx-sp-2); }
.bx-auth__head p { margin: 0; color: var(--bx-text-muted); font-size: var(--bx-fs-sm); }
.bx-auth__foot { margin-top: var(--bx-sp-6); font-size: var(--bx-fs-sm); color: var(--bx-text-muted); }
@media (max-width: 820px) {
  .bx-auth { grid-template-columns: minmax(0, 1fr); border-radius: var(--bx-r-lg); }
  .bx-auth__aside { order: 2; padding: var(--bx-sp-8) var(--bx-sp-6); }
  .bx-auth__main { padding: var(--bx-sp-8) var(--bx-sp-6); }
  .bx-auth__aside h2 { font-size: var(--bx-fs-xl); }
}

/* password strength meter — replaces the Blithe .pwindicator widget.
   Same ids/classes so the markup contract is unchanged. */
.pwindicator { margin-top: var(--bx-sp-2); }
.pwindicator .bar {
  height: 5px;
  border-radius: var(--bx-r-full);
  background: var(--bx-bg-sunken);
  overflow: hidden;
  transition: background-color var(--bx-dur-base) var(--bx-ease-out);
}
.pwindicator .bar::after { content: ""; display: block; height: 100%; width: 0; transition: width var(--bx-dur-base) var(--bx-ease-out); }
.pwindicator.is-weak   .bar::after { width: 33%; background: var(--bx-danger); }
.pwindicator.is-medium .bar::after { width: 66%; background: var(--bx-warning); }
.pwindicator.is-strong .bar::after { width: 100%; background: var(--bx-success); }
.pwindicator .label { display: block; margin-top: 5px; font-size: var(--bx-fs-xs); color: var(--bx-text-muted); }
.pwindicator.is-weak   .label { color: var(--bx-danger-text); }
.pwindicator.is-medium .label { color: var(--bx-warning-text); }
.pwindicator.is-strong .label { color: var(--bx-success-text); }

/* section heading block used by the marketing pages */
.bx-head { text-align: center; max-width: 62ch; margin: 0 auto var(--bx-sp-10); }
.bx-head h2 { margin-bottom: var(--bx-sp-3); }
.bx-head p { margin: 0; color: var(--bx-text-muted); font-size: var(--bx-fs-lg); }

/* ==========================================================================
   4e. DOCUMENTATION PAGES
   ========================================================================== */
.bx-docs { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--bx-sp-8); align-items: start; min-width: 0; }

/* Below 1024px there is no room for a side rail: the table of contents stacks
   above the article. Without this the 272px rail plus its content sets a floor
   of ~578px and the page scrolls sideways on every phone. */
@media (max-width: 1023px) {
  .bx-docs { grid-template-columns: minmax(0, 1fr); gap: var(--bx-sp-6); }
  .bx-docsnav {
    position: static;
    max-height: none;
    padding-bottom: var(--bx-sp-4);
    border-bottom: 1px solid var(--bx-border);
  }
}

.bx-docsnav { position: sticky; top: calc(var(--bx-topbar-h) + var(--bx-sp-5)); max-height: calc(100dvh - var(--bx-topbar-h) - var(--bx-sp-10)); overflow-y: auto; }
.bx-docsnav__group + .bx-docsnav__group { margin-top: var(--bx-sp-5); }
.bx-docsnav__label {
  display: block; padding: 0 var(--bx-sp-3) var(--bx-sp-2);
  font-size: var(--bx-fs-2xs); font-weight: var(--bx-fw-bold);
  letter-spacing: var(--bx-tracking-caps); text-transform: uppercase; color: var(--bx-text-subtle);
}
.bx-docsnav__list { display: grid; gap: 1px; border-inline-start: 1px solid var(--bx-border); }
.bx-docsnav a {
  display: block; padding: 7px var(--bx-sp-4);
  font-size: var(--bx-fs-sm); color: var(--bx-text-muted); text-decoration: none;
  border-inline-start: 2px solid transparent; margin-inline-start: -1px;
  transition: color var(--bx-dur-fast) var(--bx-ease-out), border-color var(--bx-dur-fast) var(--bx-ease-out);
}
.bx-docsnav a:hover { color: var(--bx-text-strong); text-decoration: none; }
.bx-docsnav a.is-active { color: var(--bx-primary-text); border-inline-start-color: var(--bx-primary); font-weight: var(--bx-fw-semi); }

.bx-docs__body { min-width: 0; }
.bx-docs__body > section + section { margin-top: var(--bx-sp-12); }
/* anchor targets must clear the sticky header */
.bx-docs__body [id] { scroll-margin-top: calc(var(--bx-topbar-h) + var(--bx-sp-5)); }

.bx-docs__title { font-size: var(--bx-fs-3xl); margin-bottom: var(--bx-sp-3); }
.bx-docs__section-title { font-size: var(--bx-fs-xl); margin: var(--bx-sp-8) 0 var(--bx-sp-4); padding-bottom: var(--bx-sp-2); border-bottom: 1px solid var(--bx-border); }
.bx-docs__meta { font-size: var(--bx-fs-xs); color: var(--bx-text-subtle); font-weight: var(--bx-fw-medium); }

/* endpoint callout */
.bx-endpoint {
  display: flex; align-items: center; gap: var(--bx-sp-3); flex-wrap: wrap;
  padding: var(--bx-sp-3) var(--bx-sp-4);
  border: 1px solid var(--bx-border); border-radius: var(--bx-r-md);
  background: var(--bx-bg-sunken); min-width: 0;
}
.bx-endpoint code { font-family: var(--bx-font-mono); font-size: var(--bx-fs-sm); color: var(--bx-text-strong); overflow-wrap: anywhere; min-width: 0; }
.bx-endpoint .bx-method { flex: 0 0 auto; }

/* code block with its own copy control */
.bx-code { position: relative; }
.bx-code pre {
  background: var(--bx-navy-900); color: #D7E5F5;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 var(--bx-r-md) var(--bx-r-md);
  padding: var(--bx-sp-5); margin: 0;
  overflow-x: auto; font-size: var(--bx-fs-sm); line-height: 1.65;
  font-family: var(--bx-font-mono);
  tab-size: 2;
}
.bx-code pre code { background: none; border: 0; padding: 0; color: inherit; font-family: inherit; }
.bx-code__copy { position: absolute; top: var(--bx-sp-3); inset-inline-end: var(--bx-sp-3); z-index: 2; }
.bx-code .bx-tabs__list {
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: 0;
  border-radius: var(--bx-r-md) var(--bx-r-md) 0 0;
  background: rgba(255,255,255,.04);
  padding-inline: var(--bx-sp-2);
}
.bx-code .bx-tab { color: #9FB6CE; border-bottom-color: transparent; }
.bx-code .bx-tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.bx-code .bx-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--bx-teal-300); }

/* token colours for the lightweight highlighter */
.bx-tok-str  { color: #7FE3D6; }
.bx-tok-com  { color: #7E96B2; font-style: italic; }
.bx-tok-key  { color: #90B8F0; }
.bx-tok-num  { color: #F2C078; }
.bx-tok-punc { color: #A9C2DC; }

/* ==========================================================================
   4f. TOKENISED BRIDGE FOR THE API REFERENCE PARTIALS
   The code-sample partials (integration.php / integration2.php) are compiled
   from ~650 lines of hand-maintained samples. Re-typing them would risk losing
   an API field, so their outer markup keeps its original class names and this
   section styles those names with design-system tokens. No framework
   stylesheet is loaded, and every value below comes from a token, so the block
   still follows dark mode. Replace with native bx classes when the samples are
   next revised.
   ========================================================================== */
.nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--bx-border); }
.nav-tabs .nav-item { list-style: none; }
.nav-tabs .nav-link {
  border: 0; background: none; cursor: pointer;
  padding: var(--bx-sp-3) var(--bx-sp-4);
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi);
  color: var(--bx-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--bx-text-strong); background: var(--bx-bg-sunken); }
.nav-tabs .nav-link.active { color: var(--bx-primary-text); border-bottom-color: var(--bx-primary); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.tab-content > .tab-pane.show { opacity: 1; }

.table { width: 100%; border-collapse: collapse; font-size: var(--bx-fs-sm); }
.table th, .table td { border: 1px solid var(--bx-border); padding: var(--bx-sp-3); text-align: start; vertical-align: top; }
.table thead th { background: var(--bx-bg-sunken); font-weight: var(--bx-fw-semi); color: var(--bx-text-strong); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--bx-bg-sunken); }
.table-responsive { max-width: 100%; overflow-x: auto; }

/* table wrappers inside the partials must scroll, never widen the page */
.bx-docs__body table { max-width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bx-sp-2);
  min-height: 38px; padding: var(--bx-sp-3) var(--bx-sp-5);
  border: 1px solid var(--bx-primary); border-radius: var(--bx-r-md);
  background: var(--bx-primary); color: #fff;
  font-size: var(--bx-fs-sm); font-weight: var(--bx-fw-semi);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--bx-primary-hover); border-color: var(--bx-primary-hover); color: #fff; text-decoration: none; }
.btn-sm { min-height: 32px; padding: var(--bx-sp-2) var(--bx-sp-3); font-size: var(--bx-fs-xs); }
.btn-secondary { background: var(--bx-bg-elevated); border-color: var(--bx-border-strong); color: var(--bx-text-strong); }
.btn-secondary:hover { background: var(--bx-bg-sunken); border-color: var(--bx-ink-300); color: var(--bx-text-strong); }
.btn-light { background: var(--bx-bg-elevated); border-color: var(--bx-border); color: var(--bx-text-strong); }
.btn-primary { background: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }

/* Code blocks inside the API reference partials. The partials do not use the
   .bx-code wrapper, so their bare <pre> is styled here — crucially with
   `overflow-x: auto` and `max-width: 100%`, otherwise a wide sample sets the
   page width and the whole document scrolls sideways. */
.code-container, .tab-pane { position: relative; min-width: 0; }
.code-container pre, .tab-pane pre {
  background: var(--bx-navy-900);
  color: #D7E5F5;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--bx-r-md);
  padding: var(--bx-sp-5);
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-fs-sm);
  line-height: 1.65;
  tab-size: 2;
}
.code-container pre code, .tab-pane pre code {
  background: none; border: 0; padding: 0; color: inherit;
  font-family: inherit; font-size: inherit; white-space: pre;
}
/* the .table/.table-responsive block scrolls inside itself, never the page */
.table-responsive { overflow-x: auto; max-width: 100%; }

/* the docs partials place a copy control over each code block */
.copy-button { position: absolute; top: var(--bx-sp-3); inset-inline-end: var(--bx-sp-3); z-index: 2; }
.code-container { position: relative; }
.code-container:not(:hover) .copy-button { opacity: .55; }
.code-container:hover .copy-button { opacity: 1; }

.text-info    { color: var(--bx-info-text); }
.text-warning { color: var(--bx-warning-text); }
.text-danger  { color: var(--bx-danger-text); }
.text-center  { text-align: center; }
.list-unstyled { list-style: none; padding-inline-start: 0; }
.pl-0 { padding-inline-start: 0 !important; }
.my-3 { margin-block: var(--bx-sp-4); }

/* Font Awesome is not loaded any more. Its decorative glyphs are hidden; the
   download buttons keep their own inline SVG, so nothing loses meaning. */
.fas, .far, .fab, .fa, .fa-fw, .svg-inline--fa.fa-fw { display: none !important; }
/*
 * NOTE ON SCOPE
 * The rules above exist ONLY for the API reference partials. Everything else
 * on the public site uses the bx- component classes directly.
 */

/* ==========================================================================
   4g. PANEL DROPDOWN MENUS
   .bx-menu already styles the surface; this positions it under its trigger.
   ========================================================================== */
.bx-menu-wrap { position: relative; }
.bx-menu--dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: var(--bx-z-topbar, 40);
  min-width: 240px;
}
.bx-menu--end { inset-inline-end: 0; inset-inline-start: auto; }
.bx-menu[hidden] { display: none !important; }

/* topbar notification list */
.bx-notif { display: grid; gap: 0; max-height: 320px; overflow-y: auto; }
.bx-notif__item {
  display: flex; gap: var(--bx-sp-3); align-items: flex-start;
  padding: var(--bx-sp-3) var(--bx-sp-4);
  border-bottom: 1px solid var(--bx-border);
  text-decoration: none; color: inherit;
}
.bx-notif__item:last-child { border-bottom: 0; }
.bx-notif__item:hover { background: var(--bx-bg-sunken); text-decoration: none; }
.bx-notif__body { min-width: 0; font-size: var(--bx-fs-sm); }

/* ==========================================================================
   5. LEGACY UTILITY BRIDGE
   A few legacy layouts sprinkle one-off Bootstrap utilities through markup
   that is generated from the database. Mapping the handful that actually
   appear keeps old CMS content from collapsing without shipping Bootstrap.
   ========================================================================== */
.text-center { text-align: center; }
.text-end, .text-right { text-align: end; }
.text-muted { color: var(--bx-text-muted); }
.mt-3 { margin-top: var(--bx-sp-4); }
.mb-3 { margin-bottom: var(--bx-sp-4); }
.mb-4 { margin-bottom: var(--bx-sp-5); }
.w-100 { width: 100%; }
.img-fluid { max-width: 100%; height: auto; }