/* ============================================================
   Reteller design system
   Token model is decoupled so light/dark both look intentional:
   - brand FILLS (saturated, on-brand text stays white)
   - brand TEXT/icons on surfaces  → --brand-text (theme-aware)
   - neutral text  → --heading / --ink / --muted
   - surfaces      → --bg / --surface / --surface-2 / --surface-3 / --line
   Legacy tokens (--brand-ink/-soft/-softer/--card) are aliased so
   every existing selector keeps working.
   ============================================================ */
:root {
  color-scheme: light;

  /* brand fills — saturated, stable across themes */
  --brand: #7c3aed;
  --brand-600: #6d28d9;   /* hover fill */
  --brand-700: #5b21b6;   /* deep gradient end */
  --brand-800: #4c1d95;
  --accent: #a855f7;
  --on-brand: #ffffff;    /* text/icons on brand fills */

  /* brand as text/icon on surfaces (theme-aware) */
  --brand-text: #6d28d9;

  /* neutral text */
  --heading: #2a1350;
  --ink: #1e1633;
  --muted: #6f6885;

  /* surfaces */
  --bg: #f4f0fd;
  --surface: #ffffff;
  --surface-2: #f8f5ff;
  --surface-3: #f1ebff;
  --line: #eae4f7;
  --line-strong: #ddd4f2;

  /* legacy aliases (keep older rules working) */
  --brand-ink: var(--heading);
  --brand-soft: var(--surface-3);
  --brand-softer: var(--surface-2);
  --card: var(--surface);

  /* semantic */
  --ok: #16a34a;   --ok-soft: #e7f7ec;
  --warn: #d97706; --warn-soft: #fdf1e0;
  --err: #dc2626;  --err-soft: #fdeaea;

  /* code blocks — always dark */
  --code-bg: #221244;
  --code-ink: #ece5fb;

  /* geometry & elevation */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow-sm: 0 4px 16px rgba(76, 29, 149, .07);
  --shadow: 0 16px 40px rgba(76, 29, 149, .10);
  --shadow-lg: 0 30px 70px rgba(76, 29, 149, .16);
  --ring: 0 0 0 4px rgba(124, 58, 237, .16);

  /* "Twemoji Country Flags" must come FIRST: Windows ships no country-flag
     glyphs at all (Segoe UI Emoji omits regional-indicator sequences), so
     🇳🇬 renders as the letters "NG". The font below contains nothing but
     those flag glyphs, so it changes no other character. */
  --font: "Twemoji Country Flags", "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  font-display: swap;
}

[data-theme="dark"] {
  color-scheme: dark;

  --brand: #8b5cf6;
  --brand-600: #9d78f5;   /* hover fill — lighter on dark */
  --brand-700: #6d28d9;   /* gradient still rich */
  --brand-800: #5b21b6;
  --accent: #c084fc;
  --on-brand: #ffffff;

  --brand-text: #c4b5fd;

  --heading: #f3eefe;
  --ink: #e7e2f4;
  --muted: #a49dbb;

  --bg: #131020;
  --surface: #1c1730;
  --surface-2: #241d3c;
  --surface-3: #2d2450;
  --line: #322a4d;
  --line-strong: #40365f;

  --ok: #34d399;   --ok-soft: #0f2e24;
  --warn: #fbbf24; --warn-soft: #33270f;
  --err: #f87171;  --err-soft: #3a1a1e;

  /* Lifted above --bg (#131020): at #100b20 a code block was fractionally
     DARKER than the page, so it read as a hole rather than a raised block. */
  --code-bg: #241c40;
  --code-ink: #ece5fb;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .34);
  --shadow: 0 16px 40px rgba(0, 0, 0, .46);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .56);
  --ring: 0 0 0 4px rgba(139, 92, 246, .30);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

a { color: var(--brand-text); text-decoration: none; transition: color .12s ease; }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; color: var(--heading); letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
p { margin: 0 0 1em; color: var(--muted); }
small { color: var(--muted); }

.container { width: min(1140px, 92vw); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; padding: 12px 22px; min-height: 46px;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
  background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); background: var(--brand-600); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.ghost { background: var(--surface); color: var(--heading); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--brand); background: var(--surface-2); color: var(--brand-text); box-shadow: var(--shadow-sm); }
/* A ghost button acting as an on/off toggle reads as "on" when tinted. */
.btn.ghost.active { border-color: var(--brand); background: var(--surface-2); color: var(--brand-text); }
.btn.dark { background: var(--code-bg); color: #fff; }
.btn.block { width: 100%; }
.btn.sm { min-height: 34px; padding: 7px 14px; font-size: 13px; }
.btn.danger { background: var(--surface); color: var(--err); border-color: var(--err-soft); box-shadow: none; }
.btn.danger:hover { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px;
}
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; }
.panel + .panel { margin-top: 20px; }

