/* PBA iOS-inspired theme
   ---------------------- */

/* =========================================================
   Theme tokens
   - Default: LIGHT
   - Override: html[data-bs-theme="dark"]
   - Palette: html[data-pba-palette="..."]
   ========================================================= */

/* =========================================================
   Theme tokens
   ========================================================= */

/* Light theme defaults */
:root {
    --pba-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, "Inter", Roboto;
    /* ---------- ACCENT (single source of truth) ---------- */
    /* Change these two to change the entire app accent */
    --pba-color-accent: #0a84ff;
    --pba-color-accent-rgb: 10, 132, 255;
    --pba-color-success: #22c55e;
    --pba-color-warning: #f59e0b;
    --pba-color-danger: #ef4444;
    /* Derived accent helpers (subtle + consistent) */
    --pba-accent: var(--pba-color-accent);
    --pba-accent-soft: color-mix(in srgb, var(--pba-accent) 16%, transparent); /* same role as your old rgba */
    --pba-accent-08: color-mix(in srgb, var(--pba-accent) 8%, transparent);
    --pba-accent-12: color-mix(in srgb, var(--pba-accent) 12%, transparent);
    --pba-accent-20: color-mix(in srgb, var(--pba-accent) 20%, transparent);
    --pba-accent-28: color-mix(in srgb, var(--pba-accent) 28%, transparent);
    /* Radius + shadows */
    --pba-radius-sm: 8px;
    --pba-radius-md: 12px;
    --pba-radius-lg: 16px;
    --pba-radius-xl: 20px;
    --pba-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.18);
    --pba-shadow-subtle: 0 6px 18px rgba(15, 23, 42, 0.12);
    /* LIGHT surfaces */
    --pba-bg-root: radial-gradient(circle at top, #ffffff 0, #f1f5f9 55%, #e2e8f0 100%);
    --pba-bg-elevated: rgba(255, 255, 255, 0.92);
    --pba-bg-elevated-light: rgba(255, 255, 255, 0.92);
    --pba-border-subtle: rgba(15, 23, 42, 0.14);
    --pba-divider: rgba(15, 23, 42, 0.10);
    /* LIGHT text */
    --pba-text-main: #0f172a;
    --pba-text-muted: rgba(15, 23, 42, 0.65);
    --pba-text-soft: rgba(15, 23, 42, 0.55);
    /* Strong surfaces */
    --pba-surface-strong: rgba(255, 255, 255, 0.78);
    --pba-surface-strong-hover: rgba(255, 255, 255, 0.88);
    --pba-surface-strong-border: rgba(15, 23, 42, 0.14);
    --pba-surface-strong-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    --pba-row-hover: rgba(15, 23, 42, 0.04);
    --pba-table-row-border: rgba(15, 23, 42, 0.10);
    /* Bootstrap integration (keep in sync) */
    --bs-primary: var(--pba-color-accent);
    --bs-primary-rgb: var(--pba-color-accent-rgb);
    --bs-link-color: var(--pba-color-accent);
    --bs-link-hover-color: var(--pba-color-accent);
    /* Tab bar sizing / safe-area (single source of truth) */
    --pba-tabbar-h: 78px;
    --pba-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pba-tabbar-space: calc(var(--pba-tabbar-h) + var(--pba-safe-bottom));
}

