/* ═══════════════════════════════════════════
           DESIGN TOKENS — reused from base
        ═══════════════════════════════════════════ */
        :root {
            --bg:            #0B0B0F;
            --surface:       #111116;
            --surface-2:     #17171E;
            --surface-3:     #1E1E28;
            --border:        rgba(255,255,255,0.07);
            --border-2:      rgba(255,255,255,0.11);
            --primary:       #5B6EFF;
            --primary-dim:   rgba(91,110,255,0.15);
            --primary-hover: #4A5CE8;
            --success:       #22D3A0;
            --success-dim:   rgba(34,211,160,0.12);
            --warning:       #FBBF24;
            --warning-dim:   rgba(251,191,36,0.12);
            --danger:        #F25C5C;
            --danger-dim:    rgba(242,92,92,0.12);
            --text:          #F5F7FF;
            --text-2:        #CDD4EA;
            --text-3:        #AEB7CC;

            --header-h:      56px;
            --max-w:         1100px;
            --radius:        12px;
            --radius-lg:     16px;

            --bg-gradient:
                radial-gradient(ellipse 800px 500px at -10% -5%, rgba(91,110,255,.13) 0%, transparent 60%),
                radial-gradient(ellipse 600px 400px at 110% 110%, rgba(34,211,160,.07) 0%, transparent 55%);
            --header-bg:     rgba(11,11,15,0.90);
            --header-border: rgba(255,255,255,0.07);
            --card-shadow:   0 1px 2px rgba(0,0,0,0.25);
            --scrollbar:     #2a2a38;
            --google-btn-bg: #F8F9FF;
            --google-btn-bg-hover: #F0F2FF;
            --google-btn-border: #C7C9D9;
            --google-btn-border-hover: #A0A3BD;
            --google-btn-text: #1F2937;
            --google-btn-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        html.theme-light {
            --bg:            #EFF0F6;
            --surface:       #FFFFFF;
            --surface-2:     #F6F7FC;
            --surface-3:     #ECEDF4;
            --border:        rgba(0,0,0,0.07);
            --border-2:      rgba(0,0,0,0.12);
            --text:          #0F172A;
            --text-2:        #1F2937;
            --text-3:        #334155;
            --primary:       #3347C8;
            --primary-hover: #2B3AA8;
            --success:       #0F7A58;
            --warning:       #8A5700;
            --danger:        #B4232C;
            --primary-dim:   rgba(91,110,255,0.10);
            --success-dim:   rgba(34,211,160,0.10);
            --warning-dim:   rgba(251,191,36,0.10);
            --danger-dim:    rgba(242,92,92,0.10);

            --bg-gradient:
                radial-gradient(ellipse 800px 500px at -10% -5%, rgba(91,110,255,.06) 0%, transparent 60%),
                radial-gradient(ellipse 600px 400px at 110% 110%, rgba(34,211,160,.04) 0%, transparent 55%);
            --header-bg:     rgba(255,255,255,0.90);
            --header-border: rgba(0,0,0,0.08);
            --card-shadow:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
            --scrollbar:     #C8CAD6;
            --google-btn-bg: #F8F9FF;
            --google-btn-bg-hover: #F0F2FF;
            --google-btn-border: #C7C9D9;
            --google-btn-border-hover: #A0A3BD;
            --google-btn-text: #1F2937;
            --google-btn-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        @media (prefers-color-scheme: light) {
            html.theme-auto {
                --bg:            #EFF0F6;
                --surface:       #FFFFFF;
                --surface-2:     #F6F7FC;
                --surface-3:     #ECEDF4;
                --border:        rgba(0,0,0,0.07);
                --border-2:      rgba(0,0,0,0.12);
                --text:          #0F172A;
                --text-2:        #1F2937;
                --text-3:        #334155;
                --primary:       #3347C8;
                --primary-hover: #2B3AA8;
                --success:       #0F7A58;
                --warning:       #8A5700;
                --danger:        #B4232C;
                --primary-dim:   rgba(91,110,255,0.10);
                --success-dim:   rgba(34,211,160,0.10);
                --warning-dim:   rgba(251,191,36,0.10);
                --danger-dim:    rgba(242,92,92,0.10);

                --bg-gradient:
                    radial-gradient(ellipse 800px 500px at -10% -5%, rgba(91,110,255,.06) 0%, transparent 60%),
                    radial-gradient(ellipse 600px 400px at 110% 110%, rgba(34,211,160,.04) 0%, transparent 55%);
                --header-bg:     rgba(255,255,255,0.90);
                --header-border: rgba(0,0,0,0.08);
                --card-shadow:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
                --scrollbar:     #C8CAD6;
                --google-btn-bg: #F8F9FF;
                --google-btn-bg-hover: #F0F2FF;
                --google-btn-border: #C7C9D9;
                --google-btn-border-hover: #A0A3BD;
                --google-btn-text: #1F2937;
                --google-btn-shadow: 0 1px 3px rgba(0,0,0,0.08);
            }
        }

        /* ═══════════════════════════════════════════
           BASE
        ═══════════════════════════════════════════ */
        *, *::before, *::after { box-sizing: border-box; }
        [x-cloak] { display: none !important; }
        html { -webkit-font-smoothing: antialiased; }

        body {
            margin: 0;
            font-family: 'DM Sans', system-ui, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            background-color: var(--bg);
            background-image: var(--bg-gradient);
            background-attachment: fixed;
            color: var(--text);
            min-height: 100vh;
        }

        /* ═══════════════════════════════════════════
           HEADER
        ═══════════════════════════════════════════ */
        .app-header {
            position: sticky;
            top: 0;
            z-index: 50;
            height: var(--header-h);
            background: var(--header-bg);
            border-bottom: 1px solid var(--header-border);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            transition: background 0.2s, border-color 0.2s;
        }

        .app-header-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 16px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            flex-shrink: 0;
            border-radius: 8px;
            padding: 4px 6px 4px 2px;
            margin-left: -2px;
            transition: opacity 0.13s;
        }
        .header-logo:hover { opacity: 0.82; }

        .header-logo-icon {
            width: 27px;
            height: 27px;
            background: var(--primary);
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 0 0 3px var(--primary-dim);
        }

        .header-logo-text {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            letter-spacing: -0.01em;
        }

        .header-spacer { flex: 1; }

        /* Theme switcher */
        .theme-switcher {
            display: flex;
            align-items: center;
            gap: 1px;
            background: var(--surface-2);
            border: 1px solid var(--border-2);
            border-radius: 10px;
            padding: 3px;
        }
        .theme-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 4px 10px;
            border: none;
            border-radius: 7px;
            background: transparent;
            color: var(--text-3);
            font-family: inherit;
            font-size: 13.5px;
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            transition: background 0.13s, color 0.13s, box-shadow 0.13s;
        }
        .theme-btn:hover { color: var(--text-2); }
        .theme-btn.is-active {
            background: var(--surface);
            color: var(--text);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--border-2);
        }
        @media (max-width: 380px) {
            .theme-btn-label { display: none; }
            .theme-btn       { padding: 4px 7px; }
        }

        /* ═══════════════════════════════════════════
           BODY CONTENT
        ═══════════════════════════════════════════ */
        .layout-body {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 20px 16px;
            min-height: calc(100vh - var(--header-h));
        }
        .ap-legal-footer {
            border-top: 1px solid var(--header-border);
            margin-top: 8px;
            background: transparent;
        }
        .ap-legal-footer__inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 14px 16px 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px 14px;
            justify-content: space-between;
            align-items: center;
            font-size: 12.5px;
            color: var(--text-3);
        }
        .ap-legal-footer__links {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            align-items: center;
        }
        .ap-legal-footer__links a {
            color: var(--text-3);
            text-decoration: none;
            transition: color 120ms ease;
        }
        .ap-legal-footer__links a:hover {
            color: var(--text);
            text-decoration: underline;
        }

        /* ═══════════════════════════════════════════
           FORM COMPONENTS (auth, review forms)
        ═══════════════════════════════════════════ */
        .form-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px;
            box-shadow: var(--card-shadow);
        }
        .form-card input[type=text],
        .form-card input[type=email],
        .form-card input[type=password],
        .form-card textarea {
            width: 100%;
            background: var(--surface-2);
            border: 1px solid var(--border-2);
            border-radius: 9px;
            color: var(--text);
            font-family: inherit;
            font-size: 15.5px;
            padding: 10px 13px;
            outline: none;
            transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
        }
        .form-card input:focus,
        .form-card textarea:focus {
            border-color: #6366F1;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
        }
        .form-card input::placeholder,
        .form-card textarea::placeholder { color: var(--text-3); }
        .form-label { font-size: 14px; font-weight: 600; color: var(--text-2); display: block; margin-bottom: 6px; }
        .ap-register-legal-note {
            margin: 12px 0 0;
            font-size: 12.5px;
            line-height: 1.6;
            color: var(--text-3);
            text-align: center;
        }
        .ap-register-legal-note a {
            color: var(--text-2);
        }
        .ap-register-legal-note a:hover {
            color: var(--text);
        }

        .btn-submit {
            display: block;
            width: 100%;
            background: var(--primary);
            color: #fff;
            font-family: inherit;
            font-size: 15px;
            font-weight: 500;
            padding: 11px 16px;
            border: none;
            border-radius: 9px;
            cursor: pointer;
            transition: background 0.14s, box-shadow 0.14s;
            text-align: center;
        }
        .btn-submit:hover { background: var(--primary-hover); box-shadow: 0 0 0 3px rgba(91,110,255,0.22); }

        .alert-error {
            background: var(--danger-dim);
            border: 1px solid rgba(242,92,92,0.3);
            color: var(--danger);
            border-radius: 9px;
            padding: 10px 14px;
            font-size: 14px;
        }
        .alert-success {
            background: var(--success-dim);
            border: 1px solid rgba(34,211,160,0.3);
            color: var(--success);
            border-radius: 9px;
            padding: 10px 14px;
            font-size: 14px;
        }
        .form-divider {
            display: flex; align-items: center; gap: 10px;
            font-size: 13px; color: var(--text-3);
        }
        .form-divider::before,
        .form-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-2); }

        /* Review page */
        .review-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            box-shadow: var(--card-shadow);
        }
        .review-card input[type=text],
        .review-card textarea {
            width: 100%;
            background: var(--surface-2);
            border: 1px solid var(--border-2);
            border-radius: 9px;
            color: var(--text);
            font-family: inherit;
            font-size: 15px;
            padding: 9px 12px;
            outline: none;
            transition: border-color 0.14s, box-shadow 0.14s;
            resize: vertical;
        }
        .review-card input:focus,
        .review-card textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(91,110,255,0.18);
        }
        .review-card input::placeholder,
        .review-card textarea::placeholder { color: var(--text-3); }

        /* Toasts (public/auth pages) */
        .toast-stack {
            position: fixed;
            right: 16px;
            top: calc(var(--header-h) + 16px);
            z-index: 95;
            display: grid;
            gap: 10px;
            width: min(92vw, 360px);
            pointer-events: none;
        }
        .toast {
            border: 1px solid var(--border-2);
            background: var(--surface-2);
            color: var(--text);
            border-radius: var(--radius);
            padding: 12px 16px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px var(--border) inset;
            backdrop-filter: blur(12px);
            pointer-events: auto;
        }
        .toast--success { border-color: rgba(34,211,160,0.35); }
        .toast--error   { border-color: rgba(242,92,92,0.35); }
        .toast button {
            border: 0;
            background: transparent;
            color: var(--text-3);
            cursor: pointer;
            padding: 0 2px;
            font-size: 16px;
            line-height: 1;
            transition: color 0.12s;
        }
        .toast button:hover { color: var(--text); }
        .ap-toast-content {
            display: grid;
            gap: 5px;
            min-width: 0;
            flex: 1;
        }
        .ap-toast-action {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--primary);
            text-decoration: none;
            transition: color 0.13s, text-decoration-color 0.13s;
        }
        .ap-toast-action:hover {
            color: var(--text);
            text-decoration: underline;
        }
        .ap-toast-action:focus-visible {
            outline: none;
            text-decoration: underline;
            border-radius: 6px;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
        }

        /* Confirm modal (public pages) */
        .confirm-backdrop {
            position: fixed;
            inset: 0;
            z-index: 90;
            background: rgba(6, 8, 15, 0.64);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .confirm-modal {
            width: min(100%, 460px);
            background: var(--surface);
            border: 1px solid var(--border-2);
            border-radius: var(--radius-lg);
            box-shadow: 0 24px 70px rgba(0,0,0,0.35);
            padding: 20px;
        }
        .confirm-title {
            margin: 0 0 6px;
            font-size: 19px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--text);
            letter-spacing: -0.01em;
        }
        .confirm-message {
            margin: 0;
            font-size: 15px;
            line-height: 1.6;
            color: var(--text-2);
        }
        .confirm-actions {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }
        .confirm-btn {
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 9px 14px;
            font: inherit;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
        }
        .confirm-btn--ghost {
            background: transparent;
            color: var(--text-2);
            border-color: var(--border-2);
        }
        .confirm-btn--ghost:hover {
            background: var(--surface-2);
            color: var(--text);
        }
        .confirm-btn--primary {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }
        .confirm-btn--primary:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
        }
        .confirm-btn--danger {
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
        }
        .confirm-btn--danger:hover {
            background: #d94444;
            border-color: #d94444;
        }

        @media (max-width: 640px) {
            .layout-body {
                padding: 16px 12px;
            }

            .ap-legal-footer__inner {
                padding: 12px;
                align-items: flex-start;
            }

            .form-card {
                padding: 22px 16px;
            }

            .toast-stack {
                left: 12px;
                right: 12px;
                width: auto;
            }
        }

        /* Scrollbar */
        ::-webkit-scrollbar       { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 99px; }