/* ==========================================================================
   MyPay Portal v2 — design system
   --------------------------------------------------------------------------
   One stylesheet, two themes. Light is the default; dark is a token swap, not
   a second set of rules, so nothing can drift between them.

   Palette: jade carries the brand, indigo is the analytical second voice,
   amber is promo only, rose is destructive only. Accents never fill a large
   area — the calm comes from surface, border and type doing the work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* Brand — jade */
    --jade-50:  #ecfaf4;
    --jade-100: #d2f2e5;
    --jade-200: #a8e5cd;
    --jade-300: #6ed4ae;
    --jade-400: #33bd8d;
    --jade-500: #12a274;
    --jade-600: #0b855e;
    --jade-700: #0a6a4c;
    --jade-800: #0a533d;
    --jade-900: #073c2d;

    /* Second voice — indigo */
    --indigo-50:  #eef0fe;
    --indigo-100: #dfe2fd;
    --indigo-300: #a5adf6;
    --indigo-500: #5b5bd6;
    --indigo-600: #4a46c0;
    --indigo-700: #3c39a0;

    /* Promo — amber. Attention, never status. */
    --amber-50:  #fdf5e7;
    --amber-100: #fbe9c6;
    --amber-500: #d98d1e;
    --amber-600: #b8730f;

    /* Destructive — rose */
    --rose-50:  #fdedee;
    --rose-100: #fbd8da;
    --rose-500: #e5484d;
    --rose-600: #c8353a;

    /* Information — sky */
    --sky-50:  #eaf4fe;
    --sky-100: #d3e8fd;
    --sky-500: #2e7fd4;
    --sky-600: #1f66b2;

    /* Neutral ramp */
    --slate-25:  #fafbfd;
    --slate-50:  #f5f7fa;
    --slate-100: #eef1f6;
    --slate-200: #e3e8ef;
    --slate-300: #cdd5e0;
    --slate-400: #9aa5b8;
    --slate-500: #697586;
    --slate-600: #4b5565;
    --slate-700: #364152;
    --slate-800: #202939;
    --slate-900: #121926;
    --slate-950: #0b1220;

    /* --- Semantic surfaces (light) --- */
    --canvas: #f4f6fa;
    --canvas-tint: #eef1f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f5f7fa;
    --surface-inverse: #0b1220;

    --border: #e3e8ef;
    --border-strong: #cdd5e0;
    --border-inverse: rgba(255, 255, 255, .12);

    --text-heading: #0b1220;
    --text-body: #364152;
    --text-muted: #697586;
    --text-subtle: #9aa5b8;
    --text-on-brand: #ffffff;
    --text-inverse: #f5f7fa;

    --brand: var(--jade-600);
    --brand-hover: var(--jade-700);
    --brand-press: var(--jade-800);
    --brand-soft: var(--jade-50);
    --brand-soft-border: var(--jade-200);
    --brand-text: var(--jade-700);

    --accent: var(--indigo-600);
    --accent-soft: var(--indigo-50);
    --accent-text: var(--indigo-700);

    --success: var(--jade-600);
    --success-soft: var(--jade-50);
    --success-text: var(--jade-700);

    --warning: var(--amber-600);
    --warning-soft: var(--amber-50);
    --warning-text: var(--amber-600);

    --danger: var(--rose-500);
    --danger-soft: var(--rose-50);
    --danger-text: var(--rose-600);

    --info: var(--sky-600);
    --info-soft: var(--sky-50);
    --info-text: var(--sky-600);

    /* --- Gradients. Three, and only three. --- */
    --gradient-brand: linear-gradient(135deg, #12a274 0%, #0a6a4c 100%);
    --gradient-deep: linear-gradient(165deg, #0d2c26 0%, #071a2b 55%, #050d18 100%);
    --gradient-veil: linear-gradient(180deg, rgba(5, 13, 24, 0) 0%, rgba(5, 13, 24, .82) 100%);

    /* --- Elevation. Cool, brand-tinted, never black. --- */
    --shadow-xs: 0 1px 2px rgba(11, 18, 32, .05);
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, .04), 0 4px 12px -6px rgba(11, 18, 32, .10);
    --shadow-md: 0 4px 8px -2px rgba(11, 18, 32, .06), 0 12px 28px -12px rgba(11, 18, 32, .16);
    --shadow-lg: 0 12px 24px -8px rgba(11, 18, 32, .12), 0 32px 64px -24px rgba(11, 18, 32, .24);
    --shadow-brand: 0 8px 20px -8px rgba(11, 133, 94, .48);
    --shadow-inset: inset 0 1px 2px rgba(11, 18, 32, .06);

    /* --- Type --- */
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --ls-tight: -.022em;
    --ls-heading: -.014em;
    --ls-caps: .08em;

    /* --- Space (4px base) --- */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

    /* --- Radii --- */
    --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px;
    --r-pill: 999px;

    /* --- Motion --- */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 320ms;

    /* --- Layout --- */
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 68px;
    --content-max: 1600px;
    --gutter: 28px;

    --focus-ring: 0 0 0 3px rgba(18, 162, 116, .30);
}

