/* ─────────────────────────────────────────────────────────────
   theme.css — the panel's ONE theme layer. Loaded by partials/assets.ejs
   right after style.css, so it wins on equal specificity.

   1. tokens style.css uses but never defined   → panels that lost their colour
   2. the Plan API pages' private palette       → merged into the global tokens
   3. dark palette                              → [data-theme="dark"] (the toggle)
                                                  AND prefers-color-scheme (the OS)
   Small on purpose: no component restyling here, only tokens + the few
   hard-coded light rules that need a dark twin.
   ───────────────────────────────────────────────────────────── */

/* 1 ── tokens that were referenced but never defined ─────────── */
:root{
  --surface-2:#f8fafc;
  --brand-link:#4f46e5;          /* brand as TEXT (buttons keep --brand-600) */
  --card:var(--surface);
  --accent:var(--brand-600); --accent-soft:var(--brand-soft); --accent-line:var(--line);
  --green:var(--success);    --red:var(--danger);             --blue:var(--brand);
  --text:var(--ink);         --text-2:var(--ink-2);           --text-3:var(--muted); --fg:var(--ink); --ink-1:var(--ink);
  --bg-1:var(--surface-2);   --bg-2:var(--line-2);            --bg2:var(--surface-2); --panel-2:var(--surface-2);
  --hover:var(--brand-soft); --hover-bg:var(--brand-soft);    --on-brand:#fff;
  --code-bg:#1e1e2e; --code-ink:#e0e0e0;
}

/* .sa-card: used by the Super Admin Plan API page, defined nowhere → its sections had no card look */
.sa-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:20px}

/* 2 ── Plan API pages: their private --pd* palette, mapped to the global one.
        html:root outranks the pages' own inline :root regardless of order. */
html:root{
  --pdbg:var(--bg); --pdcard:var(--surface); --pdbd:var(--line); --pdtx:var(--ink);
  --pdac:var(--brand-600); --pdcode:var(--code-bg); --pdcodetx:var(--code-ink);
}