/* ---------- Forms ---------- */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea,
input.field, select.field, textarea.field {
  width: 100%; min-height: 44px; padding: 0 14px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.field textarea, textarea.field { padding: 12px 14px; min-height: 90px; resize: vertical; }
.field input::placeholder, input.field::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus,
input.field:focus, select.field:focus, textarea.field:focus {
  border-color: var(--brand); background: var(--surface); box-shadow: var(--ring);
}
/* Make dropdowns obviously selectable with a chevron. */
.field select, select.field {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  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='%236b6580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* View/Edit rows: read-only until "Edit" is clicked. */
.edit-row .v-edit { display: none; }
.edit-row.editing .v-view { display: none; }
.edit-row.editing input.v-edit, .edit-row.editing select.v-edit { display: block; }
.edit-row.editing label.v-edit { display: inline-flex; }
.edit-row.editing button.v-edit, .edit-row.editing a.v-edit { display: inline-flex; }
.row-actions { display: flex; gap: 6px; align-items: center; }
/* Keep the actions column visible while an edit table scrolls sideways. */
table.data:has(.edit-row) th:last-child { position: sticky; right: 0; background: var(--surface-2); z-index: 2; }
table.data:has(.edit-row) td:last-child { position: sticky; right: 0; background: var(--surface); box-shadow: -8px 0 12px -10px rgba(0, 0, 0, .25); }
.cell-val { font-weight: 600; color: var(--ink); }
.cell-sub { color: var(--muted); font-size: 12px; }
.field .err { color: var(--err); font-size: 12px; min-height: 14px; display: block; margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-bottom: 16px; }
.chips button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); min-height: 42px; font: inherit; font-weight: 700; color: var(--heading); cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.chips button:hover { border-color: var(--brand); color: var(--brand-text); background: var(--surface-2); }

/* ---------- Admin Table Enhancements (Drag & Drop, Search, Bulk Actions) ---------- */
.drag-handle { cursor: grab; color: var(--muted); opacity: 0.5; padding: 4px 6px; display: inline-flex; align-items: center; user-select: none; }
.drag-handle:hover { opacity: 1; color: var(--brand-text); }
.edit-row.dragging { opacity: 0.35; background: var(--surface-3) !important; }
.edit-row.drag-over { outline: 2px dashed var(--brand); outline-offset: -2px; }

.table-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; height: 38px; }
.table-search input { border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; width: 180px; }
.table-search input::placeholder { color: var(--muted); opacity: 0.7; }
/* type="search" brings a native clear button; tone it into the theme. */
.table-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .45;
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6580' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.table-search input[type="search"]::-webkit-search-cancel-button:hover { opacity: .9; }

.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); animation: fadeIn .14s ease-out; }
.bulk-bar .bulk-count { font-weight: 700; color: var(--heading); font-size: 13.5px; }
.bulk-bar .bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulk-bar input.field, .bulk-bar select.field { min-height: 34px; padding: 0 10px; font-size: 13px; height: 34px; width: auto; }
/* The `display: flex` above beats the browser's own `[hidden] { display:none }`,
   so without this the bar stays on screen with nothing selected. */
.bulk-bar[hidden] { display: none; }
/* Every control on one baseline: the select carries a bottom margin from
   `.field` and the buttons are pill-shaped, so they drifted out of line. */
.bulk-bar .btn.sm, .bulk-bar select.field, .bulk-bar input.field { height: 34px; min-height: 34px; margin: 0; align-self: center; }
.bulk-bar select.field { border-radius: 999px; background-position: right 10px center; padding-right: 30px; }


/* ---------- Auth shell ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px;
  background: radial-gradient(1200px 500px at 100% -10%, var(--surface-3), transparent), var(--bg); }
.auth-card { width: min(440px, 100%); }
.auth-card .brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 800; color: var(--heading); }

/* ---------- Marketing / landing ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--heading); font-size: 20px; }
.nav .links { display: flex; align-items: center; gap: 22px; }
.nav .links a { color: var(--heading); font-weight: 600; }
.nav .links a:hover { color: var(--brand-text); }
.nav-compact { display: none; align-items: center; gap: 14px; }
.nav-compact-link { color: var(--heading); font-weight: 700; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 6px 16px rgba(124, 58, 237, .3); }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 40px 0 60px; }
/* Reusable, not hero-only: the developer docs had hand-copied these as inline
   styles, which is why that page drifted from the landing page's look. */
.eyebrow { display: inline-block; background: var(--surface-3); color: var(--brand-text); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 999px; margin-bottom: 18px; }
.accent { color: var(--brand); }
.hero h1 { font-size: clamp(38px, 6vw, 66px); }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 26px; }
.service-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.service-tiles .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.service-tiles .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.service-tiles .tile b { color: var(--heading); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px 0 60px; }

/* ---------- App shell (dashboard/admin) ---------- */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--heading); padding: 4px 8px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.sidebar .brand-name { font-size: 18px; }
.sidebar .brand-tag { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-text); background: rgba(124, 58, 237, .12); padding: 3px 8px; border-radius: 999px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1 0 auto; padding-top: 8px; }
.sidebar .nav-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 16px 14px 4px; opacity: .75; }
.sidebar .nav-label:first-child { margin-top: 2px; }
.sidebar nav a, .sidebar nav button {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 12px; color: var(--ink);
  font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
  transition: background .14s ease, color .14s ease;
}
.sidebar nav a:hover, .sidebar nav button:hover { background: var(--surface-2); color: var(--brand-text); }
.sidebar nav a.active { background: var(--brand); color: var(--on-brand); font-weight: 600; box-shadow: 0 6px 16px rgba(124, 58, 237, .28); }
/* Solid behind the links. The old `transparent -> surface over 20px` gradient
   let nav items scrolled underneath show through the pinned footer, so on a
   short window "Back to app" appeared to sit on top of "Customers". */