/* Dark: same token names, different values. Every component follows for free. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #070b12;
    --canvas-tint: #0a111c;
    --surface: #0e1622;
    --surface-raised: #131d2c;
    --surface-sunken: #0a111c;
    --surface-inverse: #f5f7fa;

    --border: #1c2839;
    --border-strong: #2a394f;
    --border-inverse: rgba(255, 255, 255, .10);

    --text-heading: #eef2f8;
    --text-body: #c2cddc;
    --text-muted: #8b99ae;
    --text-subtle: #64748b;
    --text-on-brand: #04150f;
    --text-inverse: #0b1220;

    /* Jade steps up on a dark ground so contrast stays above 4.5:1. */
    --brand: #2fc496;
    --brand-hover: #4bd3a9;
    --brand-press: #6ee0bc;
    --brand-soft: rgba(47, 196, 150, .12);
    --brand-soft-border: rgba(47, 196, 150, .28);
    --brand-text: #58d7ae;

    --accent: #8b8bf0;
    --accent-soft: rgba(139, 139, 240, .14);
    --accent-text: #a5adf6;

    --success: #2fc496;
    --success-soft: rgba(47, 196, 150, .12);
    --success-text: #58d7ae;

    --warning: #e8ad4a;
    --warning-soft: rgba(232, 173, 74, .13);
    --warning-text: #f0bf6d;

    --danger: #f26f73;
    --danger-soft: rgba(242, 111, 115, .13);
    --danger-text: #f79093;

    --info: #5aa5e8;
    --info-soft: rgba(90, 165, 232, .13);
    --info-text: #7fbcf0;

    --gradient-brand: linear-gradient(135deg, #12a274 0%, #085340 100%);
    --gradient-deep: linear-gradient(165deg, #0c2620 0%, #071624 55%, #050b14 100%);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .38);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32), 0 4px 12px -6px rgba(0, 0, 0, .48);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .36), 0 12px 28px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, .48), 0 32px 64px -24px rgba(0, 0, 0, .7);
    --shadow-brand: 0 8px 20px -8px rgba(18, 162, 116, .55);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .4);

    --focus-ring: 0 0 0 3px rgba(47, 196, 150, .32);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--text-body);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    line-height: 1.22;
}

h1 { font-size: 34px; font-weight: 800; letter-spacing: var(--ls-tight); }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand-text);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--brand-hover); }

img, svg, video { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-sm);
}

::selection { background: var(--brand-soft); color: var(--brand-text); }

/* Scrollbars, matched to the theme so dark mode has no white gutter. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-subtle); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Type utilities
   -------------------------------------------------------------------------- */

.display   { font-size: 52px; font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.06; color: var(--text-heading); }
.display-sm{ font-size: 40px; font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1.1;  color: var(--text-heading); }
.lead      { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.caption   { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Every money figure on the platform goes through this: tabular, mono, so a
   column of amounts aligns on the decimal without any table hackery. */
.money {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
    font-weight: 600;
    color: var(--text-heading);
}
.money-lg { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.money-xl { font-size: 40px; font-weight: 700; letter-spacing: -.035em; }
.money-in  { color: var(--success-text); }
.money-out { color: var(--text-heading); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.t-muted   { color: var(--text-muted); }
.t-subtle  { color: var(--text-subtle); }
.t-heading { color: var(--text-heading); }
.t-brand   { color: var(--brand-text); }
.t-success { color: var(--success-text); }
.t-danger  { color: var(--danger-text); }
.t-warning { color: var(--warning-text); }
.t-center  { text-align: center; }
.t-right   { text-align: right; }
.t-nowrap  { white-space: nowrap; }

.t-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 860px; }
.container-reading { max-width: 760px; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); } .gap-10{ gap: var(--sp-10);} .gap-12{ gap: var(--sp-12);}

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-10{ margin-top: var(--sp-10); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }

.hide { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5. Logo
   -------------------------------------------------------------------------- */

.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--text-heading); }
.logo:hover { color: var(--text-heading); }

.logo-mark {
    width: 38px; height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--gradient-brand);
    display: grid; place-items: center;
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
}
.logo-mark::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 52%);
    pointer-events: none;
}
.logo-mark svg { width: 22px; height: 22px; position: relative; z-index: 1; }
.logo-mark-sm { width: 30px; height: 30px; border-radius: 9px; }
.logo-mark-sm svg { width: 18px; height: 18px; }
.logo-mark-lg { width: 52px; height: 52px; border-radius: 15px; }
.logo-mark-lg svg { width: 30px; height: 30px; }