/* Dark theme overrides */
html[data-bs-theme="dark"] {
    --pba-bg-root: radial-gradient(circle at top, #1e293b 0, #020617 50%, #000 100%);
    --pba-bg-elevated: rgba(15, 23, 42, 0.92);
    --pba-bg-elevated-light: rgba(255, 255, 255, 0.92);
    --pba-border-subtle: rgba(148, 163, 184, 0.35);
    --pba-divider: rgba(148, 163, 184, 0.25);
    --pba-text-main: #e5e7eb;
    --pba-text-muted: #9ca3af;
    --pba-text-soft: #6b7280;
    --pba-surface-strong: rgba(15, 23, 42, 0.85);
    --pba-surface-strong-hover: rgba(30, 41, 59, 0.95);
    --pba-surface-strong-border: rgba(148, 163, 184, 0.35);
    --pba-surface-strong-shadow: 0 12px 35px rgba(15, 23, 42, 0.55);
    --pba-row-hover: rgba(15, 23, 42, 0.85);
    --pba-table-row-border: rgba(51, 65, 85, 0.85);
}

/* ===========================
   App-level preferences
   =========================== */

/* Compact density */
html.pba-compact-density {
    /* smaller overall spacing */
    --pba-tabbar-h: 70px; /* slightly shorter */
}

    html.pba-compact-density .pba-page {
        padding: 1.25rem 1rem 4.75rem;
    }

    html.pba-compact-density .pba-card {
        padding: 0.85rem 0.95rem 0.95rem;
    }

@media (min-width: 768px) {
    html.pba-compact-density .pba-card {
        padding: 1.0rem 1.15rem 1.15rem;
    }
}

html.pba-compact-density .pba-setting-item {
    padding: 10px 10px;
}

html.pba-compact-density .pba-page-title {
    font-size: 1.85rem;
}

@media (min-width: 768px) {
    html.pba-compact-density .pba-page-title {
        font-size: 2.15rem;
    }
}

/* Reduced motion (app override, not OS-level) */
html.pba-reduced-motion * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Stop your explicit route animations when reduced motion is enabled */
html.pba-reduced-motion .pba-route {
    animation: none !important;
}

/* Stop aurora blob motion */
html.pba-reduced-motion .pba-shell::before,
html.pba-reduced-motion .pba-shell::after {
    animation: none !important;
}

/* Disable hover lift / glass transitions (CSS var set by JS too, but this makes it bulletproof) */
html.pba-reduced-motion {
    --lg-enabled: 0;
}

/* ---------- PALETTE SWITCHING ---------- */
/* Set BOTH the hex + rgb once. Everything else derives from it. */

html[data-pba-palette="default"] {
    --pba-color-accent: #0a84ff;
    --pba-color-accent-rgb: 10, 132, 255;
}

html[data-pba-palette="mint"] {
    --pba-color-accent: #10b981;
    --pba-color-accent-rgb: 16, 185, 129;
}

html[data-pba-palette="sunset"] {
    --pba-color-accent: #f97316;
    --pba-color-accent-rgb: 249, 115, 22;
}

html[data-pba-palette="royal"] {
    --pba-color-accent: #6366f1;
    --pba-color-accent-rgb: 99, 102, 241;
}

/* NEW: red / fire */
html[data-pba-palette="fire"] {
    --pba-color-accent: #ef4444;
    --pba-color-accent-rgb: 239, 68, 68;
}

/* NEW: dark blue / black (deep navy accent) */
html[data-pba-palette="midnight"] {
    --pba-color-accent: #1d4ed8;
    --pba-color-accent-rgb: 29, 78, 216;
}

/* NEW: yellow / sunrise */
html[data-pba-palette="sunrise"] {
    --pba-color-accent: #f59e0b;
    --pba-color-accent-rgb: 245, 158, 11;
}

/* NEW: OLED black (accent + true-black surfaces) */
html[data-pba-palette="oled"] {
    --pba-color-accent: #22c55e; /* pick your preferred OLED accent */
    --pba-color-accent-rgb: 34, 197, 94;
    /* Optional but recommended: make the whole UI feel OLED */
    --pba-bg-root: radial-gradient(circle at top, #060606 0, #000 55%, #000 100%);
    --bs-body-bg: #000;
}

/* Keep Bootstrap vars synced with palette */
html[data-pba-palette] {
    --pba-accent: var(--pba-color-accent);
    --bs-primary: var(--pba-color-accent);
    --bs-primary-rgb: var(--pba-color-accent-rgb);
    --bs-link-color: var(--pba-color-accent);
    --bs-link-hover-color: var(--pba-color-accent);
}

/* =========================================================
   Global baseline
   ========================================================= */
html, body {
    height: 100%;
}

body {
    font-family: var(--pba-font-family);
    background: var(--pba-bg-root) fixed;
    color: var(--pba-text-main);
}

    body .app-body,
    body main {
        background: transparent;
    }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   PBA Shell Aurora System (tunable via CSS variables)
   ========================================================= */

:root {
    /* --- Master controls --- */
    --pba-shell-blur: 169px;
    /* Drift distance (bigger = more movement) */
    --pba-shell-drift-x: 147px;
    --pba-shell-drift-y: 656px;
    /* Speed multiplier:
       1   = current speed
       1.5 = faster
       2   = 2x faster
       .75 = slower
    */
    --pba-shell-speed-mult: 1.2;
    /* Base wash (static gradients behind blobs) */
    --pba-shell-wash-1-w: 1400px;
    --pba-shell-wash-1-h: 780px;
    --pba-shell-wash-1-x: 10%;
    --pba-shell-wash-1-y: -6%;
    --pba-shell-wash-1-alpha: 88%; /* higher = more transparent */

    --pba-shell-wash-2-w: 1300px;
    --pba-shell-wash-2-h: 740px;
    --pba-shell-wash-2-x: 108%;
    --pba-shell-wash-2-y: 8%;
    --pba-shell-wash-2-alpha: 92%;
    /* Blob 1 (left) */
    --pba-shell-b1-size: 980px;
    --pba-shell-b1-left: -420px;
    --pba-shell-b1-top: -520px;
    --pba-shell-b1-opacity: .75;
    --pba-shell-b1-hot-x: 30%;
    --pba-shell-b1-hot-y: 35%;
    --pba-shell-b1-tint-alpha: 70%; /* higher = more transparent */
    --pba-shell-b1-falloff: 62%;
    --pba-shell-b1-duration: 46s;
    /* Blob 2 (right) */
    --pba-shell-b2-size: 880px;
    --pba-shell-b2-right: -460px;
    --pba-shell-b2-top: -140px;
    --pba-shell-b2-opacity: .60;
    --pba-shell-b2-hot-x: 35%;
    --pba-shell-b2-hot-y: 30%;
    --pba-shell-b2-mix-white: 22%; /* “distinctness” in light mode */
    --pba-shell-b2-mix-dark: 35%; /* “distinctness” in dark mode */
    --pba-shell-b2-falloff: 66%;
    --pba-shell-b2-duration: 58s;
    /* CHARTS */
    /* Text + grid */
    --pba-chart-text: var(--pba-text-soft);
    --pba-chart-grid: color-mix(in srgb, var(--bs-border-color), transparent 55%);
    /* Lines */
    --pba-chart-primary: var(--bs-primary);
    --pba-chart-primary-soft: color-mix(in srgb, var(--bs-primary), transparent 78%);
    /* Semantic series */
    --pba-chart-income: var(--pba-color-success);
    --pba-chart-expense: var(--pba-color-danger);
    /* Pie palette (8 stops, all derived from the accent) */
    --pba-chart-1: color-mix(in srgb, var(--bs-primary), white 0%);
    --pba-chart-2: color-mix(in srgb, var(--bs-primary), white 18%);
    --pba-chart-3: color-mix(in srgb, var(--bs-primary), white 32%);
    --pba-chart-4: color-mix(in srgb, var(--bs-primary), white 46%);
    --pba-chart-5: color-mix(in srgb, var(--bs-primary), black 10%);
    --pba-chart-6: color-mix(in srgb, var(--bs-primary), black 22%);
    --pba-chart-7: color-mix(in srgb, var(--bs-primary), black 34%);
    --pba-chart-8: color-mix(in srgb, var(--bs-primary), black 46%);
}

/* ==== SHELL CSS */
.pba-shell {
    position: relative;
    min-height: 100dvh;
    isolation: isolate;
    overflow: hidden;
    /* Base wash (palette aware) */
    background: radial-gradient( var(--pba-shell-wash-1-w) var(--pba-shell-wash-1-h) at var(--pba-shell-wash-1-x) var(--pba-shell-wash-1-y), color-mix(in srgb, var(--bs-primary), transparent var(--pba-shell-wash-1-alpha)), transparent 62% ), radial-gradient( var(--pba-shell-wash-2-w) var(--pba-shell-wash-2-h) at var(--pba-shell-wash-2-x) var(--pba-shell-wash-2-y), color-mix(in srgb, var(--bs-primary), transparent var(--pba-shell-wash-2-alpha)), transparent 60% ), var(--bs-body-bg);
}

    /* Two floating “aurora” blobs */
    .pba-shell::before,
    .pba-shell::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        border-radius: 999px;
        filter: blur(var(--pba-shell-blur));
        transform: translate3d(0,0,0);
        will-change: transform, opacity;
    }

    /* Blob 1 (left) */
    .pba-shell::before {
        width: var(--pba-shell-b1-size);
        height: var(--pba-shell-b1-size);
        left: var(--pba-shell-b1-left);
        top: var(--pba-shell-b1-top);
        opacity: var(--pba-shell-b1-opacity);
        background: radial-gradient( circle at var(--pba-shell-b1-hot-x) var(--pba-shell-b1-hot-y), color-mix(in srgb, var(--bs-primary), transparent var(--pba-shell-b1-tint-alpha)) 0%, transparent var(--pba-shell-b1-falloff) );
        animation: pba-shell-float-1 calc(var(--pba-shell-b1-duration) / var(--pba-shell-speed-mult)) ease-in-out infinite;
    }

    /* Blob 2 (right) */
    .pba-shell::after {
        width: var(--pba-shell-b2-size);
        height: var(--pba-shell-b2-size);
        right: var(--pba-shell-b2-right);
        top: var(--pba-shell-b2-top);
        opacity: var(--pba-shell-b2-opacity);
        background: radial-gradient( circle at var(--pba-shell-b2-hot-x) var(--pba-shell-b2-hot-y), color-mix(in srgb, var(--bs-primary), white var(--pba-shell-b2-mix-white)) 0%, transparent var(--pba-shell-b2-falloff) );
        animation: pba-shell-float-2 calc(var(--pba-shell-b2-duration) / var(--pba-shell-speed-mult)) ease-in-out infinite;
    }

/* Dark mode: mix with background instead of white */
html[data-bs-theme="dark"] .pba-shell::after {
    background: radial-gradient( circle at var(--pba-shell-b2-hot-x) var(--pba-shell-b2-hot-y), color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) var(--pba-shell-b2-mix-dark)) 0%, transparent calc(var(--pba-shell-b2-falloff) + 2%) );
}