.sidebar .nav-bottom { position: sticky; bottom: 0; margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); background: var(--surface); }
/* Keep the soft fade, but above the footer where nothing is clickable. */
.sidebar .nav-bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.sidebar nav a .icon, .sidebar nav button .icon { flex: none; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar .search { flex: 1; max-width: 420px; }
.topbar .search input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; background: var(--surface-2); color: var(--ink); }
.profile { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--heading); }
.avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--accent)); background-size: cover; background-position: center; flex: 0 0 auto; }
.profile-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.profile-link:hover { color: var(--brand-text); }

/* Theme toggle (topbar) */
.icon-toggle { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--heading); cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.icon-toggle:hover { border-color: var(--brand); background: var(--surface-2); color: var(--brand-text); }
.icon-toggle .ic-sun { display: none; }
.icon-toggle .ic-moon { display: inline-flex; }
[data-theme="dark"] .icon-toggle .ic-sun { display: inline-flex; }
[data-theme="dark"] .icon-toggle .ic-moon { display: none; }

/* ---------- Notification bell ---------- */
.bell-wrap { position: relative; }
.bell-btn { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--heading); cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.bell-btn:hover { border-color: var(--brand); background: var(--surface-2); color: var(--brand-text); }
.bell-dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--err); border: 2px solid var(--surface); }
.bell-panel { position: absolute; top: 52px; right: 0; width: min(340px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 20; overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.bell-clear { border: 0; background: none; color: var(--brand-text); font-weight: 700; font-size: 13px; cursor: pointer; }
.bell-list { max-height: 380px; overflow-y: auto; }
.bell-list a { display: block; color: inherit; }
.bell-item { padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .14s ease; }
.bell-list a:hover .bell-item { background: var(--surface-2); }
.bell-item.unread { background: var(--surface-3); }
.bell-t { font-weight: 700; font-size: 14px; color: var(--heading); }
.bell-b { font-size: 13px; color: var(--muted); margin-top: 2px; }
.bell-time { font-size: 11px; color: var(--muted); margin-top: 4px; }
.bell-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Profile page ---------- */
.profile-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.profile-photo { text-align: center; }
.avatar-lg { width: 96px; height: 96px; border-radius: 24px; font-size: 32px; margin: 0 auto 10px; box-shadow: var(--shadow); }
.profile-meta { flex: 1; min-width: 240px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-top: 16px; }
.profile-stats > div { display: flex; flex-direction: column; gap: 2px; }
.profile-stats span { font-size: 12px; }
.profile-stats strong { font-size: 18px; color: var(--heading); }
.content { padding: 28px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

/* ---------- Segmented toggle (Local / International) ---------- */
.seg-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 18px; }
.seg-toggle button { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--muted); padding: 8px 18px; border-radius: 9px; cursor: pointer; transition: color .14s ease, background .14s ease, box-shadow .14s ease; }
.seg-toggle button.active { background: var(--surface); color: var(--brand-text); box-shadow: var(--shadow-sm); }

/* ---------- Recipient verification ---------- */
.verify-box { margin: -4px 0 10px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid transparent; }
.verify-box.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.verify-box.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.verify-box strong { color: inherit; }
.verify-box .verify-sub { margin-top: 3px; font-size: 12px; font-weight: 500; opacity: .85; }

.provider-card { padding: 16px 18px; }

/* Hidden by default; the max-width:900px block turns it back on, i.e. exactly
   when the customer sidebar is replaced by the bottom bar. */
.mobile-only { display: none; }

/* ---------- Catalogue sync: one row per provider group ---------- */
.sync-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sync-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.sync-row .sync-meta { min-width: 0; }
.sync-row .cell-val { display: block; font-size: 14px; }
.sync-row .cell-sub { white-space: normal; font-size: 12px; }
.sync-row .btn.sm { flex: 0 0 auto; }

/* ---------- Menu list (profile account links) ---------- */
.menu-list { display: flex; flex-direction: column; }
.menu-list form { margin: 0; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 6px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; transition: color .14s ease; }
.menu-list > a:first-child, .menu-list form:first-child button { border-top: 0; }
.menu-list a:hover, .menu-list button:hover { color: var(--brand-text); }
.menu-list .mi-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand-text); }
.menu-list .mi-t { flex: 1 1 auto; }
.menu-list .mi-ch { flex: 0 0 auto; color: var(--muted); font-size: 20px; }
.menu-list .mi-danger { color: var(--err); }
.menu-list .mi-danger .mi-ic { background: var(--err-soft); color: var(--err); }

