/* MonetisePay portal stylesheet — single self-hosted file, no CDN, no inline styles.

   2026-10 redesign: a dark navy + gold app shell that matches monetisepay.com's
   product look (the site's exchange mockup), with card-based dashboards.

   WP-I still holds: every colour that belongs to a brand is read from the
   --brand-* custom properties that /brand/theme.css supplies from the brand
   record, with the platform's own values as fallbacks, so a second brand
   renders in its own accent without this file changing. The dark surfaces are
   the platform's; the accent, focus and display colours are the brand's. */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-var.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Surfaces */
    --bg: var(--brand-primary-deep, #020D23);
    --bg-raise: #051634;
    --card: #0A1B3D;
    --card-2: #0E2350;
    --field: #061430;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --line-gold: rgba(197, 168, 128, 0.28);

    /* Text */
    --ink: #E9EDF6;
    --ink-soft: #C3CCDD;
    --muted: #8D9BB8;

    /* Brand */
    --gold: var(--brand-accent, #C5A880);
    --gold-soft: var(--brand-secondary, #EEDDBB);
    --navy: var(--brand-primary, #051A42);
    --accent: var(--gold);
    --accent-ink: #151006;
    --focus: var(--gold-soft);

    /* Status */
    --ok: #34D399;
    --ok-bg: rgba(52, 211, 153, 0.12);
    --danger: #F87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --warn: #FBBF24;
    --warn-bg: rgba(251, 191, 36, 0.12);
    --info: #7DA2E8;
    --info-bg: rgba(125, 162, 232, 0.12);

    --radius: 1.125rem;
    --radius-sm: 0.75rem;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.75);
    --font: "IBM Plex Sans", var(--brand-font, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
    background:
        radial-gradient(70rem 40rem at 0% -10%, rgba(46, 80, 144, 0.32), transparent 60%),
        radial-gradient(55rem 32rem at 100% 0%, rgba(197, 168, 128, 0.10), transparent 60%),
        radial-gradient(60rem 40rem at 60% 110%, rgba(46, 80, 144, 0.18), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: var(--font); letter-spacing: -0.01em; }

h1 { font-size: 1.75rem; font-weight: 650; margin: 0 0 1rem; line-height: 1.2; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 0.75rem; }
h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.5rem; }
h1 .muted, h2 .muted { font-weight: 400; }

p { margin: 0 0 0.875rem; color: var(--ink-soft); }

a { color: var(--gold-soft); text-decoration-color: rgba(238, 221, 187, 0.35); text-underline-offset: 0.18em; }
a:hover { color: #fff; text-decoration-color: currentColor; }

strong { color: var(--ink); }

code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; word-break: break-all; color: var(--gold-soft); }
.wrap-any { overflow-wrap: anywhere; }

.muted { color: var(--muted); }
.help { color: var(--muted); font-size: 0.8125rem; margin: 0.375rem 0 0; }

.brand-logo { vertical-align: middle; margin-right: 0.5rem; border-radius: 0.5rem; }
.support-phone { margin-left: 0.75rem; }

.container { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }
main.container { padding-top: 2rem; padding-bottom: 3rem; }

::selection { background: rgba(197, 168, 128, 0.35); color: #fff; }

/* Accessibility ---------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--gold);
    color: var(--accent-ink);
    padding: 0.5rem 1rem;
    z-index: 50;
    border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 0.375rem; }

/* Icons ------------------------------------------------------------------ */

.icon { width: 1.125rem; height: 1.125rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.375rem; height: 1.375rem; }

/* Top header (guest + admin) --------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(2, 13, 35, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-header-admin { border-bottom: 1px solid var(--line-gold); box-shadow: 0 1px 0 rgba(197, 168, 128, 0.25); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding-top: 0.625rem; padding-bottom: 0.625rem; }
.brand { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 650; margin-right: 0.75rem; color: var(--ink); }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-links a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; min-height: 2.5rem; line-height: 1.5rem;
    border-radius: 0.625rem; text-decoration: none; color: var(--ink-soft); font-weight: 500;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-links a[aria-current="page"] {
    color: var(--gold-soft);
    background: linear-gradient(90deg, rgba(197, 168, 128, 0.20), rgba(197, 168, 128, 0.05));
    box-shadow: inset 0 0 0 1px rgba(197, 168, 128, 0.25);
}

.site-header .nav-links { justify-content: flex-end; }

.site-footer { color: var(--muted); font-size: 0.8125rem; padding-top: 1rem; padding-bottom: 2rem; }
.site-footer p { color: var(--muted); margin: 0 0 0.25rem; }

/* App shell: sidebar + main (customer portal) ----------------------------- */

body.has-sidebar {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-areas: "side main" "side foot";
    grid-template-rows: 1fr auto;
}
body.has-sidebar > .app-sidebar { grid-area: side; }
body.has-sidebar > main { grid-area: main; max-width: 92rem; width: 100%; margin: 0; padding: 1.75rem 2.25rem 2.5rem; }
body.has-sidebar > .site-footer { grid-area: foot; max-width: 92rem; width: 100%; margin: 0; padding: 0 2.25rem 2rem; }

.app-sidebar {
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1.25rem 0.875rem 1rem;
    background: linear-gradient(180deg, rgba(5, 22, 52, 0.85), rgba(2, 13, 35, 0.85));
    border-right: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow-y: auto;
}
.app-sidebar .nav { flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 0; gap: 1rem; height: 100%; }

.brand-lockup { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem 0.75rem; text-decoration: none; border-bottom: 1px solid var(--line); margin: 0; }
.brand-lockup .brand-emblem { width: 2.5rem; height: auto; filter: drop-shadow(0 4px 12px rgba(197, 168, 128, 0.25)); }
.brand-lockup .brand-wordmark { height: 1.125rem; width: auto; }
.brand-lockup .brand-name { font-weight: 650; font-size: 1.0625rem; color: var(--ink); }

.app-sidebar .nav-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.app-sidebar .nav-links { flex-direction: column; flex-wrap: nowrap; gap: 0.125rem; flex: none; }
.app-sidebar .nav-links a { display: flex; width: 100%; padding: 0.5625rem 0.75rem; }
.app-sidebar .nav-links a .icon { opacity: 0.85; }
.app-sidebar .nav-links a[aria-current="page"] .icon { opacity: 1; color: var(--gold); }
.nav-group-label { list-style: none; margin: 1rem 0 0.25rem; padding: 0 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nav-group-label:first-child { margin-top: 0.25rem; }
.nav-soon { margin-left: auto; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.0625rem 0.4375rem; border-radius: 999px; color: var(--gold-soft); background: rgba(197, 168, 128, 0.14); border: 1px solid rgba(197, 168, 128, 0.25); }

.sidebar-foot { margin-top: auto; padding-top: 0.875rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.625rem; }
.account-chip { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem; }
.account-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 650; color: var(--accent-ink); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); flex: none; }
.account-meta { min-width: 0; }
.account-meta strong { display: block; font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta span { display: block; font-size: 0.75rem; color: var(--muted); }
.sidebar-foot .inline-form { display: block; }
.sidebar-foot .inline-form .button { width: 100%; justify-content: center; }

/* Page header ------------------------------------------------------------ */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; font-size: 1.875rem; }
.page-head p { margin: 0.25rem 0 0; color: var(--muted); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.375rem; }

/* Cards / layout --------------------------------------------------------- */

.card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.375rem;
    margin: 0 0 1.25rem;
    box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card-warning { background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.04)), var(--card); border-color: rgba(251, 191, 36, 0.35); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.0625rem; }
.card-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--gold-soft); }
.card-link:hover { color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.stat-grid .card { margin: 0; }
.stat-grid h2 { margin-top: 0; font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.stat { font-size: 1.75rem; font-weight: 650; margin: 0.25rem 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat + p { margin: 0; color: var(--muted); font-size: 0.8125rem; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; }
.kv > div { display: flex; flex-direction: column; }
.kv dt { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 0.125rem 0 0; color: var(--ink); font-weight: 500; }

/* Forms ------------------------------------------------------------------ */

.stack > * + * { margin-top: 1rem; }
.form-narrow { max-width: 30rem; }
.inline-form { display: inline; }

.field label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.375rem; color: var(--ink); }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 2.875rem;
    padding: 0.625rem 0.875rem;
    font: inherit;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--line-strong);
    border-radius: 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder, .field textarea::placeholder { color: #5E6C8A; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.22); }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; min-height: 0; accent-color: var(--gold); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.875rem 1rem 1rem; margin: 0; }
legend { font-weight: 600; padding: 0 0.375rem; color: var(--ink); }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5625rem 1.125rem;
    min-height: 2.75rem;
    line-height: 1.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--accent-ink);
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    border: 1px solid rgba(238, 221, 187, 0.6);
    border-radius: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 24px -12px rgba(197, 168, 128, 0.7);
    transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
}
.button:hover { filter: brightness(1.06); color: var(--accent-ink); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-quiet { background: rgba(255, 255, 255, 0.04); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.button-quiet:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.button-danger { background: linear-gradient(135deg, #FCA5A5, #EF4444); border-color: rgba(252, 165, 165, 0.6); color: #2A0606; box-shadow: none; }
.button-sm { min-height: 2.25rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; border-radius: 0.625rem; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

/* Tables ----------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005)), var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; min-width: 40rem; }
th, td { text-align: left; vertical-align: top; padding: 0.8125rem 1rem; border-bottom: 1px solid var(--line); }
thead th { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); background: rgba(255, 255, 255, 0.02); }
tbody th { color: var(--ink); font-weight: 600; }
tbody td { color: var(--ink-soft); }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.card .table-wrap { box-shadow: none; background: transparent; border-radius: var(--radius-sm); }

/* Flash / badges --------------------------------------------------------- */

.flash { border-radius: var(--radius-sm); padding: 0.875rem 1.125rem; margin: 0 0 1.25rem; color: var(--ink); }
.flash ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.flash-success { background: var(--ok-bg); border: 1px solid rgba(52, 211, 153, 0.4); }
.flash-error { background: var(--danger-bg); border: 1px solid rgba(248, 113, 113, 0.45); }
.flash-warning { background: var(--warn-bg); border: 1px solid rgba(251, 191, 36, 0.4); }

.badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.125rem 0.5625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-strong);
}
.badge-approved, .badge-confirmed, .badge-credited, .badge-broadcast, .badge-active, .badge-ok { color: var(--ok); background: var(--ok-bg); border-color: rgba(52, 211, 153, 0.35); }
.badge-rejected, .badge-failed, .badge-invalid, .badge-orphaned, .badge-high, .badge-critical, .badge-off { color: var(--danger); background: var(--danger-bg); border-color: rgba(248, 113, 113, 0.4); }
.badge-pending, .badge-submitted, .badge-pending_review, .badge-maker_approved, .badge-manual_review, .badge-signing, .badge-under_review, .badge-soon { color: var(--warn); background: var(--warn-bg); border-color: rgba(251, 191, 36, 0.35); }
.badge-gold { color: var(--gold-soft); background: rgba(197, 168, 128, 0.14); border-color: rgba(197, 168, 128, 0.35); }

/* Misc ------------------------------------------------------------------- */

.address { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.address code { flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; padding: 0.5rem 0.75rem; background: var(--field); border: 1px solid var(--line-strong); border-radius: 0.625rem; }
.qr { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 0.625rem; max-width: 100%; height: auto; }

.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; list-style: none; padding: 0; margin: 0.5rem 0 0; }
.recovery-codes code { font-size: 1rem; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-strong); }
.timeline > li { position: relative; padding: 0 0 1.25rem 1.25rem; }
.timeline > li::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.3125rem;
    width: 0.875rem; height: 0.875rem;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--line-gold);
}
.timeline-when { margin: 0; font-size: 0.75rem; color: var(--muted); }
.timeline-label { margin: 0; color: var(--ink); }
.timeline-detail { margin: 0; color: var(--muted); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1.25rem; }
.filter-bar .field { min-width: 9rem; }