html[data-bs-theme="dark"] {
    --pba-chart-grid: color-mix(in srgb, var(--bs-border-color), transparent 35%);
    --pba-chart-primary-soft: color-mix(in srgb, var(--bs-primary), transparent 84%);
}

/* --- Drift animations (distance controlled via variables) --- */
@keyframes pba-shell-float-1 {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    35% {
        transform: translate3d(calc(var(--pba-shell-drift-x) * 0.60), calc(var(--pba-shell-drift-y) * 0.55), 0) scale(1.03);
    }

    70% {
        transform: translate3d(calc(var(--pba-shell-drift-x) * -0.35), calc(var(--pba-shell-drift-y) * 0.85), 0) scale(1.02);
    }

    100% {
        transform: translate3d(0,0,0) scale(1);
    }
}

@keyframes pba-shell-float-2 {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    30% {
        transform: translate3d(calc(var(--pba-shell-drift-x) * -0.70), calc(var(--pba-shell-drift-y) * 0.40), 0) scale(1.02);
    }

    65% {
        transform: translate3d(calc(var(--pba-shell-drift-x) * -0.35), calc(var(--pba-shell-drift-y) * -0.35), 0) scale(1.03);
    }

    100% {
        transform: translate3d(0,0,0) scale(1);
    }
}