/* ---------- Developer docs ---------- */
.quickstart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.qs-step { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.qs-step .qs-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 800; display: grid; place-items: center; }
.qs-step strong { color: var(--heading); }
.qs-step p { margin: 3px 0 0; font-size: 13px; }
.doc-toc { display: flex; flex-direction: column; gap: 8px; }
.doc-toc a { color: var(--muted); font-weight: 600; }
.doc-toc a:hover { color: var(--brand-text); }
.doc h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verb { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 7px; color: #fff; }
.verb.get { background: var(--ok); }
.verb.post { background: var(--brand); }
.doc-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.doc-list li { display: flex; align-items: center; gap: 8px; }

.code-block { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 12px 0 0; background: var(--code-bg); }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.code-label { color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.code-copy { border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 8px; cursor: pointer; }
.code-copy:hover { background: rgba(255,255,255,.12); }
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; color: var(--code-ink); font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; }
.code-copy.is-copied { border-color: var(--ok); color: #fff; background: rgba(22, 163, 74, .35); }

/* Provider-log payloads: one compact, scrollable, copiable block per row.
   Capped in height so a 40-line webhook body can't stretch the table row. */
.log-payload { margin: 0; max-width: 470px; }
.log-payload .code-bar { padding: 5px 10px; }
.log-payload pre { max-height: 150px; overflow: auto; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.data.logs td { vertical-align: top; }
.data.logs td code { white-space: nowrap; }
.lang-tabs { margin-top: 12px; }
.lang-btns { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.lang-btns button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; color: var(--muted); padding: 6px 14px; border-radius: 7px; cursor: pointer; }
.lang-btns button.active { background: var(--surface); color: var(--brand-text); box-shadow: var(--shadow-sm); }
@media (max-width: 720px) { .quickstart { grid-template-columns: 1fr; } }

/* API reference — grouped TOC, parameter tables, endpoint index */
.doc-toc-panel { position: sticky; top: 20px; align-self: start; }
.doc-toc-panel > summary { list-style: none; font-weight: 800; font-size: 16px; color: var(--heading); margin-bottom: 10px; }
.doc-toc-panel > summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) { .doc-toc-panel > summary { pointer-events: none; } } /* desktop: acts as a heading, not a toggle */
.doc-toc .toc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; margin: 16px 0 2px; opacity: .7; }
.doc-toc .toc-label:first-child { margin-top: 0; }
.doc-toc a { padding: 3px 0; font-size: 14px; }
.doc .endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.doc .endpoint .path { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: 15px; color: var(--heading); }
.doc h4 .path { font-size: 14px; }
.doc-sub { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: 18px 0 8px; }
.doc-table { width: 100%; border-collapse: collapse; margin: 6px 0 6px; font-size: 13.5px; }
.doc-table th { text-align: left; padding: 8px 12px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); font-weight: 800; }
.doc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child code { color: var(--brand-text); font-weight: 700; }
.doc-table .type { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.doc-table .req { color: var(--err); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.doc-table .opt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.endpoint-index { width: 100%; border-collapse: collapse; font-size: 14px; }
.endpoint-index th { text-align: left; padding: 10px 14px; background: var(--surface-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.endpoint-index td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.endpoint-index tr:last-child td { border-bottom: 0; }
.endpoint-index tr:hover td { background: var(--surface-2); }
.endpoint-index .path { font-family: ui-monospace, monospace; font-weight: 700; color: var(--heading); font-size: 13.5px; }
.endpoint-index a.path { color: var(--brand-text); }
/* Chips, not a run-on line of text — the rest of the site states facts in
   bordered surfaces, and this read as an afterthought under the intro. */
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; padding: 0; list-style: none; }
.doc-meta li {
  display: inline-flex; align-items: baseline; gap: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow-sm);
}
.doc-meta li strong { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto; }
.doc-meta li code { font-size: 12.5px; overflow-wrap: anywhere; }

/* Docs hero: same display type as the landing page, a size down. */
.doc-hero { padding: 22px 0 8px; }
.doc-hero h1 { font-size: clamp(34px, 5vw, 56px); margin: 0 0 12px; }
.doc-hero p.lead { max-width: 64ch; font-size: 17px; color: var(--muted); margin: 0; }

/* ---------- eSIM receipt ---------- */
.esim-panel .esim-qr { display: flex; justify-content: center; margin: 6px 0 14px; }
.esim-panel .esim-qr img { border: 1px solid var(--line); border-radius: 16px; padding: 10px; background: #fff; max-width: 100%; height: auto; }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pager-count { color: var(--muted); font-size: 13px; font-weight: 600; }
.pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--heading); font-weight: 700; font-size: 14px; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.pager-btn:hover { border-color: var(--brand); background: var(--surface-2); color: var(--brand-text); }
.pager-btn.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pager-btn.disabled { opacity: .45; pointer-events: none; }
.pager-gap { color: var(--muted); padding: 0 2px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 8px; transition: color .14s ease, background .14s ease; }
.breadcrumb a:hover { color: var(--brand-text); background: var(--surface-2); }
.breadcrumb .sep { color: var(--line-strong); font-weight: 400; padding: 0 1px; user-select: none; }
.breadcrumb .current { color: var(--heading); padding: 3px 9px; }

/* ---------- Wallet card ---------- */
.wallet-card { color: #fff; border-radius: 22px; padding: 26px; position: relative; overflow: hidden;
  background: radial-gradient(600px 300px at 90% -20%, rgba(255,255,255,.22), transparent), linear-gradient(135deg, var(--brand-700), var(--brand)); box-shadow: var(--shadow); }
.wallet-card small { color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; }
.wallet-card .balance { font-size: clamp(34px, 6vw, 52px); font-weight: 800; margin: 8px 0; letter-spacing: -.02em; }
.wallet-card .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.wallet-card .actions .btn.ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.30); }
.wallet-card .actions .btn.ghost:hover { background: rgba(255,255,255,.26); }

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.stat .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat .value { font-size: 24px; font-weight: 800; color: var(--heading); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }

/* ---------- Service grid ---------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.service { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); color: var(--heading); font-weight: 700; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; position: relative; }
.service:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); }
.service .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: var(--surface-3); color: var(--brand-text); transition: background .14s ease, color .14s ease; }
.service:hover .ic { background: var(--brand); color: var(--on-brand); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
/* Key/value tables (e.g. the receipt) don't need the wide min-width. */
table.data.kv { min-width: 0; }
table.data.kv th { white-space: nowrap; width: 1%; }
table.data.kv td { word-break: break-word; }
table.data th, table.data td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
table.data th { background: var(--surface-2); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--surface-2); }
/* Compact inline-edit inputs inside admin tables (keeps rows tidy). */
table.data td { vertical-align: middle; }
table.data input.field, table.data select.field { min-height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; }
table.data select.field { padding-right: 30px; background-position: right 8px center; }
table.data .btn.ghost { padding: 8px 14px; min-height: 38px; }
table.data tfoot th { border-bottom: 0; border-top: 1px solid var(--line); }

/* ---------- AutoSync-style admin table arrangement ---------- */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 20px; }
.table-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table-card-head h3 { margin: 0; font-size: 16px; color: var(--heading); }
.table-card-head .sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.table-card-head .head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.table-card > .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.table-card > .filters { padding: 14px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.table-card > .pager { margin: 0; padding: 13px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* A table cell holding several lines. Keeps them as ONE flex item once the
   table stacks into cards, so the lines stay stacked instead of spreading
   across the row. */
.cell-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Transaction rows carry up to four verbs; let them wrap instead of forcing
   the table wider, and keep them right-aligned with the rest of the row. */
.txn-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.txn-actions .btn.sm { white-space: nowrap; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease; }
.icon-btn:hover { color: var(--brand-text); border-color: var(--brand); background: var(--surface-2); transform: translateY(-1px); }
.icon-btn.danger:hover { color: var(--err); border-color: var(--err); background: var(--err-soft); }
.icon-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.icon-btn.primary:hover { background: var(--brand-600); color: var(--on-brand); }
.icon-btn .icon { width: 17px; height: 17px; }

.id-code { display: flex; flex-direction: column; gap: 2px; }
.id-code .id { font-weight: 700; color: var(--ink); }
.id-code code { font-size: 12px; color: var(--muted); }

.count-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand-text); white-space: nowrap; }
.count-link:hover { color: var(--brand); }
.count-link .n { background: var(--surface-3); color: var(--brand-text); padding: 2px 9px; border-radius: 999px; font-size: 12px; }

.thumb { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; background: var(--brand); text-transform: uppercase; letter-spacing: -.02em; flex: 0 0 auto; }
.net-cell { display: flex; align-items: center; gap: 10px; }

/* ---------- Network picker (vending) ---------- */
/* 76px keeps the four Nigerian networks on one row inside the buy panel, and
   still wraps cleanly for services with more providers (electricity has 7). */
.net-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 10px; }
/* Exactly four (the Nigerian network set) always share one row — auto-fit drops
   T2 onto a second line as soon as the panel narrows. minmax(0,…) lets the
   columns shrink past the card's natural width instead of overflowing. */
.net-picker:has(> .net-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.net-card { min-width: 0; }
/* Wrap to two lines instead of truncating: "Port Harcourt Electric" and
   "Kaduna Electric" were both being cut to "Port Har…" / "Kaduna …". */
.net-card .net-name { max-width: 100%; line-height: 1.25; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.net-picker:empty { display: none; }
.net-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  font: inherit; font-weight: 700; font-size: 13px; color: var(--heading); cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.net-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.net-card.active { border-color: var(--brand); background: var(--surface); box-shadow: var(--ring); color: var(--brand-text); }
.net-card .net-name { line-height: 1; }
/* Provider logos (DisCos, cable, betting) are wide wordmarks. In a 34px square
   they scale to fit the WIDTH and end up ~10px tall and unreadable, so on the
   vending card the logo gets the card's full width to work with. Compact marks
   like MTN/Glo just centre in it. */
.net-card .net-logo { width: 100%; max-width: 60px; height: 36px; }
/* Operator logos are supplied on transparent backgrounds and some (MTN) are
   near-black, so they sit on a fixed white tile rather than the themed surface
   — otherwise they vanish in dark mode. */
.net-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; flex: 0 0 auto; display: block; }
img.net-logo { background: #fff; padding: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
/* For marks published only in white — a white tile would hide them entirely. */
img.net-logo.on-dark { background: #1b1533; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* Added by JS once the cards render — the select stays the state holder, and
   remains visible if the script never ran. Needs to outrank `.field select`,
   which sets width:100%, so it is qualified rather than left bare. */
.field select.net-select-hidden, .net-select-hidden {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; appearance: none; background-image: none;
}

.vis-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; color: var(--ok); }
.vis-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vis-tag.off { color: var(--muted); }
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 4px; }
.country-chip { display: flex; align-items: center; gap: 5px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; transition: border-color .14s ease, background .14s ease; }
.country-chip:hover { border-color: var(--brand); }
.country-chip:has(input:checked) { border-color: var(--brand); background: var(--surface-2); color: var(--brand-text); }
.country-chip input { accent-color: var(--brand); }
.soon-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--warn-soft); color: var(--warn); vertical-align: middle; }
.service { position: relative; }
.dial-chip { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-weight: 700; color: var(--heading); white-space: nowrap; }
.soon-hero { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 48px 24px; }
.soon-ic { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--brand-text); margin-bottom: 16px; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.successful, .badge.active, .badge.credit { background: var(--ok-soft); color: var(--ok); }
.badge.pending { background: var(--warn-soft); color: var(--warn); }
.badge.failed, .badge.reversed, .badge.suspended, .badge.debit { background: var(--err-soft); color: var(--err); }
.badge.muted { background: var(--surface-2); color: var(--muted); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 11px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  padding: 12px 18px 12px 12px; border-radius: 14px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg);
  z-index: 60; transition: opacity .2s ease, transform .2s ease; max-width: min(92vw, 420px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .toast-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.toast .toast-ic svg { width: 15px; height: 15px; }
.toast .toast-msg { line-height: 1.35; flex: 1 1 auto; }
.toast.toast-link { cursor: pointer; }
.toast .toast-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 2px; border-radius: 6px; }
.toast .toast-x:hover { color: var(--ink); background: var(--surface-2); }
.toast.success .toast-ic { background: var(--ok-soft); color: var(--ok); }
.toast.error .toast-ic { background: var(--err-soft); color: var(--err); }
.toast.info .toast-ic { background: var(--surface-3); color: var(--brand-text); }
.toast.loading .toast-ic { background: var(--surface-3); color: var(--brand-text); }
.toast-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: toast-spin .7s linear infinite; }
@keyframes toast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .toast-spin { animation-duration: 1.6s; } }