/* 3a ── dark, chosen with the toggle ─────────────────────────── */
:root[data-theme="dark"]{
  color-scheme: dark;
  --brand:#818cf8; --brand-link:#a5b4fc; --brand-600:#5b5bd6; --brand-700:#a5b4fc; --brand-soft:rgba(129,140,248,.16);
  --ink:#e8eaf6; --ink-2:#c7cbe6; --muted:#9aa0c8; --muted-2:#7c82ad;
  --bg:#0c0b24; --surface:#161436; --surface-2:#1d1b45; --line:#2b2860; --line-2:#221f52;
  --success:#34d399; --success-soft:rgba(52,211,153,.14);
  --warn:#fbbf24;    --warn-soft:rgba(251,191,36,.14);
  --danger:#f87171;  --danger-soft:rgba(248,113,113,.14);
  --info:#38bdf8;    --info-soft:rgba(56,189,248,.14);
  --success-ink:#6ee7b7; --warn-ink:#fcd34d; --danger-ink:#fca5a5; --info-ink:#7dd3fc;
  --sidebar:#12102e; --sidebar-2:#1a1840; --sidebar-ink:#b4b8dc; --sidebar-active:#211f52;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-lg:0 12px 40px rgba(0,0,0,.6);
  --code-bg:#0b0a1c; --code-ink:#e0e0e0;
}
  :root[data-theme="dark"] .topbar{background:rgba(22,20,54,.86)}
  :root[data-theme="dark"] .sidebar .nav a.active{background:linear-gradient(90deg,#4f46e5,#7c3aed)}
  :root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--surface-2);color:var(--ink)}
  :root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--muted-2)}
  :root[data-theme="dark"] input[readonly]{background:var(--surface);color:var(--muted)}
  :root[data-theme="dark"] .ic-purple,:root[data-theme="dark"] .card-h .h-icon.purple,:root[data-theme="dark"] .drill-link,:root[data-theme="dark"] .dashx .dx-clink,:root[data-theme="dark"] .breadcrumbs a:hover{color:var(--brand-link)}
  :root[data-theme="dark"] .qr-box img{background:#fff;padding:8px}
/* every plain <a>: :where() adds no specificity, so .btn / .sidebar links keep their own colour */
:where(:root[data-theme="dark"]) a{color:var(--brand-link)}

/* 3b ── dark, following the OS (until the user picks one) ────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --brand:#818cf8; --brand-link:#a5b4fc; --brand-600:#5b5bd6; --brand-700:#a5b4fc; --brand-soft:rgba(129,140,248,.16);
    --ink:#e8eaf6; --ink-2:#c7cbe6; --muted:#9aa0c8; --muted-2:#7c82ad;
    --bg:#0c0b24; --surface:#161436; --surface-2:#1d1b45; --line:#2b2860; --line-2:#221f52;
    --success:#34d399; --success-soft:rgba(52,211,153,.14);
    --warn:#fbbf24;    --warn-soft:rgba(251,191,36,.14);
    --danger:#f87171;  --danger-soft:rgba(248,113,113,.14);
    --info:#38bdf8;    --info-soft:rgba(56,189,248,.14);
    --success-ink:#6ee7b7; --warn-ink:#fcd34d; --danger-ink:#fca5a5; --info-ink:#7dd3fc;
    --sidebar:#12102e; --sidebar-2:#1a1840; --sidebar-ink:#b4b8dc; --sidebar-active:#211f52;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-lg:0 12px 40px rgba(0,0,0,.6);
    --code-bg:#0b0a1c; --code-ink:#e0e0e0;
  }
}

/* keyboard focus, everywhere, in the brand colour */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 3c ── dark twins of the FROZEN part of style.css (its first 701 lines are hashed by the
        tests and may not be edited, so its hard-coded light colours get their dark
        counterpart here; light mode reads exactly what it always did) ── */
:root[data-theme="dark"] code{background:var(--bg)}
:root[data-theme="dark"] .topbar .icobtn{background:var(--surface)}
:root[data-theme="dark"] .pill{background:var(--line-2)}
:root[data-theme="dark"] .btn.soft{background:var(--bg)}
:root[data-theme="dark"] .btn.soft:hover{background:var(--line)}
:root[data-theme="dark"] .iconbtn{background:var(--surface)}
:root[data-theme="dark"] .acts-box .iconbtn{background:var(--surface)}
:root[data-theme="dark"] .bulk-track{background:var(--surface)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--surface)}
:root[data-theme="dark"] input[readonly]{background:var(--surface-2)}
:root[data-theme="dark"] .login-card{background:var(--surface)}
:root[data-theme="dark"] .toast{background:var(--surface)}
:root[data-theme="dark"] .modal{background:var(--surface)}
:root[data-theme="dark"] .modal-h{border-bottom:1px solid var(--line-2);background:var(--surface)}
:root[data-theme="dark"] .modal-h h2{color:var(--ink)}
:root[data-theme="dark"] .modal-h .x{color:var(--muted)}
:root[data-theme="dark"] .modal-h .x:hover{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .modal-b{background:var(--surface)}
:root[data-theme="dark"] .modal-b label{color:var(--ink-2)}
:root[data-theme="dark"] .modal-b .gw-opt .gw-upi{background:var(--surface)}
:root[data-theme="dark"] .vb-amt{background:var(--brand-soft);color:var(--brand-700)}
:root[data-theme="dark"] .vb-bal{background:var(--bg)}
:root[data-theme="dark"] .vb-zero{background:var(--line-2)}
:root[data-theme="dark"] .rpt-filter input,:root[data-theme="dark"] .rpt-filter select{background:var(--surface)}
:root[data-theme="dark"] .topbar .dropdown-menu{background:var(--surface)}


/* ═════════════════════════════════════════════════════════════════════════════════════════
   4 ── MODERN FINTECH LAYER (2026-09-20)
   Deep indigo / violet palette, vibrant gradients, glass topbar + modals, neon status chips,
   tap-ripple buttons. PURE CSS: no library, no web-font, no image.

   Speed rules:
     · motion touches only transform / opacity, and lasts 120-220 ms
     · backdrop-filter is used on the topbar, dropdowns and modals only — never on list rows
     · the page glow is ONE static fixed layer, not an animated one
     · prefers-reduced-motion switches every transition and animation off (last block)
   Component names are untouched: this file only re-colours and re-shapes what style.css defines,
   so every page keeps working exactly as it did. Light and dark both defined below.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* 4a ── tokens: LIGHT ────────────────────────────────────────── */
:root{
  --brand:#6d5cf6; --brand-600:#5b4be8; --brand-700:#4636c8; --brand-soft:#edeaff; --brand-link:#5b4be8;
  --violet:#8b5cf6; --pink:#d946ef; --sky:#38bdf8;
  --ink:#14123a; --ink-2:#38366e; --muted:#6a689a; --muted-2:#9a98c6;
  --bg:#f4f2ff; --surface:#ffffff; --surface-2:#f8f7ff; --line:#e6e3fb; --line-2:#eeecfd;
  --success:#10b981; --success-soft:#d9faee; --success-ink:#047857;
  --warn:#f59e0b;    --warn-soft:#fff1d1;    --warn-ink:#a15c07;
  --danger:#f0416c;  --danger-soft:#ffe4ec;  --danger-ink:#be123c;
  --info:#3b82f6;    --info-soft:#e3eeff;    --info-ink:#1d4ed8;
  --radius:18px; --radius-sm:13px; --radius-xs:10px;
  --shadow:0 1px 2px rgba(58,44,170,.05),0 14px 30px -16px rgba(79,70,229,.30);
  --shadow-sm:0 1px 2px rgba(58,44,170,.06),0 8px 18px -12px rgba(79,70,229,.24);
  --shadow-lg:0 24px 48px -18px rgba(79,70,229,.45);
  --grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#c026d3 100%);
  --grad-soft:linear-gradient(135deg,rgba(79,70,229,.10),rgba(192,38,211,.08));
  --glass:rgba(255,255,255,.72);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ring:0 0 0 4px rgba(109,92,246,.24);
  /* --sidebar-2 / --sidebar-active are used by the WHOLE panel as plain light surfaces (sticky table headers,
     hover rows, the Lapu-list toolbar, dashboard cards). They were translucent white here - meant for the dark
     sidebar - which left every one of those near-transparent in light mode: table headers let the rows scroll
     underneath them. Solid here; the translucent pair lives in the .sidebar scope below. */
  --sidebar:#16133f; --sidebar-2:#f4f2ff; --sidebar-ink:#c9c6f7; --sidebar-active:#ebe7ff;
}

/* 4a ── tokens: DARK (the toggle, and the OS while nothing is chosen) ── */
:root[data-theme="dark"]{
  --brand:#8b7cf8; --brand-link:#b4a9ff; --brand-600:#6d5cf6; --brand-700:#c4baff; --brand-soft:rgba(139,124,248,.17);
  --ink:#eeecff; --ink-2:#cfcdf5; --muted:#a4a2d6; --muted-2:#7f7db8;
  --bg:#0a0921; --surface:#15123a; --surface-2:#1c1950; --line:#2a2668; --line-2:#211e56;
  --success:#34ffb5; --success-soft:rgba(52,255,181,.13); --success-ink:#5dffc4;
  --warn:#ffd24a;    --warn-soft:rgba(255,210,74,.14);    --warn-ink:#ffdc73;
  --danger:#ff6b8b;  --danger-soft:rgba(255,107,139,.15); --danger-ink:#ff9bb1;
  --info:#5eb0ff;    --info-soft:rgba(94,176,255,.15);    --info-ink:#9ccaff;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 16px 34px -16px rgba(0,0,0,.75);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 18px -12px rgba(0,0,0,.6);
  --shadow-lg:0 26px 52px -18px rgba(0,0,0,.85);
  --glass:rgba(21,18,58,.72);
  --ring:0 0 0 4px rgba(139,124,248,.32);
  --sidebar:#100e30;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#8b7cf8; --brand-link:#b4a9ff; --brand-600:#6d5cf6; --brand-700:#c4baff; --brand-soft:rgba(139,124,248,.17);
    --ink:#eeecff; --ink-2:#cfcdf5; --muted:#a4a2d6; --muted-2:#7f7db8;
    --bg:#0a0921; --surface:#15123a; --surface-2:#1c1950; --line:#2a2668; --line-2:#211e56;
    --success:#34ffb5; --success-soft:rgba(52,255,181,.13); --success-ink:#5dffc4;
    --warn:#ffd24a;    --warn-soft:rgba(255,210,74,.14);    --warn-ink:#ffdc73;
    --danger:#ff6b8b;  --danger-soft:rgba(255,107,139,.15); --danger-ink:#ff9bb1;
    --info:#5eb0ff;    --info-soft:rgba(94,176,255,.15);    --info-ink:#9ccaff;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 16px 34px -16px rgba(0,0,0,.75);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 18px -12px rgba(0,0,0,.6);
    --shadow-lg:0 26px 52px -18px rgba(0,0,0,.85);
    --glass:rgba(21,18,58,.72); --ring:0 0 0 4px rgba(139,124,248,.32); --sidebar:#100e30;
  }
}

