/* ================================================================
               LIQUID GLASS UI KIT — Complete Design System
               ================================================================ */

        /* ── 1. Custom Properties ── */
        :root {
            /* Glass surfaces */
            --glass-white: rgba(255, 255, 255, 0.06);
            --glass-white-md: rgba(255, 255, 255, 0.11);
            --glass-white-lg: rgba(255, 255, 255, 0.17);
            --glass-dark: rgba(0, 0, 0, 0.24);
            --glass-dark-md: rgba(0, 0, 0, 0.34);

            /* Borders */
            --glass-border: rgba(255, 255, 255, 0.12);
            --glass-border-subtle: rgba(255, 255, 255, 0.07);
            --glass-border-bright: rgba(255, 255, 255, 0.22);

            /* Blur (kept modest — heavy backdrop blurs are expensive under the
               WebKitGTK software renderer on NVIDIA) */
            --blur-sm: blur(4px);
            --blur-md: blur(8px);
            --blur-lg: blur(12px);
            --blur-xl: blur(20px);

            /* Shadows */
            --shadow-glass: 0 6px 28px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            --shadow-float: 0 16px 52px rgba(0, 0, 0, 0.40), 0 4px 16px rgba(0, 0, 0, 0.18);
            --shadow-glow: 0 0 40px rgba(45, 212, 191, 0.22);

            /* Reflections */
            --reflection-top: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
            --reflection-inner: inset 0 1px 1px rgba(255, 255, 255, 0.40), inset 0 -1px 1px rgba(0, 0, 0, 0.08);

            /* Colours — 3vya brand: teal (primary) + yellow (secondary) + grey on black */
            --accent-aqua: #2dd4bf;   /* teal — primary accent */
            --accent-violet: #93a4b8; /* cool grey — secondary / gradients */
            --accent-rose: #707a86;   /* grey — muted / destructive */
            --accent-amber: #fbbf24;  /* yellow — secondary accent */
            --accent-lime: #34d399;   /* teal-green — success */

            /* Background / text */
            --color-bg: #0a0b0d;
            --color-surface: rgba(255, 255, 255, 0.04);
            --color-text: #f4f7f8;
            --color-text-muted: rgba(228, 234, 240, 0.55);
            --color-text-subtle: rgba(228, 234, 240, 0.32);

            /* Spacing */
            --space-2xs: 4px;
            --space-xs: 8px;
            --space-sm: 12px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 32px;
            --space-2xl: 48px;
            --space-3xl: 64px;

            /* Type */
            --text-2xs: 0.68rem;
            --text-xs: 0.75rem;
            --text-sm: 0.82rem;
            --text-md: 0.90rem;
            --text-base: 1rem;
            --text-lg: 1.125rem;
            --text-xl: 1.3rem;
            --text-2xl: 1.6rem;
            --text-3xl: 2rem;
            --text-4xl: 2.6rem;

            /* Radius */
            --radius-xs: 6px;
            --radius-sm: 10px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --radius-2xl: 30px;
            --radius-full: 9999px;

            /* Z-index */
            --z-base: 1;
            --z-raised: 10;
            --z-overlay: 100;
            --z-modal: 500;
            --z-toast: 800;
            --z-tooltip: 900;

            /* Easing */
            --ease-glass: cubic-bezier(0.22, 0.68, 0, 1.2);
            --ease-liquid: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

            /* Duration */
            --dur-fast: 160ms;
            --dur-mid: 360ms;
            --dur-slow: 600ms;

            /* Fonts */
            --font-display: 'Funnel Display', sans-serif;
            --font-body: 'Nunito Sans', sans-serif;
            --font-accent: 'Baloo Da 2', sans-serif;
            --font-barcode: 'Libre Barcode 128 Text', monospace;

            /* Sidebar width */
            --sidebar-width: 220px;
        }

        /* ── Light Theme ── */
        [data-theme="light"] {
            --glass-white: rgba(255, 255, 255, 0.58);
            --glass-white-md: rgba(255, 255, 255, 0.75);
            --glass-white-lg: rgba(255, 255, 255, 0.88);
            --glass-dark: rgba(20, 24, 28, 0.05);
            --glass-dark-md: rgba(20, 24, 28, 0.07);

            --glass-border: rgba(20, 24, 28, 0.12);
            --glass-border-subtle: rgba(20, 24, 28, 0.07);
            --glass-border-bright: rgba(20, 24, 28, 0.20);

            --shadow-glass: 0 6px 28px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
            --shadow-float: 0 16px 52px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06);
            --shadow-glow: 0 0 40px rgba(13, 148, 136, 0.18);

            --color-bg: #eef1f1;
            --color-surface: rgba(255, 255, 255, 0.55);
            --color-text: #15191d;
            --color-text-muted: rgba(21, 25, 29, 0.55);
            --color-text-subtle: rgba(21, 25, 29, 0.35);

            --reflection-top: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 55%);
            --reflection-inner: inset 0 1px 1px rgba(255, 255, 255, 0.90), inset 0 -1px 1px rgba(0, 0, 0, 0.03);

            --accent-aqua: #0d9488;
            --accent-violet: #64748b;
            --accent-rose: #6b7280;
            --accent-amber: #d97706;
            --accent-lime: #059669;
        }

        /* ── 2. Reset & Base ── */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: var(--font-body);
            font-weight: 300;
            color: var(--color-text);
            background: var(--color-bg);
            overflow-x: hidden;
            min-height: 100vh;
            transition: background var(--dur-mid) var(--ease-smooth), color var(--dur-mid) var(--ease-smooth);

            /* Wails desktop shell: let the webview drag the window. */
            --wails-draggable: drag;
        }

        /* Keep interactive / scrollable regions clickable inside the draggable shell. */
        body .sidebar__nav,
        body .main,
        body .topbar,
        body input,
        body select,
        body textarea,
        body button,
        body a,
        body label {
            --wails-draggable: no-drag;
        }

        /* ── 3. Animated Background Scene ── */
        .scene {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .scene__blob {
            position: absolute;
            border-radius: 50%;
            /* Static only: the 80px blur + continuous drift was the biggest
               per-frame cost under software rendering. The radial-gradient is
               already soft, so blur and animation are dropped. */
            opacity: 0.45;
        }

        [data-theme="light"] .scene__blob {
            opacity: 0.22;
        }

        .scene__blob--1 {
            width: 700px;
            height: 700px;
            background: radial-gradient(circle at 30% 30%, rgba(45, 212, 191, 0.42), transparent 70%);
            top: -200px;
            left: -150px;
            --dur: 22s;
        }
        .scene__blob--2 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle at 60% 40%, rgba(147, 164, 184, 0.32), transparent 70%);
            bottom: -200px;
            right: -100px;
            --dur: 17s;
            animation-delay: -8s;
        }
        .scene__blob--3 {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle at 40% 60%, rgba(251, 191, 36, 0.28), transparent 70%);
            top: 40%;
            left: 50%;
            --dur: 25s;
            animation-delay: -13s;
        }

        /* (film grain + blob-drift animation removed — the full-screen
           mix-blend-mode overlay and per-frame transform cost were too heavy
           under software rendering) */

        /* Respect users who opt into reduced motion: strip remaining blur,
           animation and transitions entirely. */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                animation: none !important;
                transition: none !important;
            }
        }

        /* ── 4. Glass Utility ── */
        .glass {
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-glass);
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-lg);
        }

        .glass::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--reflection-top);
            pointer-events: none;
            border-radius: inherit;
            z-index: 1;
        }

        .glass--dark {
            background: var(--glass-dark-md);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .glass--bright {
            background: var(--glass-white-lg);
            border-color: var(--glass-border-bright);
        }

        .glass--frosted {
            backdrop-filter: var(--blur-lg);
            -webkit-backdrop-filter: var(--blur-lg);
            background: rgba(255, 255, 255, 0.06);
        }

        .glass--liquid {
            backdrop-filter: var(--blur-xl);
            -webkit-backdrop-filter: var(--blur-xl);
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.14);
        }

        /* ── 5. Focus Visible ── */
        :focus-visible {
            outline: 2px solid var(--accent-aqua);
            outline-offset: 2px;
            border-radius: var(--radius-xs);
        }

        /* ── 6. Layout ── */
        .app {
            position: relative;
            z-index: 10;
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: var(--sidebar-width);
            padding: var(--space-md) var(--space-sm);
            backdrop-filter: var(--blur-lg);
            -webkit-backdrop-filter: var(--blur-lg);
            background: rgba(10, 11, 13, 0.70);
            border-right: 1px solid var(--glass-border-subtle);
            z-index: 50;
            display: flex;
            flex-direction: column;
            transition: transform var(--dur-mid) var(--ease-glass), background var(--dur-mid);
            overflow-y: auto;
        }

        [data-theme="light"] .sidebar {
            background: rgba(238, 241, 241, 0.78);
        }

        .sidebar__brand {
            padding: var(--space-md) var(--space-sm) var(--space-lg);
            font-family: var(--font-display);
            font-size: var(--text-xl);
            letter-spacing: 0.02em;
            color: var(--accent-aqua);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            border-bottom: 1px solid var(--glass-border-subtle);
            margin-bottom: var(--space-md);
            flex-shrink: 0;
        }

        .sidebar__brand i {
            font-size: 1.4rem;
        }

        .sidebar__nav {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
        }

        .sidebar__nav a {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: 10px 14px;
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            font-weight: 400;
            color: var(--color-text-muted);
            text-decoration: none;
            transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-liquid);
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            font-family: var(--font-accent);
            letter-spacing: 0.02em;
        }

        .sidebar__nav a:hover {
            background: var(--glass-white);
            color: var(--color-text);
            transform: translateX(4px);
        }

        .sidebar__nav a.active {
            background: var(--glass-white-md);
            color: var(--accent-aqua);
            border: 1px solid var(--glass-border);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        }

        .sidebar__nav a i {
            width: 20px;
            text-align: center;
            font-size: 0.95rem;
        }

        /* Main content */
        .main {
            margin-left: var(--sidebar-width);
            flex: 1;
            padding: var(--space-lg) var(--space-xl) var(--space-2xl);
            min-height: 100vh;
        }

        /* ── 7. Topbar ── */
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) var(--space-lg);
            margin-bottom: var(--space-xl);
            border-radius: var(--radius-xl);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-glass);
        }

        .topbar__left {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .topbar__greeting {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
        }

        .topbar__greeting strong {
            color: var(--accent-aqua);
            font-weight: 500;
        }

        .topbar__right {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .topbar__avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-aqua), var(--accent-violet));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: var(--text-sm);
            border: 2px solid var(--glass-border);
            color: #fff;
        }

        /* Theme toggle */
        .theme-toggle {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--glass-border);
            background: var(--glass-white);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-liquid);
            color: var(--color-text);
        }

        .theme-toggle:hover {
            transform: scale(1.08) rotate(15deg);
            background: var(--glass-white-md);
        }

        /* ── 8. Page content ── */
        .page {
            display: none;
            animation: cascade-in var(--dur-slow) var(--ease-glass) both;
        }

        .page.active {
            display: block;
        }

        @keyframes cascade-in {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.97);
                filter: blur(6px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        .page__header {
            margin-bottom: var(--space-xl);
        }

        .page__title {
            font-family: var(--font-display);
            font-size: var(--text-3xl);
            line-height: 1.15;
            letter-spacing: 0.01em;
            background: linear-gradient(135deg, var(--color-text) 30%, var(--accent-aqua) 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
        }

        [data-theme="light"] .page__title {
            background: linear-gradient(135deg, #15191d 20%, #0d9488 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .page__sub {
            font-size: var(--text-md);
            color: var(--color-text-muted);
            margin-top: var(--space-xs);
        }

        /* ── 9. Stat Grid ── */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
        }

        .stat-card {
            padding: var(--space-lg) var(--space-md);
            text-align: center;
            border-radius: var(--radius-lg);
            transition: transform var(--dur-mid) var(--ease-glass), box-shadow var(--dur-mid);
        }

        .stat-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: var(--shadow-float);
        }

        .stat-card__value {
            font-family: var(--font-display);
            font-size: var(--text-3xl);
            line-height: 1.2;
            background: linear-gradient(135deg, var(--accent-aqua), var(--accent-violet));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        [data-theme="light"] .stat-card__value {
            background: linear-gradient(135deg, #0d9488, #64748b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-card__label {
            font-size: var(--text-xs);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
            margin-top: var(--space-xs);
        }

        .stat-card__icon {
            font-size: 1.6rem;
            margin-bottom: var(--space-xs);
            opacity: 0.5;
        }

        .stat-card--accent .stat-card__value {
            background: linear-gradient(135deg, var(--accent-rose), var(--accent-amber));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-card--violet .stat-card__value {
            background: linear-gradient(135deg, var(--accent-violet), var(--accent-rose));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ── 10. Cards Grid ── */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
        }

        .card {
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            transition: transform var(--dur-mid) var(--ease-glass), box-shadow var(--dur-mid);
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-float);
        }

        .card__title {
            font-family: var(--font-display);
            font-size: var(--text-lg);
            margin-bottom: var(--space-sm);
        }

        .card__body {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            line-height: 1.7;
        }

        /* ── 11. Table ── */
        .table-wrap {
            overflow-x: auto;
            border-radius: var(--radius-lg);
        }

        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: var(--text-sm);
        }

        .table thead th {
            padding: var(--space-sm) var(--space-md);
            text-align: left;
            font-size: var(--text-2xs);
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-text-muted);
            border-bottom: 1px solid var(--glass-border-subtle);
            white-space: nowrap;
        }

        .table tbody td {
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--glass-border-subtle);
            vertical-align: middle;
        }

        .table tbody tr:hover {
            background: var(--glass-white);
        }

        .table tbody tr:last-child td {
            border-bottom: none;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            border-radius: var(--radius-full);
            font-family: var(--font-accent);
            font-size: var(--text-2xs);
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .badge--aqua {
            background: rgba(45, 212, 191, 0.18);
            border: 1px solid rgba(45, 212, 191, 0.30);
            color: var(--accent-aqua);
        }
        .badge--lime {
            background: rgba(52, 211, 153, 0.18);
            border: 1px solid rgba(52, 211, 153, 0.30);
            color: var(--accent-lime);
        }
        .badge--amber {
            background: rgba(251, 191, 36, 0.18);
            border: 1px solid rgba(251, 191, 36, 0.30);
            color: var(--accent-amber);
        }
        .badge--rose {
            background: rgba(112, 122, 134, 0.18);
            border: 1px solid rgba(112, 122, 134, 0.30);
            color: var(--accent-rose);
        }
        .badge--violet {
            background: rgba(147, 164, 184, 0.18);
            border: 1px solid rgba(147, 164, 184, 0.30);
            color: var(--accent-violet);
        }

        .badge__dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: currentColor;
            animation: pulse-dot 2s ease infinite;
        }

        @keyframes pulse-dot {
            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.3;
                transform: scale(0.6);
            }
        }

        /* ── 12. Chart placeholder ── */
        .chart-container {
            width: 100%;
            height: 240px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            padding: var(--space-md) 0;
            gap: 8px;
        }

        .chart-bar {
            flex: 1;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            background: linear-gradient(180deg, var(--accent-aqua), var(--accent-violet));
            min-height: 8px;
            transition: height var(--dur-slow) var(--ease-liquid);
            position: relative;
            opacity: 0.7;
        }

        .chart-bar:hover {
            opacity: 1;
            transform: scaleY(1.02);
            transform-origin: bottom;
        }

        [data-theme="light"] .chart-bar {
            background: linear-gradient(180deg, #0d9488, #64748b);
        }

        .chart-bar__label {
            position: absolute;
            bottom: -22px;
            left: 50%;
            transform: translateX(-50%);
            font-size: var(--text-2xs);
            color: var(--color-text-muted);
            white-space: nowrap;
        }

        .chart-bar__value {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: var(--text-2xs);
            font-weight: 500;
            color: var(--color-text);
            opacity: 0.6;
        }

        /* ── 13. Form elements ── */
        .form-group {
            margin-bottom: var(--space-md);
        }

        .form-group label {
            display: block;
            font-size: var(--text-xs);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            opacity: 0.55;
            margin-bottom: var(--space-xs);
            color: var(--color-text);
        }

        .form-input {
            width: 100%;
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            border: 1px solid var(--glass-border-subtle);
            background: var(--glass-white);
            backdrop-filter: var(--blur-sm);
            -webkit-backdrop-filter: var(--blur-sm);
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: var(--text-md);
            outline: none;
            transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
        }

        .form-input::placeholder {
            opacity: 0.40;
        }

        .form-input:focus {
            border-color: rgba(45, 212, 191, 0.50);
            box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
        }

        [data-theme="light"] .form-input {
            background: rgba(255, 255, 255, 0.70);
            border-color: rgba(21, 25, 29, 0.14);
            color: #15191d;
        }

        [data-theme="light"] .form-input:focus {
            border-color: rgba(13, 148, 136, 0.50);
            box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10);
        }

        /* ── 14. Buttons ── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--radius-full);
            border: none;
            cursor: pointer;
            font-family: var(--font-accent);
            font-size: var(--text-sm);
            font-weight: 500;
            letter-spacing: 0.04em;
            color: var(--color-text);
            text-decoration: none;
            transition: transform var(--dur-fast) var(--ease-liquid), box-shadow var(--dur-fast), background var(--dur-fast);
            backdrop-filter: var(--blur-sm);
            -webkit-backdrop-filter: var(--blur-sm);
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
        }

        .btn:hover {
            transform: translateY(-2px);
            background: var(--glass-white-md);
            box-shadow: var(--shadow-float);
        }

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

        .btn--primary {
            background: linear-gradient(135deg, rgba(45, 212, 191, 0.45) 0%, rgba(147, 164, 184, 0.30) 100%);
            border-color: rgba(45, 212, 191, 0.40);
            box-shadow: 0 4px 20px rgba(45, 212, 191, 0.22), var(--reflection-inner);
            color: #04120f;
        }

        .btn--primary:hover {
            background: linear-gradient(135deg, rgba(45, 212, 191, 0.65) 0%, rgba(147, 164, 184, 0.40) 100%);
            box-shadow: 0 6px 30px rgba(45, 212, 191, 0.35);
        }

        .btn--ghost {
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
        }

        .btn--ghost:hover {
            background: var(--glass-white-md);
        }

        .btn--sm {
            padding: 6px 14px;
            font-size: var(--text-xs);
        }

        .btn--icon {
            width: 38px;
            height: 38px;
            padding: 0;
            justify-content: center;
        }

        [data-theme="light"] .btn--primary {
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.55) 0%, rgba(100, 116, 139, 0.45) 100%);
            border-color: rgba(13, 148, 136, 0.50);
            color: #fff;
        }

        [data-theme="light"] .btn--primary:hover {
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.72) 0%, rgba(100, 116, 139, 0.55) 100%);
        }

        /* ── 15. Responsive ── */
        @media (max-width: 900px) {
            .stat-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            .card-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                width: 240px;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .main {
                margin-left: 0;
                padding: var(--space-md);
            }

            .topbar {
                flex-wrap: wrap;
                gap: var(--space-sm);
            }

            .stat-grid {
                grid-template-columns: 1fr 1fr;
            }

            .page__title {
                font-size: var(--text-2xl);
            }

            /* Mobile hamburger */
            .hamburger {
                display: flex !important;
            }
        }

        @media (max-width: 480px) {
            .stat-grid {
                grid-template-columns: 1fr;
            }
            .topbar__greeting {
                font-size: var(--text-xs);
            }
        }

        /* ── 16. Hamburger ── */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
            padding: 6px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--glass-border-subtle);
            background: transparent;
            color: var(--color-text);
        }

        .hamburger span {
            display: block;
            width: 22px;
            height: 2px;
            background: currentColor;
            border-radius: 2px;
            transition: transform var(--dur-fast), opacity var(--dur-fast);
        }

        .hamburger.open span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 4px);
        }
        .hamburger.open span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.open span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -4px);
        }

        /* ── 17. Scrollbar ── */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--glass-border);
            border-radius: var(--radius-full);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--glass-border-bright);
        }

        /* ── 18. Misc helpers ── */
        .text-center {
            text-align: center;
        }
        .text-muted {
            color: var(--color-text-muted);
        }
        .mt-sm {
            margin-top: var(--space-sm);
        }
        .mt-md {
            margin-top: var(--space-md);
        }
        .mt-lg {
            margin-top: var(--space-lg);
        }
        .mb-sm {
            margin-bottom: var(--space-sm);
        }
        .mb-md {
            margin-bottom: var(--space-md);
        }
        .flex {
            display: flex;
        }
        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gap-sm {
            gap: var(--space-sm);
        }
        .gap-md {
            gap: var(--space-md);
        }
        .w-full {
            width: 100%;
        }

        /* ── 19. Toast ── */
        .toast-container {
            position: fixed;
            bottom: var(--space-lg);
            right: var(--space-lg);
            z-index: var(--z-toast);
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            pointer-events: none;
            max-width: 360px;
        }

        .toast {
            padding: var(--space-md) var(--space-lg);
            border-radius: var(--radius-lg);
            pointer-events: all;
            cursor: pointer;
            animation: toast-in var(--dur-mid) var(--ease-liquid) both;
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            background: var(--glass-white-md);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-float);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .toast--success {
            border-color: rgba(74, 222, 128, 0.40);
        }
        .toast--error {
            border-color: rgba(239, 68, 68, 0.40);
        }
        .toast--info {
            border-color: rgba(45, 212, 191, 0.40);
        }

        @keyframes toast-in {
            from {
                opacity: 0;
                transform: translateX(60px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes toast-out {
            from {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateX(60px) scale(0.9);
                max-height: 0;
                padding: 0;
                margin: 0;
            }
        }

        .toast.is-exiting {
            animation: toast-out var(--dur-mid) var(--ease-glass) forwards;
        }

        /* ── 20. Avatar group ── */
        .avatar-group {
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-xs);
            font-weight: 500;
            margin-left: -8px;
            background: linear-gradient(135deg, var(--accent-aqua), var(--accent-violet));
            color: #fff;
            flex-shrink: 0;
        }

        .avatar:first-child {
            margin-left: 0;
        }

        .avatar--overflow {
            background: var(--glass-white-md);
            color: var(--color-text-muted);
            font-size: var(--text-2xs);
        }

        /* ── 21. Skeleton shimmer ── */
        .skeleton {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-sm);
            background: var(--glass-white);
        }

        .skeleton::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.12) 40%,
                    rgba(255, 255, 255, 0.20) 50%,
                    rgba(255, 255, 255, 0.12) 60%,
                    rgba(255, 255, 255, 0) 100%);
            background-size: 200% auto;
            animation: shimmer-skel 1.8s linear infinite;
        }

        @keyframes shimmer-skel {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .skeleton--text {
            height: 14px;
            border-radius: var(--radius-xs);
        }

        .skeleton--heading {
            height: 24px;
            border-radius: var(--radius-xs);
        }

        .skeleton--circle {
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }

        /* ── 22. prefers-reduced-motion ── */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .scene__blob {
                animation: none !important;
            }
            .page {
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
            .chart-bar {
                transition: none !important;
            }
        }

        /* ── 23. @supports fallback ── */
        @supports not (backdrop-filter: blur(1px)) {
            .glass,
            .sidebar,
            .topbar,
            .toast {
                background: rgba(10, 11, 13, 0.92) !important;
                border-color: rgba(255, 255, 255, 0.10) !important;
            }
            [data-theme="light"] .glass,
            [data-theme="light"] .sidebar,
            [data-theme="light"] .topbar,
            [data-theme="light"] .toast {
                background: rgba(255, 255, 255, 0.94) !important;
                border-color: rgba(21, 25, 29, 0.12) !important;
            }
        }

        /* ── 24. 3vya — spinner, loading overlay & misc ── */
        .spinner {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 3px solid var(--glass-border-bright);
            border-top-color: var(--accent-aqua);
            animation: spinner-rotate 0.7s linear infinite;
        }

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

        .workspace-loading {
            position: fixed;
            inset: 0;
            z-index: var(--z-overlay);
            display: none;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            background: rgba(10, 11, 13, 0.35);
            backdrop-filter: var(--blur-sm);
            -webkit-backdrop-filter: var(--blur-sm);
        }

        [data-theme="light"] .workspace-loading {
            background: rgba(238, 241, 241, 0.45);
        }

        body.is-loading .workspace-loading {
            display: flex;
        }

        body.is-loading #main-workspace {
            opacity: 0.55;
        }

        /* Reference numbers (invoice / quote #) render as barcodes. */
        .ref-no {
            font-family: var(--font-barcode);
            font-size: 1.1rem;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }

        /* Section eyebrow / kicker label. */
        .eyebrow {
            font-family: var(--font-accent);
            font-size: var(--text-xs);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--color-text-muted);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .eyebrow::before {
            content: '';
            width: 28px;
            height: 2px;
            border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--accent-aqua), transparent);
        }

        /* Sidebar brand logo mark. */
        .sidebar__brand-mark {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--accent-aqua), var(--accent-violet));
            color: #04120f;
            font-family: var(--font-accent);
            font-weight: 700;
            font-size: var(--text-lg);
            box-shadow: var(--shadow-glow);
        }