:root {
    --bg-deep: #000000;
    --bg-navy: #05070d;
    --blue-accent: #5b93ff;
    --blue-accent-2: #2f63e0;
    --blue-soft: #7fa8f2;
    --glass-fill: rgba(8, 10, 16, 0.65);
    --glass-fill-strong: rgba(10, 13, 20, 0.8);
    --glass-border: rgba(120, 160, 255, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --text-primary: #f5f7fb;
    --text-secondary: #8b93a7;
    --danger: #ff6b6b;
    --success: #6ab8ff;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font: 'Google Sans Text', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-theme="light"] {
    --bg-deep: #f5f6fa;
    --bg-navy: #e4e9f5;
    --glass-fill: rgba(255, 255, 255, 0.6);
    --glass-fill-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(47, 99, 224, 0.18);
    --glass-highlight: rgba(255, 255, 255, 0.5);
    --text-primary: #0a0c12;
    --text-secondary: #4b5872;
}

* { box-sizing: border-box; }

/* Smooth theme switching — any element that reacts to a themed CSS
   variable (background / text / border / shadow) will crossfade
   instead of snapping when data-theme flips. Elements that already
   define their own transition (buttons, dots, inputs) keep their own
   timing since a class selector beats this universal one. */
*, *::before, *::after {
    transition: background-color 0.45s ease, color 0.45s ease,
                border-color 0.45s ease, box-shadow 0.45s ease,
                fill 0.45s ease, stroke 0.45s ease;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* ===== Background — subtle black / white / blue glow ===== */
.app-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 20% 15%, var(--bg-navy), var(--bg-deep) 60%);
    overflow: hidden;
}
/* slow rotating sheen behind the orbs — blue/white only, no rainbow */
.app-bg::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg,
        #2f63e033, #ffffff14, #5b93ff2e, #ffffff0d, #2f63e033);
    filter: blur(80px);
    animation: auroraSpin 26s linear infinite;
    mix-blend-mode: screen;
}
@keyframes auroraSpin {
    to { transform: rotate(360deg); }
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: float 16s ease-in-out infinite;
    mix-blend-mode: screen;
}
.orb-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, var(--blue-accent-2), transparent 70%);
    top: -120px; left: -100px;
}
.orb-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--blue-soft), transparent 70%);
    bottom: -100px; right: -80px;
    animation-delay: -6s;
}
.orb-3 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, #ffffff, transparent 70%);
    opacity: 0.06;
    bottom: 20%; left: 30%;
    animation-delay: -10s;
}
.orb-4 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #1c3a8f, transparent 70%);
    top: 10%; right: 10%;
    animation-delay: -3s;
}
.orb-5 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, #ffffff, transparent 70%);
    opacity: 0.05;
    top: 55%; left: -60px;
    animation-delay: -13s;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -25px) scale(1.08); }
}

/* ===== Screens ===== */
.screen {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ===== Liquid glass card ===== */
.glass-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 var(--glass-highlight);
    padding: 32px 28px 28px;
    overflow: hidden;
}
.glass-card::before {
    content: "";
    position: absolute;
    top: -50%; left: -20%;
    width: 140%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 60%);
    pointer-events: none;
    transform: rotate(-8deg);
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.brand-logo {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: #04101f;
    box-shadow: 0 4px 14px rgba(61, 125, 255, 0.45);
}
.brand-name {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.2px;
}

/* progress dots */
.reg-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.reg-progress .dot {
    height: 5px;
    flex: 1;
    border-radius: 4px;
    background: rgba(138, 180, 248, 0.18);
    transition: background 0.25s ease;
}
.reg-progress .dot.done,
.reg-progress .dot.active {
    background: linear-gradient(90deg, var(--blue-accent), var(--blue-accent-2));
}

/* steps */
.step { display: none; animation: fadeIn 0.35s ease; }
.step.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: 0.1px;
}
.step-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.4;
}

.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.field input {
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .field input {
    background: rgba(255,255,255,0.6);
}
.field input:focus {
    border-color: var(--blue-accent);
    box-shadow: 0 0 0 3px rgba(106, 166, 255, 0.18);
}
.field input::placeholder { color: var(--text-secondary); opacity: 0.7; }

/* password field with show/hide toggle */
.field-password-wrap {
    position: relative;
}
.field-password-wrap input {
    padding-right: 44px;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.15s ease, background 0.15s ease;
}
.password-toggle:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.showing .icon-eye { display: none; }
.password-toggle.showing .icon-eye-off { display: block; }

/* buttons */
.btn {
    width: 100%;
    display: block;
    padding: 13px 18px;
    margin-top: 10px;
    border-radius: var(--radius-sm);
    border: none;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary {
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    color: #04101f;
    box-shadow: 0 6px 18px rgba(61, 125, 255, 0.35);
}
.btn-ghost {
    background: rgba(138, 180, 248, 0.12);
    color: var(--blue-soft);
    border: 1px solid var(--glass-border);
}
.btn-text {
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px;
}

.error-text {
    color: var(--danger);
    font-size: 13px;
    margin: 6px 0 0;
    min-height: 16px;
}
.success-text {
    color: var(--success);
    font-size: 13px;
    margin: 6px 0 0;
    min-height: 16px;
}

/* email verify — animated envelope logo */
.verify-logo-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 6px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.verify-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--blue-accent);
    opacity: 0;
    animation: verifyPulse 2.4s ease-out infinite;
}
.verify-ring.r2 { animation-delay: 0.8s; }
.verify-ring.r3 { animation-delay: 1.6s; }
@keyframes verifyPulse {
    0%   { transform: scale(0.55); opacity: 0.55; }
    100% { transform: scale(1.15); opacity: 0; }
}
.verify-envelope {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    box-shadow: 0 8px 22px rgba(61, 125, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: verifyFloat 3s ease-in-out infinite;
    z-index: 1;
}
@keyframes verifyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.verify-envelope svg { display: block; overflow: visible; }
.verify-envelope .env-letter {
    animation: envLetterPeek 3s ease-in-out infinite;
    transform-origin: center;
}
@keyframes envLetterPeek {
    0%, 55%, 100% { transform: translateY(0); opacity: 1; }
    28% { transform: translateY(-7px); opacity: 1; }
}

/* email verify instructions */
.verify-instructions {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(138, 180, 248, 0.08);
    border: 1px solid var(--glass-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.verify-instructions b { color: var(--text-primary); }

/* theme choice */
.theme-choice {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}
.theme-option {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.theme-option.selected {
    border-color: var(--blue-accent);
    background: rgba(106, 166, 255, 0.12);
}
.theme-preview {
    width: 100%;
    height: 60px;
    border-radius: 10px;
}
.theme-preview-light { background: linear-gradient(135deg, #f4f7ff, #dbe4fb); }
.theme-preview-dark { background: linear-gradient(135deg, #10182c, #05070d); }

/* avatar picker */
.avatar-picker {
    width: 96px; height: 96px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: rgba(138, 180, 248, 0.1);
    border: 1.5px dashed var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}
.avatar-picker img { width: 100%; height: 100%; object-fit: cover; }
.avatar-default-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
#avatar-choose-btn { margin-bottom: 4px; }

.main-placeholder-card {
    text-align: center;
}
.main-avatar-wrap {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: rgba(138, 180, 248, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.main-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* page loader */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}
#page-loader-spinner {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(138, 180, 248, 0.2);
    border-top-color: var(--blue-accent);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.page-loader-hidden { opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
    .glass-card { padding: 26px 20px 22px; border-radius: 22px; }
}