/* Reduced motion: stop movement, keep visuals */
@media (prefers-reduced-motion: reduce) {
    .pba-shell::before,
    .pba-shell::after {
        animation: none !important;
    }
}

html.pba-reduced-motion .pba-shell::before,
html.pba-reduced-motion .pba-shell::after {
    animation: none !important;
}

/* Fallback for old browsers */
@supports not (height: 100dvh) {
    .pba-shell {
        min-height: 100vh;
    }
}

/* Touch devices: you can optionally disable animations */
@media (hover: none) and (pointer: coarse) {
    .pba-shell::before,
    .pba-shell::after {
        /* keep or remove this depending on preference */
        /* animation: none; */
        opacity: .65;
    }
}


/*======*/

.pba-category-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: color-mix(in srgb, var(--bs-primary), var(--bs-body-color) 15%);
    flex: 0 0 auto;
}

/* Utility text styles */
.pba-muted {
    color: var(--pba-text-muted) !important;
}

.pba-soft {
    color: var(--pba-text-soft) !important;
}

/* Page layout */
.pba-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 5.25rem; /* extra bottom for mobile tab bar */
}

@media (min-width: 992px) {
    .pba-page {
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }
}

/* Page header */
.pba-page-header {
    margin-bottom: 1.5rem;
}

.pba-page-breadcrumb {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pba-text-soft);
    margin-bottom: 0.35rem;
}

.pba-page-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.15rem;
}

@media (min-width: 768px) {
    .pba-page-title {
        font-size: 2.3rem;
    }
}

.pba-page-description {
    font-size: 0.9rem;
    color: var(--pba-text-muted);
    max-width: 460px;
}

/* =========================================================
   iOS Navigation UI (Top bar + Mobile tab bar)
   ========================================================= */

.pba-topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pba-border-subtle);
    background: rgba(255,255,255,0.70);
}

html[data-bs-theme="dark"] .pba-topbar {
    background: rgba(2, 6, 23, 0.60);
}

.pba-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pba-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pba-text-main);
    text-decoration: none;
    white-space: nowrap;
}

.pba-brand-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--pba-accent-soft);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: grid;
    place-items: center;
    color: var(--pba-color-accent);
    box-shadow: var(--pba-shadow-subtle);
}

.pba-nav-pills {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 9px 12px !important;
    border-radius: 999px;
    box-shadow: var(--pba-surface-strong-shadow);
}

@media (min-width: 992px) {
    .pba-nav-pills {
        display: inline-flex;
    }
}

.pba-nav-pill {
    border: none;
    background: transparent;
    color: var(--pba-text-soft);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: background 0.16s ease-out, color 0.16s ease-out, transform 0.08s ease-out;
}

    .pba-nav-pill:hover {
        background: rgba(148, 163, 184, 0.12);
        color: var(--pba-text-main);
    }

    .pba-nav-pill.active {
        background: #f9fafb;
        color: #020617;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.20);
    }

html[data-bs-theme="dark"] .pba-nav-pill.active {
    background: rgba(226, 232, 240, 0.92);
    color: #0b1220;
}

.pba-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pba-chip {
    border-radius: 999px;
    border: 1px solid var(--pba-border-subtle);
    background: rgba(148, 163, 184, 0.10);
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: var(--pba-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .pba-chip:hover {
        color: var(--pba-text-main);
        background: rgba(148, 163, 184, 0.14);
    }

/* Icon-only button (single definition) */
.pba-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--pba-border-subtle);
    background: rgba(148, 163, 184, 0.10);
    color: var(--pba-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s ease-out, background 0.14s ease-out, box-shadow 0.14s ease-out;
}

    .pba-icon-btn i {
        font-size: 0.9rem;
        line-height: 1;
    }

    .pba-icon-btn:hover {
        background: rgba(148, 163, 184, 0.15);
    }

    .pba-icon-btn:active {
        transform: scale(0.95);
    }

.pba-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    color: var(--pba-text-soft);
    border-radius: 16px;
    padding: 8px 6px;
    border: 1px solid transparent;
    place-items: center;
    gap: 4px;
    transition: background 0.16s ease-out, color 0.16s ease-out, transform 0.08s ease-out;
}

    .pba-tab i {
        font-size: 1.1rem;
    }

    .pba-tab span {
        font-size: 0.72rem;
        font-weight: 600;
    }

    .pba-tab:hover {
        background: rgba(148, 163, 184, 0.12);
        color: var(--pba-text-main);
    }

    .pba-tab.active {
        background: var(--pba-accent-soft);
        border-color: rgba(148, 163, 184, 0.25);
        color: var(--pba-color-accent);
    }

