/* ── Theme tokens ───────────────────────────────────────────── */
        :root {
            --pg-bg:           #f4f4f5;
            --card-bg:         #ffffff;
            --card-border:     #e4e4e7;
            --text:            #09090b;
            --text-muted:      #71717a;
            --placeholder:     #a1a1aa;
            --input-bg:        #ffffff;
            --input-border:    #e4e4e7;
            --input-focus:     #71717a;
            --btn-bg:          #09090b;
            --btn-text:        #fafafa;
            --btn-hover:       #18181b;
            --divider-color:   #e4e4e7;
            --link-color:      #09090b;
            --toggle-border:   #e4e4e7;
            --toggle-color:    #71717a;
            --toggle-hover-bg: #f4f4f5;
            --success-bg:      #f0fdf4;
            --success-border:  #bbf7d0;
            --success-text:    #15803d;
            --success-icon:    #16a34a;
        }

        [data-bs-theme="dark"] {
            --pg-bg:           #09090b;
            --card-bg:         #09090b;
            --card-border:     #27272a;
            --text:            #fafafa;
            --text-muted:      #a1a1aa;
            --placeholder:     #52525b;
            --input-bg:        #09090b;
            --input-border:    #27272a;
            --input-focus:     #71717a;
            --btn-bg:          #fafafa;
            --btn-text:        #09090b;
            --btn-hover:       #e4e4e7;
            --divider-color:   #27272a;
            --link-color:      #fafafa;
            --toggle-border:   #27272a;
            --toggle-color:    #a1a1aa;
            --toggle-hover-bg: #18181b;
            --success-bg:      #052e16;
            --success-border:  #166534;
            --success-text:    #86efac;
            --success-icon:    #4ade80;
        }

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

        html, body {
            min-height: 100vh;
            background-color: var(--pg-bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            transition: background-color 0.2s, color 0.2s;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }

        /* ── Theme toggle ───────────────────────────────────────────── */
        .theme-toggle {
            position: fixed;
            top: 1rem; right: 1rem;
            z-index: 1050;
            background: none;
            border: 1px solid var(--toggle-border);
            border-radius: 0.375rem;
            color: var(--toggle-color);
            width: 2.25rem; height: 2.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
        }
        .theme-toggle:hover {
            border-color: var(--input-focus);
            color: var(--text);
            background: var(--toggle-hover-bg);
        }

        /* ── Wrapper & card ─────────────────────────────────────────── */
        .page-wrapper { width: 100%; max-width: 400px; }

        .branding {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            margin-bottom: 1.75rem;
        }
        .branding img {
            width: 32px; height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        .branding-name {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.01em;
        }

        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 0.75rem;
            padding: 2rem;
            transition: background-color 0.2s, border-color 0.2s;
        }

        /* ── Icon header ────────────────────────────────────────────── */
        .icon-wrap {
            width: 3rem; height: 3rem;
            border-radius: 0.625rem;
            background: var(--card-border);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem;
            transition: background 0.2s;
        }
        .icon-wrap i { color: var(--text-muted); font-size: 1.25rem; }

        .card-header-text { margin-bottom: 1.5rem; }
        .card-header-text h1 {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.375rem;
            letter-spacing: -0.02em;
        }
        .card-header-text p {
            font-size: 0.875rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* ── Form ───────────────────────────────────────────────────── */
        .form-group { margin-bottom: 1rem; }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 0.375rem;
        }

        .shadcn-input {
            width: 100%;
            background-color: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 0.375rem;
            color: var(--text);
            font-size: 0.875rem;
            font-family: 'Inter', sans-serif;
            padding: 0.5rem 0.75rem;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s;
        }
        .shadcn-input::placeholder { color: var(--placeholder); }
        .shadcn-input:focus {
            border-color: var(--input-focus);
            box-shadow: 0 0 0 2px rgba(113,113,122,0.2);
        }

        /* ── Submit button ──────────────────────────────────────────── */
        .btn-submit {
            width: 100%;
            background-color: var(--btn-bg);
            color: var(--btn-text);
            border: none;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            padding: 0.5625rem 1rem;
            cursor: pointer;
            margin-top: 0.25rem;
            transition: background-color 0.15s, opacity 0.15s;
        }
        .btn-submit:hover:not(:disabled) { background-color: var(--btn-hover); }
        .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

        /* ── Success state ──────────────────────────────────────────── */
        .success-box {
            display: none;
            background: var(--success-bg);
            border: 1px solid var(--success-border);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: background 0.2s, border-color 0.2s;
        }
        .success-box.visible { display: flex; gap: 0.75rem; align-items: flex-start; }
        .success-box i {
            color: var(--success-icon);
            font-size: 1rem;
            margin-top: 0.125rem;
            flex-shrink: 0;
        }
        .success-box-text { font-size: 0.875rem; }
        .success-box-text strong {
            display: block;
            color: var(--success-text);
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        .success-box-text span { color: var(--success-text); opacity: 0.85; }

        /* ── Back link ──────────────────────────────────────────────── */
        .back-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            font-size: 0.875rem;
            color: var(--text-muted);
            text-decoration: none;
            margin-top: 1.25rem;
            transition: color 0.15s;
        }
        .back-link:hover { color: var(--text); }
        .back-link i { font-size: 0.75rem; }

        /* ── Resend timer ───────────────────────────────────────────── */
        .resend-row {
            display: none;
            text-align: center;
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin-top: 0.75rem;
        }
        .resend-row.visible { display: block; }
        .resend-btn {
            background: none;
            border: none;
            color: var(--link-color);
            font-size: 0.8125rem;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 3px;
            padding: 0;
            transition: opacity 0.15s;
        }
        .resend-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }

        /* ── Spinner ────────────────────────────────────────────────── */
        .spinner {
            display: inline-block;
            width: 0.875rem; height: 0.875rem;
            border: 2px solid var(--btn-text);
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            vertical-align: middle;
            margin-right: 0.375rem;
        }
        @keyframes spin { to { transform: rotate(360deg); } }