.logo-word { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name {
    font-size: 16.5px; font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text-heading);
}
.logo-sub {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --btn-h: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    height: var(--btn-h);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    font-size: 14px; font-weight: 600; letter-spacing: -.005em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn:active { transform: translateY(1px); }

.btn-sm { --btn-h: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { --btn-h: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: var(--btn-h); padding: 0; }

.btn-primary {
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--brand-hover); color: var(--text-on-brand); }
.btn-primary:active { background: var(--brand-press); }

.btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-heading);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--surface-sunken); color: var(--text-heading); border-color: var(--text-subtle); }

.btn-ghost { color: var(--text-body); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text-heading); }

.btn-soft {
    background: var(--brand-soft);
    color: var(--brand-text);
    border-color: var(--brand-soft-border);
}
.btn-soft:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(.92); color: #fff; }

.btn-inverse { background: var(--text-heading); color: var(--surface); }
.btn-inverse:hover { background: var(--text-heading); color: var(--surface); filter: brightness(1.25); }

.btn-on-dark {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    backdrop-filter: blur(6px);
}
.btn-on-dark:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* --------------------------------------------------------------------------
   7. Icons
   -------------------------------------------------------------------------- */

.ic { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 26px; height: 26px; }

.ic-tile {
    width: 40px; height: 40px;
    flex: none;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--brand-soft);
    color: var(--brand-text);
    border: 1px solid var(--brand-soft-border);
}
.ic-tile-lg { width: 48px; height: 48px; border-radius: var(--r-lg); }
.ic-tile.tone-accent  { background: var(--accent-soft);  color: var(--accent-text);  border-color: transparent; }
.ic-tile.tone-warning { background: var(--warning-soft);  color: var(--warning-text); border-color: transparent; }
.ic-tile.tone-danger  { background: var(--danger-soft);   color: var(--danger-text);  border-color: transparent; }
.ic-tile.tone-info    { background: var(--info-soft);     color: var(--info-text);    border-color: transparent; }
.ic-tile.tone-neutral { background: var(--surface-sunken);color: var(--text-muted);   border-color: var(--border); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.card-body { padding: var(--sp-5); }
.card-body-lg { padding: var(--sp-6); }
.card-tight { padding: var(--sp-4); }

.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.card-head h3, .card-head h4 { margin: 0; }
.card-head-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.card-foot {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    font-size: 13px;
    color: var(--text-muted);
}

.card-sunken {
    background: var(--surface-sunken);
    border-color: transparent;
    box-shadow: none;
}

.card-hover { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* Exactly one of these per screen. It is the screen's answer to "what now?". */
.card-brand {
    background: var(--gradient-brand);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-brand);
    overflow: hidden;
}
.card-brand h1, .card-brand h2, .card-brand h3, .card-brand h4, .card-brand .money { color: #fff; }
.card-brand .t-muted, .card-brand .caption, .card-brand .overline { color: rgba(255, 255, 255, .72); }
.card-brand::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
    pointer-events: none;
}

.card-dark {
    background: var(--gradient-deep);
    border: 1px solid rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
}
.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4, .card-dark .money { color: #fff; }

/* --------------------------------------------------------------------------
   9. Stat tiles
   -------------------------------------------------------------------------- */

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-subtle); }
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--text-heading); line-height: 1.1; }
.stat-value-sm { font-size: 21px; }
.stat-foot { display: flex; align-items: center; gap: var(--sp-2); font-size: 12.5px; color: var(--text-muted); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.delta-up { color: var(--success-text); }
.delta-down { color: var(--danger-text); }
.delta-flat { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   10. Badges, tags, pills
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px;
    border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    background: var(--surface-sunken);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge-lg { height: 26px; padding: 0 11px; font-size: 12.5px; }
.badge-success { background: var(--success-soft); color: var(--success-text); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: var(--warning-text); border-color: transparent; }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: transparent; }
.badge-info    { background: var(--info-soft);    color: var(--info-text);    border-color: transparent; }
.badge-brand   { background: var(--brand-soft);   color: var(--brand-text);   border-color: var(--brand-soft-border); }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-text);  border-color: transparent; }
.badge-solid   { background: var(--brand); color: var(--text-on-brand); border-color: transparent; }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-dot-live { animation: v2-pulse 1.8s var(--ease) infinite; }