/* =========================================================
   Route transitions (simple, safe)
   ========================================================= */

.pba-route {
    animation: pba-route-in 0.22s ease-out;
}

    .pba-route.is-navigating {
        animation: pba-route-out 0.14s ease-in;
    }

@keyframes pba-route-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pba-route-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0.92;
        transform: translateY(2px);
    }
}

/* =========================================================
   Existing components
   ========================================================= */

/* Segmented control (tabs) */
.pba-page-header-tabs {
    margin-top: 1.2rem;
}

.pba-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--pba-surface-strong-border);
    background: var(--pba-surface-strong);
    box-shadow: var(--pba-surface-strong-shadow);
    list-style: none;
}

    .pba-segmented-control .nav-item {
        list-style: none;
    }

.pba-segmented-button {
    border: none;
    background: transparent;
    color: var(--pba-text-soft);
    font-size: 0.83rem;
    font-weight: 500;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    outline: none;
    transition: background 0.16s ease-out, color 0.16s ease-out, box-shadow 0.16s ease-out, transform 0.08s ease-out;
}

    .pba-segmented-button i {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .pba-segmented-button:hover {
        background: rgba(148, 163, 184, 0.12);
        color: var(--pba-text-main);
    }

    .pba-segmented-button.active,
    .pba-segmented-button[aria-selected="true"] {
        background: #f9fafb;
        color: #020617;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.25);
    }

/* Tap / press micro-interaction */
.pba-tap {
    transition: transform 0.08s ease-out, box-shadow 0.14s ease-out, background 0.14s ease-out, border-color 0.14s ease-out;
}

    .pba-tap:active {
        transform: scale(0.98) translateY(1px);
        box-shadow: var(--pba-shadow-subtle);
    }

/* Page body area */
.pba-page-body {
    margin-top: 1.75rem;
}

/* Card / panel */
.pba-card {
    border-radius: var(--pba-radius-xl);
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: var(--pba-shadow-soft);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1rem 1.1rem 1.1rem;
    background: var(--pba-bg-elevated);
}

@media (min-width: 768px) {
    .pba-card {
        padding: 1.25rem 1.5rem 1.5rem;
    }
}

.pba-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pba-card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

.pba-card-subtitle {
    font-size: 0.8rem;
    color: var(--pba-text-soft);
    margin-bottom: 0;
}

.pba-card-body {
    margin-top: 0.5rem;
}

/* Buttons / pills */
.pba-btn-primary {
    border-radius: 999px;
    border: 1px solid var(--pba-accent);
    background: var(--pba-accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    text-decoration: none;
}

    .pba-btn-primary:hover {
        filter: brightness(0.92);
        border-color: var(--pba-accent);
    }

    .pba-btn-primary:disabled {
        opacity: 0.6;
        cursor: default;
    }

.pba-btn-secondary {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(148, 163, 184, 0.10);
    color: var(--pba-text-main);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.38rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    text-decoration: none;
}

    .pba-btn-secondary:hover {
        background: rgba(148, 163, 184, 0.14);
    }

.pba-btn-text {
    border: none;
    background: transparent;
    color: var(--pba-accent);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.1rem 0.1rem;
    cursor: pointer;
}

.pba-btn-text-danger {
    color: #f97373;
}

/* Alerts */
.pba-alert {
    font-size: 0.8rem;
    border-radius: var(--pba-radius-md);
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.75rem;
}

.pba-alert-danger {
    background: rgba(248, 113, 113, 0.09);
    border: 1px solid rgba(248, 113, 113, 0.7);
    color: #fecaca;
}

/* Bottom sheet (for edit / create modals) */
.pba-bottom-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1050;
    animation: pba-fade-in 0.16s ease-out;
}

.pba-bottom-sheet__panel {
    width: 100%;
    max-width: 640px;
    border-radius: 22px 22px 0 0;
    background: var(--pba-bg-elevated-light);
    color: #020617;
    box-shadow: 0 -18px 40px rgba(15, 23, 42, 0.55);
    padding: 0.85rem 1rem 1.15rem;
    animation: pba-sheet-up 0.22s ease-out;
}

@keyframes pba-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pba-sheet-up {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================================================
   Sidebar (Customize / Dashboard)
   - Single implementation: sheet panel + backdrop
   ========================================================= */

/* Layer that sits above EVERYTHING */
.pba-customize-layer {
    position: fixed;
    inset: 0;
    z-index: 11000; /* higher than your navbar/sidebar layers */
    display: block;
}

/* Backdrop (shared) */
.pba-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    /* subtle, cheaper than blur */
    backdrop-filter: saturate(115%);
    -webkit-backdrop-filter: saturate(115%);
    animation: pbaFadeIn .14s ease-out;
    will-change: opacity;
}

/* Ensure backdrop/panel stacking inside the customize layer */
.pba-customize-layer .pba-sidebar-backdrop {
    z-index: 0;
}

.pba-customize-layer .pba-sidebar--sheet {
    z-index: 1;
}

/* iOS sheet panel */
.pba-sidebar--sheet {
    position: fixed;
    right: 0;
    top: 0;
    height: 100dvh;
    width: min(420px, 100vw);
    z-index: 9998;
    /* theme aware */
    background: color-mix(in srgb, var(--bs-body-bg), transparent 12%);
    border-left: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 40%);
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    /* blur only on the panel -> but you explicitly disabled it for perf */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    transform: translate3d(0,0,0);
    will-change: transform;
    contain: paint;
    animation: pbaSlideIn .16s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    /* bottom sheet on mobile */
    .pba-sidebar--sheet {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: min(86dvh, 720px);
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 40%);
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        animation: pbaSheetUp .16s ease-out;
    }
}