/* 4b ── canvas: one static, fixed glow behind everything ─────── */
body{background:var(--bg);letter-spacing:-.005em;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 520px at 8% -12%,rgba(124,58,237,.15),transparent 62%),
             radial-gradient(760px 480px at 102% -6%,rgba(79,70,229,.12),transparent 58%),
             radial-gradient(700px 420px at 60% 112%,rgba(192,38,211,.07),transparent 60%)}
:root[data-theme="dark"] body::before{
  background:radial-gradient(900px 540px at 8% -12%,rgba(124,58,237,.30),transparent 62%),
             radial-gradient(760px 500px at 102% -6%,rgba(79,70,229,.24),transparent 58%),
             radial-gradient(700px 440px at 60% 112%,rgba(192,38,211,.13),transparent 60%)}
::selection{background:rgba(124,58,237,.28);color:inherit}
.num,.val,.tnum,td,th{font-variant-numeric:tabular-nums}

/* 4c ── sidebar: deep indigo in BOTH modes. Its own variable scope makes every
        rule inside it (logo, links, sub-menus, user card) read light-on-dark. ── */
.sidebar{
  --ink:#f4f2ff; --ink-2:#dcd9ff; --muted:#b0addf; --muted-2:#8985c6;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.07);
  --brand-soft:rgba(255,255,255,.12); --brand-700:#e6e2ff; --brand:#a99bff;
  --sidebar-ink:#c9c6f7; --sidebar-active:rgba(255,255,255,.09); --sidebar-2:rgba(255,255,255,.06);
  background:linear-gradient(185deg,#1d1958 0%,#15123d 52%,#0f0d2e 100%);
  border-right:1px solid rgba(255,255,255,.06);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.sidebar .nav a,.sidebar .nav .has-sub>.sub-toggle{transition:background .14s var(--ease),color .14s var(--ease),transform .14s var(--ease)}
.sidebar .nav a:hover,.sidebar .nav .has-sub>.sub-toggle:hover{transform:translateX(2px)}
.sidebar .nav a.active{background:var(--grad);box-shadow:0 10px 22px -8px rgba(124,58,237,.75),inset 0 1px 0 rgba(255,255,255,.25);transform:none}
.sidebar .nav a .ic{opacity:.9}
.sidebar .logo{border-bottom-color:rgba(255,255,255,.08)}
.sidebar .who{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}

/* 4d ── topbar + dropdowns + modals: the only glass surfaces ──── */
.topbar{background:var(--glass);-webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--line)}
.topbar .chip{background:var(--grad-soft);border:1px solid var(--line);color:var(--brand-700);font-variant-numeric:tabular-nums}
.topbar .icobtn{border-radius:12px;transition:transform .14s var(--ease),box-shadow .14s var(--ease),border-color .14s var(--ease)}
.topbar .icobtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--brand)}
.topbar .status{background:var(--success-soft);color:var(--success-ink)}
.topbar .status .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 26%,transparent),0 0 10px var(--success)}
.topbar .dropdown-menu,.modal{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--line);box-shadow:var(--shadow-lg);border-radius:var(--radius)}
.modal-h,.modal-b{background:transparent}