.plain-list { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--muted); }

details > summary { cursor: pointer; margin: 0.5rem 0; font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* WP-AD: the navigation menu. A <details> that ships open; the summary is
   only a control on narrow screens (portal.js closes it there on load). */
.nav-menu { display: contents; }
.nav-menu > summary { display: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }

/* ======================================================================
   Guest pages (sign in, register, reset): centred glass card
   ====================================================================== */

body.is-guest main.container { max-width: 32rem; padding-top: 3.5rem; }
body.is-guest main.container > h1 { font-size: 1.75rem; text-align: center; }
body.is-guest main.container > form,
body.is-guest main.container > .card,
body.is-guest main.container > section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--card);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: var(--shadow), 0 0 0 1px rgba(197, 168, 128, 0.06);
}
body.is-guest main.container > form .button[type="submit"] { width: 100%; }
body.is-guest .site-footer { text-align: center; }

/* ======================================================================
   Dashboard
   ====================================================================== */

.dash { display: grid; gap: 1.25rem; }
.dash > * { margin: 0; }

.dash-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; }

.balance-hero {
    overflow: hidden;
    padding: 1.5rem 1.625rem 1.25rem;
    background:
        radial-gradient(40rem 18rem at 100% 0%, rgba(197, 168, 128, 0.20), transparent 60%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(46, 80, 144, 0.45), transparent 60%),
        linear-gradient(160deg, #0E2556, #081838 60%, #061230);
    border-color: rgba(197, 168, 128, 0.22);
}
.balance-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }
.balance-value { font-size: clamp(2.25rem, 4vw, 3.125rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; margin: 0.375rem 0 0.25rem; color: #fff; font-variant-numeric: tabular-nums; }
.balance-value .cents { color: var(--muted); font-weight: 500; }
.balance-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--muted); margin: 0; }
.balance-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.125rem; }

