/* ─────────────────────────────────────────────────────────────
   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) ── */
@keyframes rc-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.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}
}


/* 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)}