@keyframes v2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.82); }
}

.count-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--danger); color: #fff;
    font-size: 10.5px; font-weight: 800;
    display: inline-grid; place-items: center;
    font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.field-hint { font-size: 12px; color: var(--text-muted); }
.field-error { font-size: 12px; color: var(--danger-text); font-weight: 600; }

.input, .select, .textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-heading);
    font-size: 14.5px;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
    appearance: none;
}
.textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-subtle); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-sunken); opacity: .6; cursor: not-allowed; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697586' stroke-width='2.4' 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 13px center;
    padding-right: 38px;
    cursor: pointer;
}
:root[data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b99ae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 42px; }
.input-group-icon {
    position: absolute; left: 14px;
    color: var(--text-subtle);
    pointer-events: none;
    display: grid; place-items: center;
}
.input-group .input-affix {
    position: absolute; right: 10px;
    display: flex; align-items: center; gap: var(--sp-2);
}

/* Money inputs get the mono treatment so a typed amount matches the receipt. */
.input-money {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 20px;
    height: 56px;
    letter-spacing: -.02em;
}

.checkbox, .radio {
    width: 18px; height: 18px; flex: none;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    appearance: none;
    margin: 0;
}
.checkbox { border-radius: 5px; }
.radio { border-radius: 50%; }
.checkbox:checked, .radio:checked { background: var(--brand); border-color: var(--brand); }
.checkbox:checked::after {
    content: "";
    width: 10px; height: 10px;
    background: var(--text-on-brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.radio:checked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-on-brand); }

.switch {
    width: 40px; height: 23px; flex: none;
    border-radius: var(--r-pill);
    background: var(--border-strong);
    border: none; padding: 0;
    position: relative; cursor: pointer;
    transition: background-color var(--t-base) var(--ease);
    appearance: none;
}
.switch::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base) var(--ease);
}
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(17px); }

.check-row {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.check-row:hover { border-color: var(--border-strong); background: var(--surface-sunken); }
.check-row:has(:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */

.table-wrap { width: 100%; overflow-x: auto; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th {
    text-align: left;
    padding: 11px var(--sp-5);
    font-size: 11px; font-weight: 700;
    letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--text-subtle);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table th:first-child, .table td:first-child { padding-left: var(--sp-5); }
.table th:last-child, .table td:last-child { padding-right: var(--sp-5); }
.table td {
    padding: 13px var(--sp-5);
    border-bottom: 1px solid var(--border);
    color: var(--text-body);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table tbody tr:hover td { background: var(--brand-soft); }
.table .col-money { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.table .col-status { text-align: right; }
.table-flush th:first-child, .table-flush td:first-child { padding-left: var(--sp-4); }
.table-flush th:last-child, .table-flush td:last-child { padding-right: var(--sp-4); }

/* Row list — the mobile-friendly alternative to a table, used in feeds. */
.rows { display: flex; flex-direction: column; }
.row-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 13px var(--sp-5);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--t-fast) var(--ease);
    color: inherit;
}
.row-item:last-child { border-bottom: none; }
a.row-item:hover { background: var(--brand-soft); color: inherit; }
.row-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-item-title { font-size: 14px; font-weight: 600; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item-sub { font-size: 12.5px; color: var(--text-muted); }
.row-item-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }

/* --------------------------------------------------------------------------
   13. Tabs, segmented control
   -------------------------------------------------------------------------- */

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 10px 14px;
    font-size: 14px; font-weight: 600;
    color: var(--text-muted);
    border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text-heading); }
.tab.is-active { color: var(--brand-text); border-bottom-color: var(--brand); }

.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    gap: 2px;
}
.segmented button {
    height: 30px; padding: 0 13px;
    border: none; background: none; cursor: pointer;
    border-radius: 7px;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all var(--t-fast) var(--ease);
}
.segmented button:hover { color: var(--text-heading); }
.segmented button.is-active {
    background: var(--surface);
    color: var(--text-heading);
    box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   14. Alerts, empty states, progress
   -------------------------------------------------------------------------- */

.alert {
    display: flex; gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    font-size: 13.5px;
    line-height: 1.5;
}
.alert-title { font-weight: 700; color: var(--text-heading); margin-bottom: 2px; }
.alert-brand   { background: var(--brand-soft);   border-color: var(--brand-soft-border); color: var(--brand-text); }
.alert-success { background: var(--success-soft); border-color: transparent; color: var(--success-text); }
.alert-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning-text); }
.alert-danger  { background: var(--danger-soft);  border-color: transparent; color: var(--danger-text); }
.alert-info    { background: var(--info-soft);    border-color: transparent; color: var(--info-text); }
.alert .alert-title { color: inherit; }

