/* Shared design tokens, navbar, footer, toasts, and modal chrome — extracted from templates/base.html so every static page can share one stylesheet. */

        /* ─────────────────────────────────────────────
           TOKENS
        ───────────────────────────────────────────── */
        :root {
            --g:          #00e676;
            --g-dark:     #00c853;
            --g-dim:      #00b248;
            --g-glow:     rgba(0, 230, 118, 0.15);
            --g-glow-md:  rgba(0, 230, 118, 0.25);
            --g-glow-lg:  rgba(0, 230, 118, 0.40);
            --ink:        #030303;
            --ink-1:      #0b0b0b;
            --ink-2:      #111213;
            --ink-3:      #1a1b1c;
            --ink-4:      #242526;
            --border:     rgba(255,255,255,0.06);
            --border-g:   rgba(0, 230, 118, 0.22);
            --text-1:     #f2f2f2;
            --text-2:     #9a9a9a;
            --text-3:     #555;
            --radius-sm:  8px;
            --radius-md:  14px;
            --radius-lg:  20px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; overflow-x: hidden; }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: var(--ink);
            color: var(--text-1);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--ink); }
        ::-webkit-scrollbar-thumb { background: var(--g-dim); border-radius: 4px; }

        /* ─────────────────────────────────────────────
           NAVBAR
        ───────────────────────────────────────────── */
        .site-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 18px 0;
            transition: background 0.3s, border-color 0.3s;
        }

        .site-nav.scrolled {
            background: rgba(3,3,3,0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
        }

        .site-nav.mobile-open {
            background: rgba(3,3,3,0.97);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
        }

        .nav-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: 4px;
            color: var(--g) !important;
            text-decoration: none;
            text-shadow: 0 0 20px var(--g-glow-md);
            flex-shrink: 0;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 4px;
            list-style: none;
        }

        .nav-links a {
            display: block;
            padding: 7px 14px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-2);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: color 0.2s, background 0.2s;
        }

        .nav-links a:hover {
            color: var(--text-1);
            background: var(--border);
        }

        .nav-ctas {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .btn-ghost {
            display: inline-flex;
            align-items: center;
            padding: 8px 18px;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-2);
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: all 0.2s;
            letter-spacing: 0.3px;
        }

        .btn-ghost:hover {
            color: var(--text-1);
            border-color: rgba(255,255,255,0.15);
            background: var(--border);
        }

        .btn-primary-g {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 20px;
            font-size: 0.82rem;
            font-weight: 700;
            color: #000;
            background: var(--g);
            border: none;
            border-radius: var(--radius-sm);
            text-decoration: none;
            letter-spacing: 0.3px;
            transition: all 0.2s;
            box-shadow: 0 0 20px var(--g-glow);
        }

        .btn-primary-g:hover {
            background: #fff;
            color: #000;
            box-shadow: 0 0 32px var(--g-glow-lg);
            transform: translateY(-1px);
        }

        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
            background: none;
            border: none;
        }

        .nav-hamburger span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--text-2);
            border-radius: 2px;
            transition: all 0.3s;
        }

        .nav-mobile {
            display: none;
            flex-direction: column;
            gap: 8px;
            padding: 16px 0 8px;
            border-top: 1px solid var(--border);
            margin-top: 12px;
        }

        .nav-mobile.open { display: flex; }

        .nav-mobile a {
            padding: 10px 14px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-2);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: all 0.2s;
        }

        .nav-mobile a:hover {
            background: var(--border);
            color: var(--text-1);
        }

        @media (max-width: 991px) {
            .nav-links, .nav-ctas { display: none; }
            .nav-hamburger { display: flex; }
        }

        /* ─────────────────────────────────────────────
           GLOBAL UTILS
        ───────────────────────────────────────────── */
        .g { color: var(--g); }

        .pill-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 14px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--g);
            background: var(--g-glow);
            border: 1px solid var(--border-g);
            border-radius: 100px;
        }

        .pill-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--g);
            box-shadow: 0 0 6px var(--g);
            flex-shrink: 0;
            animation: pulse-dot 2s infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.4; }
        }

        .section-eyebrow {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--g);
            margin-bottom: 16px;
        }

        .display-heading {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(2rem, 5vw, 3.4rem);
            font-weight: 700;
            color: var(--text-1);
            line-height: 1.1;
        }

        .sub-text {
            font-size: 1rem;
            color: var(--text-2);
            line-height: 1.75;
        }

        .section-block { padding: 96px 0; }
        .section-sm    { padding: 60px 0; }

        .line {
            height: 1px;
            background: var(--border);
        }

        .line-g {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--g-dim) 50%, transparent 100%);
            opacity: 0.35;
            border: none;
        }

        /* ─────────────────────────────────────────────
           GLOBAL TOAST NOTIFICATIONS
        ───────────────────────────────────────────── */
        .toast-container {
            position: fixed;
            top: 80px;
            right: 16px;
            width: min(380px, calc(100vw - 32px));
            z-index: 2000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .toast {
            pointer-events: auto;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 13px 14px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: rgba(17,18,19,0.97);
            box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transform: translateX(110%);
            opacity: 0;
            transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
            will-change: transform, opacity;
        }
        .toast.toast-in {
            transform: translateX(0);
            opacity: 1;
        }
        .toast.toast-out {
            transform: translateX(110%);
            opacity: 0;
        }

        .toast-icon-wrap {
            width: 30px; height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .toast-body { flex: 1; min-width: 0; }
        .toast-title {
            font-size: 0.83rem;
            font-weight: 700;
            color: var(--text-1);
            line-height: 1.3;
            margin-bottom: 2px;
        }
        .toast-msg {
            font-size: 0.78rem;
            color: var(--text-2);
            line-height: 1.5;
        }

        .toast-close {
            border: none;
            background: transparent;
            color: var(--text-3);
            cursor: pointer;
            font-size: 0.72rem;
            padding: 4px;
            line-height: 1;
            border-radius: 4px;
            transition: color 0.2s, background 0.2s;
            flex-shrink: 0;
        }
        .toast-close:hover { color: var(--text-1); background: var(--border); }

        /* progress bar under toast */
        .toast-progress {
            position: absolute;
            bottom: 0; left: 0;
            height: 2px;
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            background: currentColor;
            opacity: 0.4;
            animation: toast-drain linear forwards;
        }
        @keyframes toast-drain { from { width: 100%; } to { width: 0%; } }

        /* variants */
        .toast.is-success .toast-icon-wrap { background: rgba(0,230,118,0.12); color: var(--g); }
        .toast.is-success .toast-progress   { color: var(--g); }
        .toast.is-success { border-color: rgba(0,230,118,0.2); }

        .toast.is-error .toast-icon-wrap { background: rgba(239,68,68,0.12); color: #f87171; }
        .toast.is-error .toast-progress   { color: #f87171; }
        .toast.is-error { border-color: rgba(239,68,68,0.22); }

        .toast.is-warning .toast-icon-wrap { background: rgba(245,158,11,0.12); color: #fbbf24; }
        .toast.is-warning .toast-progress   { color: #fbbf24; }
        .toast.is-warning { border-color: rgba(245,158,11,0.22); }

        .toast.is-info .toast-icon-wrap { background: rgba(96,165,250,0.12); color: #60a5fa; }
        .toast.is-info .toast-progress   { color: #60a5fa; }
        .toast.is-info { border-color: rgba(96,165,250,0.2); }

        /* keep old .site-messages alias working */
        .site-messages { display: none; }

        @media (max-width: 576px) {
            .toast-container { top: 70px; right: 10px; width: calc(100vw - 20px); }
        }

        /* ─────────────────────────────────────────────
           FOOTER
        ───────────────────────────────────────────── */
        .site-footer {
            background: var(--ink-1);
            border-top: 1px solid var(--border);
            padding: 64px 0 28px;
        }

        .footer-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: 4px;
            color: var(--g);
        }

        .footer-tagline {
            font-size: 0.85rem;
            color: var(--text-3);
            line-height: 1.7;
            max-width: 260px;
            margin-top: 10px;
        }

        .footer-heading {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-2);
            margin-bottom: 16px;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-links a {
            font-size: 0.85rem;
            color: var(--text-3);
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-links a:hover { color: var(--g); }

        .footer-bottom {
            border-top: 1px solid var(--border);
            margin-top: 48px;
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .footer-bottom p {
            font-size: 0.78rem;
            color: var(--text-3);
            margin: 0;
        }

        .footer-bottom-links {
            display: flex;
            gap: 20px;
        }

        .footer-bottom-links a {
            font-size: 0.78rem;
            color: var(--text-3);
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-bottom-links a:hover { color: var(--text-2); }

        .social-row {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }

        .social-icon {
            width: 34px; height: 34px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: var(--text-3);
            text-decoration: none;
            transition: all 0.2s;
        }

        .social-icon:hover {
            border-color: var(--border-g);
            color: var(--g);
            background: var(--g-glow);
        }

        /* ─────────────────────────────────────────────
           MERCHANT DROPDOWN
        ───────────────────────────────────────────── */
        .merchant-dropdown-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-2);
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s;
            letter-spacing: 0.3px;
            font-family: 'Inter', system-ui, sans-serif;
        }

        .merchant-dropdown-btn:hover,
        .merchant-dropdown-btn.show {
            color: var(--text-1);
            border-color: var(--border-g);
            background: var(--g-glow);
        }

        .merchant-dropdown-btn .store-icon {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            background: var(--g-glow);
            border: 1px solid var(--border-g);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            color: var(--g);
            flex-shrink: 0;
            overflow: hidden;
            font-weight: 700;
            text-transform: uppercase;
        }

        .merchant-dropdown-btn .chevron {
            font-size: 0.58rem;
            color: var(--text-3);
            transition: transform 0.2s;
        }

        .merchant-dropdown-btn.show .chevron {
            transform: rotate(180deg);
        }

        .merchant-menu {
            min-width: 200px;
            background: var(--ink-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: 0 16px 48px rgba(0,0,0,0.5);
            padding: 6px;
            margin-top: 6px !important;
        }

        .merchant-menu .biz-header {
            padding: 10px 12px 8px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 4px;
        }

        .merchant-menu .biz-name {
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--text-1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 170px;
        }

        .merchant-menu .biz-tag {
            font-size: 0.7rem;
            color: var(--g);
            margin-top: 2px;
        }

        .merchant-menu .dropdown-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 9px 12px;
            font-size: 0.84rem;
            color: var(--text-2);
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
        }

        .merchant-menu .dropdown-item i {
            width: 14px;
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-3);
            flex-shrink: 0;
        }

        .merchant-menu .dropdown-item:hover {
            background: var(--border);
            color: var(--text-1);
        }

        .merchant-menu .dropdown-item:hover i { color: var(--g); }

        .merchant-menu .dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }

        .merchant-menu .dropdown-item.logout {
            color: #fca5a5;
        }

        .merchant-menu .dropdown-item.logout i { color: #fca5a5; }

        .merchant-menu .dropdown-item.logout:hover {
            background: rgba(239,68,68,0.08);
            color: #fca5a5;
        }

        /* Mobile merchant row */
        .nav-merchant-mobile {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 10px 0 4px;
            border-top: 1px solid var(--border);
            margin-top: 4px;
        }

        .nav-merchant-mobile .biz-label {
            font-size: 0.72rem;
            color: var(--text-3);
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 0 14px 4px;
        }

        .nav-merchant-mobile a {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 14px;
            font-size: 0.88rem;
            color: var(--text-2);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: all 0.2s;
        }

        .nav-merchant-mobile a:hover {
            background: var(--border);
            color: var(--text-1);
        }

        .nav-merchant-mobile a.logout-link { color: #fca5a5; }
        .nav-merchant-mobile a.logout-link:hover { background: rgba(239,68,68,0.08); }

        /* ─────────────────────────────────────────────
           PAGE LOADER
        ───────────────────────────────────────────── */
        .page-loader {
            position: fixed; inset: 0;
            background: var(--ink);
            z-index: 9999;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 22px;
            transition: opacity 0.55s cubic-bezier(0.4, 0, 1, 1), visibility 0.55s;
            will-change: opacity;
        }
        .page-loader.pl-out { opacity: 0; visibility: hidden; pointer-events: none; }
        .pl-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.25rem; font-weight: 700;
            letter-spacing: 6px; color: var(--g);
            animation: pl-breathe 1.8s ease-in-out infinite;
        }
        @keyframes pl-breathe {
            0%, 100% { opacity: 1;   filter: drop-shadow(0 0 16px rgba(0,230,118,0.45)); }
            50%       { opacity: 0.5; filter: drop-shadow(0 0 4px  rgba(0,230,118,0.1));  }
        }
        .pl-track {
            width: 180px; height: 2px;
            background: rgba(255,255,255,0.05);
            border-radius: 2px; overflow: hidden; position: relative;
        }
        .pl-fill {
            position: absolute; top: 0; bottom: 0; width: 40%;
            background: linear-gradient(90deg, transparent, var(--g), transparent);
            animation: pl-scan 1.3s ease-in-out infinite;
        }
        @keyframes pl-scan { 0% { left: -40%; } 100% { left: 100%; } }

        /* ─────────────────────────────────────────────
           PROFILE COMPLETION MODAL
        ───────────────────────────────────────────── */
        .profile-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.72);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .profile-modal-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .profile-modal {
            background: var(--ink-2);
            border: 1px solid var(--border-g);
            border-radius: var(--radius-lg);
            padding: 36px 36px 32px;
            max-width: 440px;
            width: 100%;
            box-shadow: 0 0 0 1px rgba(0,230,118,0.08), 0 32px 80px rgba(0,0,0,0.65);
            transform: translateY(18px) scale(0.97);
            transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
        }
        .profile-modal-overlay.open .profile-modal {
            transform: translateY(0) scale(1);
        }
        .profile-modal-icon {
            width: 52px; height: 52px;
            border-radius: 14px;
            background: var(--g-glow);
            border: 1px solid var(--border-g);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
            color: var(--g);
            margin-bottom: 20px;
        }
        .profile-modal-eyebrow {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--g);
            margin-bottom: 8px;
        }
        .profile-modal-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-1);
            margin-bottom: 10px;
            line-height: 1.2;
        }
        .profile-modal-body {
            font-size: 0.88rem;
            color: var(--text-2);
            line-height: 1.7;
            margin-bottom: 20px;
        }
        .profile-modal-progress {
            height: 6px;
            background: var(--ink-4);
            border-radius: 100px;
            margin-bottom: 26px;
            overflow: hidden;
        }
        .profile-modal-progress-bar {
            height: 100%;
            border-radius: 100px;
            background: var(--g);
            box-shadow: 0 0 10px var(--g-glow-md);
            width: 0%;
            transition: width 0.7s ease;
        }
        .profile-modal-actions {
            display: flex;
            gap: 10px;
        }
        .profile-modal-cta {
            flex: 1;
            padding: 12px;
            background: var(--g);
            border: none;
            border-radius: var(--radius-sm);
            color: #000;
            font-family: 'Inter', sans-serif;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
            box-shadow: 0 0 20px var(--g-glow);
        }
        .profile-modal-cta:hover {
            background: #fff;
            color: #000;
            box-shadow: 0 0 32px var(--g-glow-lg);
            transform: translateY(-1px);
        }
        .profile-modal-dismiss {
            padding: 12px 18px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-3);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .profile-modal-dismiss:hover {
            border-color: rgba(255,255,255,0.12);
            color: var(--text-2);
            background: var(--border);
        }
        @media (max-width: 480px) {
            .profile-modal { padding: 24px 20px 20px; }
            .profile-modal-actions { flex-direction: column; }
            .profile-modal-dismiss { text-align: center; }
        }

        /* ─────────────────────────────────────────────
           LOGOUT CONFIRMATION MODAL
        ───────────────────────────────────────────── */
        .logout-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 3100;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s;
        }
        .logout-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .logout-modal {
            background: var(--ink-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 36px 36px 30px;
            max-width: 400px;
            width: 100%;
            box-shadow: 0 0 0 1px rgba(239,68,68,0.05),
                        0 32px 80px rgba(0,0,0,0.65),
                        inset 0 1px 0 rgba(255,255,255,0.03);
            transform: translateY(22px) scale(0.96);
            opacity: 0;
            transition: transform 0.38s cubic-bezier(0.22,1,0.36,1),
                        opacity 0.32s cubic-bezier(0.22,1,0.36,1);
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        /* red accent line at top */
        .logout-modal::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 5%,
                rgba(239,68,68,0.7) 50%,
                transparent 95%);
        }
        .logout-overlay.open .logout-modal {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        /* icon */
        .lm-icon-ring {
            width: 68px; height: 68px;
            border-radius: 50%;
            background: rgba(239,68,68,0.08);
            border: 1.5px solid rgba(239,68,68,0.22);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 22px;
            font-size: 1.45rem;
            color: #f87171;
            box-shadow: 0 0 28px rgba(239,68,68,0.1);
            position: relative;
        }
        .lm-icon-ring::after {
            content: '';
            position: absolute; inset: -5px;
            border-radius: 50%;
            border: 1px solid rgba(239,68,68,0.1);
        }
        /* text */
        .lm-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text-1);
            letter-spacing: -0.3px;
            margin-bottom: 10px;
        }
        .lm-desc {
            font-size: 0.875rem;
            color: var(--text-2);
            line-height: 1.72;
            margin-bottom: 28px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }
        /* buttons */
        .lm-actions {
            display: flex;
            gap: 10px;
        }
        .lm-cancel {
            flex: 1;
            padding: 12px 16px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-2);
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s, color 0.2s;
            white-space: nowrap;
        }
        .lm-cancel:hover {
            border-color: rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.04);
            color: var(--text-1);
        }
        .lm-confirm {
            flex: 1;
            padding: 12px 16px;
            background: #ef4444;
            border: none;
            border-radius: var(--radius-sm);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 700;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            box-shadow: 0 0 18px rgba(239,68,68,0.25);
            transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
            position: relative; overflow: hidden;
        }
        .lm-confirm::before {
            content: '';
            position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
            transform: skewX(-18deg); transition: left 0.6s ease;
        }
        .lm-confirm:hover { background: #dc2626; box-shadow: 0 0 30px rgba(239,68,68,0.4); transform: translateY(-2px); }
        .lm-confirm:hover::before { left: 160%; }
        .lm-confirm:active { transform: translateY(0); box-shadow: 0 0 14px rgba(239,68,68,0.25); }
        .lm-confirm i { font-size: 0.78rem; }
        /* responsive */
        @media (max-width: 480px) {
            .logout-modal { padding: 28px 20px 24px; }
            .lm-actions    { flex-direction: column-reverse; }
            .lm-cancel, .lm-confirm { padding: 13px; }
        }
        /* light mode */
        html[data-theme="light"] .logout-modal {
            box-shadow: 0 4px 32px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.07);
            border-color: rgba(0,0,0,0.09);
        }
        html[data-theme="light"] .lm-cancel {
            border-color: rgba(0,0,0,0.12);
            color: #555;
        }
        html[data-theme="light"] .lm-cancel:hover {
            border-color: rgba(0,0,0,0.18);
            background: rgba(0,0,0,0.04);
            color: #111;
        }
        html[data-theme="light"] .logout-overlay {
            background: rgba(0,0,0,0.4);
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── Navbar theme toggle button ── */
        .nav-theme-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;position:relative;flex-shrink:0;padding:0;transition:border-color .2s,background .2s,color .2s;}
        .nav-theme-btn:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text-1);}
        .tt-moon,.tt-sun{width:15px;height:15px;position:absolute;transition:opacity .2s,transform .2s;}
        .tt-moon{opacity:1;transform:scale(1);}.tt-sun{opacity:0;transform:scale(.8);}
        html[data-theme="light"] .tt-moon{opacity:0;transform:scale(.8);}html[data-theme="light"] .tt-sun{opacity:1;transform:scale(1);}
        html[data-theme="light"] .nav-theme-btn{border-color:rgba(0,0,0,.1);color:#555;}
        html[data-theme="light"] .nav-theme-btn:hover{border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.04);color:#111;}

        /* ── Light mode token overrides ── */
        html[data-theme="light"]{
            --ink:      #f4f5f7;
            --ink-1:    #ffffff;
            --ink-2:    #ffffff;
            --ink-3:    #f0f1f3;
            --ink-4:    #e3e5e8;
            --border:   rgba(0,0,0,0.09);
            --border-g: rgba(0,170,85,0.32);
            --text-1:   #111111;
            --text-2:   #555555;
            --text-3:   #999999;
        }
        html[data-theme="light"] .site-nav.scrolled{background:rgba(244,245,247,0.95)!important;border-bottom-color:rgba(0,0,0,0.09)!important;}
        html[data-theme="light"] .site-nav.mobile-open{background:rgba(244,245,247,0.97)!important;border-bottom-color:rgba(0,0,0,0.09)!important;}
        html[data-theme="light"] .nav-hamburger span{background:var(--text-2)!important;}
        html[data-theme="light"] .nav-mobile{border-top-color:rgba(0,0,0,0.09)!important;}
        html[data-theme="light"] .nav-mobile a{color:var(--text-2)!important;}
        html[data-theme="light"] .nav-mobile a:hover{background:rgba(0,0,0,0.05)!important;color:var(--text-1)!important;}
        html[data-theme="light"] .nav-merchant-mobile{border-top-color:rgba(0,0,0,0.09)!important;}
        html[data-theme="light"] .nav-merchant-mobile a{color:var(--text-2)!important;}
        html[data-theme="light"] .nav-merchant-mobile a:hover{background:rgba(0,0,0,0.05)!important;color:var(--text-1)!important;}
        html[data-theme="light"] .toast{background:rgba(255,255,255,0.98)!important;box-shadow:0 8px 24px rgba(0,0,0,.10)!important;}
        html[data-theme="light"] .btn-ghost{border-color:rgba(0,0,0,0.12)!important;}
        html[data-theme="light"] .btn-ghost:hover{border-color:rgba(0,0,0,0.18)!important;background:rgba(0,0,0,0.04)!important;color:var(--text-1)!important;}
        html[data-theme="light"] .pl-track{background:rgba(0,0,0,0.08)!important;}
        html[data-theme="light"] .dropdown-item.logout,
        html[data-theme="light"] .dropdown-item.logout i{color:#dc2626!important;}
        html[data-theme="light"] .dropdown-item.logout:hover{background:rgba(220,38,38,0.06)!important;}
        html[data-theme="light"] .logout-link{color:#dc2626!important;}
        html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c0c3c8!important;}

        /* ── Smooth theme switch ── */
        html.is-switching *{transition:background-color .32s ease,color .22s ease,border-color .25s ease,box-shadow .25s ease!important;}