/* ---------- Misc ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.info { background: var(--surface-3); color: var(--brand-text); }
.muted { color: var(--muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.right { margin-left: auto; }
.mt { margin-top: 18px; }
.hide { display: none !important; }
code, pre { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; }
pre.code { background: var(--code-bg); color: var(--code-ink); padding: 16px 18px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 13px; line-height: 1.55; }

/* ---------- Responsive column grids (collapse on small screens) ---------- */
/* minmax(0,1fr) lets tracks shrink below their content's min-width so a wide
   child (e.g. amount chips) can't blow the grid past the viewport. */
.cols-2, .cols-3, .cols-4, .cols-5, .cols-sidebar { display: grid; gap: 16px; align-items: start; }
.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-sidebar { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .cols-3, .cols-4, .cols-5, .cols-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4, .cols-5, .cols-sidebar { grid-template-columns: minmax(0, 1fr); }
  /* API-docs TOC: on a single-column layout it must not be sticky (it would pin
     full-height over the content). It becomes a collapsible dropdown instead. */
  .doc-toc-panel { position: static; }
  .doc-toc-panel > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin: 0; }
  .doc-toc-panel > summary::after { content: "⌄"; font-size: 20px; line-height: 1; color: var(--muted); transform: translateY(-4px); transition: transform .2s ease; }
  .doc-toc-panel[open] > summary { margin-bottom: 12px; }
  .doc-toc-panel[open] > summary::after { transform: translateY(2px) rotate(180deg); }
  .doc-toc { flex-flow: row wrap; gap: 6px 14px; }
  .doc-toc .toc-label { width: 100%; margin: 8px 0 0; }

  /* Stackable tables → cards (no horizontal scroll on phones). */
  .table-wrap:has(table.data.stackable) { border: 0; background: transparent; overflow: visible; }
  /* A panel that's mostly a stackable list already shows each row as a card —
     drop the panel's own box so the cards aren't nested/cramped inside it. */
  .panel:has(.table-wrap table.data.stackable) { padding: 0; background: transparent; border: 0; box-shadow: none; }
  /* Same for a table-card wrapping a stackable list — otherwise its border +
     overflow:hidden clips the stacked cards' edges. Let cards sit free. */
  .table-card:has(table.data.stackable) { border: 0; background: transparent; box-shadow: none; overflow: visible; margin-top: 8px; }
  .table-card:has(table.data.stackable) > .table-card-head { background: transparent; border-bottom: 0; padding: 0 2px 10px; }
  .table-card:has(table.data.stackable) > .filters { padding: 0 2px 12px; border-bottom: 0; }
  .table-card:has(table.data.stackable) > .pager { background: transparent; border-top: 0; padding: 14px 2px 2px; }

  /* The head is a nowrap flex row, so a 180px search box + button pushed past
     the card edge. Let it wrap and give the search the full line. */
  .table-card-head { flex-wrap: wrap; }
  .table-card-head .head-actions { width: 100%; flex: 1 1 100%; }
  .table-search { flex: 1 1 auto; }
  .table-search input { width: 100%; min-width: 0; }
  /* Drag-to-reorder is a pointer gesture and the select-all checkbox has no
     column header once rows are cards — both are noise on a phone. */
  table.data.stackable td.col-drag { display: none; }
  table.data.stackable td.col-sel { justify-content: flex-start; border-bottom: 0; padding-bottom: 0; }
  table.data.stackable td.col-sel::before { content: "Select"; }
  /* Long codes must wrap inside the card rather than widen it. */
  table.data.stackable td { overflow-wrap: anywhere; min-width: 0; }
  table.data.stackable td code { white-space: normal; overflow-wrap: anywhere; }
  /* Row actions sit on their own line, comfortably tappable. */
  table.data.stackable td.col-action { justify-content: flex-end; }
  table.data.stackable td.col-action .row-actions { gap: 10px; }
  table.data.stackable td.col-action .icon-btn { width: 38px; height: 38px; }
  table.data.stackable { min-width: 0; }
  table.data.stackable thead { display: none; } /* stacked cards use td::before labels */
  /* The catalogue tables repeat the header in a <tfoot>. Left visible it is a
     real multi-column row, which forces the whole table back to its natural
     width (~616px) and pushes every card value off screen. */
  table.data.stackable tfoot { display: none; }
  /* The pinned action column is a horizontal-scroll affordance; in a stacked
     card it just sticks to the right edge. (Already unpinned for .customers on
     desktop — this covers every stackable table on mobile.) */
  table.data.stackable:has(.edit-row) td:last-child { position: static; box-shadow: none; background: transparent; }
  table.data.stackable tbody { display: block; }
  table.data.stackable tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 4px 2px; margin-bottom: 12px; }
  table.data.stackable tr:last-child { margin-bottom: 0; }
  table.data.stackable td { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: right; font-size: 14px; }
  table.data.stackable tr td:last-child { border-bottom: 0; }
  table.data.stackable td::before { content: attr(data-label); font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; text-align: left; flex: 0 0 auto; }
  table.data.stackable td:empty { display: none; }

  /* Stacked cards read label-left / value-right, so multi-line values align right. */
  table.data.stackable td .cell-lines { align-items: flex-end; text-align: right; }

  /* Transaction verbs: full-width, evenly split, thumb-sized on a phone. */
  table.data.stackable td.col-action .txn-actions { justify-content: flex-start; width: 100%; gap: 8px; }
  table.data.stackable td.col-action .txn-actions .btn.sm { flex: 1 1 auto; min-height: 40px; justify-content: center; }

  /* Provider logs: the payload is a block, not a value — give it the full card
     width with the label above it instead of the default label|value row. */
  table.data.stackable td.col-payload { flex-direction: column; align-items: stretch; text-align: left; gap: 8px; }
  table.data.stackable td.col-payload::before { text-align: left; }
  table.data.stackable td.col-payload .log-payload { max-width: none; }
  table.data.stackable td.col-payload .log-payload pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* Endpoint paths are long; let them wrap rather than widen the card. */
  table.data.stackable.logs td code { white-space: normal; }

  /* Customers table has richer cells (identity block, two-part activity, stacked
     verification badges). Stack each as label-above-value so nothing overflows. */
  table.data.stackable.customers td { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; overflow-wrap: anywhere; }
  table.data.stackable.customers td::before { text-align: left; }
  table.data.stackable.customers .cell-sub { white-space: normal; }
  /* Customer identity = full-width card header (avatar + name), no label. */
  table.data.stackable.customers td:has(.net-cell) { background: var(--surface-2); border-radius: 12px 12px 0 0; padding: 12px 14px; }
  table.data.stackable.customers td:has(.net-cell)::before { display: none; }
  table.data.stackable.customers .net-cell { width: 100%; }
  table.data.stackable.customers .net-cell .thumb { width: 40px; height: 40px; font-size: 14px; }
  /* Action buttons sit in a comfortable row. */
  table.data.stackable.customers td:has(.row-actions) .row-actions { flex-wrap: wrap; gap: 8px; }
}