.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
}
.empty-icon {
    width: 56px; height: 56px;
    border-radius: var(--r-lg);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--text-subtle);
}
.empty h4 { color: var(--text-heading); }
.empty p { color: var(--text-muted); font-size: 13.5px; max-width: 380px; }

.progress {
    height: 7px;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--gradient-brand);
    border-radius: var(--r-pill);
    transition: width var(--t-slow) var(--ease);
}
.progress-bar.tone-warning { background: var(--warning); }
.progress-bar.tone-danger  { background: var(--danger); }
.progress-bar.tone-accent  { background: var(--accent); }

.meter-split { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-sunken); }
.meter-split span { height: 100%; transition: width var(--t-slow) var(--ease); }

/* --------------------------------------------------------------------------
   15. Avatar
   -------------------------------------------------------------------------- */

.avatar {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    letter-spacing: -.01em;
    overflow: hidden;
    position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; font-size: 11px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 76px; height: 76px; font-size: 24px; }
.avatar-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }

/* --------------------------------------------------------------------------
   16. Dialog / drawer / toast
   -------------------------------------------------------------------------- */

.scrim {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(7, 11, 18, .56);
    backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.dialog {
    position: fixed;
    z-index: 950;
    left: 50%; top: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    width: min(520px, calc(100vw - 32px));
    max-height: min(86vh, 780px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.dialog.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.dialog-head { padding: var(--sp-5) var(--sp-6) var(--sp-3); }
.dialog-body { padding: 0 var(--sp-6) var(--sp-5); overflow-y: auto; }
.dialog-foot { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); justify-content: flex-end; }
.dialog-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    border: none; background: none; cursor: pointer;
    color: var(--text-subtle);
    display: grid; place-items: center;
    transition: all var(--t-fast) var(--ease);
}
.dialog-close:hover { background: var(--surface-sunken); color: var(--text-heading); }

.toast-stack {
    position: fixed; z-index: 990;
    right: 20px; bottom: 20px;
    display: flex; flex-direction: column-reverse; gap: var(--sp-2);
    pointer-events: none;
}
.toast {
    display: flex; gap: var(--sp-3);
    min-width: 280px; max-width: 380px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: v2-toast-in var(--t-base) var(--ease);
}
.toast.tone-success { border-left-color: var(--success); }
.toast.tone-danger  { border-left-color: var(--danger); }
.toast.tone-warning { border-left-color: var(--warning); }
.toast-title { font-size: 13.5px; font-weight: 700; color: var(--text-heading); }
.toast-text  { font-size: 12.5px; color: var(--text-muted); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all var(--t-base) var(--ease); }

@keyframes v2-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   17. Skeleton
   -------------------------------------------------------------------------- */

.skeleton {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border) 37%, var(--surface-sunken) 63%);
    background-size: 400% 100%;
    animation: v2-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-xs);
}
@keyframes v2-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   18. Motion preferences
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   19. Responsive grid fallbacks
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    :root { --gutter: 18px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    .display { font-size: 36px; }
    .display-sm { font-size: 30px; }
}
@media (max-width: 560px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .card-body, .card-head { padding: var(--sp-4); }
    .table th, .table td { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .row-item { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .toast-stack { left: 16px; right: 16px; bottom: 16px; }
    .toast { max-width: none; min-width: 0; }
}

/* A link styled as a button has no :disabled, so pagination and similar
   controls opt out of interaction with a class instead. */
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   20. Quiet icon controls

   These live here rather than in marketing.css because the member app uses
   them too — the theme toggle, the notification bell and the sidebar control
   all sit in the app topbar. While they were defined only on the marketing
   side, the app rendered them as unstyled default buttons and the theme
   toggle showed BOTH its sun and its moon at once.

   Quiet by default: no border, no fill, just the glyph. Weight arrives on
   hover. A row of three of these should read as one calm cluster, not as
   three competing boxes.
   -------------------------------------------------------------------------- */

.icon-btn {
    width: 38px; height: 38px;
    flex: none;
    display: inline-grid; place-items: center;
    position: relative;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-heading); }
.icon-btn:active { background: var(--border); }
.icon-btn svg { transition: transform var(--t-base) var(--ease); }

/* The bordered variant, for a control that has to read as a button on its
   own rather than as part of a cluster. */
.icon-btn-outline { border-color: var(--border); background: var(--surface); }
.icon-btn-outline:hover { border-color: var(--border-strong); background: var(--surface-sunken); }

/* Theme toggle: show the theme you would switch TO, never both. */
[data-theme-toggle] .ic-moon { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .ic-moon { display: block; }
:root[data-theme="dark"] [data-theme-toggle] .ic-sun { display: none; }
[data-theme-toggle]:hover svg { transform: rotate(-18deg); }

/* The notification bell nudges when there is something unread. */
.icon-btn .count-badge {
    position: absolute;
    top: 2px; right: 2px;
    box-shadow: 0 0 0 2px var(--canvas);
}

/* The avatar control gets the same quiet treatment as its neighbours. */
.avatar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 3px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.avatar-btn:hover { background: var(--surface-sunken); border-color: var(--border); color: var(--text-heading); }
.avatar-btn[aria-expanded="true"] { background: var(--surface-sunken); border-color: var(--border); }

/* Spacing utilities, complete. The set used to skip .mb-3 and .mb-5, so any
   markup that reached for one got no margin at all — which is why the stat
   band sat flush against the card under it. */
.mt-1 { margin-top: var(--sp-1); }   .mb-1 { margin-bottom: var(--sp-1); }
.mt-5 { margin-top: var(--sp-5); }   .mb-3 { margin-bottom: var(--sp-3); }
.mt-12 { margin-top: var(--sp-12); } .mb-5 { margin-bottom: var(--sp-5); }
.mb-10 { margin-bottom: var(--sp-10); }
.mb-12 { margin-bottom: var(--sp-12); }

/* Wordmark spacing. The name and the small caps line under it were sharing a
   1.1 line-height, so the descender of the "y" in MyPlay landed on top of
   MEMBER PORTAL. Each line gets its own leading plus a hair of separation. */
.logo-word { line-height: normal; gap: 1px; }
.logo-name { line-height: 1.18; }
.logo-sub  { line-height: 1.2; margin-top: 1px; }

/* Beside the small mark the name steps down so the lockup stays balanced. */
.logo:has(.logo-mark-sm) .logo-name { font-size: 15px; }
.logo:has(.logo-mark-sm) .logo-sub  { font-size: 9px; }

/* ==========================================================================
   Stat tiles, second pass

   The first version was a plain bordered box. These read as a set: a tinted
   corner glow keyed to the tile's meaning, a quiet chip for the icon, and a
   value that scales rather than overflowing when two share a phone row.
   ========================================================================== */

.stat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--sp-5);
    gap: var(--sp-2);
    border-radius: var(--r-lg);
}