/* 4e ── cards: soft lift, hairline highlight ─────────────────── */
.card,.statc,.sa-card{border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent);transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .statc,:root[data-theme="dark"] .sa-card{box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.05)}
.card .card-h{background:linear-gradient(180deg,var(--surface-2),transparent);border-bottom-color:var(--line-2)}
.card .card-h h2{letter-spacing:-.012em}
.page-head h1{letter-spacing:-.028em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .page-head h1{background:linear-gradient(135deg,#fff,#c4baff 70%);-webkit-background-clip:text;background-clip:text}

/* KPI tiles — vibrant gradients */
.statc.gradient-purple{background:linear-gradient(135deg,#5b4be8 0%,#8b5cf6 58%,#c026d3 100%)}
.statc.gradient-dark{background:linear-gradient(135deg,#27216e 0%,#15123d 100%);box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(167,139,250,.18)}
.statc.gradient-green{background:linear-gradient(135deg,#059669 0%,#10d9a0 100%)}
.statc.gradient-yellow{background:linear-gradient(135deg,#f59e0b 0%,#ffc94a 100%)}
.statc.gradient-red{background:linear-gradient(135deg,#e11d48 0%,#fb7185 100%)}
.statc.gradient-blue{background:linear-gradient(135deg,#2563eb 0%,#38bdf8 100%)}
.dashx .dx-kpi:hover,.statc.clickable:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dashx .dx-qbtn,.dashx .dx-op,.dashx .dx-shc{transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}
.dashx .dx-qbtn:hover,.dashx .dx-op:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent)}
.dashx .dx-qi{background:var(--grad-soft);color:var(--brand-700)}
.dashx .dx-op-bal{color:var(--success-ink)}
:root[data-theme="dark"] .dashx .dx-op-bal{color:var(--success)}

/* 4f ── buttons: gradient, lift, and a tap ripple (CSS only) ─── */
.btn{background:var(--grad);border-radius:12px;font-weight:650;letter-spacing:-.005em;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
  box-shadow:0 8px 18px -8px rgba(109,92,246,.7),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),filter .14s var(--ease)}
.btn:hover{background:var(--grad);filter:saturate(1.12) brightness(1.04);transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(109,92,246,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.btn:active{transform:translateY(0) scale(.975);filter:brightness(.97)}
.btn::after,.dx-qbtn::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:scale(.3);
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.5) 0,rgba(255,255,255,0) 58%)}
.btn:active::after,.dx-qbtn:active::after{opacity:1;transform:scale(2.4);transition:transform .38s var(--ease),opacity .5s}
.dx-qbtn{position:relative;overflow:hidden}
.btn.green{background:linear-gradient(135deg,#059669,#10d9a0);box-shadow:0 8px 18px -8px rgba(16,185,129,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.green:hover{background:linear-gradient(135deg,#059669,#10d9a0)}
.btn.danger{background:linear-gradient(135deg,#e11d48,#fb7185);box-shadow:0 8px 18px -8px rgba(240,65,108,.65)}
.btn.dark{background:linear-gradient(135deg,#27216e,#15123d);box-shadow:0 8px 18px -10px rgba(21,18,61,.8)}
.btn.ghost,.btn.soft,.btn.sm{box-shadow:none}
.btn.ghost{background:var(--brand-soft);color:var(--brand-700)} .btn.ghost:hover{background:var(--brand-soft);filter:brightness(.97)}
.btn.soft{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)} .btn.soft:hover{background:var(--brand-soft);filter:none;color:var(--brand-700)}
:root[data-theme="dark"] .btn.soft{background:var(--surface-2)}
.btn[disabled],.btn:disabled{filter:grayscale(.4);opacity:.55;transform:none;cursor:not-allowed}

/* 4g ── fields ───────────────────────────────────────────────── */
input,select,textarea{border-radius:12px;border-color:var(--line);background:var(--surface);transition:border-color .14s var(--ease),box-shadow .14s var(--ease),background .14s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-600)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--surface-2)}

/* 4h ── tables: calm header, row hover, neon status chips ────── */
thead th{background:var(--surface-2);letter-spacing:.06em}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.badge{letter-spacing:.01em;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.badge::before{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.badge.success,.badge.enabled{background:var(--success-soft);color:var(--success-ink)}
.badge.pending,.badge.pending-timeout,.badge.off{background:var(--warn-soft);color:var(--warn-ink)}
.badge.failure,.badge.fail,.badge.failed,.badge.disabled{background:var(--danger-soft);color:var(--danger-ink)}
.badge.refund,.badge.refunded{background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--brand-700)}
.badge.info{background:var(--info-soft);color:var(--info-ink)}
:root[data-theme="dark"] .badge.success::before,:root[data-theme="dark"] .badge.enabled::before{box-shadow:0 0 9px currentColor}
:root[data-theme="dark"] .badge.pending::before,:root[data-theme="dark"] .badge.pending-timeout::before{box-shadow:0 0 9px currentColor}
.pill{background:var(--brand-soft);color:var(--brand-700)}

/* 4i ── links, alerts, toasts, login ─────────────────────────── */
.alert{border-radius:13px}
.toast{border-radius:14px;box-shadow:var(--shadow-lg)}
.login-wrap{background:radial-gradient(900px 560px at 15% 0%,rgba(124,58,237,.35),transparent 60%),radial-gradient(800px 520px at 100% 100%,rgba(79,70,229,.30),transparent 60%),#0b0a25}
.login-card{border-radius:24px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);border:1px solid rgba(167,139,250,.25);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.login-card .mark{background:var(--grad);box-shadow:0 14px 30px -10px rgba(124,58,237,.8)}

/* 4j ── first paint: a quick fade-rise (not held, so nothing keeps a transform) ── */
/* opacity only: a transform, even a passing one, makes <main> the containing block for every
   position:fixed modal inside it, shifting them (and widening the page) while it runs. */
@keyframes rc-rise{from{opacity:0}to{opacity:1}}
.content>main,.content>.page,.content>.container,.content>.dashx{animation:rc-rise .2s var(--ease) backwards}

/* 4k ── phones: bigger tap targets, lighter shadows ──────────── */
@media (max-width:820px){
  .btn{min-height:42px} .btn.sm{min-height:34px}
  input,select,textarea{min-height:44px;font-size:16px}
  .card,.statc{border-radius:16px}
  .page-head h1{font-size:20px}
}

/* 4l ── motion preferences ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 4m ── dark: the top-bar status pill sets its tone INLINE (three fixed dark inks chosen for a
   white bar), which reads dim on navy. Same three tones, the dark theme's own readable inks. ── */
:root[data-theme="dark"] .status-pill[style*="#15803d"]{color:var(--success-ink)!important}
:root[data-theme="dark"] .status-pill[style*="#a16207"]{color:var(--warn-ink)!important}
:root[data-theme="dark"] .status-pill[style*="#b91c1c"]{color:var(--danger-ink)!important}

/* 4n ── code-block palette. The Plan API pages show endpoints/JSON in a dark code panel; its syntax
   colours used to be typed as hex in the views. They are the same in light and dark (the panel is
   dark in both), so they live here once and the views ask for them by name. ── */
:root{
  --sx-key:#8be9fd; --sx-str:#f1fa8c; --sx-com:#6272a4; --sx-fn:#50fa7b; --sx-kw:#ff79c6; --sx-num:#bd93f9;
}


/* 4o ── Lapu-list action toolbar. Was nine white 40px boxes, each with its own border and shadow, in a
   loose row. Now ONE soft pill: compact tinted chips, grouped by what they do, and the Recharge bolt as
   the single filled, gradient primary. Every button keeps its own colour (--c, set in style.css), its
   handler, its tooltip and its mobile "More" behaviour — this is only how they are drawn. ── */
.acts-cell .act-tb{gap:3px;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2)}
.acts-cell .act-btn{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;border:0;box-shadow:none;
  background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--c);
  transition:transform .16s var(--ease),background .16s,box-shadow .16s,color .16s}
.acts-cell .act-btn svg{width:18px;height:18px}
.acts-cell .act-btn:hover{
  background:color-mix(in srgb,var(--c) 22%,var(--surface));color:var(--c);transform:translateY(-1px);
  box-shadow:0 6px 14px -6px color-mix(in srgb,var(--c) 70%,transparent)}
.acts-cell .act-btn:active{transform:translateY(0)}
.acts-cell .act-btn:focus-visible{box-shadow:var(--ring)}
/* groups: refresh·login | wallet·wallet-report·transactions | edit·delete | recharge */
.acts-cell .c-wallet,.acts-cell .c-edit,.acts-cell .c-recharge{margin-left:8px}
.acts-cell form.am-hide{display:inline-flex;margin:0}
.acts-cell .c-delete:hover{background:color-mix(in srgb,var(--danger) 88%,#000);color:#fff}
/* the primary action */
.acts-cell .c-recharge{
  --c:#7c3aed;background:var(--grad);color:#fff;
  box-shadow:0 6px 14px -6px rgba(124,58,237,.7)}
.acts-cell .c-recharge:hover{background:var(--grad);color:#fff;filter:brightness(1.08);
  box-shadow:0 10px 20px -8px rgba(124,58,237,.85)}
.acts-cell .c-recharge svg{width:17px;height:17px}
/* tooltips sit outside the pill's rounded box, so nothing here may clip them */
.acts-cell,.acts-cell .act-tb{overflow:visible}


/* 4p ── two small things.
   (a) The bell's unread count. The server prints the number INTO the 7px red dot (notif_dropdown.ejs), and the
   dot's own rule has no room for text — so "4694" spilled out to the right and sat on top of the user button.
   A dot that has text becomes a small count pill hung off the bell's corner; an empty dot stays a dot.
   (b) "Total refund" on the Lapu list was typed as #1d4ed8, a dark blue that nearly disappears on the dark
   background. --info-ink is the same #1d4ed8 in light mode and a readable sky blue in dark. ── */
.topbar .dropdown-trigger{position:relative}
.topbar .dropdown-trigger .badge-dot:not(:empty){
  width:auto;height:17px;min-width:17px;padding:0 5px;box-sizing:border-box;top:-4px;right:-10px;
  border:2px solid var(--surface);border-radius:9px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;line-height:13px;text-align:center;letter-spacing:0;font-variant-numeric:tabular-nums}
.acctx .lapu-stat.refund .v,.lapu-stats .lapu-stat.refund .v{color:var(--info-ink)}