/* Customers table (desktop): 8 columns is wide, so DON'T pin the action column
   (that pin overlaps the verification column when space is tight) and trim
   widths so the table fits its container instead of spilling. */
@media (min-width: 641px) {
  .data.stackable.customers:has(.edit-row) th:last-child,
  .data.stackable.customers:has(.edit-row) td:last-child { position: static; box-shadow: none; background: transparent; }
  .data.stackable.customers th, .data.stackable.customers td { padding-left: 12px; padding-right: 12px; }
  .data.stackable.customers .cell-sub { white-space: normal; }
  .data.stackable.customers td[data-label="Email"] { word-break: break-word; }
  .data.stackable.customers .row-actions { gap: 5px; }
  .data.stackable.customers .row-actions .icon-btn { width: 31px; height: 31px; }
}

/* ---------- Icons ---------- */
.icon { flex: none; vertical-align: middle; display: inline-block; }
.sidebar nav a .icon, .sidebar nav button .icon { color: var(--muted); }
.sidebar nav a:hover .icon, .sidebar nav button:hover .icon { color: var(--brand-text); }
.sidebar nav a.active .icon { color: var(--on-brand); }
.icon-pill { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand-text); flex: none; }
.tile-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand-text); margin-bottom: 10px; }

/* ---------- Responsive ---------- */
.menu-btn { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; width: 44px; height: 44px; font-size: 20px; cursor: pointer; color: var(--heading); }