/* Single sidebar-inner definition */
.pba-sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
    overflow: hidden;
    min-height: 0;
}

@media (min-width: 992px) {
    .pba-sidebar-inner {
        padding: 16px;
    }
}

/* Sticky header/footer */
.pba-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 55%);
}

.pba-sidebar-titlewrap {
    min-width: 0;
}

.pba-sidebar-title {
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: 1.1rem;
}

.pba-sidebar-sub {
    margin-top: 4px;
    font-size: .86rem;
    line-height: 1.2;
}

.pba-sidebar-controls {
    display: grid;
    gap: 10px;
}

.pba-sidebar-section {
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 55%);
    background: color-mix(in srgb, var(--bs-tertiary-bg), transparent 15%);
}

.pba-sidebar-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* iOS segmented control */
.pba-seg {
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 50%);
    background: color-mix(in srgb, var(--bs-body-bg), var(--bs-tertiary-bg) 70%);
    padding: 3px;
    gap: 3px;
}

.pba-seg-btn {
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .82rem;
    white-space: nowrap;
}

    .pba-seg-btn.is-active {
        background: color-mix(in srgb, var(--bs-primary) 16%, transparent);
        border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
    }

/* Scrollable list area */
.pba-sidebar-list {
    flex: 1 1 auto;
    min-height: 0; /* CRITICAL */
    overflow-y: auto; /* CRITICAL */
    overflow-x: hidden;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.pba-sidebar-header,
.pba-sidebar-controls,
.pba-sidebar-footer {
    flex: 0 0 auto;
}

/* Row tile */
.pba-drag-row--tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 55%);
    background: color-mix(in srgb, var(--bs-body-bg), var(--bs-tertiary-bg) 70%);
    margin-bottom: 10px;
}

    .pba-drag-row--tile.is-dragging {
        opacity: .75;
        transform: scale(0.995);
    }

    .pba-drag-row--tile.is-dragover {
        outline: 2px solid color-mix(in srgb, var(--bs-primary), transparent 35%);
        outline-offset: 2px;
    }

.pba-drag-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.pba-drag-meta {
    min-width: 0;
}

.pba-drag-title {
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pba-drag-hint {
    margin-top: 2px;
    font-size: .80rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pba-drag-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pba-sidebar-select {
    width: 128px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 45%);
    background: color-mix(in srgb, var(--bs-body-bg), var(--bs-tertiary-bg) 75%);
    color: var(--bs-body-color);
}

@media (max-width: 420px) {
    .pba-sidebar-select {
        width: 112px;
    }
}

/* Footer */
.pba-sidebar-footer {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 55%);
    background: color-mix(in srgb, var(--bs-body-bg), transparent 10%);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

/* Sidebar hr style */
.pba-sidebar hr {
    border-color: var(--pba-divider);
    opacity: 1;
}

/* Animations */
@keyframes pbaFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pbaSlideIn {
    from {
        transform: translate3d(10px,0,0);
        opacity: 0;
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes pbaSheetUp {
    from {
        transform: translate3d(0,12px,0);
        opacity: 0;
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

/* Small helper for tab content */
.pba-tab-pane {
    animation: pba-tab-fade 0.22s ease-out;
}

@keyframes pba-tab-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   Dashboard collapse controls
   ================================ */

.pba-collapsed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.pba-collapsed-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pba-collapsed-title {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pba-collapsed-subtitle {
    font-size: 0.75rem;
    color: var(--pba-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------
   Quick actions (iOS tile style)
   ------------------------------ */

.pba-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Tile button */
.pba-qa-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: #e5e7eb !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    text-align: left;
    justify-content: flex-start;
}

.pba-qa-btn i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.22);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.pba-qa-btn span {
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pba-qa-btn:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.36) !important;
}

.pba-qa-btn:active {
    transform: scale(0.98);
}

.pba-qa-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pba-accent) 22%, transparent), 0 10px 30px rgba(0,0,0,0.18);
}

/* Accent tints per action */
.pba-qa-income i {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.22);
}

.pba-qa-expense i {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.22);
}

.pba-qa-sub i {
    background: var(--pba-accent-soft);
    border-color: var(--pba-accent-28);
}

.pba-qa-budget i {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.22);
}

/* Layout breakpoints */
@media (min-width: 420px) {
    .pba-quick-actions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .pba-quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pba-qa-btn {
        justify-content: center;
        text-align: center;
    }
}

/*======= ReconnectModal.razor ========*/

.pba-reconnect {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 16px;
    padding: 20px;
    min-width: 280px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    border: 1px solid var(--bs-border-color);
    backdrop-filter: blur(12px);
}