/* A soft corner wash in the tile's own tone. Big enough to feel deliberate,
   faint enough that four of them side by side still read as one calm row. */
.stat::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70px; right: -70px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--stat-glow, transparent) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.stat:hover::before { transform: scale(1.12); }

.stat[data-tone="brand"]   { --stat-glow: rgba(18, 162, 116, .20); }
.stat[data-tone="accent"]  { --stat-glow: rgba(91, 91, 214, .18); }
.stat[data-tone="warning"] { --stat-glow: rgba(217, 141, 30, .20); }
.stat[data-tone="danger"]  { --stat-glow: rgba(229, 72, 77, .16); }
.stat[data-tone="info"]    { --stat-glow: rgba(46, 127, 212, .18); }

:root[data-theme="dark"] .stat[data-tone="brand"]   { --stat-glow: rgba(47, 196, 150, .16); }
:root[data-theme="dark"] .stat[data-tone="accent"]  { --stat-glow: rgba(139, 139, 240, .16); }
:root[data-theme="dark"] .stat[data-tone="warning"] { --stat-glow: rgba(232, 173, 74, .15); }
:root[data-theme="dark"] .stat[data-tone="danger"]  { --stat-glow: rgba(242, 111, 115, .14); }
:root[data-theme="dark"] .stat[data-tone="info"]    { --stat-glow: rgba(90, 165, 232, .15); }

.stat-top { align-items: center; }
.stat-label { font-size: 10.5px; line-height: 1.3; }

/* The icon chip: smaller and quieter than the general-purpose tile, because
   here the number is the subject and the icon is only a label. */