.chart { display: block; width: 100%; height: 7.5rem; margin-top: 1rem; overflow: visible; }
.chart-line { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: rgba(197, 168, 128, 0.12); stroke: none; }
.chart-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.chart-caption { font-size: 0.75rem; color: var(--muted); margin: 0.5rem 0 0; }
.chart-empty { display: grid; place-items: center; height: 7.5rem; margin-top: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.8125rem; text-align: center; padding: 0 1rem; }

.change { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.5rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.06); color: var(--ink-soft); }
.change.is-up { color: var(--ok); background: var(--ok-bg); }
.change.is-down { color: var(--danger); background: var(--danger-bg); }

/* Account status: the eligibility card, laid out as tiles */
.status-card { display: flex; flex-direction: column; }
.status-card .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; flex: 1; }
.status-card .kv > div {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
}
.status-card .kv dd { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font-size: 0.9375rem; }
.status-card .kv dd::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); flex: none; }
.status-card .kv dd.is-ok::before { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.status-card .kv dd.is-off::before { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.status-card .kv dd.is-info::before { background: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }
.status-card > p { margin: 0.875rem 0 0; font-size: 0.8125rem; }

/* Asset cards */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.25rem; }
.asset-card {
    --tone: 98, 126, 234;
    display: flex; flex-direction: column;
    margin: 0;
    padding: 1.125rem 1.25rem 1rem;
    overflow: hidden;
    background:
        radial-gradient(22rem 10rem at 100% 0%, rgba(var(--tone), 0.22), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), var(--card);
    border-color: rgba(var(--tone), 0.28);
    transition: transform 0.15s, border-color 0.15s;
}
.asset-card:hover { transform: translateY(-2px); border-color: rgba(var(--tone), 0.5); }
.asset-card.tone-eth { --tone: 98, 126, 234; }
.asset-card.tone-usdt { --tone: 38, 161, 123; }
.asset-card.tone-usdc { --tone: 39, 117, 202; }
.asset-card.tone-bnb { --tone: 243, 186, 47; }
.asset-card.tone-btc { --tone: 247, 147, 26; }
.asset-card.tone-other { --tone: 197, 168, 128; }

.asset-top { display: flex; align-items: center; gap: 0.75rem; }
.asset-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none; box-shadow: 0 6px 18px -6px rgba(var(--tone), 0.8); }
.asset-name { min-width: 0; flex: 1; }
.asset-name strong { display: block; font-size: 1rem; line-height: 1.2; }
.asset-name span { display: block; font-size: 0.75rem; color: var(--muted); }
.asset-net { font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 999px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); white-space: nowrap; }