/* Dialog backdrop */
#components-reconnect-modal::backdrop {
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
}

/* Buttons */
.pba-reconnect button {
    background: var(--bs-primary);
    color: var(--bs-primary-text-emphasis);
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
}

    /* Secondary / fallback */
    .pba-reconnect button:not(.components-reconnect-failed-visible) {
        background: var(--bs-secondary);
    }

/* Dark mode shadow */
[data-bs-theme="dark"] .pba-reconnect {
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

/* ============================
   Mobile bottom tab bar (single source of truth)
   - Handles iOS safe-area
   - Handles Chrome toolbar collapse gap via --pba-vv-bottom
   ============================ */

.pba-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--pba-vv-bottom, 0px);
    z-index: var(--pba-z-tabbar, 1400);
    overflow: visible;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), env(viewport-safe-area-inset-bottom, 0px));
}

/* Dark mode */
:root[data-bs-theme="dark"] .pba-tabbar {
    background: rgba(2, 6, 23, 0.60);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

/* Hide on desktop */
@media (min-width: 992px) {
    .pba-tabbar {
        display: none;
    }
}

/* Inner layout */
.pba-tabbar-inner {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
}

/* Optional: if you use a variant class for 4 tabs */
.pba-tabbar-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}

/* Fill under-bar area for visual viewport gap */
.pba-tabbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * max(var(--pba-vv-bottom, 0px), 0px));
    height: calc(max(var(--pba-vv-bottom, 0px), 0px) + max(env(safe-area-inset-bottom, 0px), env(viewport-safe-area-inset-bottom, 0px)));
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
}

/* Base tab button */
.pba-tabbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    padding: 6px 4px;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1;
}

    .pba-tabbar-btn i {
        font-size: 1.25rem;
        line-height: 1;
        display: block;
    }

    .pba-tabbar-btn span {
        display: block;
        line-height: 1;
    }

.pba-tab-center-btn {
    opacity: 0.85;
}

    .pba-tab-center-btn:hover,
    .pba-tab-center-btn.active {
        opacity: 1;
    }

/* Ensure content clears tabbar + safe-area + vv gap */
.pba-shell-main {
    padding-bottom: calc(var(--pba-tabbar-h) + env(safe-area-inset-bottom) + var(--pba-vv-bottom, 0px));
}

/* Mobile: prevent iOS Safari zoom + keep input readability */
@media (max-width: 767.98px) {
    input,
    textarea,
    select,
    .form-control,
    .pba-input {
        font-size: 18px !important;
    }
}

/* ===========================
   Liquid Glass Hover (v3)
   - Fully configurable variables
   - Pointer-driven sheen via --lg-x/--lg-y set by JS
   =========================== */

/* -------- Global defaults (edit these freely) -------- */
:root {
    /* Master on/off + strength */
    --lg-enabled: 1; /* 1 = on, 0 = off */
    --lg-intensity: 0.1; /* 0.0 → 2.0 (overall strength) */
    --lg-max-alpha: 1; /* max opacity cap */
    /* Glass + frost */
    --lg-frost-alpha: 0.32; /* 0 → 1 */
    --lg-frost-blur: 14px; /* blur amount */
    --lg-frost-sat: 1.35; /* saturation */
    --lg-frost-bg-mix: 90%; /* how transparent the frost tint is */
    /* Specular highlight (“liquid”) */
    --lg-highlight-alpha: 0.95; /* 0 → 1 */
    --lg-highlight-white-mix: 70%; /* white highlight strength */
    --lg-highlight-accent-mix: 82%; /* accent highlight strength */
    --lg-bloom: 0.60; /* glow/bloom multiplier */
    /* Highlight range (hotspot size) */
    --lg-spot-1-w: 220px;
    --lg-spot-1-h: 180px;
    --lg-spot-2-w: 380px;
    --lg-spot-2-h: 240px;
    --lg-spot-2-x: 18%; /* accent spot offset */
    --lg-spot-2-y: 12%;
    /* Card motion + glow */
    --lg-lift: 2px; /* hover lift */
    --lg-border-accent-mix: 25%; /* how much accent goes into border */
    --lg-glow-alpha: 0.22; /* glow opacity */
    --lg-shadow-y: 18px;
    --lg-shadow-blur: 52px;
    /* Noise / bubbles */
    --lg-noise-alpha: 0.35; /* 0 → 1 */
    --lg-noise-blur: 0.2px;
    /* Accent source */
    --lg-accent: var(--bs-primary); /* per-theme accent by default */
}

/* Optional: tune in dark mode */
html[data-bs-theme="dark"] {
    --lg-frost-alpha: 0.26;
    --lg-bloom: 0.75;
    --lg-glow-alpha: 0.28;
    --lg-border-accent-mix: 30%;
}

/* ---- Targets ---- */
.pba-card,
.pba-surface-card,
.pba-item-card,
.pba-card-shell {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
    /* Ensure the base surface lets glass read */
    background: color-mix(in srgb, var(--bs-body-bg), transparent 10%);
    border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 35%);
    /* Pointer variables */
    --lg-x: 50%;
    --lg-y: 35%;
    --lg-alpha: 0; /* controlled by JS */
}

    /* Content above layers */
    .pba-card > *,
    .pba-surface-card > *,
    .pba-item-card > *,
    .pba-card-shell > * {
        position: relative;
        z-index: 2;
    }