/* Floating bottom tab bar — mobile only. */
.bottomnav { display: none; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .feature-grid, .service-tiles { grid-template-columns: 1fr 1fr; }
  .shell { grid-template-columns: 1fr; }
  /* Customer sidebar → bottom bar. Admin keeps its drawer (hamburger). */
  .sidebar:not(.sidebar-admin) { display: none; }
  /* Shown exactly where the sidebar stops: the profile page's "Account & more"
     list is the only route to Settings, API docs, push and Logout on mobile. */
  .mobile-only { display: block; }
  .menu-btn { display: none; }
  body:has(.sidebar-admin) .menu-btn { display: grid; place-items: center; }
  .sidebar-admin { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 46; transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open .sidebar-admin { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10,6,20,.5); z-index: 30; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav .links { display: none; }
  .nav-compact { display: flex; }

  .bottomnav { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border: 1px solid var(--line); border-radius: 20px;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); justify-content: space-around;
    box-shadow: var(--shadow); }
  .bottomnav a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--muted); font-size: 11px; font-weight: 600; padding: 5px 2px; border-radius: 14px; min-width: 0; }
  .bottomnav a .icon { width: 22px; height: 22px; }
  .bottomnav a.active { color: var(--brand); }
  .bottomnav a.active .icon { color: var(--brand); }
  body:has(.bottomnav) .content { padding-bottom: 92px; }
  .topbar { padding-block: 12px; }
}
@media (max-width: 640px) {
  /* Page headers: stack the title and action buttons full-width instead of
     leaving the action floating with empty space beside it. */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn, .page-head .row { width: 100%; }
  .page-head .row { justify-content: flex-start; }
  .page-head .btn.right, .page-head .right { margin-left: 0; }
}
@media (max-width: 560px) {
  .feature-grid, .service-tiles { grid-template-columns: 1fr; }
  .content, .topbar { padding-inline: 16px; }
  /* Tighter so four network cards still fit a 320px phone. */
  .net-picker { gap: 7px; }
  .net-card { padding: 10px 4px; font-size: 12px; gap: 6px; }
  .net-logo { width: 30px; height: 30px; }
  /* Declutter the top bar on very small screens: keep balance + avatar. */
  .topbar .profile b { display: none; }
}

/* ---- Searchable select (combobox) ---- */
.ss-wrap { position: relative; }
.ss-wrap .ss-input { padding-right: 38px; cursor: text; background-image: none; }
.ss-wrap::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  background: no-repeat center / 16px 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='%236b6580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.ss-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 264px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 5px;
}
.ss-item { padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item:hover, .ss-item.active { background: var(--surface-3); }
.ss-item.sel { color: var(--brand-text); font-weight: 600; }
.ss-empty { padding: 11px 12px; color: var(--muted); font-size: 14px; }

/* ---- Filter bar (transaction & wallet history) ---- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filters input, .filters select {
  min-height: 40px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.filters input[type="date"] { padding-right: 8px; cursor: pointer; }
.filters .grow { flex: 1 1 220px; min-width: 180px; }
.filters select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  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='%236b6580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.filters input:focus, .filters select:focus { border-color: var(--brand); background: var(--surface); box-shadow: var(--ring); }
.filters .btn.sm { min-height: 40px; }
@media (max-width: 560px) {
  .filters { gap: 8px; }
  .filters .grow { flex-basis: 100%; }
  .filters select, .filters input[type="date"] { flex: 1 1 46%; }
}

/* Lighter dropdown chevrons on dark surfaces. */
[data-theme="dark"] .field select, [data-theme="dark"] select.field,
[data-theme="dark"] .filters select {
  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='%23a49dbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] .ss-wrap::after {
  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='%23a49dbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- Polish: empty states, stat icons, landing ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 34px 16px; color: var(--muted); font-weight: 500; }
.empty-state .es-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand-text); }
td .empty-state { padding: 26px 16px; }

.stat.has-ic { display: flex; align-items: center; gap: 15px; }
.stat .stat-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand-text); }
.stat .stat-body { min-width: 0; }

/* Landing feature cards lift on hover, like service tiles */
.feature-grid .card { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.feature-grid .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }

/* Trust / stats band on the landing page */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 44px; }
.trust .t { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.trust .t .n { font-size: 26px; font-weight: 800; color: var(--heading); letter-spacing: -.02em; }
.trust .t .l { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr 1fr; } }

/* Richer landing footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 20px; padding: 34px 0 40px; }
.site-foot .cols { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
.site-foot .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--heading); margin-bottom: 8px; }
.site-foot .fcol h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.site-foot .fcol a { display: block; color: var(--ink); font-weight: 600; font-size: 14px; padding: 4px 0; }
.site-foot .fcol a:hover { color: var(--brand-text); }
.site-foot .legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ---- Settings: toggle switch + rows ---- */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.switch { position: relative; display: inline-flex; cursor: pointer; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 46px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .18s ease; position: relative; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }

/* Verify-email banner */
.verify-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-weight: 600; font-size: 14px; }
.verify-banner .vb-ic { flex: 0 0 auto; }
.verify-banner .vb-msg { flex: 1 1 auto; min-width: 160px; }
.verify-banner button { flex: 0 0 auto; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.verify-banner button:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* PIN modal */
.pin-modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,6,20,.5); backdrop-filter: blur(3px); }
.pin-modal.show { display: flex; }
.pin-modal .pin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; width: min(360px, 100%); text-align: center; }
.pin-modal h3 { margin: 0 0 6px; }
.pin-modal .pin-input { letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 700; margin: 14px 0; }
.pin-modal .pin-actions { display: flex; gap: 10px; }

/* Gateways · provider settings accordion */
.gw-group { border: 1px solid var(--border); border-radius: 12px; margin-top: 12px; overflow: hidden; background: var(--surface); }
.gw-group + .gw-group { margin-top: 10px; }
.gw-group > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: background .15s ease; }
.gw-group > summary::-webkit-details-marker { display: none; }
.gw-group > summary:hover { background: var(--surface-2); }
.gw-group[open] > summary { border-bottom: 1px solid var(--border); }
.gw-group .gw-title .muted { font-weight: 400; font-size: 12px; }
.gw-group .gw-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); flex: 0 0 auto; }
.gw-form { padding: 16px; }
.gw-hint { font-size: 12px; margin: 12px 0 0; }
.gw-hint a { color: var(--brand-ink); }
.gw-hint code { font-size: 11px; }