/* ═══════════════════════════════════════════════════════════════
       Cheburnet panel — black-canvas design system
       (matches the marketing site: pure-black surfaces, white display
       type, a single blue reserved for links/focus, charcoal pills)
    ═══════════════════════════════════════════════════════════════ */
        :root {
            --canvas: #0a0a0b;
            --surface-1: #16161a;
            --surface-2: #1f1f24;
            --surface-3: #2a2a31;
            --hairline: #31313a;
            --hairline-soft: #26262d;
            /* elevation shadows tuned for near-black surfaces */
            --elev-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .02) inset;
            --elev-2: 0 2px 4px rgba(0, 0, 0, .45), 0 8px 24px -10px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .03) inset;
            --top-sheen: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 38%);
            --ink: #ffffff;
            --ink-muted: #999999;
            --ink-dim: #6b6b6b;
            --blue: #0099ff;
            --violet: #6a4cf5;
            --magenta: #d44df0;
            --grad: linear-gradient(135deg, #6a4cf5 0%, #d44df0 100%);
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --r-sm: 8px;
            --r: 12px;
            --r-lg: 16px;
            --r-xl: 20px;
            --r-pill: 100px;
            --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

            /* Type scale (modular, tuned for a dense bilingual ru/en panel) */
            --text-2xs: .6875rem;
            /* 11px — micro-labels, eyebrows */
            --text-xs: .75rem;
            /* 12px — captions, table meta */
            --text-sm: .8125rem;
            /* 13px — secondary text, controls */
            --text-base: .9375rem;
            /* 15px — body, inputs */
            --text-md: 1rem;
            /* 16px */
            --text-lg: 1.125rem;
            /* 18px — section titles */
            --leading-tight: 1.15;
            --leading-snug: 1.35;
            --leading-normal: 1.55;

            /* Form controls */
            --control-h: 2.625rem;
            /* 42px — default control height */
            --control-h-sm: 2.125rem;
            /* 34px — compact toolbar control height */
            --control-h-lg: 3rem;
            /* 48px — prominent single-field controls */
            --control-r: 10px;
            /* shared radius for ALL interactive controls (inputs + buttons) */
            --focus-ring: 0 0 0 3px rgba(0, 153, 255, .25);

            /* Bootstrap variable bridge */
            --bs-body-bg: #0a0a0b;
            --bs-body-color: #ffffff;
            --bs-border-color: #31313a;
            --bs-primary: #ffffff;
            --bs-link-color: #0099ff;
            --bs-link-hover-color: #0099ff;
        }

        /* Smooth cross-fade between page navigations (MPA View Transitions) */
        @view-transition {
            navigation: auto;
        }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: .26s;
        }

        /* Unobtrusive top progress bar shown while a navigation is in flight */
        #nav-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 2.5px;
            width: 0;
            z-index: 4000;
            background: var(--grad);
            box-shadow: 0 0 10px rgba(106, 76, 245, .6);
            opacity: 0;
            pointer-events: none;
            transition: width .2s ease, opacity .25s ease;
        }

        #nav-progress.loading {
            opacity: 1;
            width: 92%;
            transition: width 9s cubic-bezier(.1, .7, .25, 1);
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background: var(--canvas);
            color: var(--ink);
            min-height: 100vh;
            font-family: var(--font-body);
            font-size: var(--text-base);
            line-height: var(--leading-normal);
            letter-spacing: -.011em;
            font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1, "tnum" 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            /* native-app feel: no tap flash, no 300ms delay / double-tap zoom */
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        /* App chrome shouldn't be text-selectable (feels native, not webby) */
        .sidebar,
        .mobile-topbar,
        .mobile-drawer,
        .mobile-bottom-nav,
        .segmented,
        .btn,
        .nav-link {
            -webkit-user-select: none;
            user-select: none;
        }

        @media (max-width: 768px) {

            /* keep overscroll from chaining to the page background */
            html,
            body {
                overscroll-behavior-y: contain;
            }
        }

        /* Installed PWA: disable the pull-to-refresh / rubber-band bounce */
        html.pwa-standalone,
        html.pwa-standalone body {
            overscroll-behavior-y: none;
        }

        h1,
        h2,
        .h1,
        .h2,
        .display-1,
        .display-2,
        .display-3,
        .display-4,
        .display-5,
        .display-6 {
            font-family: var(--font-display);
            letter-spacing: -.022em;
            line-height: var(--leading-tight);
            font-weight: 700;
        }

        h3,
        h4,
        h5,
        h6,
        .h3,
        .h4,
        .h5,
        .h6 {
            font-family: var(--font-display);
            letter-spacing: -.015em;
            line-height: var(--leading-snug);
            font-weight: 600;
        }

        /* Numerals: tabular by default inside data surfaces for clean column alignment */
        .table,
        .stat-card,
        .acct-sub,
        code,
        kbd {
            font-feature-settings: "tnum" 1;
        }

        /* Unified page title — display face, used in every page header */
        .page-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.625rem;
            line-height: var(--leading-tight);
            letter-spacing: -.025em;
            color: var(--ink);
            margin: 0;
        }

        /* Page header scaffold (replaces ad-hoc d-flex + inline-styled subtitle) */
        .page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1.75rem;
        }

        .page-subtitle {
            color: var(--ink-muted);
            font-size: var(--text-sm);
            line-height: var(--leading-snug);
            margin: .25rem 0 0;
        }

        .page-actions {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex-wrap: wrap;
        }

        /* Eyebrow / section label — uppercase micro-heading */
        .eyebrow {
            font-size: var(--text-2xs);
            letter-spacing: .12em;
            text-transform: uppercase;
            font-weight: 600;
            color: var(--ink-dim);
        }

        /* Type-scale text utilities (use instead of inline font-size) */
        .text-2xs {
            font-size: var(--text-2xs) !important;
        }

        .text-xs {
            font-size: var(--text-xs) !important;
        }

        .text-sm {
            font-size: var(--text-sm) !important;
        }

        .text-md {
            font-size: var(--text-md) !important;
        }

        .text-lg {
            font-size: var(--text-lg) !important;
        }

        /* Mobile: in-page header reads like a native app screen header —
           title + subtitle stacked above a full-width action row, with a thin
           divider beneath. Buttons grow to fill the row for big tap targets. */
        @media (max-width: 768px) {
            .page-header {
                flex-direction: column;
                align-items: stretch;
                gap: .75rem;
                margin-bottom: 1.25rem;
                padding-bottom: .85rem;
                border-bottom: 1px solid var(--hairline-soft);
            }

            .page-actions {
                width: 100%;
            }

            .page-actions>.btn,
            .page-actions>form,
            .page-actions>.btn-group {
                flex: 1 1 0;
            }

            .page-actions>form>.btn {
                width: 100%;
            }
        }

        @media (max-width: 576px) {
            .page-title {
                font-size: 1.35rem;
            }
        }

        a {
            color: var(--blue);
            text-decoration: none;
        }

        a:hover {
            color: var(--blue);
            opacity: .82;
        }

        ::selection {
            background: rgba(0, 153, 255, .28);
            color: #fff;
        }

        ::-webkit-scrollbar {
            width: 9px;
            height: 9px;
        }

        ::-webkit-scrollbar-track {
            background: var(--canvas);
        }

        ::-webkit-scrollbar-thumb {
            background: #2a2a2a;
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #3a3a3a;
        }

        .app-shell {
            display: flex;
            min-height: 100vh;
        }

        /* ── Sidebar ─────────────────────────────────────────────────────── */
        .sidebar {
            width: 244px;
            flex-shrink: 0;
            background: #0e0e11;
            color: var(--ink-muted);
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            border-right: 1px solid var(--hairline-soft);
        }

        .sidebar .brand {
            color: var(--ink);
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: -.03em;
            font-size: 1.1rem;
            padding: 1.3rem 1.25rem 1rem;
            border-bottom: 1px solid var(--hairline-soft);
            display: flex;
            align-items: center;
            gap: .55rem;
            flex-shrink: 0;
        }

        /* Brand wordmark logo (white SVG on dark surfaces) */
        .brand-wordmark {
            height: 22px;
            width: auto;
            display: block;
        }

        .sidebar .brand .brand-wordmark {
            height: 38px;
        }

        .mobile-topbar .brand-mob .brand-wordmark {
            height: 20px;
        }

        .mobile-drawer .drawer-brand .brand-wordmark {
            height: 22px;
        }

        .sidebar .nav-link {
            color: var(--ink-muted);
            border-radius: 10px;
            margin: 2px 10px;
            padding: .5rem .85rem;
            font-size: .875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: .65rem;
            transition: background .15s, color .15s;
        }

        .sidebar .nav-link i {
            font-size: 1rem;
            width: 1.1rem;
            text-align: center;
            opacity: .85;
        }

        .sidebar .nav-link:hover {
            background: var(--surface-1);
            color: var(--ink);
        }

        .sidebar .nav-link.active {
            background: var(--surface-2);
            color: var(--ink);
        }

        .nav-badge {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.25rem;
            height: 1.25rem;
            padding: 0 .35rem;
            border-radius: var(--r-pill);
            background: var(--violet);
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            line-height: 1;
        }

        .sidebar .nav-section {
            font-size: .67rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--ink-dim);
            padding: 1rem 1.4rem .35rem;
            font-weight: 600;
        }

        .sidebar a {
            color: var(--ink-muted);
        }

        .sidebar a:hover {
            color: var(--ink);
            opacity: 1;
        }

        .main-content {
            flex: 1;
            min-width: 0;
            padding: 2rem;
            overflow-x: hidden;
            /* cap the readable width on wide screens; centre in the remaining space */
            max-width: 1440px;
            margin-inline: auto;
            width: 100%;
        }

        /* ── text-muted ──────────────────────────────────────────────────── */
        .text-muted,
        .text-secondary {
            color: var(--ink-muted) !important;
        }

        /* ── Cards / surfaces ────────────────────────────────────────────── */
        .card {
            background-color: var(--surface-1);
            background-image: var(--top-sheen);
            border: 1px solid var(--hairline-soft);
            border-radius: var(--r-lg);
            box-shadow: var(--elev-1);
            color: var(--ink);
            /* Clip flush content (card-header backgrounds, edge-to-edge tables,
               list-group-flush) to the rounded corners so nothing pokes past
               the border-radius. No card-contained dropdowns rely on overflow. */
            overflow: hidden;
        }

        .card:hover {
            box-shadow: var(--elev-2);
        }

        /* ── Synthwave glow ──────────────────────────────────────────────
           A very faint radial bloom along the top edge of a widget — synthwave
           "neon haze", deliberately barely-there, to lift cards off the near-
           black canvas. Implemented as a ::before layer so it works on ANY
           surface (Bootstrap .card, custom .dash-card, etc.) regardless of how
           that surface paints its own background. Add `.glow` (default blue) or
           a hue modifier `.glow-{blue|violet|magenta|green|amber|cyan}` to any
           card. Per-hue modifiers let a widget row read as a soft multi-colour
           gradient. Project-wide rule: prefer glow widgets for stat/KPI cards. */
        .glow,
        .glow-blue,
        .glow-violet,
        .glow-magenta,
        .glow-green,
        .glow-amber,
        .glow-cyan {
            position: relative;
            --glow-c: rgba(0, 153, 255, .10);
        }
        .glow::before,
        .glow-blue::before,
        .glow-violet::before,
        .glow-magenta::before,
        .glow-green::before,
        .glow-amber::before,
        .glow-cyan::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 62%;
            border-radius: inherit;
            background: radial-gradient(120% 80% at 50% -12%, var(--glow-c), transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        /* Keep card content above the glow layer */
        .glow > *,
        .glow-blue > *,
        .glow-violet > *,
        .glow-magenta > *,
        .glow-green > *,
        .glow-amber > *,
        .glow-cyan > * {
            position: relative;
            z-index: 1;
        }
        .glow-violet  { --glow-c: rgba(106, 76, 245, .12); }
        .glow-magenta { --glow-c: rgba(212, 77, 240, .11); }
        .glow-green   { --glow-c: rgba(34, 197, 94, .10); }
        .glow-amber   { --glow-c: rgba(245, 158, 11, .10); }
        .glow-cyan    { --glow-c: rgba(34, 211, 238, .10); }

        .card-header,
        .card-footer {
            background: transparent;
            border-color: var(--hairline-soft);
        }

        .stat-card .display-6 {
            font-weight: 600;
        }

        .bg-white,
        .bg-light {
            background: var(--surface-1) !important;
            color: var(--ink) !important;
        }

        .border {
            border-color: var(--hairline) !important;
        }

        .border-top,
        .border-bottom,
        .border-start,
        .border-end {
            border-color: var(--hairline) !important;
        }

        hr {
            border-color: var(--hairline);
            opacity: 1;
        }

        /* ── Buttons (pill vocabulary) ───────────────────────────────────── */
        /* Buttons share the control radius + height with inputs so a button and a
           field on the same row read as one coherent system (soft-rect, not pill). */
        .btn {
            --bs-btn-padding-x: 1.1rem;
            --bs-btn-padding-y: .5rem;
            border-radius: var(--control-r);
            min-height: var(--control-h);
            font-weight: 500;
            font-size: var(--text-base);
            letter-spacing: -.012em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            vertical-align: middle;
        }

        /* Uniform icon spacing — gap owns it, so legacy me-*/ms-* on button icons is neutralised */
        .btn>.bi,
        .btn>i {
            margin-left: 0 !important;
            margin-right: 0 !important;
            line-height: 1;
        }

        .btn-primary {
            background: #ffffff;
            border-color: #ffffff;
            color: #000000;
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background: #ececec;
            border-color: #ececec;
            color: #000;
        }

        /* Keep the white primary white when disabled (Bootstrap reverts it to blue) */
        .btn-primary:disabled,
        .btn-primary.disabled {
            background: #ffffff;
            border-color: #ffffff;
            color: #000000;
        }

        .btn-secondary,
        .btn-outline-secondary,
        .btn-light,
        .btn-outline-light {
            background: var(--surface-2);
            border-color: var(--hairline);
            color: var(--ink);
        }

        .btn-secondary:hover,
        .btn-outline-secondary:hover,
        .btn-light:hover,
        .btn-outline-light:hover {
            background: var(--surface-3);
            border-color: rgba(255, 255, 255, .18);
            color: var(--ink);
        }

        .btn-outline-primary {
            background: var(--surface-2);
            border-color: var(--hairline);
            color: var(--ink);
        }

        .btn-outline-primary:hover,
        .btn-outline-primary.active {
            background: #fff;
            border-color: #fff;
            color: #000;
        }

        .btn-danger {
            background: var(--danger);
            border-color: var(--danger);
            color: #fff;
        }

        .btn-danger:hover {
            background: #f87171;
            border-color: #f87171;
        }

        .btn-success {
            background: var(--success);
            border-color: var(--success);
            color: #04210f;
        }

        .btn-success:hover {
            background: #16a34a;
            border-color: #16a34a;
            color: #fff;
        }

        .btn-warning {
            background: var(--warning);
            border-color: var(--warning);
            color: #1a1205;
        }

        .btn-warning:hover {
            background: #fbbf24;
            border-color: #fbbf24;
            color: #1a1205;
        }

        .btn-link {
            color: var(--blue);
        }

        /* Outline variants — subtle charcoal at rest, semantic colour on hover.
       Keeps dense admin-table action buttons calm and cohesive. */
        .btn-outline-danger,
        .btn-outline-warning,
        .btn-outline-success,
        .btn-outline-info {
            background: var(--surface-2);
            border-color: var(--hairline);
        }

        .btn-outline-danger {
            color: #f87171;
        }

        .btn-outline-warning {
            color: #fbbf24;
        }

        .btn-outline-success {
            color: #4ade80;
        }

        .btn-outline-info {
            color: #38bdf8;
        }

        .btn-outline-danger:hover {
            background: rgba(239, 68, 68, .16);
            border-color: rgba(239, 68, 68, .5);
            color: #fca5a5;
        }

        .btn-outline-warning:hover {
            background: rgba(245, 158, 11, .16);
            border-color: rgba(245, 158, 11, .5);
            color: #fcd34d;
        }

        .btn-outline-success:hover {
            background: rgba(34, 197, 94, .16);
            border-color: rgba(34, 197, 94, .5);
            color: #86efac;
        }

        .btn-outline-info:hover {
            background: rgba(0, 153, 255, .16);
            border-color: rgba(0, 153, 255, .5);
            color: #7dd3fc;
        }

        /* Compact buttons — height matches .form-control-sm for clean toolbar rows */
        .btn-sm {
            --bs-btn-padding-x: .8rem;
            --bs-btn-padding-y: .35rem;
            min-height: var(--control-h-sm);
            font-size: var(--text-sm);
            gap: .35rem;
        }

        /* Large buttons — match .form-control-lg */
        .btn-lg {
            --bs-btn-padding-x: 1.4rem;
            --bs-btn-padding-y: .7rem;
            min-height: var(--control-h-lg);
            font-size: var(--text-md);
        }

        /* Icon-only buttons stay square-ish (equal padding) */
        .btn-icon {
            padding-left: 0;
            padding-right: 0;
            width: var(--control-h);
            gap: 0;
        }

        .btn-icon.btn-sm {
            width: var(--control-h-sm);
        }

        /* ── Forms ───────────────────────────────────────────────────────── */
        .form-control,
        .form-select {
            background: var(--surface-1);
            border: 1px solid var(--hairline);
            color: var(--ink);
            border-radius: var(--control-r);
            min-height: var(--control-h);
            padding: .55rem .8rem;
            font-size: var(--text-base);
            line-height: 1.4;
        }

        textarea.form-control {
            min-height: 6.5rem;
            line-height: var(--leading-snug);
            resize: vertical;
        }

        /* Resting hover — a touch brighter hairline signals interactivity */
        .form-control:hover:not(:focus):not(:disabled):not([readonly]),
        .form-select:hover:not(:focus):not(:disabled) {
            border-color: rgba(255, 255, 255, .2);
        }

        .form-control:focus,
        .form-select:focus {
            background: var(--surface-1);
            border-color: var(--blue);
            color: var(--ink);
            box-shadow: var(--focus-ring);
        }

        .form-control::placeholder {
            color: var(--ink-dim);
        }

        .form-control:disabled,
        .form-control[readonly],
        .form-select:disabled {
            background: var(--surface-2);
            color: var(--ink-muted);
            cursor: not-allowed;
            opacity: 1;
        }

        /* Custom chevron tuned to the palette (replaces Bootstrap's default) */
        .form-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23999999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right .8rem center;
            background-size: 16px 16px;
            padding-right: 2.5rem;
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .form-select:focus {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230099ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
        }

        .form-select option {
            background: var(--surface-1);
            color: var(--ink);
        }

        /* Compact controls (toolbars, filter bars, dense tables) */
        .form-control-sm,
        .form-select-sm {
            min-height: var(--control-h-sm);
            padding: .38rem .7rem;
            font-size: var(--text-sm);
            border-radius: var(--control-r);
        }

        .form-select-sm {
            padding-right: 2.1rem;
            background-position: right .6rem center;
            background-size: 14px 14px;
        }

        /* Large controls (prominent single-field forms) */
        .form-control-lg,
        .form-select-lg {
            min-height: var(--control-h-lg);
            padding: .7rem 1rem;
            font-size: var(--text-md);
            border-radius: var(--control-r);
        }

        .input-group-text {
            background: var(--surface-2);
            border-color: var(--hairline);
            color: var(--ink-muted);
            font-size: var(--text-sm);
        }

        .form-label {
            color: var(--ink);
            font-weight: 500;
            font-size: var(--text-sm);
            letter-spacing: -.006em;
            margin-bottom: .4rem;
        }

        .col-form-label {
            color: var(--ink);
            font-weight: 500;
        }

        .form-text {
            color: var(--ink-muted);
            font-size: var(--text-xs);
            line-height: var(--leading-snug);
        }

        /* Checkbox & radio */
        .form-check-input {
            background-color: var(--surface-2);
            border: 1px solid var(--hairline);
            cursor: pointer;
        }

        .form-check-input:checked {
            background-color: var(--blue);
            border-color: var(--blue);
        }

        .form-check-input:focus {
            border-color: var(--blue);
            box-shadow: var(--focus-ring);
        }

        .form-check-label {
            color: var(--ink);
            cursor: pointer;
        }

        /* Switch — slightly larger track for a confident tap target */
        .form-switch .form-check-input {
            width: 2.35em;
            height: 1.3em;
            margin-top: .12em;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='6' cx='8' cy='8' fill='%23999999'/%3E%3C/svg%3E");
        }

        .form-switch .form-check-input:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='6' cx='8' cy='8' fill='%23ffffff'/%3E%3C/svg%3E");
        }

        /* Search field — leading icon affordance (use .search-field wrapper) */
        .search-field {
            position: relative;
            display: inline-block;
        }

        .search-field>.bi {
            position: absolute;
            left: .85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ink-dim);
            font-size: .95rem;
            pointer-events: none;
        }

        .search-field .form-control {
            padding-left: 2.4rem;
        }

        .search-field .form-control-sm {
            padding-left: 2.1rem;
        }

        /* ── Tables ──────────────────────────────────────────────────────── */
        .table {
            --bs-table-bg: transparent;
            --bs-table-color: var(--ink);
            --bs-table-border-color: var(--hairline-soft);
            --bs-table-striped-bg: rgba(255, 255, 255, .022);
            --bs-table-striped-color: var(--ink);
            --bs-table-hover-bg: rgba(255, 255, 255, .04);
            --bs-table-hover-color: var(--ink);
            color: var(--ink);
            /* unified table body type: 13px primary, with .text-xs (12px) for meta */
            font-size: var(--text-sm);
        }

        .table>tbody>tr>td {
            vertical-align: middle;
        }

        .table>thead th {
            color: var(--ink-muted);
            font-size: .72rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            font-weight: 600;
            border-bottom: 1px solid var(--hairline);
        }

        .table> :not(caption)>*>* {
            border-bottom-color: var(--hairline-soft);
        }

        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* ── Badges (semantic, soft-tint) ────────────────────────────────── */
        .badge {
            font-weight: 600;
            letter-spacing: -.01em;
        }

        .badge.bg-primary,
        .text-bg-primary {
            background: var(--surface-3) !important;
            color: var(--ink) !important;
        }

        .badge.bg-secondary,
        .text-bg-secondary {
            background: var(--surface-2) !important;
            color: var(--ink-muted) !important;
        }

        .badge.bg-success,
        .text-bg-success {
            background: rgba(34, 197, 94, .16) !important;
            color: #4ade80 !important;
        }

        .badge.bg-danger,
        .text-bg-danger {
            background: rgba(239, 68, 68, .16) !important;
            color: #f87171 !important;
        }

        .badge.bg-warning,
        .text-bg-warning {
            background: rgba(245, 158, 11, .16) !important;
            color: #fbbf24 !important;
        }

        .badge.bg-info,
        .text-bg-info {
            background: rgba(0, 153, 255, .16) !important;
            color: #38bdf8 !important;
        }

        .badge.bg-light,
        .text-bg-light {
            background: var(--surface-2) !important;
            color: var(--ink) !important;
        }

        .badge.bg-dark,
        .text-bg-dark {
            background: var(--surface-2) !important;
            color: var(--ink) !important;
        }

        .badge-status-active {
            background: rgba(34, 197, 94, .16);
            color: #4ade80;
        }

        .badge-status-expired {
            background: rgba(239, 68, 68, .16);
            color: #f87171;
        }

        .badge-status-pending {
            background: rgba(245, 158, 11, .16);
            color: #fbbf24;
        }

        .badge-status-approved {
            background: rgba(0, 153, 255, .16);
            color: #38bdf8;
        }

        .badge-status-paid {
            background: rgba(34, 197, 94, .16);
            color: #4ade80;
        }

        .badge-status-rejected {
            background: rgba(239, 68, 68, .16);
            color: #f87171;
        }

        .badge-status-succeeded {
            background: rgba(34, 197, 94, .16);
            color: #4ade80;
        }

        .badge-status-failed {
            background: rgba(239, 68, 68, .16);
            color: #f87171;
        }

        .badge-status-canceled {
            background: var(--surface-2);
            color: var(--ink-muted);
        }

        /* ── Alerts ──────────────────────────────────────────────────────── */
        .alert {
            border-radius: var(--r);
            border-width: 1px;
        }

        .alert-info {
            background: rgba(0, 153, 255, .08);
            border-color: rgba(0, 153, 255, .28);
            color: #7dd3fc;
        }

        .alert-success {
            background: rgba(34, 197, 94, .08);
            border-color: rgba(34, 197, 94, .28);
            color: #86efac;
        }

        .alert-warning {
            background: rgba(245, 158, 11, .08);
            border-color: rgba(245, 158, 11, .28);
            color: #fcd34d;
        }

        .alert-danger {
            background: rgba(239, 68, 68, .08);
            border-color: rgba(239, 68, 68, .28);
            color: #fca5a5;
        }

        .alert-secondary,
        .alert-primary,
        .alert-light,
        .alert-dark {
            background: var(--surface-1);
            border-color: var(--hairline);
            color: var(--ink);
        }

        /* ── Modals / dropdowns / list groups / accordion ────────────────── */
        .modal-content {
            background: var(--surface-1);
            border: 1px solid var(--hairline);
            border-radius: var(--r-xl);
        }

        .modal-content {
            max-height: calc(100dvh - max(1.5rem, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom))));
            overflow: hidden;
        }

        .modal-body {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .modal-header,
        .modal-footer {
            border-color: var(--hairline-soft);
        }

        .btn-close {
            filter: invert(1) grayscale(1);
            opacity: .6;
        }

        .btn-close:hover {
            opacity: 1;
        }

        @media (max-width: 576px) {
            .modal {
                --bs-modal-margin: .75rem;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .modal-dialog {
                width: auto;
                margin: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
            }

            .modal-dialog-centered {
                min-height: calc(100dvh - max(1.5rem, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom))));
            }

            .modal-content {
                border-radius: 16px;
            }
        }

        .dropdown-menu {
            background: var(--surface-1);
            border: 1px solid var(--hairline);
            border-radius: var(--r);
            --bs-dropdown-link-color: var(--ink-muted);
            --bs-dropdown-link-hover-bg: var(--surface-2);
            --bs-dropdown-link-hover-color: var(--ink);
        }

        .list-group {
            --bs-list-group-bg: var(--surface-1);
            --bs-list-group-border-color: var(--hairline-soft);
            --bs-list-group-color: var(--ink);
        }

        .list-group-item {
            background: var(--surface-1);
            border-color: var(--hairline-soft);
            color: var(--ink);
        }

        .accordion {
            --bs-accordion-bg: var(--surface-1);
            --bs-accordion-color: var(--ink);
            --bs-accordion-border-color: var(--hairline);
            --bs-accordion-active-bg: var(--surface-2);
            --bs-accordion-active-color: var(--ink);
            --bs-accordion-btn-color: var(--ink);
            --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(0, 153, 255, .18);
        }

        .nav-tabs {
            border-bottom-color: var(--hairline);
        }

        .nav-tabs .nav-link {
            color: var(--ink-muted);
            border: none;
        }

        .nav-tabs .nav-link.active {
            color: var(--ink);
            background: transparent;
            border-bottom: 2px solid var(--ink);
        }

        .nav-pills .nav-link {
            color: var(--ink-muted);
            border-radius: var(--r-pill);
        }

        .nav-pills .nav-link.active {
            background: #fff;
            color: #000;
        }

        .progress {
            background: var(--surface-2);
            border-radius: var(--r-pill);
        }

        .page-link {
            background: var(--surface-1);
            border-color: var(--hairline);
            color: var(--ink-muted);
        }

        .page-item.active .page-link {
            background: #fff;
            border-color: #fff;
            color: #000;
        }

        .text-primary {
            color: var(--ink) !important;
        }

        .text-dark,
        .text-black {
            color: var(--ink) !important;
        }

        .text-success {
            color: #4ade80 !important;
        }

        .text-danger {
            color: #f87171 !important;
        }

        .text-warning {
            color: #fbbf24 !important;
        }

        .text-info {
            color: #38bdf8 !important;
        }

        .bg-primary {
            background: var(--grad) !important;
        }

        .bg-success {
            background: rgba(34, 197, 94, .16) !important;
        }

        .bg-danger {
            background: rgba(239, 68, 68, .16) !important;
        }

        .bg-warning {
            background: rgba(245, 158, 11, .16) !important;
        }

        .bg-info {
            background: rgba(0, 153, 255, .16) !important;
        }

        /* Soft-tint icon chips: `bg-X bg-opacity-10` (opacity is ignored on the
       gradient, so give the primary chip an explicit violet tint) */
        .bg-primary.bg-opacity-10,
        .bg-primary.bg-opacity-25 {
            background: rgba(106, 76, 245, .18) !important;
        }

        .bg-secondary.bg-opacity-10,
        .bg-secondary.bg-opacity-25 {
            background: rgba(255, 255, 255, .06) !important;
        }

        .table-light,
        .table-light>th,
        .table-light>td,
        .table>thead.table-light th,
        .thead-light th {
            --bs-table-bg: var(--surface-2);
            --bs-table-color: var(--ink);
            background-color: var(--surface-2) !important;
            color: var(--ink-muted) !important;
            border-color: var(--hairline) !important;
        }

        .copy-btn {
            cursor: pointer;
        }

        /* ── Toolbars & filter bars ──────────────────────────────────────── */
        /* Inline cluster of controls (search + selects + buttons) */
        .toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .6rem;
        }

        .toolbar .form-control,
        .toolbar .form-select {
            width: auto;
        }

        /* A card-surfaced toolbar that sits above a table/list */
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .6rem;
            padding: .85rem;
            background-color: var(--surface-1);
            background-image: var(--top-sheen);
            border: 1px solid var(--hairline-soft);
            border-radius: var(--r-lg);
            box-shadow: var(--elev-1);
            margin-bottom: 1.5rem;
        }

        .filter-bar .toolbar {
            flex: 1 1 auto;
        }

        /* ── Segmented control (status / view filters) ───────────────────── */
        .segmented {
            display: inline-flex;
            align-items: center;
            gap: .2rem;
            padding: .25rem;
            background: var(--surface-2);
            border: 1px solid var(--hairline-soft);
            border-radius: var(--r-pill);
        }

        .segmented .seg {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .35rem .85rem;
            border-radius: var(--r-pill);
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--ink-muted);
            text-decoration: none;
            white-space: nowrap;
            transition: background-color .15s ease, color .15s ease;
        }

        .segmented .seg:hover {
            color: var(--ink);
        }

        .segmented .seg.active {
            background: var(--surface-3);
            color: var(--ink);
            box-shadow: var(--elev-1);
        }

        .segmented .seg .seg-count {
            font-size: var(--text-2xs);
            font-weight: 700;
            color: var(--ink-dim);
            font-feature-settings: "tnum" 1;
        }

        .segmented .seg.active .seg-count {
            color: var(--ink-muted);
        }

        /* ── Mobile top-bar ─────────────────────────────────────────────── */
        .mobile-topbar {
            display: none;
            position: sticky;
            top: 0;
            z-index: 1040;
            background: rgba(14, 14, 17, .72);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            padding: .7rem 1rem;
            /* sit clear of the dynamic island / notch */
            padding-top: calc(.7rem + env(safe-area-inset-top));
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
        }

        /* Burger left, logo centred: brand grows + centres between two equal-width ends */
        .mobile-topbar .brand-mob {
            color: var(--ink);
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: -.03em;
            font-size: .98rem;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            text-decoration: none;
        }

        .mobile-topbar .btn-mob-menu,
        .mobile-topbar .topbar-spacer {
            width: 2.4rem;
            flex: none;
        }

        .mobile-topbar .btn-mob-menu {
            background: none;
            border: none;
            color: var(--ink);
            font-size: 1.4rem;
            padding: .25rem;
            border-radius: 8px;
            cursor: pointer;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* ── Mobile drawer ─────────────────────────────────────────────── */
        .mobile-drawer-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .65);
            z-index: 1050;
        }

        /* Opens from the LEFT to match the top-left burger button (classic) */
        .mobile-drawer {
            position: fixed;
            top: 0;
            left: -320px;
            width: 300px;
            max-width: 86vw;
            height: 100%;
            background: rgba(16, 16, 20, .82);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            z-index: 1060;
            display: flex;
            flex-direction: column;
            transition: left .28s cubic-bezier(.22, 1, .36, 1);
            overflow-y: auto;
            border-right: 1px solid rgba(255, 255, 255, .08);
            padding-top: env(safe-area-inset-top);
        }

        .mobile-drawer.open {
            left: 0;
        }

        .mobile-drawer .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.1rem .75rem;
            border-bottom: 1px solid var(--hairline-soft);
        }

        .mobile-drawer .drawer-brand {
            color: var(--ink);
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: -.03em;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: .45rem;
        }

        .mobile-drawer .drawer-close {
            background: none;
            border: none;
            color: var(--ink-muted);
            font-size: 1.3rem;
            cursor: pointer;
            padding: 0 .2rem;
        }

        .mobile-drawer .nav-link {
            color: var(--ink-muted);
            border-radius: 10px;
            margin: 2px 10px;
            padding: .55rem .9rem;
            font-size: .9rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: .65rem;
            transition: background .15s, color .15s;
            text-decoration: none;
        }

        .mobile-drawer .nav-link i {
            width: 1.1rem;
            text-align: center;
            opacity: .85;
        }

        .mobile-drawer .nav-link:hover {
            background: var(--surface-1);
            color: var(--ink);
        }

        .mobile-drawer .nav-link.active {
            background: var(--surface-2);
            color: var(--ink);
        }

        .mobile-drawer .nav-section {
            font-size: .67rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--ink-dim);
            padding: 1rem 1.4rem .35rem;
            font-weight: 600;
        }

        .mobile-drawer .drawer-footer {
            border-top: 1px solid var(--hairline-soft);
            padding: .75rem 1rem;
            margin-top: auto;
        }

        /* ── Shared account footer (sidebar + mobile drawer) ─────────────── */
        .acct-footer {
            border-top: 1px solid var(--hairline-soft);
            padding: .6rem;
            flex-shrink: 0;
        }

        .mobile-drawer .acct-footer {
            margin-top: auto;
        }

        .acct-user {
            display: flex;
            align-items: center;
            gap: .6rem;
            padding: .45rem .55rem;
            border-radius: 10px;
        }

        .acct-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #6a4cf5 0%, #d44df0 100%);
        }

        .acct-meta {
            min-width: 0;
            line-height: 1.25;
        }

        .acct-name {
            color: var(--ink);
            font-weight: 600;
            font-size: .85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .acct-sub {
            color: var(--ink-muted);
            font-size: .75rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .acct-logout {
            display: flex;
            align-items: center;
            gap: .6rem;
            margin-top: .15rem;
            padding: .5rem .55rem;
            border-radius: 10px;
            color: #ef4444;
            font-size: .875rem;
            font-weight: 500;
            text-decoration: none;
            transition: background .15s, color .15s;
        }

        .acct-logout:hover {
            background: rgba(239, 68, 68, .12);
            color: #ef4444;
        }

        .acct-logout i {
            width: 1.1rem;
            text-align: center;
            font-size: 1rem;
        }

        .mobile-drawer a {
            color: var(--ink-muted);
        }

        .mobile-drawer a:hover {
            color: var(--ink);
            opacity: 1;
        }

        /* ── Bottom nav bar (mobile) ────────────────────────────────────── */
        /* Floating "liquid glass" dock — detached from the edges, rounded, blurred */
        .mobile-bottom-nav {
            display: none;
            position: fixed;
            bottom: calc(.55rem + env(safe-area-inset-bottom));
            left: .75rem;
            right: .75rem;
            z-index: 1040;
            background: rgba(20, 20, 26, .62);
            backdrop-filter: blur(26px) saturate(190%);
            -webkit-backdrop-filter: blur(26px) saturate(190%);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--r-xl);
            box-shadow: 0 10px 34px -10px rgba(0, 0, 0, .7),
                inset 0 1px 0 rgba(255, 255, 255, .1);
            padding: .35rem .25rem;
        }

        .mobile-bottom-nav .nav-items {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .mobile-bottom-nav .nav-item-mob {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .15rem;
            color: var(--ink-dim);
            text-decoration: none;
            font-size: .65rem;
            font-weight: 500;
            padding: .3rem .5rem;
            border-radius: 10px;
            transition: color .15s;
            min-width: 52px;
            text-align: center;
        }

        .mobile-bottom-nav .nav-item-mob i {
            font-size: 1.2rem;
        }

        .mobile-bottom-nav .nav-item-mob:hover {
            color: var(--ink);
        }

        .mobile-bottom-nav .nav-item-mob.active {
            color: var(--ink);
            background: rgba(255, 255, 255, .08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
        }

        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }

            .main-content {
                padding: .75rem .5rem;
                /* clear the floating dock + home indicator */
                padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
            }

            .mobile-topbar {
                display: flex;
            }

            .mobile-bottom-nav {
                display: block;
            }
        }

        /* ═══════════════════════════════════════════════════════════════
       Motion, interaction & polish
    ═══════════════════════════════════════════════════════════════ */
        html {
            scroll-behavior: smooth;
        }

        /* Consistent, smooth interaction transitions everywhere */
        .btn {
            transition: transform .14s cubic-bezier(.34, 1.56, .64, 1),
                background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, color .18s ease, opacity .18s ease;
        }

        .btn:active {
            transform: scale(.96);
        }

        .card {
            transition: transform .22s cubic-bezier(.22, 1, .36, 1),
                border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
        }

        .form-control,
        .form-select {
            transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
        }

        .badge {
            transition: background-color .16s ease, color .16s ease;
        }

        .table tbody tr {
            transition: background-color .14s ease;
        }

        .sidebar .nav-link,
        .mobile-drawer .nav-link,
        .mobile-bottom-nav .nav-item-mob {
            transition: background-color .16s ease, color .16s ease, transform .16s ease;
        }

        .dropdown-item {
            transition: background-color .14s ease, color .14s ease;
        }

        /* Active sidebar item — accent bar + lift */
        .sidebar .nav-link.active,
        .mobile-drawer .nav-link.active {
            position: relative;
        }

        .sidebar .nav-link.active::before,
        .mobile-drawer .nav-link.active::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 62%;
            border-radius: 0 3px 3px 0;
            background: var(--grad);
        }

        .sidebar .nav-link:not(.active):hover {
            transform: translateX(2px);
        }

        /* Accessible focus ring */
        .btn:focus-visible,
        .form-control:focus-visible,
        .form-select:focus-visible,
        a:focus-visible,
        .nav-link:focus-visible,
        .form-check-input:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 153, 255, .35);
        }

        @media (prefers-reduced-motion: no-preference) {

            /* Card hover lift (generic Bootstrap cards) */
            .card:hover {
                border-color: var(--hairline);
            }

            /* Staggered page-entrance for the main content blocks */
            @keyframes panelRise {
                from {
                    opacity: 0;
                    transform: translateY(12px);
                }

                to {
                    opacity: 1;
                    transform: none;
                }
            }

            .main-content>* {
                animation: panelRise .5s cubic-bezier(.22, 1, .36, 1) both;
            }

            .main-content>*:nth-child(1) {
                animation-delay: .02s;
            }

            .main-content>*:nth-child(2) {
                animation-delay: .07s;
            }

            .main-content>*:nth-child(3) {
                animation-delay: .12s;
            }

            .main-content>*:nth-child(4) {
                animation-delay: .17s;
            }

            .main-content>*:nth-child(5) {
                animation-delay: .22s;
            }

            .main-content>*:nth-child(n+6) {
                animation-delay: .26s;
            }

            /* Auth screens fade in */
            @keyframes authFade {
                from {
                    opacity: 0;
                    transform: translateY(14px) scale(.99);
                }

                to {
                    opacity: 1;
                    transform: none;
                }
            }

            .min-vh-100>div {
                animation: authFade .55s cubic-bezier(.22, 1, .36, 1) both;
            }

            /* Drawer & overlay easing already handled; smooth sidebar scroll */
            .sidebar {
                scroll-behavior: smooth;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            ::before,
            ::after {
                animation-duration: .001ms !important;
                transition-duration: .001ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ═══════════════════════════════════════════════════════════════
       PWA splash / preloader (shown only in the installed standalone app)
    ═══════════════════════════════════════════════════════════════ */
        #app-splash {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.4rem;
            background: var(--canvas);
            opacity: 1;
            transition: opacity .45s ease;
        }

        #app-splash.show {
            display: flex;
        }

        #app-splash.hide {
            opacity: 0;
            pointer-events: none;
        }

        #app-splash .splash-icon {
            width: 92px;
            height: 92px;
            border-radius: 24px;
            box-shadow: 0 18px 55px -12px rgba(106, 76, 245, .65);
            animation: splashPop .55s cubic-bezier(.22, 1, .36, 1) both;
        }

        #app-splash .splash-mark {
            height: 26px;
            width: auto;
            opacity: .92;
            animation: splashPop .55s cubic-bezier(.22, 1, .36, 1) .06s both;
        }

        #app-splash .splash-spin {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2.5px solid rgba(255, 255, 255, .14);
            border-top-color: #fff;
            animation: splashSpin .7s linear infinite;
        }

        @keyframes splashSpin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes splashPop {
            from {
                opacity: 0;
                transform: scale(.82);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        /* ═══════════════════════════════════════════════════════════════
       "Add to Home Screen" hint banner (mobile browser, shown once)
    ═══════════════════════════════════════════════════════════════ */
        .a2hs {
            position: fixed;
            left: .75rem;
            right: .75rem;
            bottom: calc(5.4rem + env(safe-area-inset-bottom));
            z-index: 1055;
            display: none;
            flex-wrap: wrap;
            align-items: center;
            gap: .75rem;
            padding: .7rem .85rem;
            background: rgba(20, 20, 26, .82);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--r-lg);
            box-shadow: 0 14px 44px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
        }

        .a2hs.show {
            display: flex;
            animation: a2hsUp .42s cubic-bezier(.22, 1, .36, 1) both;
        }

        .a2hs .a2hs-ico {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            flex: none;
        }

        .a2hs .a2hs-text {
            flex: 1;
            min-width: 0;
        }

        .a2hs .a2hs-title {
            font-weight: 700;
            font-size: .9rem;
            letter-spacing: -.01em;
        }

        .a2hs .a2hs-sub {
            color: var(--ink-muted);
            font-size: .76rem;
            line-height: 1.35;
        }

        .a2hs .a2hs-action {
            flex: none;
            border: none;
            background: #fff;
            color: #000;
            font-weight: 600;
            font-size: .8rem;
            padding: .45rem .85rem;
            border-radius: var(--control-r);
            min-height: 36px;
            cursor: pointer;
        }

        .a2hs .a2hs-close {
            position: absolute;
            top: .3rem;
            right: .45rem;
            background: none;
            border: none;
            color: var(--ink-dim);
            font-size: 1.15rem;
            line-height: 1;
            cursor: pointer;
            padding: .1rem .2rem;
        }

        .a2hs .a2hs-ios {
            flex-basis: 100%;
            width: 100%;
            margin-top: .15rem;
            padding-top: .55rem;
            border-top: 1px solid var(--hairline-soft);
            color: var(--ink-muted);
            font-size: .8rem;
            line-height: 1.45;
        }

        .a2hs .a2hs-ios b {
            color: var(--ink);
            font-weight: 600;
        }

        @keyframes a2hsUp {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

/* ───────────────────────────────────────────────────────────────
   Navigation preloader — dims the page + a centered glass spinner.
   Shown via body.is-navigating (added by app.js after a 150ms delay
   so fast HTMX swaps never flash). The notch hides the top bar on
   iPhone, so this mid-screen affordance is the real "I tapped" signal.
   ─────────────────────────────────────────────────────────────── */
#page.main-content {
    transition: opacity .2s ease;
}

body.is-navigating #page {
    opacity: .4;
    pointer-events: none;
}

