/* ---- Typography ---------------------------------------------------- */
    .fi-body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    /* Numbers line up in tables / stats (counts, prices, dates). */
    .fi-ta-table, .fi-wi-stats-overview-stat-value {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    /* ---- Sidebar: near-black brand panel (light AND dark) -------------
       Dark-pro (2026 re-theme): flat near-black in both themes — the content
       area still switches light/dark, the sidebar stays constant. Crisp white
       text at graded opacities, a 2px electric-indigo bar on the active item.
       !important on colors beats Filament's text-gray-* / text-primary-*
       utilities across the active/inactive × light/dark permutations. */
    .fi-sidebar {
        background: #0b0b0e !important;
        border-color: rgb(255 255 255 / 0.07) !important;
    }
    .fi-sidebar-header {
        background: #0b0b0e !important;
        border-color: rgb(255 255 255 / 0.08) !important;
    }
    /* IMPORTANT: paint the NAV, not just the aside. On desktop the aside is
       `lg:bg-transparent` and is covered by the `w-screen` main container, so a
       background on `.fi-sidebar` alone never shows. `.fi-sidebar-nav` is the
       flex-grow element that actually fills the visible column. */
    .fi-sidebar-nav {
        background: #0b0b0e !important;
    }
    .fi-sidebar-nav-groups,
    .fi-sidebar-group,
    .fi-sidebar-item-button,
    .fi-sidebar-group-button {
        background-color: transparent !important;
    }
    /* Brand crisp white; item labels + group toggles softened. */
    .fi-sidebar .fi-logo {
        color: #ffffff !important;
        letter-spacing: -0.01em;
    }
    .fi-sidebar .fi-sidebar-item-label,
    .fi-sidebar .fi-sidebar-group-button {
        color: rgb(255 255 255 / 0.72) !important;
    }
    .fi-sidebar .fi-sidebar-item-icon,
    .fi-sidebar .fi-sidebar-group-icon {
        color: rgb(255 255 255 / 0.60) !important;
    }
    .fi-sidebar .fi-sidebar-group-label {
        color: rgb(255 255 255 / 0.38) !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.65rem;
        font-weight: 600;
    }
    .fi-sidebar-item-button {
        border-radius: 0.5rem;
        transition: background-color .15s ease, color .15s ease;
    }
    /* Hover: whisper of white. */
    .fi-sidebar .fi-sidebar-item-button:hover,
    .fi-sidebar .fi-sidebar-group-button:hover {
        background-color: rgb(255 255 255 / 0.05) !important;
    }
    .fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-label,
    .fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
        color: rgb(255 255 255 / 0.92) !important;
    }
    /* Active item: subtle pill + 2px electric-indigo left bar, full-white text. */
    .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button {
        position: relative;
        background-color: rgb(255 255 255 / 0.06) !important;
    }
    .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button::before {
        content: "";
        position: absolute;
        left: -0.5rem;
        top: 0.3rem;
        bottom: 0.3rem;
        width: 2px;
        border-radius: 9999px;
        background-color: rgb(var(--primary-500));
    }
    .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
        color: #ffffff !important;
    }
    .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
        color: rgb(var(--primary-400)) !important;
    }
    /* Navigation count badges → indigo-tinted pills on the near-black. */
    .fi-sidebar .fi-badge {
        background-color: rgb(var(--primary-500) / 0.18) !important;
        color: rgb(var(--primary-300)) !important;
    }
    /* Sidebar scrollbar to match (the gray rule below covers .fi-main). */
    .fi-sidebar-nav::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / 0.16) !important;
    }
    .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: rgb(255 255 255 / 0.32) !important;
    }

    /* ============================================================
       Modern Card CRM design system (2026 refresh)
       Global .fi-* chrome, token-driven (Block 1 tunes the whole look).
       Placed BEFORE the mobile @media + .tasks-todo-view scoped blocks
       below, so those keep winning by source order / specificity.
       Does NOT touch .an-* / .ae-* (bespoke divs, not .fi-section).
       ============================================================ */

    /* ---- Block 1: design tokens ---------------------------------------
       Dark-pro (2026 re-theme): tighter corners, hairline borders INSTEAD of
       shadows, true-neutral zinc surfaces (panel gray = Color::Zinc), one
       electric-indigo accent. Shadows are reserved for genuinely floating
       surfaces (login card, hover emphasis) — resting cards are border-only. */
    :root {
        --pm-radius:        0.5rem;
        --pm-radius-lg:     0.625rem;
        --pm-radius-xl:     0.75rem;
        --pm-shadow-sm: none;
        --pm-shadow-md: 0 1px 2px rgb(9 9 11 / 0.05);
        --pm-shadow-lg: 0 2px 6px rgb(9 9 11 / 0.05), 0 12px 32px rgb(9 9 11 / 0.10);
        --pm-card-bg:       #ffffff;
        --pm-header-bg:     #fafafa;                   /* opaque — sticky table headers */
        --pm-surface-2:     rgb(9 9 11 / 0.03);        /* neutral strips/hovers */
        --pm-row-hover:     rgb(9 9 11 / 0.025);
        --pm-border:        rgb(9 9 11 / 0.08);        /* hairline */
        --pm-border-strong: rgb(9 9 11 / 0.14);
        --pm-muted:         rgb(113 113 122);          /* zinc-500 labels/meta */
        --pm-accent:        rgb(var(--primary-500));   /* flat — no gradients */
        --pm-accent-soft:   rgb(var(--primary-500));
        --pm-ring-focus:    0 0 0 3px rgb(var(--primary-500) / 0.30);
    }
    .dark {
        --pm-shadow-sm: none;
        --pm-shadow-md: 0 1px 2px rgb(0 0 0 / 0.40);
        --pm-shadow-lg: 0 2px 6px rgb(0 0 0 / 0.40), 0 14px 36px rgb(0 0 0 / 0.55);
        --pm-card-bg:       rgb(24 24 27);             /* zinc-900 — matches Filament dark card */
        --pm-header-bg:     rgb(31 31 35);             /* opaque, a step above the card */
        --pm-surface-2:     rgb(255 255 255 / 0.04);
        --pm-row-hover:     rgb(255 255 255 / 0.03);
        --pm-border:        rgb(255 255 255 / 0.08);
        --pm-border-strong: rgb(255 255 255 / 0.14);
        --pm-muted:         rgb(161 161 170);          /* zinc-400 */
    }

    /* ---- Block 2: cards / sections ------------------------------------
       Filament cards ship `shadow-sm ring-1` (the ring IS a box-shadow), so
       overriding box-shadow replaces the ring — we re-add the hairline as an
       inset shadow + the soft layered shadow. */
    .fi-section,
    .fi-ta-ctn,
    .fi-fo-component-ctn > .fi-section {
        border-radius: var(--pm-radius-lg);
        box-shadow: inset 0 0 0 1px var(--pm-border), var(--pm-shadow-sm);
        transition: box-shadow .18s ease, transform .18s ease;
    }
    .fi-section-header-heading { font-weight: 600; letter-spacing: -0.01em; }
    .fi-section-header-description { color: var(--pm-muted); }
    /* Section header icon → indigo chip */
    .fi-section .fi-section-header-icon {
        color: rgb(var(--primary-600));
        background: rgb(var(--primary-500) / 0.10);
        border-radius: 0.5rem;
        padding: 0.35rem;
        width: 1.75rem; height: 1.75rem;
        box-sizing: border-box;
    }
    .dark .fi-section .fi-section-header-icon {
        color: rgb(var(--primary-300));
        background: rgb(var(--primary-500) / 0.18);
    }
    /* Dashboard section-divider icon chip (see widgets/section-header.blade.php). */
    .pm-divider-chip { color: rgb(var(--primary-600)); background: rgb(var(--primary-500) / 0.12); }
    .dark .pm-divider-chip { color: rgb(var(--primary-300)); background: rgb(var(--primary-500) / 0.20); }
    /* Opt-in accents via ->extraAttributes(['class' => 'pm-accent-top']) */
    .fi-section.pm-accent-top { position: relative; overflow: hidden; }
    .fi-section.pm-accent-top::before {
        content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
        background: var(--pm-accent-soft);
    }
    .fi-section.pm-accent-left { border-inline-start: 3px solid rgb(var(--primary-500)); }

    /* ---- Block 3: KPI / stats cards (the dashboard signature) ----------
       Dark-pro: flat number-first tile — hairline border, no gradient bar, no
       lift. Icon sits in a subtle square chip top-right; hover = brighter
       border only. */
    .fi-wi-stats-overview-stat {
        position: relative;
        overflow: hidden;
        border-radius: var(--pm-radius-lg);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        transition: box-shadow .16s ease;
    }
    .fi-wi-stats-overview-stat:hover {
        box-shadow: inset 0 0 0 1px var(--pm-border-strong), var(--pm-shadow-md);
    }
    .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
        position: absolute;
        top: 1.15rem; right: 1.15rem;
        width: 2.25rem; height: 2.25rem;
        padding: 0.5rem;
        border-radius: var(--pm-radius);
        color: rgb(var(--primary-600));
        background: rgb(var(--primary-500) / 0.08);
        box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.15);
        box-sizing: border-box;
    }
    .dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
        color: rgb(var(--primary-300));
        background: rgb(var(--primary-500) / 0.12);
        box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.25);
    }
    .fi-wi-stats-overview-stat-label {
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.07em;
        color: var(--pm-muted);
    }
    .fi-wi-stats-overview-stat-value {
        font-size: 1.95rem; font-weight: 700;
        letter-spacing: -0.03em; line-height: 1.1;
    }
    .fi-wi-stats-overview-stat-description { font-size: 0.75rem; font-weight: 600; }

    /* ---- Block 4: richer dense table ----------------------------------
       Muted uppercase header on a light strip, dense-but-roomy rows, soft
       indigo hover, hairline dividers. NO zebra. Tasks page is unaffected:
       `.tasks-todo-view .fi-ta-*` (below) is more specific + later. */
    .fi-ta-header-cell {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--pm-muted);
        background: var(--pm-surface-2);
        padding-top: 0.5rem; padding-bottom: 0.5rem;
    }
    .fi-ta-row { transition: background-color .12s ease; }
    .fi-ta-row:hover {
        background-color: var(--pm-row-hover) !important;
    }
    .fi-ta-cell > div,
    .fi-ta-cell > span { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    /* Soften Filament's divide-y row dividers to a hairline. */
    .fi-ta-content > * + * { border-top-color: var(--pm-border) !important; }

    /* ===================================================================
       New-era table chrome (iteration 2)
       Sticky header, selected-row, icon-action hover, pagination, empty
       state, status dots, avatars. Global .fi-* rules; placed before the
       mobile @media + .tasks-todo-view scoped blocks so those still win.
       Density stays TIGHT (no row-height bump). Does NOT touch .an-* / .ae-*.
       =================================================================== */

    /* Even rows: vertically centre cell content. */
    .fi-ta-cell { vertical-align: middle; }

    /* Sticky column header. Filament wraps the table in `.fi-ta-content`
       with `overflow-x-auto` (→ it's already a scroll container), which
       defeats a viewport-sticky header. Giving it a max-height turns it
       into a real VERTICAL scroll container, so the header pins to its top.
       Short tables (default 10/page) stay under the cap → no scrollbar,
       normal feel; long pages (50/100) scroll internally with a stuck
       header + the toolbar/pagination staying put outside. Needs an OPAQUE
       header bg in both themes so rows don't bleed through. Disabled on
       mobile (see @media below) and hidden on the Tasks page. */
    .fi-ta-content { max-height: calc(100dvh - 13rem); }
    .fi-ta-header-cell {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--pm-header-bg);
    }

    /* Selected-row highlight. */
    .fi-ta-row:has(.fi-ta-record-checkbox:checked) {
        background-color: rgb(var(--primary-500) / 0.07) !important;
    }
    .dark .fi-ta-row:has(.fi-ta-record-checkbox:checked) {
        background-color: rgb(var(--primary-500) / 0.12) !important;
    }

    /* Row icon-action buttons: tight cluster, muted until hover. */
    .fi-ta-actions { gap: 0.1rem; }
    .fi-ta-actions .fi-icon-btn {
        color: var(--pm-muted);
        transition: color .12s ease, background-color .12s ease;
    }
    .fi-ta-actions .fi-icon-btn:hover {
        color: rgb(var(--primary-600));
        background-color: rgb(var(--primary-500) / 0.10);
    }
    .dark .fi-ta-actions .fi-icon-btn:hover {
        color: rgb(var(--primary-300));
        background-color: rgb(var(--primary-500) / 0.18);
    }

    /* Pagination: rounded page buttons, soft hover. */
    .fi-pagination-item-button { border-radius: var(--pm-radius); }
    .fi-pagination-item-button:hover { background-color: var(--pm-surface-2); }

    /* Empty state: tinted icon circle + confident heading. */
    .fi-ta-empty-state-icon-ctn {
        background: rgb(var(--primary-500) / 0.10);
        color: rgb(var(--primary-600));
    }
    .dark .fi-ta-empty-state-icon-ctn {
        background: rgb(var(--primary-500) / 0.16);
        color: rgb(var(--primary-300));
    }
    .fi-ta-empty-state-heading { font-weight: 600; }

    /* Toolbar rhythm. */
    .fi-ta-header-toolbar { gap: 0.6rem; }

    /* Leading status dots — scoped to status columns by their per-column
       cell class (`fi-table-cell-{name}`). currentColor matches the badge's
       semantic colour. Health excluded (it carries its own check/x icon).

       NOTE on dot-notation columns: Filament builds the class as
       `str($column->getName())->camel()->kebab()`, and neither camel() nor
       kebab() touches a literal ".". So `siteStatus.label` becomes
       `fi-table-cell-site-status.label`, NOT `...-site-status-label`. The dot
       has to be escaped in the selector. The two rules below used the dashed
       spelling and had therefore never matched anything since they were
       written — the status dot silently did not render on the Site-status or
       Contract-type columns. Verified by rendering ListSites through
       Livewire::test() and grepping the emitted class attributes. */
    .fi-table-cell-site-status\.label .fi-badge::before,
    .fi-table-cell-status .fi-badge::before,
    .fi-table-cell-is-active .fi-badge::before,
    .fi-table-cell-two-factor-status .fi-badge::before,
    .fi-table-cell-two-factor-confirmed-at .fi-badge::before,
    .fi-table-cell-type .fi-badge::before,
    .fi-table-cell-contract-type\.name .fi-badge::before {
        content: "";
        width: 0.42rem; height: 0.42rem;
        border-radius: 9999px;
        background: currentColor;
        flex: 0 0 auto;
    }

    /* Primary-cell avatar (see tables/columns/avatar-initial.blade.php).
       Deterministic pastel from an inline --pm-av-h hue. */
    .pm-avatar {
        width: 1.65rem; height: 1.65rem;
        border-radius: 9999px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 0.6rem; font-weight: 700; letter-spacing: 0.01em;
        flex: 0 0 auto; user-select: none;
        color: hsl(var(--pm-av-h, 220) 55% 38%);
        background: hsl(var(--pm-av-h, 220) 70% 93%);
        box-shadow: inset 0 0 0 1px hsl(var(--pm-av-h, 220) 45% 82%);
    }
    .dark .pm-avatar {
        color: hsl(var(--pm-av-h, 220) 70% 78%);
        background: hsl(var(--pm-av-h, 220) 30% 20%);
        box-shadow: inset 0 0 0 1px hsl(var(--pm-av-h, 220) 28% 32%);
    }

    /* ---- Block 5: badges → soft pills (keep Filament's tints) ---------- */
    .fi-badge { border-radius: 9999px; font-weight: 600; letter-spacing: 0.01em; }

    /* ---- Block 6: buttons --------------------------------------------- */
    .fi-btn {
        border-radius: var(--pm-radius); font-weight: 600;
        transition: filter .14s ease, box-shadow .14s ease, transform .08s ease;
    }
    .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { filter: brightness(1.05); }
    .fi-btn:active { transform: translateY(0.5px); }

    /* ---- Block 11: forms / inputs ------------------------------------- */
    .fi-input, .fi-select-input, .fi-textarea { border-radius: var(--pm-radius); }
    .fi-input-wrp { transition: box-shadow .14s ease; }
    .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 1px rgb(var(--primary-500)), var(--pm-ring-focus); }
    /* Keep the keyboard-accessible focus outline (targets different elements). */
    .fi-input:focus, .fi-select-input:focus, .fi-textarea:focus,
    .fi-btn:focus-visible, .fi-ta-record-checkbox:focus-visible {
        outline: 2px solid rgb(var(--primary-500) / 0.55);
        outline-offset: 1px;
    }

    /* ---- Block 8: topbar / page header -------------------------------- */
    .fi-topbar > nav {
        backdrop-filter: saturate(1.2) blur(8px);
        box-shadow: inset 0 -1px 0 var(--pm-border);
    }
    .fi-header-heading { font-weight: 700; letter-spacing: -0.02em; }
    .fi-header-subheading { color: var(--pm-muted); }

    /* ---- Block 9: infolist density (compact view pages) --------------- */
    .fi-in-entry-wrp { gap: 0.2rem; }
    .fi-in-entry-wrp-label {
        font-size: 0.75rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--pm-muted);
    }

    /* ---- Block 7: sidebar refinement (navy retune lives in base rules
       above; here we tokenize the pill radius + add a version-safe
       `-active` alias mirroring the existing `.fi-active` styling). ------ */
    .fi-sidebar-item-button { border-radius: var(--pm-radius); }
    .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button {
        position: relative;
        background-color: rgb(255 255 255 / 0.06) !important;
    }
    .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button::before {
        content: ""; position: absolute; left: -0.5rem; top: 0.3rem; bottom: 0.3rem;
        width: 2px; border-radius: 9999px; background: rgb(var(--primary-500));
    }
    .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label { color: #fff !important; }
    .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon { color: rgb(var(--primary-400)) !important; }
    .fi-sidebar-header { box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.08); }

    /* ---- Block 10: branded login (pure CSS) ---------------------------
       Dark-pro: flat neutral field with a faint indigo glow bleeding from the
       top; card is a floating surface (one of the few places a shadow is
       allowed). Heading is crisp solid text — no gradient fill. */
    .fi-simple-layout {
        background:
            radial-gradient(1000px 480px at 50% -12%, rgb(var(--primary-500) / 0.08), transparent 60%),
            #fafafa;
    }
    .dark .fi-simple-layout {
        background:
            radial-gradient(1000px 480px at 50% -12%, rgb(var(--primary-500) / 0.14), transparent 60%),
            #0a0a0b;
    }
    .fi-simple-main {
        border-radius: var(--pm-radius-xl);
        box-shadow: inset 0 0 0 1px var(--pm-border), var(--pm-shadow-lg);
    }
    .dark .fi-simple-main { background-color: rgb(19 19 22); }
    .fi-simple-header-heading {
        font-weight: 700; letter-spacing: -0.03em;
    }
    .fi-simple-header-subheading { color: var(--pm-muted); }

    /* ---- Compact layout (retained from prior polish) ------------------ */
    .fi-wi { gap: 1rem; }
    .fi-wi .fi-section-header { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; }
    .fi-fo-component-ctn { gap: 0.875rem; }
    .fi-fo-field-wrp-label { font-size: 0.8125rem; color: var(--pm-muted); }

    /* ---- Dashboard welcome hero (.pm-hero*) ---------------------------
       Theme-invariant near-black panel that mirrors the sidebar brand color;
       hairline border + faint indigo glow, flat on-dark buttons.
       Markup: widgets/welcome-hero.blade.php. */
    .pm-hero {
        position: relative;
        overflow: hidden;
        border-radius: var(--pm-radius-lg);
        padding: 1.3rem 1.5rem;
        background: #0b0b0e;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
    }
    .pm-hero-glow {
        position: absolute;
        top: -45%; right: -5%;
        width: 24rem; height: 24rem;
        border-radius: 9999px;
        background: radial-gradient(circle, rgb(var(--primary-500) / 0.16), transparent 62%);
        pointer-events: none;
    }
    .pm-hero-row {
        position: relative;
        display: flex; flex-wrap: wrap;
        align-items: center; justify-content: space-between;
        gap: 1rem;
    }
    .pm-hero-text { min-width: 15rem; }
    .pm-hero-role {
        display: inline-flex; align-items: center; gap: 0.35rem;
        padding: 0.18rem 0.6rem;
        border-radius: 9999px;
        background: rgb(var(--primary-500) / 0.16);
        color: rgb(var(--primary-300));
        box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.28);
        font-size: 0.7rem; font-weight: 600;
        letter-spacing: 0.07em; text-transform: uppercase;
    }
    .pm-hero-title {
        margin-top: 0.55rem;
        font-size: 1.45rem; font-weight: 700;
        letter-spacing: -0.03em;
        color: #ffffff;
    }
    .pm-hero-subtitle {
        margin-top: 0.2rem;
        font-size: 0.85rem;
        color: rgb(255 255 255 / 0.60);
    }
    .pm-hero-actions {
        display: flex; flex-wrap: wrap;
        gap: 0.55rem; align-items: center;
    }
    .pm-hero-btn {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.5rem 0.9rem;
        border-radius: var(--pm-radius);
        background: rgb(255 255 255 / 0.06);
        color: rgb(255 255 255 / 0.88);
        font-size: 0.85rem; font-weight: 600;
        text-decoration: none;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
        transition: background-color .14s ease;
    }
    .pm-hero-btn:hover { background: rgb(255 255 255 / 0.11); }
    .pm-hero-btn--primary {
        background: rgb(var(--primary-500));
        color: #ffffff;
        box-shadow: none;
    }
    .pm-hero-btn--primary:hover { background: rgb(var(--primary-400)); }
    .pm-hero-hint {
        position: relative;
        margin-top: 0.85rem;
        font-size: 0.74rem;
        color: rgb(255 255 255 / 0.45);
    }
    .pm-hero-hint strong { color: rgb(255 255 255 / 0.78); font-weight: 600; }

    /* Hero on phones: the 15rem text min-width claimed almost the whole
       content box, so the title wrapped inside a 240px column while the action
       row was pushed onto its own line anyway. Drop the floor, let the text use
       the full width, and make the three buttons an even 3-up row that clears
       the 40px tap floor. */
    @media (max-width: 639px) {
        .pm-hero { padding: 1rem 1.05rem; }
        .pm-hero-text { min-width: 0; }
        .pm-hero-title { font-size: 1.2rem; }
        .pm-hero-actions { width: 100%; }
        .pm-hero-btn { flex: 1 1 auto; justify-content: center; padding: 0.6rem 0.7rem; }
        .pm-hero-hint { margin-top: 0.7rem; }
    }

    /* ---- Mobile / small screens --------------------------------------
       Filament's grids already collapse to one column on phones; these rules
       reclaim padding, wrap toolbars, and keep wide tables usable. Scoped to
       small widths so desktop is untouched. Works in light + dark. */
    @media (max-width: 768px) {
        /* Reclaim horizontal padding the page header + main eat on phones.

           Target `.fi-section-content`, NOT `.fi-section-content-ctn`. The -ctn
           element is the outer wrapper and carries no padding of its own (only
           a border-top) — see filament/support section/index.blade.php. The
           24px `p-6` lives on the inner `.fi-section-content`. Padding the
           wrapper therefore ADDED 14px on top of the existing 24px instead of
           reclaiming anything, which is why every section read cramped on a
           phone and why .db-table-wrap's -1.5rem full-bleed overshot its card. */
        .fi-main { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
        .fi-section-content { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
        /* Header action clusters + table toolbars wrap instead of overflowing. */
        .fi-header,
        .fi-ta-header-toolbar,
        .fi-ta-actions,
        .fi-ac { flex-wrap: wrap !important; }
        .fi-header-heading { font-size: 1.25rem; }
        /* Stat values shrink so a 2-up grid never clips. */
        .fi-wi-stats-overview-stat-value { font-size: 1.5rem; }
        /* Wide tables scroll horizontally with momentum rather than squashing. */
        .fi-ta-content { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: none; }
        /* Even denser table cells on phones. */
        .fi-ta-cell > div,
        .fi-ta-cell > span { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }

        /* Modals: full width with a safe gutter, and a height cap so a long
           form scrolls INSIDE the modal instead of running off-screen with its
           submit button unreachable. dvh (not vh) so the mobile browser's
           collapsing URL bar doesn't leave the footer under the chrome. */
        .fi-modal-window { width: 100% !important; margin-left: 0.5rem; margin-right: 0.5rem; }
        .fi-modal-content { max-height: 70dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

        /* The "⌘+K" suffix in the global search field is a lie on a phone —
           there is no meta key. Hide the chip, keep the field. */
        .fi-global-search-field-suffix { display: none; }

        /* Sidebar drawer: Workspace + Infrastructure are collapsible(false), so
           ~23 nav rows always render. Tighten the row rhythm so the drawer is
           about one screen instead of one and a half. */
        .fi-sidebar-item-button { padding-top: 0.4rem; padding-bottom: 0.4rem; }
        .fi-sidebar-group + .fi-sidebar-group { margin-top: 0.35rem; }

        /* Wizard (Quick setup): below md Filament already stacks the steps into
           a single column, which is correct but tall — 5 steps eat a screen
           before the form starts. Compact the rows. */
        .fi-fo-wizard-header { gap: 0; }
        .fi-fo-wizard-header-step { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    }

    /* ---- Touch devices -------------------------------------------------
       Keyed on the INPUT, not the viewport: a 1024px tablet is touch-only and
       needs these, a 700px desktop window does not. `hover: none` means the
       primary pointer cannot hover; `pointer: coarse` means it is a finger.

       Two distinct problems are solved here:
       (a) Hover-only affordances are invisible/unreachable on touch.
       (b) Tap targets below ~40px cause mis-taps. Apple's HIG says 44px, the
           WCAG 2.2 AA minimum is 24px; 40px is the pragmatic floor used
           throughout this file. */
    @media (hover: none) and (pointer: coarse) {
        /* Row actions were dimmed to 0.55 and only brightened on row hover —
           on touch they stayed permanently dim, below 3:1 contrast. */
        .tasks-todo-view .fi-ta-actions { opacity: 1; }
        /* ...and they sat 1.6px apart. Space them into separate tap targets. */
        .fi-ta-actions { gap: 0.4rem !important; }

        /* Filament icon buttons + our own small controls get a real tap box.
           Padding rather than height so the visual size is unchanged where it
           was already big enough. */
        .fi-icon-btn { min-width: 2.5rem; min-height: 2.5rem; }
        .fi-ta-actions .fi-icon-btn { min-width: 2.25rem; min-height: 2.25rem; }
        .fi-link, .fi-btn { min-height: 2.25rem; }

        /* The parent deep-link in a task row was distinguishable ONLY by its
           hover underline — on touch it read as plain muted meta text with no
           indication it was tappable. Make the affordance permanent. */
        .tasks-todo-view .todo-parent-link { text-decoration: underline; text-underline-offset: 2px; }

        /* iOS keeps :hover stuck on the last-tapped element until you tap
           elsewhere. Cancel the transforms so nothing stays visibly lifted. */
        .an-pill:hover, .sc-card:hover, .kb-card:hover { transform: none; }
    }

    /* ---- iOS zoom-on-focus --------------------------------------------
       Mobile Safari zooms the viewport when a form control below 16px is
       focused, and does NOT zoom back out — the user is left on a page that no
       longer fits. The only fix is a >=16px font size on the control itself.
       Applied at the phone width only, so the desktop's tighter 13-14px
       controls are untouched. */
    @media (max-width: 767px) {
        .fi-input,
        .fi-select-input,
        .fi-textarea,
        .ae-select, .fs-select, .kb-select, .tv-select,
        .qa-input, .cmt-textarea, .sa-select,
        input[type="text"], input[type="email"], input[type="password"],
        input[type="number"], input[type="search"], input[type="date"],
        input[type="time"], input[type="datetime-local"], select, textarea {
            font-size: 16px !important;
        }
    }

    /* ---- Notched phones ------------------------------------------------
       env() resolves to 0 everywhere it is not needed, so these are safe
       unconditionally. Without them the Quick-Add FAB sits in the iPhone
       home-indicator strip and the sidebar drawer runs under the notch. */
    @supports (padding: env(safe-area-inset-bottom)) {
        .qa-fab { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
        .psh-banner { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
        .fi-sidebar { padding-bottom: env(safe-area-inset-bottom); }
    }

    /* ---- Reduced motion ------------------------------------------------
       ~40 transitions in this file; honour the OS preference. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* ---- Wide list tables on phones ------------------------------------
       Six resources render 9-11 columns by default. Today they horizontally
       scroll, which on a 375px screen means the identifying column scrolls out
       of view before the value column scrolls in — you cannot read a row.

       Filament emits a matching PAIR of per-column classes,
       `fi-table-header-cell-{n}` and `fi-table-cell-{n}`, so hiding a column is
       purely presentational and cannot desynchronise the header from the body
       (which is exactly the bug the AdSense leaderboard had). Verified against
       rendered output, not assumed.

       What stays: the avatar, the identifying column, and the one status the
       list exists to triage by. Everything else is one tap away on the record's
       view page. Users can still rotate to landscape (>=768px) to get the full
       table back.

       Names come from `str($column->getName())->camel()->kebab()`, which leaves
       a literal "." intact — hence the escaped `\.` in the relation columns. */
    @media (max-width: 767px) {
        /* Sites — keep domain + health. */
        .fi-table-header-cell-site-status\.label, .fi-table-cell-site-status\.label,
        .fi-table-header-cell-domain-due-days-count, .fi-table-cell-domain-due-days-count,
        .fi-table-header-cell-tls-days-remaining, .fi-table-cell-tls-days-remaining,
        .fi-table-header-cell-server\.label, .fi-table-cell-server\.label,
        .fi-table-header-cell-account, .fi-table-cell-account,
        .fi-table-header-cell-tech-stacks\.name, .fi-table-cell-tech-stacks\.name,
        .fi-table-header-cell-projects\.name, .fi-table-cell-projects\.name,

        /* Servers — keep label + down-sites count. */
        .fi-table-header-cell-hosting-contract\.account\.prefix, .fi-table-cell-hosting-contract\.account\.prefix,
        .fi-table-header-cell-server-type\.name, .fi-table-cell-server-type\.name,
        .fi-table-header-cell-hosting-contract\.product-name, .fi-table-cell-hosting-contract\.product-name,
        .fi-table-header-cell-panel-type\.name, .fi-table-cell-panel-type\.name,
        .fi-table-header-cell-contract-renews, .fi-table-cell-contract-renews,
        .fi-table-header-cell-ip-addresses, .fi-table-cell-ip-addresses,

        /* Accounts — keep prefix + name. */
        .fi-table-header-cell-two-factor-status, .fi-table-cell-two-factor-status,
        .fi-table-header-cell-renewals-due, .fi-table-cell-renewals-due,
        .fi-table-header-cell-hosting-contracts-count, .fi-table-cell-hosting-contracts-count,
        .fi-table-header-cell-hosting-provider\.name, .fi-table-cell-hosting-provider\.name,
        .fi-table-header-cell-servers-count, .fi-table-cell-servers-count,
        .fi-table-header-cell-sites-count, .fi-table-cell-sites-count,

        /* Hosting contracts — keep account prefix + product + type. */
        .fi-table-header-cell-billing-due-days-count, .fi-table-cell-billing-due-days-count,
        .fi-table-header-cell-monthly-effective-price, .fi-table-cell-monthly-effective-price,
        .fi-table-header-cell-domains-count, .fi-table-cell-domains-count,
        .fi-table-header-cell-contract-end-date, .fi-table-cell-contract-end-date,
        .fi-table-header-cell-billing-date, .fi-table-cell-billing-date,

        /* Domains — keep name + status + renewal. */
        .fi-table-header-cell-site\.primary-domain, .fi-table-cell-site\.primary-domain,
        .fi-table-header-cell-hosting-contract\.account\.name, .fi-table-cell-hosting-contract\.account\.name,
        .fi-table-header-cell-registrar-provider\.name, .fi-table-cell-registrar-provider\.name,
        .fi-table-header-cell-is-primary, .fi-table-cell-is-primary,

        /* Share links — keep subject + field + status. */
        .fi-table-header-cell-id, .fi-table-cell-id,
        .fi-table-header-cell-owner\.name, .fi-table-cell-owner\.name,
        .fi-table-header-cell-recipient-email, .fi-table-cell-recipient-email,
        .fi-table-header-cell-views, .fi-table-cell-views,
        .fi-table-header-cell-expires-at, .fi-table-cell-expires-at,
        .fi-table-header-cell-created-at, .fi-table-cell-created-at {
            display: none;
        }

        /* With the wide columns gone the table fits, so let the identifying
           column use the space instead of truncating to min-content. */
        .fi-table-cell-primary-domain, .fi-table-cell-name, .fi-table-cell-label,
        .fi-table-cell-subject, .fi-table-cell-product-name { max-width: none; }
    }

    /* ---- Tasks checklist (Microsoft To Do / Apple Reminders look) ------
       Scoped to `.tasks-todo-view` (the wrapper div injected on the Tasks list
       page via a PAGE_START/PAGE_END render hook in AdminPanelProvider). The
       page renders a NORMAL Filament <table> (no contentGrid). We hide the
       header, neutralise zebra striping, replace cell borders with a single soft
       per-row divider, enlarge the round checkbox, and mute the meta chips.
       None of this leaks to other resource tables. Works in light + dark. */

    /* Hide the (label-less) header row entirely. */
    .tasks-todo-view thead,
    .tasks-todo-view .fi-ta-header-cell {
        display: none;
    }

    /* Neutralise zebra striping — every row reads flush. */
    .tasks-todo-view .fi-ta-row:nth-child(even) {
        background-color: transparent;
    }
    .dark .tasks-todo-view .fi-ta-row:nth-child(even) {
        background-color: transparent;
    }

    /* Replace heavy cell borders with a single hairline divider per row. */
    .tasks-todo-view .fi-ta-row {
        border-bottom: 1px solid var(--pm-border);
    }
    .tasks-todo-view .fi-ta-row:last-child {
        border-bottom: 0;
    }
    .tasks-todo-view .fi-ta-cell {
        border: 0 !important;
    }

    /* Row hover wash (matches the rest of the theme). */
    .tasks-todo-view .fi-ta-row:hover {
        background-color: var(--pm-row-hover);
    }

    /* Vertically centre cells, comfortable row height. */
    .tasks-todo-view .fi-ta-cell {
        vertical-align: middle;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    /* The round checkbox — enlarge to a real To-Do circle, narrow centred cell. */
    .tasks-todo-view .task-check {
        width: 1px;            /* shrink the cell to its content */
        white-space: nowrap;
        text-align: center;
    }
    .tasks-todo-view .task-check svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    .tasks-todo-view .task-check .fi-ta-col-wrp,
    .tasks-todo-view .task-check button {
        cursor: pointer;
    }

    /* Title + meta chips, stacked. */
    .tasks-todo-view .todo-row {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    .tasks-todo-view .todo-title {
        font-size: 0.95rem;
        line-height: 1.35;
        font-weight: 500;
    }
    .tasks-todo-view .todo-title-done {
        text-decoration: line-through;
        opacity: 0.55;
    }

    /* Meta row: small, muted, wraps gracefully. */
    .tasks-todo-view .todo-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.72rem;
    }
    .tasks-todo-view .todo-parent {
        color: var(--pm-muted);
    }
    /* Parent as a real deep-link: stays muted, underlines on hover so it reads
       as clickable without shouting. Click is stopped from the row anchor. */
    .tasks-todo-view .todo-parent-link {
        text-decoration: none;
        cursor: pointer;
    }
    .tasks-todo-view .todo-parent-link:hover {
        text-decoration: underline;
        color: rgb(63 63 70);             /* zinc-700 */
    }
    .dark .tasks-todo-view .todo-parent-link:hover {
        color: rgb(212 212 216);          /* zinc-300 */
    }

    /* STATUS chip — coloured by the status's own color_hex via the --status
       custom property, so it tracks Master-data colour changes. */
    .tasks-todo-view .todo-status-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.05rem 0.4rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
        background: color-mix(in srgb, var(--status) 16%, transparent);
        color: var(--status);
        border: 1px solid color-mix(in srgb, var(--status) 35%, transparent);
    }
    @supports not (background: color-mix(in srgb, red 50%, transparent)) {
        .tasks-todo-view .todo-status-chip {
            background: rgb(107 114 128 / 0.14);
            color: rgb(55 65 81);
            border-color: rgb(107 114 128 / 0.35);
        }
        .dark .tasks-todo-view .todo-status-chip {
            color: rgb(229 231 235);
        }
    }

    /* Pill chips: priority / due / assignee. Subtle tinted bg + readable text. */
    .tasks-todo-view .todo-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.05rem 0.4rem;
        border-radius: 9999px;
        font-weight: 600;
        font-size: 0.7rem;
        line-height: 1.4;
        white-space: nowrap;
    }
    .tasks-todo-view .todo-chip-icon {
        width: 0.75rem;
        height: 0.75rem;
        flex-shrink: 0;
    }
    .tasks-todo-view .todo-chip-danger {
        background-color: rgb(var(--danger-500) / 0.12);
        color: rgb(var(--danger-600));
    }
    .dark .tasks-todo-view .todo-chip-danger {
        color: rgb(var(--danger-400));
    }
    .tasks-todo-view .todo-chip-warning {
        background-color: rgb(var(--warning-500) / 0.12);
        color: rgb(var(--warning-600));
    }
    .dark .tasks-todo-view .todo-chip-warning {
        color: rgb(var(--warning-400));
    }
    .tasks-todo-view .todo-chip-primary {
        background-color: rgb(var(--primary-500) / 0.12);
        color: rgb(var(--primary-600));
    }
    .dark .tasks-todo-view .todo-chip-primary {
        color: rgb(var(--primary-400));
    }
    .tasks-todo-view .todo-chip-gray,
    .tasks-todo-view .todo-chip-muted {
        background-color: var(--pm-surface-2);
        color: rgb(82 82 91);             /* zinc-600 */
        box-shadow: inset 0 0 0 1px var(--pm-border);
    }
    .dark .tasks-todo-view .todo-chip-gray,
    .dark .tasks-todo-view .todo-chip-muted {
        color: rgb(212 212 216);          /* zinc-300 */
    }

    /* Per-label colour pills, driven by the inline --label custom property. */
    .tasks-todo-view .todo-label {
        padding: 0.05rem 0.4rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        background: color-mix(in srgb, var(--label) 18%, transparent);
        color: var(--label);
        border: 1px solid color-mix(in srgb, var(--label) 35%, transparent);
    }
    /* Fallback for engines without color-mix(): a flat tinted pill that still
       reads as a colour-coded label. All current target browsers support
       color-mix, so this only triggers on genuinely old engines. */
    @supports not (background: color-mix(in srgb, red 50%, transparent)) {
        .tasks-todo-view .todo-label {
            background: rgb(107 114 128 / 0.14);
            color: rgb(55 65 81);
            border-color: rgb(107 114 128 / 0.35);
        }
        .dark .tasks-todo-view .todo-label {
            color: rgb(229 231 235);
        }
    }

    /* Quiet trailing actions (Snooze/View/Edit/Delete); reveal on row hover. */
    .tasks-todo-view .fi-ta-actions {
        opacity: 0.55;
        transition: opacity .12s ease;
    }
    .tasks-todo-view .fi-ta-row:hover .fi-ta-actions {
        opacity: 1;
    }

    /* Task rows on phones. A task carrying status + parent + priority + due +
       reminder + assignee + two labels wrapped to five lines of chips and made
       every row ~120px tall, so barely three tasks fit on a screen. Drop the
       two chips that are pure duplication of what the row already says (the
       reminder time, which the due chip already implies, and the assignee,
       which on the member-scoped default tab is almost always you) and give the
       checkbox a real tap target. Everything is still on the task's view page. */
    @media (max-width: 639px) {
        .tasks-todo-view .todo-chip-muted { display: none; }
        .tasks-todo-view .todo-title { font-size: 0.9rem; }
        .tasks-todo-view .fi-ta-cell { padding-top: 0.3rem; padding-bottom: 0.3rem; }
        /* The most-tapped control in the app was a 24px circle. */
        .tasks-todo-view .task-check .fi-ta-col-wrp,
        .tasks-todo-view .task-check button {
            min-width: 2.75rem;
            min-height: 2.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }

    /* ---- Analytics page (an-*) ----------------------------------------
       No Tailwind build on this box — all analytics styling lives here.
       Color palette matches the chart widgets: indigo #6366f1, emerald
       #10b981, violet #8b5cf6, amber #f59e0b.  Scoped by an- prefix so
       nothing leaks to other pages.
       ------------------------------------------------------------------ */

    /* Meta bar. flex-wrap so the "Cached 30 min" badge drops below the
       subtitle on a phone instead of being squeezed into two lines beside it. */
    .an-meta-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .an-meta-subtitle {
        font-size: 0.8125rem;
        color: var(--pm-muted);
        letter-spacing: 0.01em;
    }
    .an-cache-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.65rem;
        border-radius: 9999px;
        background: var(--pm-surface-2);
        color: var(--pm-muted);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        font-size: 0.6875rem;
        font-weight: 500;
    }
    .an-cache-icon { width: 0.75rem; height: 0.75rem; }

    /* KPI grid */
    .an-kpi-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    @media (min-width: 1024px) {
        .an-kpi-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .an-kpi {
        position: relative;
        overflow: hidden;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        padding: 1rem;
        border: 1px solid var(--pm-border);
        display: block;
        text-decoration: none;
        transition: box-shadow .15s ease, border-color .15s ease;
    }
    a.an-kpi:hover {
        box-shadow: var(--pm-shadow-md);
    }
    /* Flat top accent bar (dark-pro: no gradients) */
    .an-kpi-topbar {
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 2px;
    }
    .an-kpi--primary .an-kpi-topbar { background: #6366f1; }
    .an-kpi--success .an-kpi-topbar { background: #10b981; }
    .an-kpi--info    .an-kpi-topbar { background: #8b5cf6; }
    .an-kpi--warning .an-kpi-topbar { background: #f59e0b; }
    a.an-kpi--primary:hover { border-color: #6366f1; }
    a.an-kpi--success:hover { border-color: #10b981; }
    a.an-kpi--info:hover    { border-color: #8b5cf6; }
    a.an-kpi--warning:hover { border-color: #f59e0b; }
    /* Body: icon + text */
    .an-kpi-body {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding-top: 0.375rem;
    }
    .an-kpi-icon-wrap {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .an-kpi--primary .an-kpi-icon-wrap { background: #eef2ff; }
    .an-kpi--success .an-kpi-icon-wrap { background: #d1fae5; }
    .an-kpi--info    .an-kpi-icon-wrap { background: #ede9fe; }
    .an-kpi--warning .an-kpi-icon-wrap { background: #fef3c7; }
    .dark .an-kpi--primary .an-kpi-icon-wrap { background: rgb(99  102 241 / 0.15); }
    .dark .an-kpi--success .an-kpi-icon-wrap { background: rgb(16  185 129 / 0.15); }
    .dark .an-kpi--info    .an-kpi-icon-wrap { background: rgb(139  92 246 / 0.15); }
    .dark .an-kpi--warning .an-kpi-icon-wrap { background: rgb(245 158  11 / 0.15); }
    .an-kpi-icon { width: 1.0625rem; height: 1.0625rem; }
    .an-kpi--primary .an-kpi-icon { color: #4f46e5; }
    .an-kpi--success .an-kpi-icon { color: #059669; }
    .an-kpi--info    .an-kpi-icon { color: #7c3aed; }
    .an-kpi--warning .an-kpi-icon { color: #d97706; }
    .dark .an-kpi--primary .an-kpi-icon { color: #818cf8; }
    .dark .an-kpi--success .an-kpi-icon { color: #34d399; }
    .dark .an-kpi--info    .an-kpi-icon { color: #a78bfa; }
    .dark .an-kpi--warning .an-kpi-icon { color: #fbbf24; }
    /* Text block */
    .an-kpi-text { min-width: 0; flex: 1; }
    .an-kpi-label {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--pm-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .an-kpi-value {
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: rgb(24 24 27);
        margin-top: 0.1rem;
        font-variant-numeric: tabular-nums;
    }
    .dark .an-kpi-value { color: #ffffff; }
    .an-kpi-desc {
        font-size: 0.6875rem;
        color: var(--pm-muted);
        opacity: 0.85;
        margin-top: 0.15rem;
    }
    /* "View all →" CTA */
    .an-kpi-cta {
        margin-top: 0.625rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }
    .an-kpi--primary .an-kpi-cta { color: #4f46e5; }
    .an-kpi--success .an-kpi-cta { color: #059669; }
    .an-kpi--info    .an-kpi-cta { color: #7c3aed; }
    .an-kpi--warning .an-kpi-cta { color: #d97706; }
    .dark .an-kpi--primary .an-kpi-cta { color: #818cf8; }
    .dark .an-kpi--success .an-kpi-cta { color: #34d399; }
    .dark .an-kpi--info    .an-kpi-cta { color: #a78bfa; }
    .dark .an-kpi--warning .an-kpi-cta { color: #fbbf24; }

    /* Section jump nav */
    .an-jump-nav {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .an-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid transparent;
        transition: background-color .12s ease, transform .1s ease;
        line-height: 1;
    }
    .an-pill:hover { transform: translateY(-1px); }
    .an-pill-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
    .an-pill--primary { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
    .an-pill--primary:hover { background: #e0e7ff; }
    .dark .an-pill--primary { background: rgb(99 102 241 / 0.15); color: #a5b4fc; border-color: rgb(99 102 241 / 0.30); }
    .dark .an-pill--primary:hover { background: rgb(99 102 241 / 0.25); }
    .an-pill--success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
    .an-pill--success:hover { background: #a7f3d0; }
    .dark .an-pill--success { background: rgb(16 185 129 / 0.15); color: #6ee7b7; border-color: rgb(16 185 129 / 0.30); }
    .dark .an-pill--success:hover { background: rgb(16 185 129 / 0.25); }
    .an-pill--info { background: #ede9fe; color: #4c1d95; border-color: #ddd6fe; }
    .an-pill--info:hover { background: #ddd6fe; }
    .dark .an-pill--info { background: rgb(139 92 246 / 0.15); color: #c4b5fd; border-color: rgb(139 92 246 / 0.30); }
    .dark .an-pill--info:hover { background: rgb(139 92 246 / 0.25); }

    /* Section headers */
    .an-section {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        scroll-margin-top: 5rem;
    }
    .an-sec-hdr {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--pm-border);
    }
    /* Colored left accent bar */
    .an-sec-bar {
        width: 3px;
        height: 1.5rem;
        border-radius: 9999px;
        flex-shrink: 0;
    }
    .an-sec-hdr--primary .an-sec-bar { background: #6366f1; }
    .an-sec-hdr--success .an-sec-bar { background: #10b981; }
    .an-sec-hdr--info    .an-sec-bar { background: #8b5cf6; }
    /* Section icon */
    .an-sec-icon-wrap {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.4375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .an-sec-hdr--primary .an-sec-icon-wrap { background: #eef2ff; }
    .an-sec-hdr--success .an-sec-icon-wrap { background: #d1fae5; }
    .an-sec-hdr--info    .an-sec-icon-wrap { background: #ede9fe; }
    .dark .an-sec-hdr--primary .an-sec-icon-wrap { background: rgb(99  102 241 / 0.15); }
    .dark .an-sec-hdr--success .an-sec-icon-wrap { background: rgb(16  185 129 / 0.15); }
    .dark .an-sec-hdr--info    .an-sec-icon-wrap { background: rgb(139  92 246 / 0.15); }
    .an-sec-icon { width: 1rem; height: 1rem; }
    .an-sec-hdr--primary .an-sec-icon { color: #4f46e5; }
    .an-sec-hdr--success .an-sec-icon { color: #059669; }
    .an-sec-hdr--info    .an-sec-icon { color: #7c3aed; }
    .dark .an-sec-hdr--primary .an-sec-icon { color: #818cf8; }
    .dark .an-sec-hdr--success .an-sec-icon { color: #34d399; }
    .dark .an-sec-hdr--info    .an-sec-icon { color: #a78bfa; }
    /* Title + description */
    .an-sec-text { flex: 1; min-width: 0; }
    .an-sec-title {
        font-size: 0.9375rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: rgb(24 24 27);
    }
    .dark .an-sec-title { color: #ffffff; }
    .an-sec-desc {
        font-size: 0.75rem;
        color: var(--pm-muted);
        margin-top: 0.1rem;
    }
    /* Chart count badge */
    .an-sec-badge {
        padding: 0.2rem 0.65rem;
        border-radius: 9999px;
        font-size: 0.6875rem;
        font-weight: 700;
        white-space: nowrap;
        margin-left: auto;
    }
    .an-sec-badge--primary { background: #eef2ff; color: #4338ca; }
    .an-sec-badge--success { background: #d1fae5; color: #065f46; }
    .an-sec-badge--info    { background: #ede9fe; color: #4c1d95; }
    .dark .an-sec-badge--primary { background: rgb(99  102 241 / 0.15); color: #a5b4fc; }
    .dark .an-sec-badge--success { background: rgb(16  185 129 / 0.15); color: #6ee7b7; }
    .dark .an-sec-badge--info    { background: rgb(139  92 246 / 0.15); color: #c4b5fd; }
    /* Tighter chart widget gap inside sections */
    .an-section .fi-wi { gap: 0.75rem; }
    /* Mobile: single-column KPI cards */
    @media (max-width: 639px) {
        .an-kpi-grid { grid-template-columns: 1fr; }
        .an-kpi-value { font-size: 1.5rem; }
    }

    /* ---- AdSense Earnings page (ae-*) ---------------------------------
       Green/gold money theme. No build step — CSS vars + ae-* scoping.
       ------------------------------------------------------------------ */

    /* Filter bar */
    .ae-filter-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.875rem 1.125rem;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        border: 1px solid var(--pm-border);
        box-shadow: none;
    }
    .dark .ae-filter-bar {
        background: var(--pm-card-bg);
        border-color: var(--pm-border);
    }
    .ae-filter-bar-inner {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }
    .ae-filter-icon { width: 0.875rem; height: 0.875rem; color: var(--pm-muted); }
    .dark .ae-filter-icon { color: var(--pm-muted); }
    .ae-filter-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pm-muted);
    }
    .dark .ae-filter-title { color: var(--pm-muted); }
    .ae-filter-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        flex: 1;
    }
    .ae-filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
    .ae-filter-label {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--pm-muted);
    }
    .dark .ae-filter-label { color: var(--pm-muted); }
    .ae-filter-label-icon { width: 0.75rem; height: 0.75rem; }
    .ae-select {
        border-radius: 0.5rem;
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        padding: 0.3rem 0.65rem;
        font-size: 0.8125rem;
        color: rgb(24 24 27);
        box-shadow: none;
        transition: border-color .12s ease;
        outline: none;
        min-width: 140px;
        /* Single custom chevron — kill the native arrow so it doesn't double up. */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.55rem center;
        background-size: 0.7rem;
        padding-right: 1.9rem;
    }
    .ae-select:focus { border-color: #10b981; box-shadow: 0 0 0 2px rgb(16 185 129 / 0.2); }
    .dark .ae-select {
        background: var(--pm-header-bg);
        border-color: rgb(255 255 255 / 0.12);
        color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.55rem center;
        background-size: 0.7rem;
    }
    .dark .ae-select:focus { border-color: #34d399; }

    /* KPI grid */
    .ae-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    @media (max-width: 1024px) {
        .ae-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
        .ae-kpi-grid { grid-template-columns: 1fr; }
    }
    .ae-kpi {
        position: relative;
        overflow: hidden;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        padding: 1.125rem;
        border: 1px solid var(--pm-border);
        box-shadow: none;
    }
    .dark .ae-kpi {
        background: var(--pm-card-bg);
        border-color: var(--pm-border);
    }
    /* Top gradient bar */
    .ae-kpi-bar {
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 3px;
    }
    .ae-kpi--gold .ae-kpi-bar { background: #f59e0b; }
    .ae-kpi--green .ae-kpi-bar { background: #10b981; }
    .ae-kpi--teal .ae-kpi-bar { background: #06b6d4; }
    .ae-kpi--violet .ae-kpi-bar { background: #8b5cf6; }
    /* Body */
    .ae-kpi-body {
        display: flex;
        align-items: flex-start;
        gap: 0.875rem;
        padding-top: 0.5rem;
    }
    .ae-kpi-icon-wrap {
        flex-shrink: 0;
        width: 2.375rem;
        height: 2.375rem;
        border-radius: 0.5625rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ae-kpi--gold .ae-kpi-icon-wrap { background: #fef3c7; }
    .ae-kpi--green .ae-kpi-icon-wrap { background: #d1fae5; }
    .ae-kpi--teal .ae-kpi-icon-wrap { background: #cffafe; }
    .ae-kpi--violet .ae-kpi-icon-wrap { background: #ede9fe; }
    .dark .ae-kpi--gold .ae-kpi-icon-wrap { background: rgb(245 158 11 / 0.15); }
    .dark .ae-kpi--green .ae-kpi-icon-wrap { background: rgb(16 185 129 / 0.15); }
    .dark .ae-kpi--teal .ae-kpi-icon-wrap { background: rgb(6 182 212 / 0.15); }
    .dark .ae-kpi--violet .ae-kpi-icon-wrap { background: rgb(139 92 246 / 0.15); }
    .ae-kpi-icon { width: 1.125rem; height: 1.125rem; }
    .ae-kpi--gold .ae-kpi-icon { color: #d97706; }
    .ae-kpi--green .ae-kpi-icon { color: #059669; }
    .ae-kpi--teal .ae-kpi-icon { color: #0891b2; }
    .ae-kpi--violet .ae-kpi-icon { color: #7c3aed; }
    .dark .ae-kpi--gold .ae-kpi-icon { color: #fbbf24; }
    .dark .ae-kpi--green .ae-kpi-icon { color: #34d399; }
    .dark .ae-kpi--teal .ae-kpi-icon { color: #67e8f9; }
    .dark .ae-kpi--violet .ae-kpi-icon { color: #c4b5fd; }
    /* Text */
    .ae-kpi-text { min-width: 0; flex: 1; }
    .ae-kpi-label {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--pm-muted);
    }
    .dark .ae-kpi-label { color: var(--pm-muted); }
    .ae-kpi-value {
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1.1;
        color: rgb(24 24 27);
        margin-top: 0.15rem;
        font-variant-numeric: tabular-nums;
    }
    .dark .ae-kpi-value { color: #ffffff; }
    .ae-kpi-desc { font-size: 0.6875rem; color: var(--pm-muted); margin-top: 0.2rem; }
    .dark .ae-kpi-desc { color: var(--pm-muted); }
    .ae-kpi-change {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
        margin-top: 0.3rem;
    }
    .ae-kpi-change-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
    .ae-kpi-change--up { color: #059669; }
    .ae-kpi-change--dn { color: #dc2626; }
    .dark .ae-kpi-change--up { color: #34d399; }
    .dark .ae-kpi-change--dn { color: #f87171; }

    /* Section layout */
    .ae-section {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        border: 1px solid var(--pm-border);
        box-shadow: none;
        overflow: hidden;
    }
    .dark .ae-section {
        background: var(--pm-card-bg);
        border-color: var(--pm-border);
    }
    .ae-sec-hdr {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.875rem 1.25rem;
        border-bottom: 1px solid var(--pm-border);
        background: var(--pm-header-bg);
    }
    .dark .ae-sec-hdr {
        background: var(--pm-surface-2);
        border-bottom-color: rgb(255 255 255 / 0.07);
    }
    .ae-sec-bar {
        width: 3px;
        height: 1.25rem;
        border-radius: 9999px;
        flex-shrink: 0;
        background: #10b981;
    }
    .ae-sec-bar--teal { background: #06b6d4; }
    .ae-sec-icon-wrap {
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #d1fae5;
        flex-shrink: 0;
    }
    .ae-sec-icon-wrap--teal { background: #cffafe; }
    .dark .ae-sec-icon-wrap { background: rgb(16 185 129 / 0.15); }
    .dark .ae-sec-icon-wrap--teal { background: rgb(6 182 212 / 0.15); }
    .ae-sec-icon { width: 0.875rem; height: 0.875rem; color: #059669; }
    .ae-sec-icon--teal { color: #0891b2; }
    .dark .ae-sec-icon { color: #34d399; }
    .dark .ae-sec-icon--teal { color: #67e8f9; }
    .ae-sec-text { flex: 1; min-width: 0; }
    .ae-sec-title {
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: rgb(24 24 27);
    }
    .dark .ae-sec-title { color: #ffffff; }
    .ae-sec-desc { font-size: 0.6875rem; color: var(--pm-muted); margin-top: 0.1rem; }
    .dark .ae-sec-desc { color: var(--pm-muted); }

    /* Empty state */
    .ae-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 2.5rem 1rem;
        color: var(--pm-muted);
        font-size: 0.875rem;
    }
    .ae-empty-icon { width: 2rem; height: 2rem; opacity: 0.5; }

    /* Tables */
    .ae-table-wrap { overflow-x: auto; }
    .ae-table { width: 100%; min-width: max-content; font-size: 0.8125rem; border-collapse: collapse; }
    .ae-thead-row {
        border-bottom: 1px solid var(--pm-border);
        background: var(--pm-surface-2);
    }
    .dark .ae-thead-row {
        background: var(--pm-surface-2);
        border-bottom-color: rgb(255 255 255 / 0.08);
    }
    .ae-th {
        padding: 0.4rem 0.875rem;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        color: var(--pm-muted);
        white-space: nowrap;
    }
    .dark .ae-th { color: var(--pm-muted); }
    .ae-th-left { text-align: left; }
    .ae-th-right { text-align: right; }
    .ae-th-sticky {
        position: sticky;
        left: 0;
        z-index: 10;
        background: var(--pm-header-bg);
    }
    .dark .ae-th-sticky { background: var(--pm-header-bg); }
    .ae-th-month { min-width: 6rem; }
    .ae-th-total { color: rgb(24 24 27); }
    .dark .ae-th-total { color: #e4e4e7; }
    .ae-th-trend { width: 10rem; }
    /* The account leaderboard's sparkline column. It used to share
       `.ae-th-trend` with the month-wise trend table, but only the month
       table's CELL was hidden alongside the header at <=639px — so the
       leaderboard rendered 6 headers over 7 cells and every column right of
       "All-time" was labelled by its neighbour. Its own header/cell pair now,
       hidden together in the mobile block below. */
    .ae-th-spark { width: 10rem; }

    .ae-tr {
        border-bottom: 1px solid var(--pm-border);
        transition: background-color .1s ease;
    }
    .ae-tr:last-child { border-bottom: 0; }
    .dark .ae-tr { border-bottom-color: rgb(255 255 255 / 0.04); }
    .ae-tr:hover { background: rgb(16 185 129 / 0.035); }
    .dark .ae-tr:hover { background: rgb(16 185 129 / 0.06); }
    .ae-tr:nth-child(even) { background: var(--pm-surface-2); }
    .dark .ae-tr:nth-child(even) { background: rgb(255 255 255 / 0.015); }
    .ae-tr:nth-child(even):hover { background: rgb(16 185 129 / 0.04); }

    .ae-td {
        padding: 0.45rem 0.875rem;
        white-space: nowrap;
        vertical-align: middle;
    }
    .ae-td-sticky {
        position: sticky;
        left: 0;
        z-index: 9;
        background: var(--pm-card-bg);
    }
    .dark .ae-td-sticky { background: var(--pm-card-bg); }
    .ae-tr:nth-child(even) .ae-td-sticky { background: var(--pm-header-bg); }
    .dark .ae-tr:nth-child(even) .ae-td-sticky { background: rgb(20 28 42); }
    .ae-td-site { font-weight: 600; color: rgb(24 24 27); font-size: 0.8125rem; }
    .dark .ae-td-site { color: #ffffff; }
    .ae-td-meta { font-size: 0.75rem; color: var(--pm-muted); }
    .dark .ae-td-meta { color: var(--pm-muted); }
    .ae-td-muted { color: var(--pm-muted); font-size: 0.75rem; }
    .dark .ae-td-muted { color: var(--pm-muted); }
    /* Money cells */
    .ae-td-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
        position: relative;
    }
    .ae-td-num--has { color: rgb(24 24 27); font-weight: 600; }
    .dark .ae-td-num--has { color: #ffffff; }
    .ae-td-num--empty { color: #d4d4d8; }
    .dark .ae-td-num--empty { color: #3f3f46; }
    /* Directional money-cell tint: green when higher than the row's previous
       month-with-data, red when lower. Subtle alpha keeps the amount legible. */
    .ae-cell--up { background: rgb(16 185 129 / 0.10); }
    .ae-cell--dn { background: rgb(239 68 68 / 0.10); }
    .dark .ae-cell--up { background: rgb(16 185 129 / 0.16); }
    .dark .ae-cell--dn { background: rgb(239 68 68 / 0.16); }
    /* Keep the directional tint visible even on the sticky/zebra/hover rows. */
    .ae-tr:hover .ae-cell--up, .ae-tr:nth-child(even) .ae-cell--up { background: rgb(16 185 129 / 0.13); }
    .ae-tr:hover .ae-cell--dn, .ae-tr:nth-child(even) .ae-cell--dn { background: rgb(239 68 68 / 0.13); }
    .dark .ae-tr:hover .ae-cell--up, .dark .ae-tr:nth-child(even) .ae-cell--up { background: rgb(16 185 129 / 0.18); }
    .dark .ae-tr:hover .ae-cell--dn, .dark .ae-tr:nth-child(even) .ae-cell--dn { background: rgb(239 68 68 / 0.18); }
    .ae-cell-dir { margin-left: 0.2rem; font-size: 0.625rem; opacity: 0.8; }
    .ae-td-row-total {
        font-weight: 800;
        color: #059669 !important;
        border-left: 1px solid var(--pm-border);
    }
    .dark .ae-td-row-total { color: #34d399 !important; border-left-color: rgb(255 255 255 / 0.08); }

    /* Footer row */
    .ae-tfoot-row {
        border-top: 2px solid var(--pm-border-strong);
        background: var(--pm-header-bg);
    }
    .dark .ae-tfoot-row {
        border-top-color: rgb(255 255 255 / 0.12);
        background: var(--pm-surface-2);
    }
    .ae-tfoot-label {
        font-size: 0.6875rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #3f3f46;
        background: var(--pm-header-bg) !important;
    }
    .dark .ae-tfoot-label {
        color: #d4d4d8;
        background: var(--pm-header-bg) !important;
    }
    .ae-tfoot-cell { text-align: right; padding-top: 0.55rem; padding-bottom: 0.55rem; }
    .ae-tfoot-amount { font-weight: 800; color: rgb(24 24 27); font-variant-numeric: tabular-nums; }
    .dark .ae-tfoot-amount { color: #ffffff; }
    .ae-tfoot-empty { color: var(--pm-muted); }
    .ae-tfoot-chg { margin-top: 0.15rem; font-size: 0.6875rem; font-weight: 700; }
    .ae-chg--up { color: #059669; }
    .ae-chg--dn { color: #dc2626; }
    .dark .ae-chg--up { color: #34d399; }
    .dark .ae-chg--dn { color: #f87171; }
    .ae-tfoot-grand {
        font-weight: 900;
        font-size: 0.9375rem;
        color: #059669 !important;
        border-left: 1px solid var(--pm-border-strong);
        font-variant-numeric: tabular-nums;
    }
    .dark .ae-tfoot-grand { color: #34d399 !important; border-left-color: rgb(255 255 255 / 0.12); }

    /* Trend table extras */
    .ae-td-month { font-weight: 600; color: rgb(24 24 27); }
    .dark .ae-td-month { color: #ffffff; }
    .ae-td-badge { text-align: right; }
    .ae-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.15rem;
        padding: 0.2rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.6875rem;
        font-weight: 700;
    }
    .ae-badge--up { background: #d1fae5; color: #065f46; }
    .ae-badge--dn { background: #fee2e2; color: #991b1b; }
    .dark .ae-badge--up { background: rgb(16 185 129 / 0.18); color: #6ee7b7; }
    .dark .ae-badge--dn { background: rgb(239 68 68 / 0.18); color: #fca5a5; }
    .ae-empty-dash { color: #d4d4d8; }
    .dark .ae-empty-dash { color: #3f3f46; }
    /* Trend bar */
    .ae-td-bar { width: 12rem; }
    .ae-bar-track {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        height: 1.375rem;
        position: relative;
    }
    .ae-bar-fill {
        height: 0.5rem;
        border-radius: 9999px;
        background: #10b981;
        transition: width .3s ease;
    }
    .ae-bar-fill--dn {
        background: linear-gradient(90deg, #f87171, #fca5a5);
    }
    .ae-bar-label {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--pm-muted);
        white-space: nowrap;
    }
    .dark .ae-bar-label { color: var(--pm-muted); }

    /* ---- Chart (month-wise / account-wise) ---------------------------- */
    .ae-chart-pad { padding: 1rem 1.25rem 1.25rem; }
    .ae-chart-toolbar { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
    .ae-chart-tab {
        font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem;
        border-radius: 0.5rem; border: 1px solid var(--pm-border-strong);
        background: #fff; color: var(--pm-muted); cursor: pointer; transition: all .12s ease;
    }
    .ae-chart-tab:hover { border-color: #10b981; color: #059669; }
    .ae-chart-tab--on { background: #10b981; border-color: #10b981; color: #fff; }
    .dark .ae-chart-tab { background: var(--pm-header-bg); border-color: rgb(255 255 255 / 0.12); color: var(--pm-muted); }
    .dark .ae-chart-tab--on { background: #10b981; border-color: #10b981; color: #062a22; }

    /* ---- Sparkline (leaderboard) -------------------------------------- */
    .ae-spark { width: 84px; height: 22px; display: block; }
    .ae-spark-line { fill: none; stroke: #10b981; stroke-width: 2; vector-effect: non-scaling-stroke; }
    .ae-spark-area { fill: rgb(16 185 129 / 0.12); stroke: none; }

    /* ---- Leaderboard cells -------------------------------------------- */
    .ae-lb-name { font-weight: 700; color: rgb(24 24 27); }
    .dark .ae-lb-name { color: #fff; }
    .ae-lb-share-track { height: 0.4rem; width: 4.5rem; border-radius: 9999px; background: rgb(16 185 129 / 0.15); overflow: hidden; }
    .ae-lb-share-fill { height: 100%; border-radius: 9999px; background: #10b981; }
    .ae-lb-share-pct { font-size: 0.6875rem; color: var(--pm-muted); margin-left: 0.4rem; }
    .dark .ae-lb-share-pct { color: var(--pm-muted); }

    /* ---- Bank-wise payout strip --------------------------------------- */
    .ae-bank-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem; padding: 1rem 1.25rem 1.25rem;
    }
    .ae-bank-card {
        border-radius: 0.625rem; border: 1px solid var(--pm-border);
        background: var(--pm-header-bg); padding: 0.75rem 0.875rem;
    }
    .dark .ae-bank-card { border-color: var(--pm-border); background: var(--pm-surface-2); }
    .ae-bank-name { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pm-muted); }
    .dark .ae-bank-name { color: var(--pm-muted); }
    .ae-bank-total { font-size: 1.25rem; font-weight: 800; color: rgb(24 24 27); font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
    .dark .ae-bank-total { color: #fff; }
    .ae-bank-meta { font-size: 0.6875rem; color: var(--pm-muted); margin-top: 0.1rem; }

    /* ---- Stale / declining alerts ------------------------------------- */
    .ae-alert {
        display: flex; align-items: flex-start; gap: 0.625rem;
        border-radius: 0.75rem; padding: 0.75rem 1rem;
        background: #fffbeb; border: 1px solid #fde68a;
    }
    .dark .ae-alert { background: rgb(245 158 11 / 0.08); border-color: rgb(245 158 11 / 0.25); }
    .ae-alert-icon { width: 1.125rem; height: 1.125rem; color: #d97706; flex-shrink: 0; margin-top: 0.05rem; }
    .dark .ae-alert-icon { color: #fbbf24; }
    .ae-alert-title { font-size: 0.8125rem; font-weight: 700; color: #92400e; }
    .dark .ae-alert-title { color: #fcd34d; }
    .ae-alert-list { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .ae-alert-chip {
        font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 9999px;
        background: #fef3c7; color: #92400e;
    }
    .dark .ae-alert-chip { background: rgb(245 158 11 / 0.18); color: #fcd34d; }
    .ae-alert-chip--dn { background: #fee2e2; color: #991b1b; }
    .dark .ae-alert-chip--dn { background: rgb(239 68 68 / 0.18); color: #fca5a5; }

    /* Mobile. Each hidden column drops its header AND its cell — hiding only
       one of the pair shifts every column to its right under the wrong label. */
    @media (max-width: 639px) {
        .ae-kpi-value { font-size: 1.625rem; }
        .ae-th-trend { display: none; }
        .ae-td-bar { display: none; }
        .ae-th-spark { display: none; }
        .ae-td-spark { display: none; }
        /* Chart toggle + section jump links were ~22-26px tall. */
        .ae-chart-tab, .an-pill { padding: 0.5rem 0.85rem; }
        .ae-chart-toolbar { flex-wrap: wrap; }
    }

    /* ---- Thin, unobtrusive scrollbars --------------------------------- */
    .fi-sidebar-nav, .fi-main {
        scrollbar-width: thin;
    }
    .fi-sidebar-nav::-webkit-scrollbar,
    .fi-main::-webkit-scrollbar { width: 8px; height: 8px; }
    .fi-sidebar-nav::-webkit-scrollbar-thumb,
    .fi-main::-webkit-scrollbar-thumb {
        background: rgb(120 120 120 / 0.35);
        border-radius: 9999px;
    }
    .fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
    .fi-main::-webkit-scrollbar-thumb:hover {
        background: rgb(120 120 120 / 0.55);
    }

    /* ===================================================================
       Scoped page styles (2026 dark-pro re-theme)
       These replace raw Tailwind utility classes that are NOT present in
       the shipped compiled Filament CSS (no build step on this box — see
       site-analytics.blade.php header comment). Convention matches the
       existing .an-* / .ae-* blocks: one short prefix per page, tokens for
       all surfaces, explicit .dark variants only where tokens can't cover.
       =================================================================== */

    /* ---- Quick-Add task (.qa-*) — global FAB + modal ------------------ */
    .qa-fab {
        position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40;
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0.25rem;
        border-radius: 9999px;
        background: rgb(var(--primary-600));
        color: #ffffff;
        padding: 0.75rem 1.25rem;
        border: none; cursor: pointer;
        box-shadow: var(--pm-shadow-lg);
        transition: background-color .14s ease;
    }
    .qa-fab:hover { background: rgb(var(--primary-500)); }
    .qa-fab:focus-visible { outline: 2px solid rgb(var(--primary-500) / 0.55); outline-offset: 2px; }
    .qa-fab-icon { width: 1.25rem; height: 1.25rem; margin-right: 0.25rem; }
    .qa-fab-label { font-size: 0.875rem; font-weight: 600; }
    .qa-fab-kbd {
        margin-left: 0.5rem;
        font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em;
        background: rgb(255 255 255 / 0.18);
        border-radius: 0.25rem;
        padding: 0.125rem 0.375rem;
    }
    @media (max-width: 767px) { .qa-fab-kbd { display: none; } }
    .qa-overlay {
        position: fixed; inset: 0; z-index: 50;
        display: flex; align-items: flex-start; justify-content: center;
        background: rgb(0 0 0 / 0.5);
        padding: 1rem; padding-top: 10vh;
    }
    .qa-panel {
        width: 100%; max-width: 42rem;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        box-shadow: inset 0 0 0 1px var(--pm-border-strong), var(--pm-shadow-lg);
    }
    .qa-form { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
    .qa-title-input {
        width: 100%;
        font-size: 1.125rem;
        border: 0; outline: none; box-shadow: none;
        background: transparent;
        color: rgb(24 24 27);
    }
    .dark .qa-title-input { color: #fafafa; }
    .qa-title-input::placeholder { color: var(--pm-muted); opacity: 0.75; }
    .qa-title-input:focus { outline: none; box-shadow: none; }
    .qa-error { font-size: 0.875rem; color: rgb(var(--danger-600)); margin-top: 0.25rem; }
    .qa-error-sm { font-size: 0.75rem; color: rgb(var(--danger-600)); margin-top: 0.25rem; }
    .dark .qa-error, .dark .qa-error-sm { color: rgb(var(--danger-400)); }
    .qa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
    .qa-chip {
        display: inline-flex; align-items: center;
        border-radius: 9999px;
        padding: 0.25rem 0.625rem;
        font-weight: 500;
    }
    .qa-chip--warning {
        background: rgb(var(--warning-500) / 0.10);
        color: rgb(var(--warning-600));
        box-shadow: inset 0 0 0 1px rgb(var(--warning-500) / 0.30);
    }
    .dark .qa-chip--warning { color: rgb(var(--warning-400)); }
    .qa-chip--danger {
        background: rgb(var(--danger-500) / 0.10);
        color: rgb(var(--danger-600));
        box-shadow: inset 0 0 0 1px rgb(var(--danger-500) / 0.30);
    }
    .dark .qa-chip--danger { color: rgb(var(--danger-400)); }
    .qa-chip--primary {
        background: rgb(var(--primary-500) / 0.10);
        color: rgb(var(--primary-600));
        box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.30);
    }
    .dark .qa-chip--primary { color: rgb(var(--primary-400)); }
    .qa-chip--label { color: #ffffff; /* bg set inline from label color_hex */ }
    .qa-opts-row {
        display: flex; flex-wrap: wrap; align-items: center;
        justify-content: space-between; gap: 0.5rem;
        font-size: 0.75rem; color: var(--pm-muted);
    }
    .qa-more-btn {
        display: inline-flex; align-items: center; gap: 0.25rem;
        background: none; border: none; padding: 0; cursor: pointer;
        font: inherit; color: var(--pm-muted);
        transition: color .12s ease;
    }
    .qa-more-btn:hover { color: rgb(24 24 27); }
    .dark .qa-more-btn:hover { color: #fafafa; }
    .qa-hint { color: var(--pm-muted); opacity: 0.8; }
    @media (max-width: 639px) { .qa-hint { display: none; } }
    .qa-hint-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .qa-grid {
        display: grid; grid-template-columns: 1fr; gap: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--pm-border);
    }
    @media (min-width: 768px) { .qa-grid { grid-template-columns: repeat(2, 1fr); } }
    .qa-label {
        display: block;
        font-size: 0.75rem; font-weight: 500;
        color: var(--pm-muted);
        margin-bottom: 0.25rem;
    }
    .qa-input {
        width: 100%;
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        color: rgb(24 24 27);
        font-size: 0.875rem;
        padding: 0.4rem 0.65rem;
    }
    .dark .qa-input { color: #fafafa; }
    .qa-input:focus {
        outline: none;
        border-color: rgb(var(--primary-500));
        box-shadow: 0 0 0 3px rgb(var(--primary-500) / 0.25);
    }
    .qa-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
    .qa-btn-ghost {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
        border-radius: var(--pm-radius);
        border: none; background: none; cursor: pointer;
        color: var(--pm-muted);
        transition: background-color .12s ease;
    }
    .qa-btn-ghost:hover { background: var(--pm-surface-2); }
    .qa-btn-primary {
        font-size: 0.875rem; font-weight: 600;
        padding: 0.375rem 1rem;
        border-radius: var(--pm-radius);
        border: none; cursor: pointer;
        background: rgb(var(--primary-600));
        color: #ffffff;
        transition: background-color .12s ease;
    }
    .qa-btn-primary:hover { background: rgb(var(--primary-500)); }
    .qa-kbd-sub { margin-left: 0.25rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }

    /* ---- Shortcuts widget (.sc-*) — pinned + recent cards -------------- */
    .sc-empty { font-size: 0.875rem; color: var(--pm-muted); }
    .sc-empty-strong { font-weight: 600; }
    .sc-group { margin-bottom: 0.75rem; }
    .sc-group-label {
        display: flex; align-items: center; gap: 0.375rem;
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--pm-muted);
        margin-bottom: 0.5rem;
    }
    .sc-group-label--pinned { color: rgb(var(--warning-600)); }
    .dark .sc-group-label--pinned { color: rgb(var(--warning-400)); }
    .sc-group-icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
    .sc-grid {
        display: grid; gap: 0.5rem;
        grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 640px)  { .sc-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .sc-grid { grid-template-columns: repeat(5, 1fr); } }
    .sc-card {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--pm-radius);
        background: var(--pm-surface-2);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        text-decoration: none;
        transition: background-color .12s ease, box-shadow .12s ease;
    }
    .sc-card:hover {
        background: rgb(var(--primary-500) / 0.06);
        box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.35);
    }
    .sc-card--pinned {
        background: rgb(var(--warning-500) / 0.06);
        box-shadow: inset 0 0 0 1px rgb(var(--warning-500) / 0.25);
    }
    .sc-card--pinned:hover {
        background: rgb(var(--warning-500) / 0.12);
        box-shadow: inset 0 0 0 1px rgb(var(--warning-500) / 0.40);
    }
    .sc-card-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--pm-muted); }
    .sc-card-icon--pinned { color: rgb(var(--warning-600)); }
    .dark .sc-card-icon--pinned { color: rgb(var(--warning-400)); }
    .sc-card-text { min-width: 0; }
    .sc-card-label {
        font-size: 0.875rem; font-weight: 500;
        color: rgb(24 24 27);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dark .sc-card-label { color: #fafafa; }
    .sc-card-sublabel {
        font-size: 0.625rem; color: var(--pm-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* ---- Tasks calendar (.cal-*) — month grid -------------------------- */
    .cal-toolbar {
        display: flex; flex-wrap: wrap;
        align-items: center; justify-content: space-between;
        gap: 0.5rem; margin-bottom: 1rem;
    }
    .cal-nav { display: flex; align-items: center; gap: 0.5rem; }
    .cal-nav-btn {
        padding: 0.25rem 0.5rem;
        border-radius: var(--pm-radius);
        border: none; background: none; cursor: pointer;
        font: inherit; color: inherit;
        transition: background-color .12s ease;
    }
    .cal-nav-btn:hover { background: var(--pm-surface-2); }
    .cal-nav-btn--today { padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; }
    .cal-month-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0 0.75rem; }
    .cal-filter-btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: none; cursor: pointer;
        font-family: inherit; color: inherit;
        transition: background-color .12s ease;
    }
    .cal-filter-btn:hover { background: var(--pm-surface-2); }
    .cal-filter-strong { font-weight: 600; }
    .cal-grid {
        display: grid; grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: var(--pm-border-strong);
    }
    .cal-grid--head { font-size: 0.75rem; font-weight: 600; }
    .cal-dow {
        padding: 0.5rem;
        background: var(--pm-header-bg);
        text-align: center;
        text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem;
        color: var(--pm-muted);
    }
    .cal-day {
        min-height: 110px;
        padding: 0.5rem;
        background: var(--pm-card-bg);
        min-width: 0;
    }
    .cal-day--out { opacity: 0.45; }
    .cal-day--today { box-shadow: inset 0 0 0 2px rgb(var(--primary-500)); }
    .cal-day-num { font-size: 0.75rem; font-weight: 600; color: var(--pm-muted); margin-bottom: 0.25rem; }
    .cal-day-num--today { color: rgb(var(--primary-600)); }
    .dark .cal-day-num--today { color: rgb(var(--primary-400)); }
    .cal-tasks { display: flex; flex-direction: column; gap: 0.25rem; }
    .cal-task {
        display: block;
        font-size: 0.6875rem; line-height: 1.3;
        border-radius: 0.25rem;
        padding: 0.125rem 0.375rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        text-decoration: none;
        background: rgb(var(--primary-500) / 0.10);
        color: rgb(var(--primary-700));
        transition: opacity .12s ease;
    }
    .dark .cal-task { color: rgb(var(--primary-300)); background: rgb(var(--primary-500) / 0.16); }
    .cal-task:hover { opacity: 0.8; }
    .cal-task--overdue {
        background: rgb(var(--danger-500) / 0.10);
        color: rgb(var(--danger-700));
    }
    .dark .cal-task--overdue { color: rgb(var(--danger-300)); background: rgb(var(--danger-500) / 0.16); }
    .cal-task--done {
        background: rgb(var(--success-500) / 0.10);
        color: rgb(var(--success-700));
        text-decoration: line-through;
    }
    .dark .cal-task--done { color: rgb(var(--success-300)); background: rgb(var(--success-500) / 0.16); }
    .cal-task-time { font-weight: 600; }
    /* Tablet: keep the month grid, just make the cells shorter. */
    @media (max-width: 767px) {
        .cal-day { min-height: 72px; padding: 0.3rem; }
        .cal-month-title { font-size: 1rem; }
        .cal-nav-btn { padding: 0.5rem 0.75rem; }
    }

    /* Phone: the month grid stops being a calendar and becomes an unreadable
       colour swatch. Seven columns inside ~319px of content is ~45px per day;
       .cal-task is 0.6875rem with nowrap + ellipsis, so a title truncated to
       "5:00…" is all you get, and the full text lived only in a title=""
       tooltip that a touch device can never show.

       Below 640px the same markup is re-laid-out as an agenda list: one day per
       row, weekday header hidden, empty days dropped, and the date surfaced
       from the data-date-label attribute the blade emits. Days outside the
       month are dropped entirely — they only exist to square off a grid.

       This is a pure re-layout: no markup is duplicated and nothing is hidden
       that a user would otherwise be able to reach. */
    @media (max-width: 639px) {
        .cal-grid {
            grid-template-columns: 1fr;
            gap: 0;
            background: transparent;
        }
        .cal-grid--head { display: none; }
        .cal-day--out,
        .cal-day--empty:not(.cal-day--today) { display: none; }

        .cal-day {
            min-height: 0;
            padding: 0.6rem 0.75rem;
            border-bottom: 1px solid var(--pm-border);
            display: grid;
            grid-template-columns: 4.25rem 1fr;
            gap: 0.6rem;
            align-items: start;
        }
        .cal-day--today { box-shadow: none; border-left: 3px solid rgb(var(--primary-500)); }

        /* Swap the bare day number for the weekday + date the blade supplies. */
        .cal-day-num { font-size: 0; margin-bottom: 0; padding-top: 0.15rem; }
        .cal-day-num::after {
            content: attr(data-date-label);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.01em;
        }

        .cal-tasks { gap: 0.35rem; }
        .cal-task {
            /* Full title over up to two lines, and a real tap target. */
            white-space: normal;
            text-overflow: clip;
            font-size: 0.8125rem;
            line-height: 1.35;
            padding: 0.5rem 0.6rem;
            display: flex;
            gap: 0.4rem;
            align-items: baseline;
        }
        .cal-task-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .cal-task-time { flex: 0 0 auto; }
        /* Empty today still renders, so say so rather than showing a blank row. */
        .cal-day--empty .cal-tasks::after {
            content: "Nothing due";
            font-size: 0.75rem;
            color: var(--pm-muted);
        }
    }

    /* ---- Tasks kanban (.kb-*) — board + columns + cards ---------------- */
    .kb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
    .kb-toolbar-label { font-size: 0.875rem; }
    .kb-select {
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        color: rgb(24 24 27);
        font-size: 0.875rem;
        padding: 0.35rem 0.65rem;
    }
    .dark .kb-select { color: #fafafa; }
    .kb-select:focus {
        outline: none;
        border-color: rgb(var(--primary-500));
        box-shadow: 0 0 0 3px rgb(var(--primary-500) / 0.25);
    }
    .kb-board {
        display: flex; gap: 1rem;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    .kb-col-wrap { min-width: 280px; width: 18rem; flex-shrink: 0; }
    .kb-col {
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        overflow: hidden;
    }
    .kb-col-hdr {
        padding: 0.75rem;
        border-bottom: 1px solid var(--pm-border);
        display: flex; align-items: center; justify-content: space-between;
    }
    .kb-col-title { font-weight: 600; font-size: 0.875rem; margin: 0; }
    .kb-col-count { font-size: 0.75rem; color: var(--pm-muted); }
    .kb-col-body {
        padding: 0.5rem;
        display: flex; flex-direction: column; gap: 0.5rem;
        min-height: 200px;
    }
    .kb-card {
        display: block;
        border-radius: var(--pm-radius);
        background: var(--pm-surface-2);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        padding: 0.5rem;
        font-size: 0.875rem;
        text-decoration: none;
        color: inherit;
        cursor: grab;
        transition: background-color .12s ease, box-shadow .12s ease;
    }
    .kb-card:hover {
        background: rgb(var(--primary-500) / 0.05);
        box-shadow: inset 0 0 0 1px var(--pm-border-strong);
    }
    .kb-card-title { font-weight: 500; }
    .kb-card-meta {
        font-size: 0.75rem; color: var(--pm-muted);
        margin-top: 0.25rem;
        display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;
    }
    .kb-card-overdue { color: rgb(var(--danger-600)); font-weight: 600; }
    .dark .kb-card-overdue { color: rgb(var(--danger-400)); }
    /* SortableJS drag states */
    .kb-card.sortable-ghost { opacity: 0.4; }
    .kb-card.sortable-chosen { cursor: grabbing; }

    /* Kanban on touch. The board is a horizontal scroller of 288px columns, so
       a phone shows roughly one column and a sliver. Snap points make that read
       as deliberate paging rather than a half-cut column, and the callout/
       selection suppression stops iOS from popping its native link menu during
       the 200ms press-and-hold that starts a drag (see the delay/
       delayOnTouchOnly options in kanban.blade.php — the two halves of this fix
       only work together). */
    .kb-board { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .kb-col-wrap { scroll-snap-align: start; }
    @media (hover: none) and (pointer: coarse) {
        .kb-card {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
    }
    @media (max-width: 639px) {
        /* Give the column nearly the full width — a 280px floor against a
           ~319px content box left a 39px stub of the next column, which reads
           as a rendering error rather than as "swipe for more". */
        .kb-col-wrap { min-width: 0; width: 88%; }
        .kb-board { gap: 0.6rem; }
    }

    /* ---- Credentials health (.ch-*) ------------------------------------ */
    .ch-stack { display: flex; flex-direction: column; gap: 1.5rem; }
    .ch-summary { font-size: 0.875rem; color: var(--pm-muted); }
    .ch-strong { color: rgb(24 24 27); font-weight: 600; }
    .dark .ch-strong { color: #fafafa; }
    .ch-callout {
        border-radius: var(--pm-radius);
        background: rgb(var(--warning-500) / 0.08);
        box-shadow: inset 0 0 0 1px rgb(var(--warning-500) / 0.30);
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        color: rgb(var(--warning-700));
    }
    .dark .ch-callout { color: rgb(var(--warning-300)); }
    .ch-count {
        margin-left: 0.5rem;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem; font-weight: 600;
        border-radius: 9999px;
    }
    .ch-count--danger  { background: rgb(var(--danger-500) / 0.10);  color: rgb(var(--danger-600)); }
    .dark .ch-count--danger  { color: rgb(var(--danger-400)); }
    .ch-count--warning { background: rgb(var(--warning-500) / 0.10); color: rgb(var(--warning-600)); }
    .dark .ch-count--warning { color: rgb(var(--warning-400)); }
    .ch-count--gray    { background: var(--pm-surface-2); color: var(--pm-muted); box-shadow: inset 0 0 0 1px var(--pm-border); }
    .ch-clear { font-size: 0.875rem; color: var(--pm-muted); }
    .ch-clear-icon { display: inline; width: 1rem; height: 1rem; color: rgb(var(--success-500)); vertical-align: -0.15em; }
    .ch-rows > * + * { border-top: 1px solid var(--pm-border); }
    .ch-row { padding: 0.75rem 0; display: flex; align-items: flex-start; gap: 0.75rem; }
    .ch-row-body { flex: 1; min-width: 0; }
    .ch-row-link {
        font-size: 0.875rem; font-weight: 500;
        color: rgb(var(--primary-600));
        text-decoration: none;
        display: block;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dark .ch-row-link { color: rgb(var(--primary-400)); }
    .ch-row-link:hover { text-decoration: underline; }
    .ch-row-name { font-size: 0.875rem; font-weight: 500; color: rgb(24 24 27); }
    .dark .ch-row-name { color: #fafafa; }
    .ch-row-label { font-size: 0.75rem; color: var(--pm-muted); margin-top: 0.125rem; }
    .ch-row-reason { font-size: 0.75rem; color: rgb(63 63 70); margin-top: 0.25rem; }
    .dark .ch-row-reason { color: rgb(212 212 216); }

    /* ---- Database backups (.db-*) -------------------------------------- */
    .db-banner {
        display: flex; gap: 0.75rem;
        border-radius: var(--pm-radius-lg);
        padding: 1rem;
    }
    .db-banner--error {
        background: rgb(var(--danger-500) / 0.07);
        box-shadow: inset 0 0 0 1px rgb(var(--danger-500) / 0.30);
    }
    /* flex-wrap so the filename text and the Cancel/Delete pair stack on a
       phone instead of the non-shrinking button group squeezing the filename
       to nothing — this is a destructive confirmation, the name must be
       readable. */
    .db-banner--confirm { align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .db-confirm-lead { display: flex; align-items: center; gap: 0.75rem; }
    .db-confirm-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
    .db-banner-icon { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: rgb(var(--danger-500)); }
    .db-banner-title { font-size: 0.875rem; font-weight: 600; color: rgb(var(--danger-700)); }
    .dark .db-banner-title { color: rgb(var(--danger-300)); }
    .db-banner-text { margin-top: 0.125rem; font-size: 0.75rem; color: rgb(var(--danger-600)); }
    .dark .db-banner-text { color: rgb(var(--danger-400)); }
    .db-banner-meta { margin-top: 0.5rem; font-size: 0.75rem; color: rgb(var(--danger-500)); }
    .db-code {
        border-radius: 0.25rem;
        background: var(--pm-surface-2);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        padding: 0 0.25rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .db-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .db-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .db-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    @media (min-width: 640px) { .db-cards { grid-template-columns: repeat(4, 1fr); } }
    .db-card {
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        padding: 1.25rem;
    }
    .db-card--ok   { background: rgb(var(--success-500) / 0.06); box-shadow: inset 0 0 0 1px rgb(var(--success-500) / 0.30); }
    .db-card--bad  { background: rgb(var(--danger-500) / 0.06);  box-shadow: inset 0 0 0 1px rgb(var(--danger-500) / 0.30); }
    .db-card--warn { background: rgb(var(--warning-500) / 0.06); box-shadow: inset 0 0 0 1px rgb(var(--warning-500) / 0.30); }
    .db-card-label {
        margin-bottom: 0.25rem;
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--pm-muted);
    }
    .db-card-status { display: flex; align-items: center; gap: 0.5rem; }
    .db-card-value { font-weight: 600; color: rgb(24 24 27); }
    .dark .db-card-value { color: #fafafa; }
    .db-card-big { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; color: rgb(24 24 27); font-variant-numeric: tabular-nums; }
    .dark .db-card-big { color: #ffffff; }
    .db-card-meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--pm-muted); line-height: 1.5; }
    .db-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
    .db-dot--ok  { background: rgb(var(--success-500)); }
    .db-dot--bad { background: rgb(var(--danger-500)); }
    .db-text-ok   { color: rgb(var(--success-600)); }
    .dark .db-text-ok   { color: rgb(var(--success-400)); }
    .db-text-bad  { color: rgb(var(--danger-600)); }
    .dark .db-text-bad  { color: rgb(var(--danger-400)); }
    .db-text-warn { color: rgb(var(--warning-600)); }
    .dark .db-text-warn { color: rgb(var(--warning-300)); }
    .db-count {
        margin-left: 0.5rem;
        display: inline-flex; align-items: center;
        border-radius: 9999px;
        background: var(--pm-surface-2);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem; font-weight: 600;
        color: var(--pm-muted);
    }
    .db-empty { padding: 2.5rem 0; text-align: center; }
    .db-empty-icon { margin: 0 auto 0.75rem; width: 2.5rem; height: 2.5rem; color: var(--pm-border-strong); }
    .db-empty-title { font-size: 0.875rem; font-weight: 500; color: var(--pm-muted); }
    .db-empty-text { margin-top: 0.25rem; font-size: 0.75rem; color: var(--pm-muted); opacity: 0.8; }
    /* Full-bleed: the -1.5rem cancels the section's desktop 24px p-6 exactly.
       On phones the mobile block reduces that padding to 14px, so the same
       -24px bleed overshot the card by 10px each side and, because .fi-section
       has no overflow:hidden, pushed a horizontal scrollbar onto the whole
       document. Match the bleed to the padding at each width. */
    .db-table-wrap { margin: 0 -1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    @media (max-width: 768px) {
        .db-table-wrap { margin: 0 -0.875rem; }
    }
    .db-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
    .db-thead-row { border-bottom: 1px solid var(--pm-border); background: var(--pm-surface-2); }
    .db-th {
        padding: 0.625rem 1rem;
        text-align: left;
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--pm-muted);
    }
    .db-th--right { text-align: right; }
    .db-tr { border-bottom: 1px solid var(--pm-border); transition: background-color .12s ease; }
    .db-tr:last-child { border-bottom: 0; }
    .db-tr:hover { background: var(--pm-row-hover); }
    .db-tr--pending { background: rgb(var(--danger-500) / 0.05); }
    .db-td { padding: 0.75rem 1rem; vertical-align: middle; }
    .db-td--right { text-align: right; }
    .db-td--num { font-variant-numeric: tabular-nums; color: var(--pm-muted); }
    .db-td--meta { color: var(--pm-muted); font-size: 0.75rem; }
    .db-file { display: flex; align-items: center; gap: 0.5rem; }
    .db-file-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--pm-muted); }
    .db-file-name { font-weight: 500; color: rgb(24 24 27); }
    .dark .db-file-name { color: #fafafa; }
    .db-file-path { font-size: 0.75rem; color: var(--pm-muted); opacity: 0.8; }
    .db-latest {
        margin-left: 0.375rem;
        display: inline-flex; align-items: center;
        border-radius: 9999px;
        background: rgb(var(--success-500) / 0.12);
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem; font-weight: 600;
        color: rgb(var(--success-600));
    }
    .dark .db-latest { color: rgb(var(--success-400)); }
    .db-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
    .db-btn {
        display: inline-flex; align-items: center; gap: 0.25rem;
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem; font-weight: 500;
        font-family: inherit;
        color: rgb(63 63 70);
        text-decoration: none; cursor: pointer;
        transition: background-color .12s ease, color .12s ease, border-color .12s ease;
    }
    .dark .db-btn { color: rgb(212 212 216); }
    .db-btn:hover { background: var(--pm-surface-2); }
    .db-btn--danger {
        background: rgb(var(--danger-600));
        border-color: transparent;
        color: #ffffff; font-weight: 600;
    }
    .dark .db-btn--danger { color: #ffffff; }
    .db-btn--danger:hover { background: rgb(var(--danger-500)); }
    /* Download and Delete sat 8px apart at ~28px tall, in a table cell, one of
       them destructive. Grow them and push them apart on touch. */
    @media (hover: none) and (pointer: coarse) {
        .db-btn { padding: 0.55rem 0.8rem; }
        .db-actions { gap: 0.75rem; }
    }
    .db-btn--delete:hover {
        border-color: rgb(var(--danger-500) / 0.40);
        background: rgb(var(--danger-500) / 0.07);
        color: rgb(var(--danger-600));
    }
    .dark .db-btn--delete:hover { color: rgb(var(--danger-400)); }
    .db-btn--delete-armed {
        border-color: rgb(var(--danger-500) / 0.50);
        background: rgb(var(--danger-500) / 0.08);
        color: rgb(var(--danger-600));
    }
    .dark .db-btn--delete-armed { color: rgb(var(--danger-400)); }
    .db-btn-icon { width: 0.875rem; height: 0.875rem; }
    .db-config { display: grid; grid-template-columns: 1fr; gap: 0.75rem; font-size: 0.75rem; }
    @media (min-width: 640px) { .db-config { grid-template-columns: repeat(3, 1fr); } }
    .db-config-card {
        border-radius: var(--pm-radius);
        background: var(--pm-surface-2);
        box-shadow: inset 0 0 0 1px var(--pm-border);
        padding: 0.75rem 1rem;
    }
    .db-config-title { font-weight: 600; color: rgb(63 63 70); }
    .dark .db-config-title { color: rgb(212 212 216); }
    .db-config-text { margin-top: 0.125rem; color: var(--pm-muted); }

    /* ---- Traffic analytics (.tv-*) ------------------------------------- */
    .tv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 0; text-align: center; }
    .tv-empty-icon { width: 4rem; height: 4rem; color: var(--pm-border-strong); margin-bottom: 1rem; }
    .tv-empty-title { font-size: 1.125rem; font-weight: 600; color: rgb(63 63 70); }
    .dark .tv-empty-title { color: rgb(212 212 216); }
    .tv-empty-text { margin-top: 0.25rem; max-width: 28rem; font-size: 0.875rem; color: var(--pm-muted); }
    .tv-fresh { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--pm-muted); }
    .tv-fresh-icon { width: 1rem; height: 1rem; }
    .tv-fresh-strong { font-weight: 500; color: rgb(63 63 70); }
    .dark .tv-fresh-strong { color: rgb(212 212 216); }
    .tv-cards { gap: 1rem; }
    .tv-scard { display: flex; align-items: center; gap: 0.75rem; }
    .tv-scard-chip {
        padding: 0.5rem;
        border-radius: var(--pm-radius);
        background: rgb(var(--primary-500) / 0.08);
        box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.15);
    }
    .tv-scard-icon { width: 1.25rem; height: 1.25rem; color: rgb(var(--primary-600)); }
    .dark .tv-scard-icon { color: rgb(var(--primary-400)); }
    .tv-scard-label {
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--pm-muted);
    }
    .tv-scard-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(24 24 27); font-variant-numeric: tabular-nums; }
    .dark .tv-scard-value { color: #ffffff; }
    .tv-table { width: 100%; font-size: 0.875rem; text-align: left; border-collapse: collapse; }
    .tv-thead-row { border-bottom: 1px solid var(--pm-border); }
    .tv-th {
        padding: 0.5rem 0.75rem;
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--pm-muted);
        text-align: left;
    }
    .tv-th--right { text-align: right; }
    .tv-tr { border-bottom: 1px solid var(--pm-border); transition: background-color .12s ease; }
    .tv-tr:last-child { border-bottom: 0; }
    .tv-tr:hover { background: var(--pm-row-hover); }
    .tv-td { padding: 0.5rem 0.75rem; }
    .tv-td--name { font-weight: 500; color: rgb(24 24 27); }
    .dark .tv-td--name { color: #ffffff; }
    .tv-td--num { text-align: right; color: rgb(63 63 70); font-variant-numeric: tabular-nums; }
    .dark .tv-td--num { color: rgb(212 212 216); }
    .tv-td--right { text-align: right; }
    .tv-td--meta { text-align: right; font-size: 0.75rem; color: var(--pm-muted); }
    .tv-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
    .tv-control-site { flex: 1; width: 100%; min-width: 12rem; }
    .tv-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--pm-muted); margin-bottom: 0.25rem; }
    .tv-chart-box { position: relative; width: 100%; }
    .tv-cmp-wrap { overflow-x: auto; max-height: 24rem; overflow-y: auto; }
    .tv-cmp-table { width: 100%; font-size: 0.75rem; text-align: center; border-collapse: collapse; }
    .tv-cmp-head { position: sticky; top: 0; z-index: 10; background: var(--pm-card-bg); }
    .tv-cth {
        padding: 0.5rem;
        font-weight: 600;
        color: rgb(63 63 70);
        white-space: nowrap;
    }
    .dark .tv-cth { color: rgb(212 212 216); }
    .tv-cth--muted { color: var(--pm-muted); font-weight: 500; }
    /* `position: sticky` with every inset left at `auto` is a no-op — the day
       column never actually froze while the 11-column comparison table scrolled
       sideways, it just paid for an opaque background. `left: 0` is what makes
       it stick, and it matters most on a phone, which is where that table is
       guaranteed to scroll. (z-index so the frozen cell paints over the value
       cells sliding under it; the head row keeps the higher 10 so the top-left
       corner cell stays above both.) */
    .tv-cth--day { position: sticky; left: 0; z-index: 11; text-align: left; background: var(--pm-card-bg); }
    .tv-ctd { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--pm-border); }
    .tv-ctd--day { position: sticky; left: 0; z-index: 9; font-weight: 500; color: var(--pm-muted); background: var(--pm-card-bg); text-align: left; }
    .tv-ctd--empty { color: var(--pm-border-strong); }
    .tv-ctd--val { white-space: nowrap; }
    .tv-trend { font-size: 0.6875rem; }
    .tv-up { color: rgb(var(--success-600)); }
    .dark .tv-up { color: rgb(var(--success-400)); }
    .tv-dn { color: rgb(var(--danger-500)); }
    .tv-flat { color: var(--pm-muted); }

    /* Mobile. The summary table has no min-width, so instead of scrolling it
       squashed seven columns into ~319px; give it a floor and let it scroll
       like every other wide table in this file. The comparison grid drops its
       per-cell trend delta — 11 nowrap columns each carrying a number AND a
       "(+12%)" is more horizontal scrubbing than the number is worth on a
       phone, and the trend is already the point of the chart above it. */
    @media (max-width: 639px) {
        .tv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .tv-table { min-width: 34rem; }
        .tv-trend { display: none; }
        .tv-cmp-wrap { max-height: 20rem; }
        .tv-cth, .tv-ctd { padding-left: 0.35rem; padding-right: 0.35rem; }
    }

    /* ---- Income & Expense snapshot (.fs-*) ----------------------------
       Convention matches the existing .an-* / .ae-* / .tv-* blocks: one short
       prefix per page, tokens for all surfaces, explicit .dark variants only
       where a literal colour can't be tokenised.

       The three money colours are fixed and semantic — income green, expense
       red, net blue. All three clear 3:1 contrast against BOTH the light and
       dark card surfaces, so one palette serves both themes (the hex is baked
       server-side by @js and there is no chart re-init hook on theme change).
       Green and red sit in the colour-blindness floor band, which is only
       acceptable because hue never carries the distinction alone here: bar
       order is fixed, a legend is always shown, every expense figure carries a
       leading minus, and a table repeats each chart. */
    .fs-stack { display: flex; flex-direction: column; gap: 1rem; }

    /* filters */
    .fs-filter-bar {
        display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
        padding: 0.875rem 1.125rem;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        border: 1px solid var(--pm-border);
    }
    .fs-filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
    .fs-filter-label {
        font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--pm-muted);
    }
    .fs-select {
        border-radius: 0.5rem; border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg); padding: 0.3rem 1.9rem 0.3rem 0.65rem;
        font-size: 0.8125rem; color: rgb(24 24 27); min-width: 160px;
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371717a'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 0.7rem;
    }
    .dark .fs-select { background-color: var(--pm-header-bg); border-color: rgb(255 255 255 / 0.12); color: #ffffff; }
    .fs-select:focus { border-color: #2a78d6; box-shadow: 0 0 0 2px rgb(42 120 214 / 0.2); outline: none; }
    .fs-check {
        display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem;
        color: rgb(63 63 70); cursor: pointer; margin-top: 0.9rem;
    }
    .dark .fs-check { color: rgb(212 212 216); }
    .fs-currency-note {
        margin-inline-start: auto; margin-top: 0.9rem;
        font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--pm-muted);
    }

    /* banners */
    .fs-warn-stack { display: flex; flex-direction: column; gap: 0.5rem; }
    /* flex-wrap: the message is a full sentence and the action link is
       nowrap, so without wrapping the pair overflowed the card on a phone. */
    .fs-banner {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        flex-wrap: wrap;
        padding: 0.7rem 1rem; border-radius: var(--pm-radius);
        font-size: 0.8125rem; border: 1px solid var(--pm-border);
        background: var(--pm-surface-2); color: rgb(63 63 70);
    }
    .dark .fs-banner { color: rgb(212 212 216); }
    .fs-banner--warn { border-color: rgb(217 89 38 / 0.35); background: rgb(217 89 38 / 0.07); }
    .fs-banner--info { border-color: rgb(42 120 214 / 0.3); background: rgb(42 120 214 / 0.06); }
    .fs-banner--ok { border-color: rgb(25 158 112 / 0.35); background: rgb(25 158 112 / 0.07); }
    .fs-banner-link { font-weight: 600; color: #2a78d6; white-space: nowrap; }
    .dark .fs-banner-link { color: #7aa9e8; }

    /* headline tiles */
    .fs-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
    @media (max-width: 1024px) { .fs-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .fs-kpi-grid { grid-template-columns: 1fr; } }
    .fs-kpi {
        position: relative; overflow: hidden; border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg); padding: 1.125rem;
        border: 1px solid var(--pm-border);
    }
    .fs-kpi-bar { position: absolute; inset-inline: 0; top: 0; height: 3px; display: block; }
    .fs-kpi--in .fs-kpi-bar { background: #199e70; }
    .fs-kpi--ex .fs-kpi-bar { background: #e34948; }
    .fs-kpi--net .fs-kpi-bar { background: #2a78d6; }
    .fs-kpi--rate .fs-kpi-bar { background: #9085e9; }
    .fs-kpi-label {
        font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.07em; color: var(--pm-muted);
    }
    .fs-kpi-value {
        font-size: 1.85rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15;
        color: rgb(24 24 27); margin-top: 0.15rem; font-variant-numeric: tabular-nums;
    }
    .dark .fs-kpi-value { color: #ffffff; }
    .fs-kpi-foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; flex-wrap: wrap; }
    .fs-kpi-vs { font-size: 0.6875rem; color: var(--pm-muted); }
    .fs-headline-note { font-size: 0.75rem; color: var(--pm-muted); margin: -0.25rem 0 0; }

    /* sections */
    .fs-section {
        display: flex; flex-direction: column; border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg); border: 1px solid var(--pm-border); overflow: hidden;
    }
    .fs-sec-hdr {
        display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.25rem;
        border-bottom: 1px solid var(--pm-border); background: var(--pm-header-bg);
    }
    .fs-sec-bar { width: 3px; height: 1.75rem; border-radius: 9999px; flex-shrink: 0; background: #2a78d6; }
    .fs-sec-bar--in { background: #199e70; }
    .fs-sec-bar--ex { background: #e34948; }
    .fs-sec-bar--net { background: #2a78d6; }
    .fs-sec-title { font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; color: rgb(24 24 27); margin: 0; }
    .dark .fs-sec-title { color: #ffffff; }
    .fs-sec-desc { font-size: 0.6875rem; color: var(--pm-muted); margin: 0.1rem 0 0; }

    /* charts */
    .fs-chart-pad { padding: 1rem 1.25rem 1.25rem; }
    .fs-chart-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
    .fs-chart-tab {
        border-radius: 9999px; border: 1px solid var(--pm-border-strong);
        background: transparent; padding: 0.2rem 0.7rem; font-size: 0.75rem;
        color: var(--pm-muted); cursor: pointer;
    }
    .fs-chart-tab:hover { border-color: #2a78d6; color: #2a78d6; }
    .fs-chart-tab--on { background: #2a78d6; border-color: #2a78d6; color: #ffffff; font-weight: 600; }
    .fs-chart-foot {
        display: flex; flex-wrap: wrap; gap: 1.5rem;
        padding: 0.75rem 1.25rem; border-top: 1px solid var(--pm-border); background: var(--pm-surface-2);
    }
    .fs-foot-stat { display: flex; flex-direction: column; gap: 0.1rem; }
    .fs-foot-label {
        font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--pm-muted);
    }
    .fs-foot-value { font-size: 0.8125rem; font-weight: 600; color: rgb(24 24 27); font-variant-numeric: tabular-nums; }
    .dark .fs-foot-value { color: #ffffff; }

    /* tables */
    .fs-table-wrap { overflow-x: auto; }
    .fs-table { width: 100%; min-width: max-content; font-size: 0.8125rem; border-collapse: collapse; }
    .fs-thead-row { border-bottom: 1px solid var(--pm-border); background: var(--pm-surface-2); }
    .fs-th {
        padding: 0.45rem 0.875rem; font-size: 0.6875rem; font-weight: 700; text-align: start;
        text-transform: uppercase; letter-spacing: 0.055em; color: var(--pm-muted); white-space: nowrap;
    }
    .fs-th-sticky { position: sticky; left: 0; z-index: 10; background: var(--pm-header-bg); }
    .fs-tr { border-bottom: 1px solid var(--pm-border); }
    .fs-tr:hover { background: var(--pm-row-hover); }
    .fs-td {
        padding: 0.45rem 0.875rem; white-space: nowrap; vertical-align: middle;
        color: rgb(63 63 70);
    }
    .dark .fs-td { color: rgb(212 212 216); }
    .fs-num { text-align: end; font-variant-numeric: tabular-nums; }
    .fs-strong { font-weight: 700; color: rgb(24 24 27); }
    .dark .fs-strong { color: #ffffff; }
    .fs-muted { color: var(--pm-muted); }
    .fs-in { color: #0f7a56; }
    .dark .fs-in { color: #43c39a; }
    .fs-ex { color: #c23434; }
    .dark .fs-ex { color: #f08d8c; }
    .fs-neg { color: #c23434; }
    .dark .fs-neg { color: #f08d8c; }
    .fs-tfoot { background: var(--pm-surface-2); border-top: 1px solid var(--pm-border-strong); }
    .fs-group-row { background: var(--pm-surface-2); }
    .fs-group-row .fs-td { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
    .fs-cell--up { background: rgb(25 158 112 / 0.06); }
    .fs-cell--dn { background: rgb(227 73 72 / 0.06); }
    .fs-cell--none { color: var(--pm-muted); }

    /* change badges */
    .fs-badge {
        display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap;
        border-radius: 9999px; padding: 0.05rem 0.4rem;
        font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
    }
    .fs-badge--up { color: #0f7a56; background: rgb(25 158 112 / 0.12); }
    .dark .fs-badge--up { color: #43c39a; background: rgb(25 158 112 / 0.18); }
    .fs-badge--dn { color: #c23434; background: rgb(227 73 72 / 0.12); }
    .dark .fs-badge--dn { color: #f08d8c; background: rgb(227 73 72 / 0.18); }
    .fs-badge--flat, .fs-badge--none { color: var(--pm-muted); background: var(--pm-surface-2); }
    .fs-badge--new { color: #2a78d6; background: rgb(42 120 214 / 0.12); }
    .dark .fs-badge--new { color: #7aa9e8; background: rgb(42 120 214 / 0.2); }

    /* category rows */
    .fs-dot {
        display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 9999px;
        margin-inline-end: 0.4rem; vertical-align: baseline;
    }
    .fs-tag {
        margin-inline-start: 0.35rem; border-radius: 9999px; padding: 0.05rem 0.35rem;
        font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
        color: var(--pm-muted); background: var(--pm-surface-2);
    }
    .fs-share { display: flex; align-items: center; gap: 0.5rem; min-width: 9rem; }
    .fs-bar-track {
        flex: 1; height: 0.35rem; border-radius: 9999px; background: var(--pm-surface-2); overflow: hidden;
    }
    .fs-bar-fill { display: block; height: 100%; border-radius: 9999px; }
    .fs-bar-fill--in { background: #199e70; }
    .fs-bar-fill--ex { background: #e34948; }
    .fs-share-n { font-size: 0.6875rem; color: var(--pm-muted); font-variant-numeric: tabular-nums; }

    .fs-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
    @media (max-width: 900px) { .fs-split { grid-template-columns: 1fr; } }

    /* folded pivot */
    .fs-details {
        border-radius: var(--pm-radius-lg); background: var(--pm-card-bg);
        border: 1px solid var(--pm-border); overflow: hidden;
    }
    .fs-summary {
        padding: 0.875rem 1.25rem; cursor: pointer; font-size: 0.875rem; font-weight: 700;
        color: rgb(24 24 27); background: var(--pm-header-bg); list-style: revert;
    }
    .dark .fs-summary { color: #ffffff; }
    .fs-details[open] .fs-summary { border-bottom: 1px solid var(--pm-border); }

    .fs-empty { padding: 1.25rem; font-size: 0.8125rem; color: var(--pm-muted); margin: 0; }
    .fs-fine { padding: 0 1.25rem 1rem; font-size: 0.6875rem; color: var(--pm-muted); margin: 0; }

    /* import page */
    .fs-import-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
    @media (max-width: 900px) { .fs-import-cols { grid-template-columns: 1fr; } }
    .fs-import-help { font-size: 0.8125rem; color: var(--pm-muted); margin: 0 0 0.5rem; }
    .fs-import-help code {
        background: var(--pm-surface-2); border-radius: 0.25rem; padding: 0.05rem 0.3rem; font-size: 0.75rem;
    }
    .fs-import-list { font-size: 0.8125rem; color: var(--pm-muted); margin: 0; padding-inline-start: 1.1rem; }
    .fs-import-list li { margin-bottom: 0.25rem; }
    .fs-import-form { display: flex; flex-direction: column; gap: 0.75rem; }
    .fs-import-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
    .fs-tr--bad { background: rgb(227 73 72 / 0.07); }
    .fs-td--err { color: #c23434; white-space: normal; max-width: 32rem; font-size: 0.75rem; }
    .dark .fs-td--err { color: #f08d8c; }
    .fs-chip {
        border-radius: 9999px; padding: 0.05rem 0.45rem; font-size: 0.6875rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.03em;
    }
    .fs-chip--create { color: #0f7a56; background: rgb(25 158 112 / 0.12); }
    .dark .fs-chip--create { color: #43c39a; }
    .fs-chip--update { color: #2a78d6; background: rgb(42 120 214 / 0.12); }
    .dark .fs-chip--update { color: #7aa9e8; }
    .fs-chip--restore, .fs-chip--move { color: #b26f00; background: rgb(201 133 0 / 0.15); }
    .dark .fs-chip--restore, .dark .fs-chip--move { color: #e0a93c; }
    .fs-chip--skip { color: var(--pm-muted); background: var(--pm-surface-2); }
    .fs-result { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; font-size: 0.8125rem; }
    .fs-result-n { font-size: 1.25rem; font-weight: 800; margin-inline-end: 0.25rem; color: rgb(24 24 27); }
    .dark .fs-result-n { color: #ffffff; }

    /* Left rail on pivot rows — a non-colour cue reinforcing which side a row is on,
       so income vs expense never rests on hue alone. */
    .fs-row--in .fs-th-sticky { box-shadow: inset 3px 0 0 0 #199e70; }
    .fs-row--ex .fs-th-sticky { box-shadow: inset 3px 0 0 0 #e34948; }
    .fs-cell--first, .fs-cell--flat { background: transparent; }

    /* The finish-the-import call to action. Deliberately loud: the two-phase flow is
       right for a ledger, but the second step has to be impossible to walk past. */
    .fs-commit {
        display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
        flex-wrap: wrap; margin-bottom: 1rem;
        padding: 1rem 1.125rem; border-radius: var(--pm-radius-lg);
        border: 1px solid rgb(25 158 112 / 0.4); background: rgb(25 158 112 / 0.08);
    }
    .fs-commit-text { font-size: 0.875rem; color: rgb(63 63 70); }
    .dark .fs-commit-text { color: rgb(212 212 216); }
    .fs-commit-btn { flex-shrink: 0; }
    .fs-import-note {
        font-size: 0.75rem; color: var(--pm-muted); margin: 0.5rem 0 0; line-height: 1.5;
    }

    /* A figure shown beside the totals but deliberately not part of them. */
    .fs-aside {
        display: flex; flex-direction: column; gap: 0.15rem;
        margin: 0 1.25rem 1.25rem; padding: 0.7rem 0.9rem;
        border-radius: var(--pm-radius); background: var(--pm-surface-2);
        border: 1px dashed var(--pm-border-strong);
    }
    .fs-aside-label {
        font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--pm-muted);
    }
    .fs-aside-value {
        font-size: 0.9375rem; font-weight: 700; color: rgb(24 24 27);
        font-variant-numeric: tabular-nums;
    }
    .dark .fs-aside-value { color: #ffffff; }
    .fs-aside-note { font-size: 0.6875rem; color: var(--pm-muted); }

    /* ===========================================================
       Livewire component styling (2026-08-05 mobile pass)

       These components were written against raw Tailwind utilities. There is no
       Tailwind build on this box — Filament ships only the utilities its own
       components use, so classes like w-12, h-12, w-80, max-h-64, right-3,
       bottom-3, border-l-2, tracking-widest and bg-gray-900/90 silently
       resolved to nothing. Most of that was cosmetic, but three cases were real
       breakage, worst on phones:

         - task-attachments: no w-12/h-12 meant object-cover had nothing to
           cover and an <img> rendered at its INTRINSIC size, so one full-page
           screenshot blew the row out to thousands of pixels.
         - push-subscription-prompt: only 3 of its 10 positioning utilities
           existed, so a "fixed bottom banner" had no top/bottom inset and fell
           back to its static position — which, mounted from the BODY_END render
           hook, is the very bottom of the document.
         - task-comments: no max-h-64 meant the mention dropdown never scrolled
           and covered the composer with the keyboard up.

       Each component now uses a short prefix, matching the .an-* / .ae-* / .fs-*
       convention used by the page blocks above.
       =========================================================== */

    /* ---- Task attachments (.att-*) ------------------------------------- */
    .att-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
    @media (min-width: 640px) { .att-grid { grid-template-columns: repeat(2, 1fr); } }
    .att-item {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.5rem;
        border: 1px solid var(--pm-border);
        border-radius: var(--pm-radius);
        min-width: 0;
    }
    /* flex: 0 0 auto is the load-bearing part — a flex item defaults to
       min-width: auto and will not shrink below its intrinsic content size, so
       an oversized image stretches the row rather than being clipped. */
    .att-thumb {
        width: 3rem; height: 3rem;
        flex: 0 0 auto;
        object-fit: cover;
        border-radius: var(--pm-radius);
        background: var(--pm-surface-2);
    }
    .att-thumb--file { display: flex; align-items: center; justify-content: center; }
    .att-thumb-ext { font-size: 0.7rem; font-weight: 600; color: var(--pm-muted); }
    .att-name {
        display: block; font-size: 0.875rem;
        color: rgb(var(--primary-600));
        text-decoration: none;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dark .att-name { color: rgb(var(--primary-400)); }
    .att-name:hover { text-decoration: underline; }
    .att-meta { font-size: 0.75rem; color: var(--pm-muted); margin-top: 0.1rem; }
    .att-remove {
        flex: 0 0 auto;
        border: 0; background: none; cursor: pointer; font: inherit;
        font-size: 0.75rem; color: rgb(var(--danger-600));
        padding: 0.5rem 0.4rem;
        text-decoration: underline; text-underline-offset: 2px;
    }
    .dark .att-remove { color: rgb(var(--danger-400)); }
    .att-empty { font-size: 0.875rem; color: var(--pm-muted); }
    .att-error { font-size: 0.75rem; color: rgb(var(--danger-600)); }
    .dark .att-error { color: rgb(var(--danger-400)); }

    /* ---- Task comments (.cmt-*) ---------------------------------------- */
    .cmt-textarea {
        width: 100%;
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        color: inherit; font: inherit; font-size: 0.875rem;
        padding: 0.5rem 0.65rem;
    }
    .cmt-textarea:focus {
        outline: none;
        border-color: rgb(var(--primary-500));
        box-shadow: 0 0 0 3px rgb(var(--primary-500) / 0.25);
    }
    .cmt-mentions {
        position: absolute; margin-top: 0.25rem; z-index: 50;
        width: 20rem; max-width: calc(100vw - 3rem);
        max-height: 16rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: var(--pm-card-bg);
        border: 1px solid var(--pm-border-strong);
        border-radius: var(--pm-radius);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    }
    .cmt-mention {
        display: flex; flex-direction: column; width: 100%;
        text-align: left; border: 0; background: none; cursor: pointer;
        font: inherit; color: inherit;
        padding: 0.55rem 0.75rem;
    }
    .cmt-mention:hover { background: var(--pm-row-hover); }
    .cmt-mention--active { background: rgb(var(--primary-500) / 0.10); }
    .cmt-mention-name { font-size: 0.875rem; font-weight: 500; }
    .cmt-mention-email { font-size: 0.75rem; color: var(--pm-muted); }
    .cmt-mentions-empty { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--pm-muted); }
    .cmt-pill {
        border-radius: 9999px; padding: 0.05rem 0.4rem;
        background: rgb(var(--primary-500) / 0.12);
        color: rgb(var(--primary-700));
        font-weight: 500; text-decoration: none;
    }
    .dark .cmt-pill { color: rgb(var(--primary-300)); }
    .cmt-badge-mention {
        border-radius: 9999px; padding: 0.05rem 0.4rem;
        font-size: 0.625rem; font-weight: 600;
        background: rgb(217 119 6 / 0.14); color: rgb(180 83 9);
    }
    .dark .cmt-badge-mention { color: rgb(252 211 77); }
    .cmt-body { white-space: pre-wrap; overflow-wrap: anywhere; }
    .cmt-delete {
        border: 0; background: none; cursor: pointer; font: inherit;
        font-size: 0.75rem; color: rgb(var(--danger-600));
        padding: 0.4rem 0.3rem;
        text-decoration: underline; text-underline-offset: 2px;
    }
    .dark .cmt-delete { color: rgb(var(--danger-400)); }

    /* ---- Push subscription prompt (.psh-*) ------------------------------
       Sits above the Quick-Add FAB (.qa-fab, z-index 40, bottom 1.5rem right
       1.5rem). On a phone the banner spans the full width, so it must clear the
       FAB vertically or the FAB lands on the "Enable" button. */
    .psh-banner {
        position: fixed;
        bottom: 5.5rem; left: 0.75rem; right: 0.75rem;
        z-index: 30;
        padding: 1rem;
        border-radius: var(--pm-radius-lg);
        background: var(--pm-card-bg);
        border: 1px solid var(--pm-border-strong);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15);
    }
    @media (min-width: 640px) {
        .psh-banner { bottom: 1.5rem; left: 1.5rem; right: auto; max-width: 24rem; }
    }
    .psh-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
    .psh-text { font-size: 0.75rem; color: var(--pm-muted); margin-bottom: 0.75rem; }
    .psh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
    .psh-btn {
        border-radius: var(--pm-radius); border: 0; cursor: pointer;
        font: inherit; font-size: 0.75rem; font-weight: 500;
        padding: 0.55rem 0.9rem;
    }
    .psh-btn--ghost { background: none; color: var(--pm-muted); }
    .psh-btn--ghost:hover { color: inherit; }
    .psh-btn--primary { background: rgb(var(--primary-600)); color: #ffffff; font-weight: 600; }
    .psh-btn--primary:hover { background: rgb(var(--primary-500)); }

    /* ---- Quick-launch bar (.ql-*) --------------------------------------
       The copy-confirmation toast used bg-gray-900/90 + right-3 + top-2, none
       of which compile — so it rendered white-on-white AND unpositioned. It has
       been invisible since it was written. */
    .ql-label {
        font-size: 0.6875rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--pm-muted);
        margin-right: 0.5rem;
    }
    .ql-btn {
        display: inline-flex; align-items: center; gap: 0.3rem;
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        padding: 0.45rem 0.7rem;
        font-size: 0.75rem; font-weight: 500; font-family: inherit;
        color: rgb(63 63 70);
        text-decoration: none; cursor: pointer;
        transition: background-color .12s ease, border-color .12s ease;
    }
    .dark .ql-btn { color: rgb(212 212 216); }
    .ql-btn:hover { background: var(--pm-surface-2); border-color: rgb(var(--primary-500)); }
    .ql-toast {
        position: absolute; top: 0.5rem; right: 0.75rem;
        border-radius: var(--pm-radius);
        background: rgb(24 24 27 / 0.92); color: #ffffff;
        padding: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 500;
        pointer-events: none;
    }
    /* Credential buttons copy secrets to the clipboard — the densest cluster of
       small tap targets in the app. Space them out on touch. */
    @media (hover: none) and (pointer: coarse) {
        .ql-btn { padding: 0.6rem 0.85rem; }
    }

    /* ---- Inline TOTP display (.totp-*) --------------------------------- */
    .totp-code-box {
        display: inline-flex; align-items: center; gap: 0.5rem;
        border-radius: var(--pm-radius);
        border: 1px solid rgb(var(--success-500) / 0.35);
        background: rgb(var(--success-500) / 0.10);
        padding: 0.4rem 0.7rem;
    }
    .totp-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 1.125rem; font-weight: 700;
        letter-spacing: 0.25em;
        color: rgb(var(--success-700));
    }
    .dark .totp-code { color: rgb(var(--success-300)); }
    .totp-btn {
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        padding: 0.5rem 0.8rem;
        font: inherit; font-size: 0.75rem; font-weight: 500;
        color: inherit; cursor: pointer;
    }
    .totp-btn:hover { background: var(--pm-surface-2); }
    .totp-hide {
        border: 0; background: none; cursor: pointer; font: inherit;
        font-size: 0.75rem; color: var(--pm-muted);
        padding: 0.5rem 0.4rem;
    }

    /* ---- Revealable field (.rf-*) -------------------------------------- */
    .rf-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .rf-value {
        flex: 1 1 12rem; min-width: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.875rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rf-btn {
        flex: 0 0 auto;
        border-radius: var(--pm-radius);
        border: 1px solid var(--pm-border-strong);
        background: var(--pm-card-bg);
        padding: 0.45rem 0.7rem;
        font: inherit; font-size: 0.75rem; font-weight: 500;
        color: inherit; cursor: pointer;
    }
    .rf-btn:hover { background: var(--pm-surface-2); }
    @media (hover: none) and (pointer: coarse) {
        .rf-btn { padding: 0.6rem 0.85rem; }
    }

    /* ---- Task activity feed (.act-*) ----------------------------------- */
    .act-item {
        display: flex; align-items: flex-start; gap: 0.75rem;
        font-size: 0.875rem;
        border-left: 2px solid var(--pm-border-strong);
        padding: 0.25rem 0 0.25rem 0.75rem;
    }
    .act-body { min-width: 0; flex: 1; }
    .act-desc { color: rgb(82 82 91); }
    .dark .act-desc { color: rgb(212 212 216); }
    /* json_encode() of a changed array attribute has no spaces to break on. */
    .act-diff { font-size: 0.75rem; color: var(--pm-muted); overflow-wrap: anywhere; }

    /* ---- Site analytics (.sa-*) ----------------------------------------
       This page predated the scoped-prefix convention and was built entirely
       from inline style="" attributes, so it had no mobile handling of any
       kind: a 10-column table with nowrap headers, width:100% and no
       min-width, which squashes rather than scrolls, repeated once per country
       x platform group. */
    .sa-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0.6rem; }
    .sa-hero-card {
        border: 1px solid var(--pm-border);
        border-top: 3px solid var(--sa-accent, var(--pm-border-strong));
        border-radius: 0.6rem;
        padding: 0.55rem 0.7rem;
        background: var(--pm-surface-2);
    }
    .sa-hero-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--sa-accent, inherit); font-variant-numeric: tabular-nums; }
    .sa-hero-label { font-size: 0.75rem; color: var(--pm-muted); margin-top: 0.15rem; }

    .sa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sa-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.8125rem; }
    .sa-thead-row { border-bottom: 1px solid var(--pm-border-strong); }
    /* Padding lives on the <a>, not the <th>, so the whole cell is the sort
       target instead of a ~20px strip of text. */
    .sa-th { padding: 0; text-align: left; white-space: nowrap; font-size: 0.75rem; font-weight: 600; color: var(--pm-muted); }
    .sa-th--right { text-align: right; }
    .sa-sort { display: block; padding: 0.6rem; color: inherit; text-decoration: none; }
    .sa-sort:hover { color: rgb(var(--primary-600)); }
    .sa-tr { border-bottom: 1px solid var(--pm-border); }
    .sa-tr--error { background: rgb(var(--danger-500) / 0.09); }
    .sa-tr--stale { background: rgb(217 119 6 / 0.08); }
    .sa-tr--total { border-top: 2px solid var(--pm-border-strong); font-weight: 600; }
    .sa-td { padding: 0.4rem 0.6rem; }
    .sa-td--idx { font-size: 0.75rem; color: var(--pm-muted); }
    .sa-td--site { font-weight: 500; white-space: nowrap; }
    .sa-td--num { text-align: right; font-variant-numeric: tabular-nums; }
    .sa-td--strong { font-weight: 600; }
    .sa-td--meta { text-align: right; white-space: nowrap; font-size: 0.75rem; color: var(--pm-muted); }
    .sa-td--label { font-weight: 600; }
    .sa-td--error { font-size: 0.75rem; color: rgb(var(--danger-600)); }
    .dark .sa-td--error { color: rgb(var(--danger-400)); }
    .sa-stale-flag { color: rgb(217 119 6); }