.stat-chip {
    width: 30px; height: 30px;
    flex: none;
    border-radius: 9px;
    display: grid; place-items: center;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text-subtle);
}
.stat[data-tone="brand"]   .stat-chip { background: var(--brand-soft);   border-color: var(--brand-soft-border); color: var(--brand-text); }
.stat[data-tone="accent"]  .stat-chip { background: var(--accent-soft);  border-color: transparent; color: var(--accent-text); }
.stat[data-tone="warning"] .stat-chip { background: var(--warning-soft); border-color: transparent; color: var(--warning-text); }
.stat[data-tone="danger"]  .stat-chip { background: var(--danger-soft);  border-color: transparent; color: var(--danger-text); }
.stat[data-tone="info"]    .stat-chip { background: var(--info-soft);    border-color: transparent; color: var(--info-text); }

/* Scales instead of overflowing when two tiles share a phone row. */
.stat-value {
    font-size: clamp(20px, 5.2vw, 27px);
    line-height: 1.05;
    margin-block: 2px;
}
.stat-value-sm { font-size: clamp(17px, 4.2vw, 21px); }

.stat-foot { font-size: 12px; line-height: 1.35; gap: 5px; flex-wrap: wrap; }

/* --- Two per row on a phone, not one ---
   A single full-width tile per row turned four numbers into four screens of
   scrolling for information that is meant to be taken in at a glance. */
@media (max-width: 560px) {
    .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding: var(--sp-4); }
    .stat-chip { width: 26px; height: 26px; border-radius: 8px; }
    .stat-chip svg { width: 13px; height: 13px; }
    .stat-foot { font-size: 11px; }
}