#page-loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.9);
    z-index: 3500;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(22, 22, 26, .72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .7);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

body.is-navigating #page-loader {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#page-loader .pl-spin,
#ptr .ptr-spin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .16);
    border-top-color: #fff;
}

#page-loader .pl-spin {
    animation: splashSpin .7s linear infinite;
}

/* ── Pull-to-refresh indicator (installed PWA only; see app.js) ── */
#ptr {
    position: fixed;
    left: 50%;
    top: max(.5rem, env(safe-area-inset-top));
    margin-left: -20px;
    z-index: 3400;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(22, 22, 26, .82);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
    transform: translateY(-70px);
    opacity: 0;
    pointer-events: none;
}

#ptr .ptr-spin {
    width: 20px;
    height: 20px;
}

#ptr.snap {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

#ptr.spin .ptr-spin {
    animation: splashSpin .7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile-compact: tighten padding/gaps so content fits the screen.
   Desktop stays untouched — all rules are behind max-width queries.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Tighter card radius when cards nearly touch screen edges */
    .card,
    .dash-card,
    .hero-sub-card,
    .stat-tile,
    .empty-hero,
    .checkout-card,
    .filter-bar {
        border-radius: var(--r);
    }

    /* Bootstrap row gaps: g-3 (1rem) → .5rem on mobile */
    .row.g-3,
    .row.g-4 {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .5rem;
    }

    /* Page header tighter */
    .page-header {
        margin-bottom: .75rem;
        padding-bottom: .6rem;
    }
    .page-title {
        font-size: 1.2rem;
    }

    /* Cards: reduce internal padding */
    .card-body {
        padding: .75rem;
    }

    /* Alert compact */
    .alert {
        padding: .6rem .75rem;
        font-size: var(--text-sm);
    }

    /* Filter bar compact */
    .filter-bar {
        padding: .6rem;
        margin-bottom: .75rem;
    }
}

/* Extra-small screens: squeeze further */
@media (max-width: 480px) {
    .main-content {
        padding-left: .35rem;
        padding-right: .35rem;
    }

    .page-header {
        margin-bottom: .5rem;
    }
}