/* Compute effective opacity */
.pba-card,
.pba-surface-card,
.pba-item-card,
.pba-card-shell {
    --lg-eff: calc(var(--lg-enabled) * var(--lg-intensity) * var(--lg-alpha));
    --lg-eff-clamped: min(var(--lg-max-alpha), var(--lg-eff));
}

    /* Frost layer */
    .pba-card::after,
    .pba-surface-card::after,
    .pba-item-card::after,
    .pba-card-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: calc(var(--lg-eff-clamped) * var(--lg-frost-alpha));
        transition: opacity 160ms ease;
        border-radius: inherit;
        background: color-mix(in srgb, var(--bs-tertiary-bg), transparent var(--lg-frost-bg-mix));
        backdrop-filter: blur(var(--lg-frost-blur)) saturate(var(--lg-frost-sat));
        -webkit-backdrop-filter: blur(var(--lg-frost-blur)) saturate(var(--lg-frost-sat));
    }

    /* Specular + liquid sheen layer */
    .pba-card::before,
    .pba-surface-card::before,
    .pba-item-card::before,
    .pba-card-shell::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: 1;
        pointer-events: none;
        opacity: calc(var(--lg-eff-clamped) * var(--lg-highlight-alpha));
        transition: opacity 160ms ease;
        border-radius: inherit;
        background: radial-gradient( var(--lg-spot-1-w) var(--lg-spot-1-h) at var(--lg-x) var(--lg-y), color-mix(in srgb, white, transparent var(--lg-highlight-white-mix)) 0%, transparent 60% ), radial-gradient( var(--lg-spot-2-w) var(--lg-spot-2-h) at calc(var(--lg-x) + var(--lg-spot-2-x)) calc(var(--lg-y) + var(--lg-spot-2-y)), color-mix(in srgb, var(--lg-accent), transparent var(--lg-highlight-accent-mix)) 0%, transparent 70% ), linear-gradient(135deg, color-mix(in srgb, white, transparent 92%) 0%, transparent 45% ), linear-gradient(0deg, color-mix(in srgb, var(--bs-border-color), transparent 80%), transparent 55% );
        mix-blend-mode: screen;
    }

    /* Noise / bubbles overlay (injected by JS) */
    .pba-card .pba-glass-noise,
    .pba-surface-card .pba-glass-noise,
    .pba-item-card .pba-glass-noise,
    .pba-card-shell .pba-glass-noise {
        display: none;
    }

@media (hover: hover) and (pointer: fine) {
    .pba-card .pba-glass-noise,
    .pba-surface-card .pba-glass-noise,
    .pba-item-card .pba-glass-noise,
    .pba-card-shell .pba-glass-noise {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: calc(var(--lg-eff-clamped) * var(--lg-noise-alpha));
        border-radius: inherit;
        background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0%, transparent 55%), radial-gradient(circle at 70% 65%, rgba(255,255,255,0.08) 0%, transparent 60%), radial-gradient(circle at 55% 25%, rgba(255,255,255,0.06) 0%, transparent 55%);
        mix-blend-mode: overlay;
        filter: blur(var(--lg-noise-blur));
    }

    /* Hover lift + glow */
    .pba-card:hover,
    .pba-surface-card:hover,
    .pba-item-card:hover,
    .pba-card-shell:hover {
        transform: translateY(calc(-1 * var(--lg-lift)));
        border-color: color-mix(in srgb, var(--bs-border-color), var(--lg-accent) var(--lg-border-accent-mix));
        box-shadow: 0 var(--lg-shadow-y) var(--lg-shadow-blur) color-mix(in srgb, #000, transparent 78%), 0 0 0 1px color-mix(in srgb, var(--lg-accent), transparent 80%), 0 0 calc(26px * var(--lg-bloom)) color-mix(in srgb, var(--lg-accent), transparent calc(100% - (var(--lg-glow-alpha) * 100%)));
    }
}

/* Touch: press glass */
@media (hover: none) and (pointer: coarse) {
    .pba-card:active,
    .pba-surface-card:active,
    .pba-item-card:active,
    .pba-card-shell:active {
        transform: scale(0.99);
        --lg-alpha: 1;
    }
}

/* Focus should also feel premium */
.pba-card:focus-within,
.pba-surface-card:focus-within,
.pba-item-card:focus-within,
.pba-card-shell:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lg-accent), transparent 55%), 0 14px 44px color-mix(in srgb, #000, transparent 80%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pba-card,
    .pba-surface-card,
    .pba-item-card,
    .pba-card-shell {
        transition: none !important;
    }

        .pba-card::before,
        .pba-card::after,
        .pba-surface-card::before,
        .pba-surface-card::after,
        .pba-item-card::before,
        .pba-item-card::after,
        .pba-card-shell::before,
        .pba-card-shell::after {
            transition: none !important;
        }
}