/* Below this a two-column row genuinely runs out of room for a money figure. */
@media (max-width: 340px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   21. Platform blue

   The second voice is now the platform's own indigo (#352f9f, hover #24206e)
   rather than a generic one, so v2 reads as the same company as v1 even with
   a new mark. Jade still carries the brand; indigo carries everything
   analytical — and the two of them, not a spread of pastels, are what the
   stat tiles are tinted with.
   ========================================================================== */

:root {
    --indigo-50:  #eeecfb;
    --indigo-100: #ddd8f6;
    --indigo-300: #9b93e6;
    --indigo-500: #4f47c4;
    --indigo-600: #352f9f;   /* the platform blue */
    --indigo-700: #24206e;   /* its hover */

    /* Information leans towards the indigo rather than sitting apart from it. */
    --sky-50:  #eaf1fd;
    --sky-100: #d2e2fb;
    --sky-500: #3573cf;
    --sky-600: #2a5fb4;

    --accent-text: var(--indigo-600);
    --info-text: var(--sky-600);

    /* A jade-to-indigo descent, so the dark panels belong to both halves of
       the palette instead of only to the jade half. */
    --gradient-deep: linear-gradient(165deg, #0d2c26 0%, #16174d 58%, #0a0b1f 100%);
}

:root[data-theme="dark"] {
    --accent: #8f88ee;
    --accent-soft: rgba(143, 136, 238, .15);
    --accent-text: #aca5f5;
    --info: #6a9ce8;
    --info-soft: rgba(106, 156, 232, .14);
    --info-text: #8fb8f0;
    --gradient-deep: linear-gradient(165deg, #0c2620 0%, #12133f 58%, #08091a 100%);
}

/* Stat glows, retuned to the two brand colours. The rose wash read as an
   error state on tiles that were only reporting a number. */
.stat[data-tone="brand"]   { --stat-glow: rgba(18, 162, 116, .20); }
.stat[data-tone="accent"]  { --stat-glow: rgba(53, 47, 159, .17); }
.stat[data-tone="info"]    { --stat-glow: rgba(53, 115, 207, .16); }
.stat[data-tone="warning"] { --stat-glow: rgba(217, 141, 30, .16); }
.stat[data-tone="danger"]  { --stat-glow: rgba(53, 47, 159, .13); }

:root[data-theme="dark"] .stat[data-tone="brand"]   { --stat-glow: rgba(47, 196, 150, .16); }
:root[data-theme="dark"] .stat[data-tone="accent"]  { --stat-glow: rgba(143, 136, 238, .16); }
:root[data-theme="dark"] .stat[data-tone="info"]    { --stat-glow: rgba(106, 156, 232, .15); }
:root[data-theme="dark"] .stat[data-tone="warning"] { --stat-glow: rgba(232, 173, 74, .13); }
:root[data-theme="dark"] .stat[data-tone="danger"]  { --stat-glow: rgba(143, 136, 238, .12); }

/* An odd last item in a two-column row spans the full width instead of sitting
   half-empty next to nothing — the third balance card on the wallet page was
   the visible case. Only fires when the row really is two columns wide. */
.grid-2 > :last-child:nth-child(odd) { grid-column: span 2; }

@media (max-width: 1100px) {
    .grid-4 > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 860px) {
    .grid-3 > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* Below this the rows collapse to one column, where spanning two would
   overflow the track. */
@media (max-width: 340px) {
    .grid-2 > :last-child:nth-child(odd),
    .grid-3 > :last-child:nth-child(odd),
    .grid-4 > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ==========================================================================
   22. The two-colour system

   Jade and the platform indigo now have jobs, so a screen is never one colour
   by default:

     JADE   = money. What you hold, what is coming to you, and the action that
              moves it — balances, rewards, claim and payout buttons, success.
     INDIGO = the platform. Identity, structure and information — the account
              tier and its limits, your team and invite link, facilities like a
              staff loan, and the marketing calls to action.

   The test for which to use: if the surface is about naira the member owns,
   it is jade. If it is about how the platform is arranged around them, it is
   indigo. Amber stays promo-only, rose stays destructive-only.
   ========================================================================== */

:root {
    --gradient-indigo: linear-gradient(135deg, #4f47c4 0%, #24206e 100%);
    --shadow-indigo: 0 8px 20px -8px rgba(53, 47, 159, .50);
}
:root[data-theme="dark"] {
    --gradient-indigo: linear-gradient(135deg, #4239ad 0%, #191547 100%);
    --shadow-indigo: 0 8px 20px -8px rgba(79, 71, 196, .55);
}

/* The indigo counterpart to .card-brand. One of each per screen at most —
   two filled cards competing is worse than one. */
.card-indigo {
    background: var(--gradient-indigo);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-indigo);
    overflow: hidden;
    position: relative;
}
.card-indigo h1, .card-indigo h2, .card-indigo h3,
.card-indigo h4, .card-indigo .money { color: #fff; }
.card-indigo .t-muted, .card-indigo .caption, .card-indigo .overline { color: rgba(255, 255, 255, .72); }
.card-indigo::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
    pointer-events: none;
}

/* Anything sitting on a filled indigo card: the white button, the soft chip. */
.on-indigo-solid { background: #fff; color: var(--indigo-700); border-color: transparent; }
.on-indigo-solid:hover { background: #fff; color: var(--indigo-700); filter: brightness(.96); }
.on-indigo-soft {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.on-indigo-soft:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* The hero band has an indigo mode for pages whose subject is not a balance. */
.balance-hero.tone-indigo { background: var(--gradient-indigo); box-shadow: var(--shadow-indigo); }
.balance-hero.tone-indigo .btn.is-primary { color: var(--indigo-700); }

/* Identity is platform, not money — an avatar in money-green reads as a
   balance chip at small sizes. */
.avatar { background: var(--gradient-indigo); }

/* Progress that measures a platform thing (tier progress, capacity, setup)
   takes indigo; progress that measures money keeps the brand gradient. */
.progress-bar.tone-accent { background: var(--gradient-indigo); }

/* Feature and quick-action tiles alternate so a grid of nine is not a wall of
   green. The tone- classes already exist; this is the gradient-filled variant
   for the few tiles that carry a section. */
.ic-tile.is-filled { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.ic-tile.is-filled.tone-accent { background: var(--gradient-indigo); color: #fff; }

/* ==========================================================================
   23. Spec grid

   Package cards were laying their figures out as label-left / value-right
   rows. Uppercase labels like "RELEASED DAILY" wrapped to two lines at card
   width while "ENTRY" did not, so every card in a row broke at a different
   place and the grid read as scattered.

   Stacking the label over the value fixes it: the label has the full column
   to itself, the value never collides with it, and the same figure sits at
   the same height in every card.
   ========================================================================== */

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
}

.spec-item { min-width: 0; }

.spec-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spec-value {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-heading);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The headline figure of the card spans the row and sits below a rule, so the
   eye lands on it rather than hunting for it among the inputs. */
.spec-item.is-total {
    grid-column: span 2;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.spec-item.is-total .spec-value { font-size: 19px; color: var(--success-text); }

/* Cards in a grid share a height, so their footers line up. */
.package-card { display: flex; flex-direction: column; height: 100%; }
.package-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.package-card .package-spec { margin-top: auto; }
.package-card .package-action { padding: 0 var(--sp-5) var(--sp-5); }

/* The description reserves two lines whether or not it has any, so a package
   with no blurb does not pull its whole card up out of line. */
.package-blurb {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 var(--sp-4);
    min-height: calc(1.5em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}