.asset-amount { margin: 1rem 0 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.asset-amount small { font-size: 0.8125rem; font-weight: 500; color: var(--muted); margin-left: 0.25rem; }
.asset-fiat { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted); min-height: 1.375rem; }

.spark { display: block; width: 100%; height: 2.75rem; margin: 0.75rem 0 0.25rem; overflow: visible; }
.spark-line { fill: none; stroke: rgb(var(--tone)); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: rgba(var(--tone), 0.14); stroke: none; }

.asset-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.asset-split dt { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.asset-split dd { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.asset-actions { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.875rem; }
.asset-actions .button { flex: 1; }
.asset-state { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }

/* Activity | exchange | market prices */
.dash-trio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dash-trio > * { margin: 0; }

/* Middle row: balances table + exchange */
.dash-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dash-split > * { margin: 0; }

/* Exchange / roadmap card */
.exchange-card {
    background:
        radial-gradient(26rem 14rem at 50% -20%, rgba(197, 168, 128, 0.16), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), var(--card);
}
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 0.875rem; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); margin-bottom: 1rem; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem; border-radius: 0.625rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.seg span.is-on { background: rgba(255, 255, 255, 0.07); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }

.swap-box { border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); padding: 0.25rem 0.875rem; }
.swap-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; }
.swap-row + .swap-row { border-top: 1px solid var(--line); }
.swap-row .asset-icon { width: 2rem; height: 2rem; box-shadow: none; }
.swap-asset { display: flex; align-items: center; gap: 0.625rem; }
.swap-asset strong { display: block; font-size: 0.875rem; }
.swap-asset span { display: block; font-size: 0.6875rem; color: var(--muted); }
.swap-amount { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.875rem; }
.swap-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.875rem 0; padding: 0.5rem; border-radius: 0.625rem; background: rgba(197, 168, 128, 0.08); color: var(--gold-soft); font-size: 0.75rem; text-align: center; }
.exchange-card .button { width: 100%; }

.roadmap { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.roadmap li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.roadmap-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.roadmap li.is-live .roadmap-dot { background: var(--ok-bg); color: var(--ok); }
.roadmap li.is-next .roadmap-dot { background: rgba(197, 168, 128, 0.16); color: var(--gold-soft); }
.roadmap strong { display: block; font-size: 0.8125rem; }
.roadmap span.roadmap-detail { display: block; font-size: 0.75rem; color: var(--muted); }
.roadmap .icon { width: 0.9375rem; height: 0.9375rem; }

/* Bottom row: activity + markets */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; padding-bottom: 0; }
.feed li:first-child { padding-top: 0; }
.feed-icon { width: 2.375rem; height: 2.375rem; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--ink-soft); }
.feed-icon.is-in { color: var(--ok); background: var(--ok-bg); }
.feed-icon.is-out { color: var(--danger); background: var(--danger-bg); }
.feed-main { min-width: 0; }
.feed-main strong { display: block; font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-main span { display: block; font-size: 0.75rem; color: var(--muted); }
.feed-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.feed-amount span { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--muted); }

