:root {
            --ui-bg: #f4f5f7;
            --ui-surface: #ffffff;
            --ui-surface-2: #eef0f4;
            --ui-surface-3: #f8f9fb;
            --ui-text: #0f1115;
            --ui-muted: #5d6472;
            --ui-faint: #8b919d;
            --ui-line: #e4e7ec;
            --ui-primary: #4f46e5;
            --ui-primary-hover: #4338ca;
            --ui-on-primary: #ffffff;
            --ui-accent: #4f46e5;
            --ui-accent-soft: #eef0ff;
            --ui-header: #4f46e5;
            --ui-header-2: #4f46e5;
            --ui-header-text: #ffffff;
            --ui-header-line: rgba(255, 255, 255, .16);
            --ui-header-btn: rgba(255, 255, 255, .14);
            --ui-header-btn-hover: rgba(255, 255, 255, .23);
            --ui-success: #0e9f6e;
            --ui-danger: #e02424;
            --ui-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04);
            --ui-shadow: 0 1px 2px rgba(15, 17, 21, .04), 0 10px 30px rgba(15, 17, 21, .06);
            --ui-radius-sm: 12px;
            --ui-radius: 18px;
            --ui-radius-lg: 24px;
        }
        html.dark {
            --ui-bg: #0b0c10;
            --ui-surface: #14161b;
            --ui-surface-2: #1b1e25;
            --ui-surface-3: #101217;
            --ui-text: #f4f5f7;
            --ui-muted: #a5abb6;
            --ui-faint: #727986;
            --ui-line: #262a33;
            --ui-primary: #6366f1;
            --ui-primary-hover: #818cf8;
            --ui-on-primary: #ffffff;
            --ui-accent: #a5b4fc;
            --ui-accent-soft: #1e1b4b;
            --ui-header: #4f46e5;
            --ui-header-2: #4f46e5;
            --ui-header-text: #ffffff;
            --ui-header-line: rgba(255, 255, 255, .16);
            --ui-header-btn: rgba(255, 255, 255, .14);
            --ui-header-btn-hover: rgba(255, 255, 255, .23);
            --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
            --ui-shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.28);
        }

        html, body { background: var(--ui-bg) !important; color: var(--ui-text) !important; }
        html { overscroll-behavior-y: contain; }
        body { font-feature-settings: "ss01" 1, "cv11" 1; letter-spacing: -.01em; }
        body.has-app-nav { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

        /* App header */
        #main-header {
            background: var(--ui-header) !important;
            color: var(--ui-header-text) !important;
            border-bottom: 1px solid var(--ui-header-line) !important;
            box-shadow: none !important;
            padding: 8px 16px !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .app-header-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
        .app-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
        .app-brand-mark {
            width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
            background: #ffffff;
            border: 1px solid rgba(255, 255, 255, .22);
            overflow: hidden;
        }
        .app-brand-mark .brand-logo { width: 26px; height: 26px; object-fit: contain; }
        .app-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; color: var(--ui-header-text); }
        .app-header-actions { display: flex; align-items: center; gap: 8px; }
        .app-icon-btn {
            width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
            background: var(--ui-header-btn); border: 1px solid var(--ui-header-line);
            color: #ffffff; transition: transform .15s ease, background .15s ease;
        }
        .app-icon-btn:hover { background: var(--ui-header-btn-hover); }
        .app-icon-btn:active { transform: scale(.94); }
        .app-theme-menu {
            background: var(--ui-surface) !important;
            border-color: var(--ui-line) !important;
            box-shadow: var(--ui-shadow) !important;
            border-radius: 16px !important;
        }
        .app-theme-menu .theme-opt { color: var(--ui-text) !important; }
        .app-theme-menu .theme-opt:hover { background: var(--ui-surface-2) !important; }

        /* Floating tab bar */
        #bottom-nav {
            left: 50% !important; right: auto !important;
            bottom: calc(12px + env(safe-area-inset-bottom)) !important;
            width: calc(100% - 24px) !important; max-width: 520px;
            transform: translateX(-50%);
            border: 1px solid var(--ui-line) !important;
            border-radius: 22px !important;
            background: var(--ui-surface) !important;
            box-shadow: var(--ui-shadow) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            overflow: hidden;
        }
        #bottom-nav > div { height: 64px !important; gap: 2px; padding: 6px; }
        #bottom-nav .nav-link { position: relative; height: 52px; border-radius: 16px; transition: background .15s ease, color .15s ease; }
        #bottom-nav .nav-link i { font-size: 18px !important; margin-bottom: 1px !important; }
        #bottom-nav .nav-link span { font-size: 11px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .01em !important; }
        #bottom-nav .nav-link.text-indigo-600 { color: var(--ui-accent) !important; background: var(--ui-accent-soft); }
        #bottom-nav .nav-link.text-slate-400 { color: var(--ui-faint) !important; }
        #bottom-nav.safe-area-bottom { padding-bottom: 0 !important; }
        body.bg-slate-50 { background: var(--ui-bg) !important; }
        html.dark body { background: var(--ui-bg) !important; color: var(--ui-text) !important; }

        /* If a page uses its own bottom-nav markup, keep it visually aligned. */
        .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

        /* Use the standard page loader from base.html (logo + progress bar). */


        /* Light/dark surfaces */
        .bg-white { background: var(--ui-surface) !important; }
        .bg-slate-50 { background: var(--ui-surface-2) !important; }
        .bg-slate-100, .bg-slate-200 { background: var(--ui-surface-2) !important; }
        .dark .bg-white { background: var(--ui-surface) !important; }
        .dark .bg-slate-50, .dark .bg-slate-100, .dark .bg-slate-200 { background: var(--ui-surface-2) !important; }
        .text-slate-900, .text-slate-800, .dark .text-slate-900, .dark .text-slate-800 { color: var(--ui-text) !important; }
        .text-slate-700, .text-slate-600, .text-slate-500,
        .dark .text-slate-700, .dark .text-slate-600, .dark .text-slate-500 { color: var(--ui-muted) !important; }
        .text-slate-400, .dark .text-slate-400 { color: var(--ui-faint) !important; }
        .text-slate-300, .dark .text-slate-300 { color: var(--ui-faint) !important; }
        .border-slate-100, .border-slate-200, .dark .border-slate-100, .dark .border-slate-200 { border-color: var(--ui-line) !important; }

        /* Make every card use the same quiet elevation. */
        .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl,
        .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-2xl { box-shadow: var(--ui-shadow-sm) !important; }
        .rounded-2xl { border-radius: var(--ui-radius) !important; }
        .rounded-3xl { border-radius: var(--ui-radius-lg) !important; }
        .rounded-\[2\.5rem\] { border-radius: var(--ui-radius-lg) !important; }

        /* Accent/action mapping: near-black actions + a single iris accent. */
        .bg-indigo-500, .bg-indigo-600 { background: var(--ui-primary) !important; color: var(--ui-on-primary) !important; }
        html.dark .bg-indigo-500, html.dark .bg-indigo-600 { color: var(--ui-on-primary) !important; }
        .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover, .active\:bg-indigo-700:active { background: var(--ui-primary-hover) !important; }
        .text-indigo-600, .text-indigo-500, .dark .text-indigo-600, .dark .text-indigo-500 { color: var(--ui-accent) !important; }
        .bg-indigo-50, .bg-indigo-100, .dark .bg-indigo-50, .dark .bg-indigo-100 { background: var(--ui-accent-soft) !important; }
        .border-indigo-100, .border-indigo-200, .border-indigo-500, .dark .border-indigo-100, .dark .border-indigo-200 { border-color: var(--ui-accent) !important; }

        .font-extrabold, .font-black { font-weight: 700 !important; }
        .tracking-widest { letter-spacing: .08em !important; }
        .text-\[10px\] { font-size: 11px !important; }
        h1, h2, h3 { letter-spacing: -.03em; }

        /* Form controls */
        input:not([type="checkbox"]):not([type="radio"]), select, textarea {
            background: var(--ui-surface-2) !important;
            color: var(--ui-text) !important;
            -webkit-text-fill-color: var(--ui-text) !important;
            border: 1px solid transparent !important;
            border-radius: 14px !important;
        }
        input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
            border-color: var(--ui-accent) !important;
            box-shadow: none !important;
        }
        input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
            outline: none !important;
        }
        button:focus-visible, a:focus-visible {
            outline: 2px solid var(--ui-text) !important;
            outline-offset: 2px !important;
        }
        button:focus:not(:focus-visible), a:focus:not(:focus-visible) {
            outline: none !important; box-shadow: none !important;
        }
        * { -webkit-tap-highlight-color: transparent; }
        /* Keep forms sharp behind modals; dim the overlay instead of blurring it. */
        [class*="backdrop-blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
        input::placeholder, textarea::placeholder { -webkit-text-fill-color: var(--ui-faint) !important; }

        @media (prefers-reduced-motion: reduce) {
            * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
        }