.empty { display: grid; place-items: center; gap: 0.5rem; text-align: center; padding: 1.5rem 1rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.empty p { margin: 0; color: var(--muted); }

.market-list { list-style: none; margin: 0; padding: 0; }
.market-list li { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem auto; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.market-list li:last-child { border-bottom: 0; }
.market-coin { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.market-rank { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: var(--gold-soft); background: rgba(197, 168, 128, 0.12); flex: none; }
.market-coin strong { display: block; font-size: 0.8125rem; }
.market-coin span { display: block; font-size: 0.6875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-list .spark { height: 1.75rem; margin: 0; }
.market-price { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.8125rem; font-weight: 600; }
.market-price .change { margin-top: 0.125rem; }
.market-foot { margin: 0.75rem 0 0; font-size: 0.6875rem; color: var(--muted); }

/* Hidden until the price script fills it, so a page without prices shows no
   empty placeholders. */
[data-price-only][hidden] { display: none; }

/* ======================================================================
   Responsive
   ====================================================================== */

@media (max-width: 96rem) {
    .dash-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dash-trio > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 80rem) {
    .dash-hero, .dash-split, .dash-trio { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 64rem) {
    body.has-sidebar { display: block; }
    body.has-sidebar > main { padding: 1.25rem 1.125rem 2rem; }
    body.has-sidebar > .site-footer { padding: 0 1.125rem 2rem; }
    .app-sidebar { position: sticky; top: 0; z-index: 30; height: auto; padding: 0.625rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
    .app-sidebar .nav { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; height: auto; }
    .brand-lockup { border-bottom: 0; padding: 0; }
    .brand-lockup .brand-emblem { width: 2.125rem; }
    .app-sidebar .nav-menu { display: block; flex: 1 0 100%; order: 3; }
    .app-sidebar .nav-menu > summary { position: absolute; top: 0.625rem; right: 1rem; }
    .app-sidebar .nav-menu[open] { padding-bottom: 0.5rem; }
    .sidebar-foot { margin-top: 0.5rem; }
}

.nav-menu > summary.nav-menu-toggle {
    align-items: center; gap: 0.5rem;
    min-height: 2.5rem; padding: 0.5rem 0.875rem;
    font-weight: 600; cursor: pointer; list-style: none;
    border: 1px solid var(--line-strong); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.04); color: var(--ink);
    width: max-content; margin: 0;
}
.nav-menu[open] > summary.nav-menu-toggle { background: rgba(255, 255, 255, 0.08); }
.nav-menu-icon { display: inline-block; width: 1.125rem; height: 0.125rem; background: currentColor; box-shadow: 0 -0.375rem 0 currentColor, 0 0.375rem 0 currentColor; }

/* The sidebar collapses to a top bar at 64rem; the guest/admin header at 48rem
   (portal.js closes each menu at its own width). */
@media (max-width: 64rem) {
    .app-sidebar .nav-menu > summary { display: inline-flex; }
}
@media (max-width: 48rem) {
    .site-header .nav-menu > summary { display: inline-flex; }
}

@media (max-width: 48rem) {
    .site-header .nav { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .site-header .brand { margin-right: auto; }
    .site-header .nav-menu { display: block; flex: 1 0 100%; order: 3; }
    .site-header .nav-menu > summary { margin-left: auto; }
    .nav-links { flex-direction: column; gap: 0.125rem; padding: 0.5rem 0 0; }
    .nav-links a { display: flex; padding: 0.75rem 0.75rem; min-height: 2.75rem; }
    .nav-menu .inline-form { display: block; padding: 0.5rem 0 0.25rem; }
    .nav-menu .inline-form .button { width: 100%; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .stat { font-size: 1.5rem; }
    h1, .page-head h1 { font-size: 1.5rem; }
    .page-head { align-items: flex-start; }
    .page-head-actions { width: 100%; }
    .page-head-actions .button { flex: 1; }
    .status-card .kv { grid-template-columns: 1fr 1fr; }
    .balance-hero { padding: 1.25rem; }
}

/* WP-AD: tables on narrow screens. Once portal.js has labelled the cells the
   table reads as a stack of cards, one per row, each cell prefixed by its
   column heading; a table the script has not reached still scrolls sideways
   inside .table-wrap as before. Row headers (the asset, the market) become
   the card's title; a colspan cell (empty state) reads as one line. */
@media (max-width: 40rem) {
    table { min-width: 30rem; }
    table.is-labelled { min-width: 0; width: 100%; }
    table.is-labelled thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    table.is-labelled, table.is-labelled tbody, table.is-labelled tr, table.is-labelled th, table.is-labelled td { display: block; }
    table.is-labelled tr { padding: 0.625rem 1rem; border-bottom: 1px solid var(--line); }
    table.is-labelled tbody tr:last-child { border-bottom: 0; }
    table.is-labelled th, table.is-labelled td { padding: 0.25rem 0; border-bottom: 0; text-align: left; }
    table.is-labelled tbody th[scope="row"] { font-size: 1.0625rem; padding-bottom: 0.375rem; }
    table.is-labelled td[data-label] { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr; gap: 0.75rem; align-items: start; }
    table.is-labelled td[data-label]::before { content: attr(data-label); font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 0.125rem; }
    table.is-labelled td[data-label]:empty { display: none; }
    table.is-labelled td.num { text-align: left; overflow-wrap: anywhere; }
    table.is-labelled td[data-span="all"] { padding: 0.5rem 0; }
    table.is-labelled td .button, table.is-labelled td form { margin-top: 0.25rem; }
    .kv { grid-template-columns: 1fr; }
    .status-card .kv { grid-template-columns: 1fr; }
    .card { padding: 1rem 1.125rem; }
    main.container { padding-top: 1.25rem; }
    .asset-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* Offline page (served by the service worker without the app). */
.offline { padding-top: 3rem; }

/* WP-N surfaces ---------------------------------------------------------- */

/* Navigation and cross-reference lists: real lists, no bullets, readable
   line length. Used by Security, Support, Activity and Statements. */
.link-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.link-list > li { padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--ink-soft); }
.link-list a { font-weight: 600; }

/* An ordered pipeline (listing stages, delisting stages) reads as a list and
   is announced as one, rather than as a run-on sentence of arrows. */
.stage-list { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; margin: 0; padding-left: 1.25rem; }
.stage-list > li { margin: 0; }

/* The conversion countdown. The page is correct without it — expiry is
   enforced at the server — so this only styles a value the script fills in. */
.quote-countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.quote-countdown-expired { color: var(--danger); }

/* Market-list sparklines take their colour from the 24h direction. */
.market-list .spark-line { stroke: var(--gold); }
.market-list .spark-up .spark-line { stroke: var(--ok); }
.market-list .spark-down .spark-line { stroke: var(--danger); }
.market-list li.muted, .market-list li.empty-row { display: block; color: var(--muted); font-size: 0.8125rem; }

/* Deposit address: QR beside the address on wide screens. */
.deposit-address-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: start; }
.deposit-address-card > .qr { grid-column: 2; grid-row: 1 / span 3; width: 13rem; height: auto; }
.deposit-address-card > h2 { margin-top: 0; }
.deposit-grid { margin-bottom: 0.5rem; }
@media (max-width: 48rem) {
    .deposit-address-card { grid-template-columns: minmax(0, 1fr); }
    .deposit-address-card > .qr { grid-column: auto; grid-row: auto; justify-self: center; margin: 0.75rem 0; }
}

.asset-split-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ======================================================================
   Admin console (2026-10 redesign). The admin shares the portal's shell; this
   block adds its page frame, the dashboard's data tiles, and a consistent
   dress for the section pages' existing markup (cards, kv lists, forms,
   tables, notices) so every page reads as one console without rewriting it.
   ====================================================================== */

.app-sidebar-admin { border-right-color: var(--line-gold); }
/* The rail never scrolls sideways: the lockup (emblem + wordmark + Admin badge)
   is a few pixels wider than the rail, so the badge wraps under instead. */
.app-sidebar { overflow-x: hidden; }
.app-sidebar-admin .brand-lockup { flex-wrap: wrap; row-gap: 0.375rem; }
.app-sidebar-admin .brand-lockup .brand-wordmark { max-width: calc(100% - 3.75rem); }
.app-sidebar-admin .brand-lockup .badge { margin-left: auto; }
.app-sidebar .nav-links, .app-sidebar .sidebar-foot, .app-sidebar .account-chip, .app-sidebar .build-chip { max-width: 100%; min-width: 0; }
.app-sidebar .build-chip { flex-wrap: wrap; }
.account-avatar-admin { background: linear-gradient(135deg, #7DA2E8, #2E5090); color: #fff; }
.build-chip { display: flex; gap: 0.5rem; margin: 0; font-size: 0.6875rem; color: var(--muted); }
.build-chip .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Section pages: the first heading and its introduction become a page head. */
body.is-admin main > h1 { font-size: 1.75rem; margin: 0 0 0.25rem; }
body.is-admin main > h1 + p { max-width: 70rem; color: var(--muted); margin-bottom: 1.25rem; }
body.is-admin main > h1 + p + p.muted { max-width: 70rem; margin-top: -0.75rem; margin-bottom: 1.5rem; }
body.is-admin main > h2, body.is-admin main > section > h2 { font-size: 1.0625rem; }
body.is-admin .card > h2:first-child { margin-top: 0; }
body.is-admin .card .kv { margin: 0.25rem 0 0.75rem; }
body.is-admin .card .kv > div { padding: 0.75rem 0.875rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
body.is-admin .card .kv dd strong { font-size: 1.0625rem; }
body.is-admin .stat-grid .card { padding: 1rem 1.125rem; }
body.is-admin .stat-grid .stat { font-size: 1.625rem; }
body.is-admin .notice, body.is-admin .flash { border-radius: var(--radius-sm); padding: 0.875rem 1.125rem; margin: 0 0 1.25rem; color: var(--ink); }
body.is-admin .notice-error { background: var(--danger-bg); border: 1px solid rgba(248, 113, 113, 0.45); }
body.is-admin .notice-warning { background: var(--warn-bg); border: 1px solid rgba(251, 191, 36, 0.4); }
body.is-admin .notice-success { background: var(--ok-bg); border: 1px solid rgba(52, 211, 153, 0.4); }
body.is-admin .badge-warning { color: var(--warn); background: var(--warn-bg); border-color: rgba(251, 191, 36, 0.35); }
body.is-admin form.stack { padding: 0.25rem 0 0; }
body.is-admin .card form.stack.form-narrow { max-width: 34rem; }
body.is-admin fieldset { background: rgba(0, 0, 0, 0.15); }
body.is-admin td form.inline-form { display: inline-block; }
body.is-admin .table-wrap table { min-width: 48rem; }

/* Admin dashboard ---------------------------------------------------------- */

.dash-split-admin { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

.state-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.625rem; }
.state-grid li { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-left-width: 3px; }
.state-grid li span { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.state-grid li strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.state-grid li small { font-size: 0.75rem; color: var(--muted); }
.state-grid li.is-ok { border-left-color: var(--ok); }
.state-grid li.is-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.state-grid li.is-bad { border-left-color: var(--danger); background: var(--danger-bg); }
.state-grid li.is-bad strong { color: var(--danger); }
.state-grid li.is-warn strong { color: var(--warn); }

.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-list li + li { border-top: 1px solid var(--line); }
.queue-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5625rem 0.25rem; text-decoration: none; color: inherit; border-radius: 0.5rem; }
.queue-list a[href]:hover { background: rgba(255, 255, 255, 0.04); }
.queue-icon { width: 2rem; height: 2rem; border-radius: 0.625rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--ink-soft); }
.queue-list strong { display: block; font-size: 0.875rem; color: var(--ink); }
.queue-list small { display: block; font-size: 0.75rem; color: var(--muted); }
.queue-list b { min-width: 2.25rem; text-align: center; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.875rem; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.queue-list b.is-warn { background: var(--warn-bg); color: var(--warn); }
.queue-list b.is-bad { background: var(--danger-bg); color: var(--danger); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.kpi { margin: 0; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.25rem; }
.kpi-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kpi-label .icon { width: 0.9375rem; height: 0.9375rem; color: var(--gold); }
.kpi-value { font-size: 1.625rem; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-sub { font-size: 0.75rem; color: var(--muted); }
.is-bad-text { color: var(--danger); font-weight: 600; }

.mini-heading { margin: 1rem 0 0.375rem; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mini-rows { list-style: none; margin: 0; padding: 0; }
.mini-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.mini-rows li:last-child { border-bottom: 0; }
.mini-rows li.muted { display: block; font-size: 0.8125rem; }
.mini-rows .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); }
.mini-rows li.is-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.mini-rows li.is-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.mini-rows li.is-bad .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.mini-main { min-width: 0; }
.mini-main strong { display: block; font-size: 0.8125rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-main small { display: block; font-size: 0.6875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-value { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.mini-rows li.is-bad .mini-value { color: var(--danger); }
.mini-rows li.is-warn .mini-value { color: var(--warn); }

.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); color: var(--ink-soft); }
.chip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.chip small { color: var(--muted); }
.chip.is-ok { border-color: rgba(52, 211, 153, 0.35); color: var(--ok); }
.chip.is-bad { border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }
.chip-list li.muted { font-size: 0.8125rem; }

.wallet-row { padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.wallet-row:last-child { border-bottom: 0; }
.wallet-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.375rem; }
.wallet-head strong { font-size: 0.875rem; }
.wallet-head small { color: var(--muted); font-size: 0.75rem; }

@media (max-width: 80rem) {
    .dash-split-admin { grid-template-columns: minmax(0, 1fr); }
}

/* The admin has ~30 destinations: a denser rail so most fit without scrolling. */
.app-sidebar-admin .nav-links a { padding: 0.375rem 0.625rem; min-height: 2.0625rem; font-size: 0.875rem; }
.app-sidebar-admin .nav-group-label { margin-top: 0.625rem; }
.app-sidebar-admin .brand-lockup { padding-bottom: 0.5rem; }
.app-sidebar-admin .sidebar-foot { padding-top: 0.625rem; gap: 0.5rem; }
.app-sidebar-admin .account-chip { padding: 0.125rem 0.375rem; }

/* ======================================================================
   Admin console v2 (2026-10-19): top bar, a strict 12-column grid so every
   row lines up, verdict strip, KPI tiles with icon badges and period deltas,
   server-drawn charts, aligned tables, and a module directory.
   ====================================================================== */

/* Top bar */
.topbar {
    position: sticky; top: 0; z-index: 15;
    display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 22rem) auto; align-items: center; gap: 1.25rem;
    padding: 0.75rem 2.25rem; margin: 0;
    background: rgba(2, 13, 35, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
body.has-sidebar > .topbar { grid-area: main; align-self: start; width: 100%; max-width: 92rem; }
body.has-sidebar.is-admin { grid-template-areas: "side top" "side main" "side foot"; grid-template-rows: auto 1fr auto; }
body.has-sidebar.is-admin > .topbar { grid-area: top; }
body.has-sidebar.is-admin > main { padding-top: 1.5rem; }
.topbar-title { min-width: 0; }
.topbar-title .eyebrow { display: block; margin: 0; font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title strong { display: block; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search .icon { position: absolute; left: 0.875rem; width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; }
.topbar-search input { width: 100%; min-height: 2.625rem; padding: 0.5rem 0.875rem 0.5rem 2.5rem; font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line-strong); border-radius: 0.875rem; }
.topbar-search input::placeholder { color: #5E6C8A; }
.topbar-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.22); }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-bell { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; color: var(--ink-soft); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); text-decoration: none; }
.topbar-bell:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.topbar-count { position: absolute; top: -0.375rem; right: -0.375rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: #fff; background: var(--danger); border: 2px solid var(--bg); }
.topbar-clock { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topbar-user { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.topbar-user .account-meta { max-width: 16rem; }
.topbar-user .account-meta strong { max-width: 16rem; }
.topbar-user .account-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 12-column grid */
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.grid-12 > * { margin: 0; min-width: 0; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.dash-v2 { display: grid; gap: 1.25rem; }
.dash-v2 > .grid-12 { margin: 0; }
.card.is-link { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.card.is-link:hover { border-color: rgba(197, 168, 128, 0.45); transform: translateY(-1px); }
.card-head .card-title { color: var(--ink); text-decoration: none; }
.card-head .card-title:hover { color: var(--gold-soft); }
.card-head .card-link .icon { width: 0.875rem; height: 0.875rem; }
.card > .card-body { flex: 1; }
.card.flex { display: flex; flex-direction: column; }

/* Verdict strip */
.verdict { display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem 1.125rem; text-decoration: none; color: inherit; }
.verdict-top { display: flex; align-items: center; gap: 0.625rem; }
.verdict-icon { width: 2.125rem; height: 2.125rem; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--ink-soft); flex: none; }
.verdict-title { font-size: 0.8125rem; font-weight: 600; color: var(--ink); min-width: 0; line-height: 1.2; }
.verdict-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem; }
.verdict-state { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.verdict.is-ok .verdict-state { color: var(--ok); background: var(--ok-bg); }
.verdict.is-warn .verdict-state { color: var(--warn); background: var(--warn-bg); }
.verdict.is-bad .verdict-state { color: var(--danger); background: var(--danger-bg); }
.verdict.is-off .verdict-state { color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.verdict.is-ok .verdict-icon { color: var(--ok); } .verdict.is-warn .verdict-icon { color: var(--warn); } .verdict.is-bad .verdict-icon { color: var(--danger); }
.seg-bar { display: flex; gap: 0.1875rem; height: 0.375rem; min-width: 0; }
.seg-bar i { flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.seg-bar i.ok { background: var(--ok); } .seg-bar i.warn { background: var(--warn); } .seg-bar i.bad { background: var(--danger); } .seg-bar i.off { background: rgba(255, 255, 255, 0.12); }
.verdict-sub { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* KPI tiles */
.kpi-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: center; padding: 1rem 1.125rem; text-decoration: none; color: inherit; }
.kpi-badge { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.8); }
.kpi-badge .icon { width: 1.375rem; height: 1.375rem; }
.tone-gold .kpi-badge { background: linear-gradient(135deg, #D9B98C, #A98350); }
.tone-blue .kpi-badge { background: linear-gradient(135deg, #5B8DEF, #2E5090); }
.tone-green .kpi-badge { background: linear-gradient(135deg, #34D399, #0F8F65); }
.tone-red .kpi-badge { background: linear-gradient(135deg, #F87171, #B91C1C); }
.tone-purple .kpi-badge { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.tone-teal .kpi-badge { background: linear-gradient(135deg, #2DD4BF, #0F766E); }
.tone-orange .kpi-badge { background: linear-gradient(135deg, #FBBF24, #D97706); }
.tone-slate .kpi-badge { background: linear-gradient(135deg, #94A3B8, #475569); }
.kpi-tile .kpi-label { margin: 0 0 0.125rem; }
.kpi-tile .kpi-value { font-size: 1.5rem; }
.kpi-tile .kpi-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.125rem; }
.delta { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.4rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--ok); background: var(--ok-bg); } .delta.down { color: var(--danger); background: var(--danger-bg); } .delta.flat { color: var(--muted); background: rgba(255, 255, 255, 0.06); }

/* Charts drawn on the server as SVG */
.chart-wrap { position: relative; display: flex; flex-direction: column; }
.chart-wrap .chart-xy { flex: 1; min-height: 12rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: var(--muted); margin: 0 0 0.5rem; }
.chart-legend i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; margin-right: 0.375rem; vertical-align: -1px; }
.chart-legend .c-dep i { background: var(--gold); } .chart-legend .c-wd i { background: #7DA2E8; }
.chart-xy { display: block; width: 100%; height: auto; overflow: visible; }
.chart-xy .grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-xy .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart-xy .area-dep { fill: rgba(197, 168, 128, 0.18); } .chart-xy .line-dep { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-xy .area-wd { fill: rgba(125, 162, 232, 0.16); } .chart-xy .line-wd { fill: none; stroke: #7DA2E8; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-xy .dot { fill: var(--bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.chart-totals div span { display: block; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chart-totals div strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }

.donut-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.donut-row + .donut-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.donut { width: 6.5rem; height: 6.5rem; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 10; }
.donut .track { stroke: rgba(255, 255, 255, 0.07); }
.donut-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.375rem; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-soft); }
.legend li i { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; }
.legend li b { font-variant-numeric: tabular-nums; color: var(--ink); }
.legend li.muted { display: block; }
.c1 { background: var(--ok); stroke: var(--ok); } .c2 { background: #7DA2E8; stroke: #7DA2E8; } .c3 { background: var(--gold); stroke: var(--gold); } .c4 { background: var(--warn); stroke: var(--warn); } .c5 { background: var(--danger); stroke: var(--danger); } .c6 { background: #A78BFA; stroke: #A78BFA; } .c7 { background: #2DD4BF; stroke: #2DD4BF; } .c8 { background: #94A3B8; stroke: #94A3B8; }

/* Attention list */
.attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.attention a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.4375rem 0.75rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.attention a[href]:hover { border-color: rgba(197, 168, 128, 0.4); background: rgba(255, 255, 255, 0.045); }
.attention strong { display: block; font-size: 0.8125rem; color: var(--ink); }
.attention small { display: block; font-size: 0.6875rem; color: var(--muted); }
.attention b { min-width: 2rem; text-align: center; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.attention b.is-warn { background: var(--warn-bg); color: var(--warn); } .attention b.is-bad { background: var(--danger-bg); color: var(--danger); } .attention b.is-ok { background: var(--ok-bg); color: var(--ok); }

/* Compact tables inside cards: fixed, aligned */
.card .table-wrap { border: 0; border-radius: 0; margin: 0; background: transparent; box-shadow: none; }
.card table.compact, body.is-admin .card .table-wrap table.compact { min-width: 0; table-layout: auto; }
.card table.compact th, .card table.compact td { padding: 0.5625rem 0.625rem; font-size: 0.8125rem; vertical-align: middle; }
.card table.compact thead th, .card table.compact .num, .card table.compact tbody th { white-space: nowrap; }
.card table.compact .badge { white-space: nowrap; }
.card table.compact thead th { padding-top: 0; }
.card table.compact .badge { font-size: 0.6875rem; padding: 0.0625rem 0.45rem; }
.card table.compact td.num, .card table.compact th.num { text-align: right; }
.card table.compact code { font-size: 0.75rem; }
.table-empty { padding: 1.25rem 0.5rem; text-align: center; color: var(--muted); font-size: 0.8125rem; }

/* Rows with a status dot (drivers, nodes, audit) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; }
.rows .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); }
.rows li.is-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); } .rows li.is-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); } .rows li.is-bad .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.rows strong { display: block; font-size: 0.8125rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows small { display: block; font-size: 0.6875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .val { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.rows li.is-bad .val { color: var(--danger); } .rows li.is-warn .val { color: var(--warn); }

/* Module directory */
.modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.modules a { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); text-decoration: none; color: inherit; min-height: 5.5rem; }
.modules a:hover { border-color: rgba(197, 168, 128, 0.45); background: rgba(255, 255, 255, 0.045); }
.modules .icon { width: 1.125rem; height: 1.125rem; color: var(--gold); }
.modules strong { font-size: 0.8125rem; color: var(--ink); }
.modules small { font-size: 0.6875rem; color: var(--muted); line-height: 1.35; }

@media (max-width: 84rem) {
    .span-2 { grid-column: span 4; } .span-3 { grid-column: span 6; } .span-4 { grid-column: span 6; } .span-6 { grid-column: span 12; } .span-8 { grid-column: span 12; }
    .modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 64rem) {
    .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0.625rem 1.125rem; position: static; }
    .topbar-search { grid-column: 1 / -1; }
    .topbar-clock, .topbar-user .account-meta { display: none; }
    body.has-sidebar.is-admin { display: block; }
}
@media (max-width: 48rem) {
    .grid-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-2, .span-3, .span-4, .span-6, .span-8, .span-12 { grid-column: span 2; }
    .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}