/* ============================================
   whazora.com LOGIN — Centered Popup Modal
   Ambient dark stage · Sage-green accent (calm)
   Form panel (left) + WhatsApp preview (right)
   ============================================ */

:root {
    /* ----- Sage / calm-green palette (aligned with whazora-theme.css) ----- */
    --sage: var(--wh-accent, #4a9d78);
    --sage-hi: var(--wh-accent-hover, #5aa888);
    --sage-deep: var(--wh-accent-deep, #3a8566);
    --sage-ink: #2f6b52;
    --sage-glow: var(--wh-accent-glow, rgba(74,157,120,0.09));
    --sage-faint: var(--wh-accent-faint, rgba(74,157,120,0.04));
    --sage-line: var(--wh-accent-line, rgba(74,157,120,0.16));

    --red: #e07a7a;
    --red-faint: rgba(224,122,122,0.08);

    /* ----- Surfaces ----- */
    --bg: #08090b;
    --bg-soft: #0c0e11;
    --surface-0: #0e1115;
    --surface-1: #14181d;
    --surface-2: #1a1f25;
    --surface-3: #222831;

    --border: rgba(255,255,255,0.055);
    --border-hover: rgba(255,255,255,0.10);
    --border-active: rgba(74,157,120,0.32);

    --text-1: #eef1f0;
    --text-2: #8c95a0;
    --text-3: #545c66;

    --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Fraunces', 'Plus Jakarta Sans', serif;
    --ease: cubic-bezier(0.16,1,0.3,1);
    --r: 12px;
    --r-lg: 18px;

    --shadow-pop: 0 30px 80px -20px rgba(0,0,0,0.65),
                  0 12px 40px -10px rgba(0,0,0,0.55),
                  0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ============================================
   Animations
   ============================================ */
@keyframes pageEnter { from { opacity:0; } to { opacity:1; } }
@keyframes pageExit  { from { opacity:1; } to { opacity:0; } }
@keyframes popIn {
    from { opacity:0; transform: translateY(12px) scale(.985); filter: blur(6px); }
    to   { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes orbDrift1 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(40px,-30px) scale(1.08); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes orbDrift2 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-28px,22px) scale(1.12); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes pulseDot {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.45; transform:scale(.85); }
}
@keyframes typingDot {
    0%,80%,100% { opacity:.3; transform: translateY(0); }
    40%         { opacity:1; transform: translateY(-3px); }
}
@keyframes bubbleIn {
    from { opacity:0; transform: translateY(8px) scale(.96); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes typingTransient {
    0%   { opacity: 0; transform: translateY(6px) scale(.96); max-height: 0; margin-top: -8px; padding-top: 0; padding-bottom: 0; }
    10%  { opacity: 1; transform: translateY(0) scale(1); max-height: 40px; margin-top: 0; padding-top: 9px; padding-bottom: 9px; }
    80%  { opacity: 1; transform: translateY(0) scale(1); max-height: 40px; margin-top: 0; padding-top: 9px; padding-bottom: 9px; }
    100% { opacity: 0; transform: translateY(-4px) scale(.94); max-height: 0; margin-top: -8px; padding-top: 0; padding-bottom: 0; }
}

body.page-exit { animation: pageExit .2s ease-in both; }

/* ============================================
   Reset
   ============================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-2);
    line-height: 1.55;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }

html.login-pending .auth-popup { opacity: 0; }
html.login-ready  .auth-popup {
    opacity: 1;
    animation: popIn .55s var(--ease) both;
}

/* Grain overlay */
.grain-overlay {
    position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .025;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 200px;
}

/* ============================================
   Ambient backdrop
   ============================================ */
.auth-ambient {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1100px 700px at 18% 12%, rgba(74,157,120,0.05), transparent 60%),
        radial-gradient(900px 600px at 85% 85%, rgba(74,157,120,0.035), transparent 60%),
        linear-gradient(180deg, #08090b 0%, #06080a 100%);
    overflow: hidden;
}
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(110px); }
.ambient-orb-1 { width: 520px; height: 520px; background: rgba(74,157,120,0.08); top: -10%; left: -8%; animation: orbDrift1 22s ease-in-out infinite; }
.ambient-orb-2 { width: 420px; height: 420px; background: rgba(58,133,102,0.07); bottom: -12%; right: -6%; animation: orbDrift2 26s ease-in-out infinite; }
.ambient-orb-3 { width: 280px; height: 280px; background: rgba(74,157,120,0.04); top: 55%; left: 48%; animation: orbDrift1 18s ease-in-out infinite; }
.ambient-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 95%);
}
.ambient-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ============================================
   Topbar
   ============================================ */
.auth-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 16px 24px;
    padding-top: max(16px, env(safe-area-inset-top));
}

.auth-nav-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(14,17,21,0.55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: var(--text-2);
    font-size: 12px; font-weight: 600;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.auth-nav-back i { font-size: 11px; color: var(--sage); transition: transform .25s var(--ease); }
.auth-nav-back:hover {
    color: var(--text-1);
    border-color: var(--border-active);
    background: rgba(20,24,29,0.75);
}
.auth-nav-back:hover i { transform: translateX(-3px); }

.auth-topbar-brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.3px;
    color: var(--text-1);
}
.auth-topbar-logo {
    border-radius: 6px;
    border: 1px solid var(--sage-line);
    object-fit: cover;
}

/* Language */
.lang-selector { position: relative; }
.btn-lang {
    background: rgba(14,17,21,0.55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    transition: all .2s ease;
}
.btn-lang:hover { border-color: var(--border-hover); color: var(--text-1); }
.btn-lang i { color: var(--sage); font-size: 12px; }

.lang-modal {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: rgba(20,24,29,0.96);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: var(--r);
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
    border: 1px solid var(--border-hover); width: 140px;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px) scale(.97);
    transition: all .22s var(--ease); z-index: 100; padding: 5px;
}
.lang-modal.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.lang-option {
    padding: 8px 11px; border-radius: 8px; cursor: pointer;
    font-size: 12px; font-weight: 500; color: var(--text-2);
    transition: background .12s, color .12s;
}
.lang-option:hover { background: var(--surface-3); color: var(--text-1); }
.lang-option.active { background: var(--sage-faint); color: var(--sage); font-weight: 600; }

/* ============================================
   Popup stage
   ============================================ */
.auth-stage {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 24px;
}

.auth-popup {
    position: relative;
    width: 100%;
    max-width: 820px;
    background: linear-gradient(180deg, #0f1318 0%, #0c0f13 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    overflow: hidden;
    isolation: isolate;
}

.auth-popup::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sage-line), transparent);
    z-index: 2;
}

/* ============================================
   LEFT — FORM PANEL
   ============================================ */
.auth-popup-form {
    padding: 22px 28px 16px;
    display: flex; align-items: stretch;
    background: linear-gradient(180deg, rgba(74,157,120,0.012), transparent 40%);
}

.auth-card {
    width: 100%; max-width: 320px; margin: auto;
    display: flex; flex-direction: column;
}

.auth-form-logo {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 12px;
    text-decoration: none;
}
.auth-logo-mark {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--sage-line);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px var(--sage-faint);
}
.auth-logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-logo-mark.has-fallback img { display: none; }
.auth-logo-mark.has-fallback::before {
    content: 'W';
    font-size: 14px; font-weight: 800; color: var(--sage);
    font-family: var(--font-display);
}
.brand-logo-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -.5px;
}

.auth-card-header { margin-bottom: 12px; }
.auth-card-header h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-1);
    letter-spacing: -.6px;
    line-height: 1.1;
    margin-bottom: 4px;
}
.auth-card-header p {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.45;
}

.auth-tabs {
    display: flex; gap: 3px; padding: 3px;
    background: var(--surface-1);
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}
.auth-tab {
    flex: 1; padding: 7px 12px; border: none; border-radius: 7px;
    background: transparent; color: var(--text-3);
    font-weight: 600; font-size: 12.5px;
    transition: all .22s var(--ease);
    position: relative;
}
.auth-tab:hover { color: var(--text-2); }
.auth-tab.active {
    background: var(--surface-2);
    color: var(--text-1);
    box-shadow: 0 1px 6px rgba(0,0,0,.25), 0 0 0 1px var(--border);
}
.auth-tab.active::after {
    content: '';
    position: absolute; bottom: -1px; left: 22%; right: 22%;
    height: 2px; border-radius: 2px;
    background: var(--sage);
    opacity: .55;
}

.btn-google {
    width: 100%; display: flex; align-items: center;
    justify-content: center; gap: 10px;
    padding: 9px 16px; border-radius: 10px;
    border: 1px solid var(--border-hover);
    background: var(--surface-1); color: var(--text-1);
    font-weight: 600; font-size: 13px;
    transition: all .25s ease;
}
.btn-google:hover {
    border-color: var(--sage-line);
    background: var(--surface-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 3px var(--sage-faint);
}
.btn-google.is-loading { opacity: 0.88; pointer-events: none; }
.btn-google.is-loading .btn-google-icon { display: none; }

@keyframes authBtnSpin { to { transform: rotate(360deg); } }
.auth-btn-spinner {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: currentColor;
    animation: authBtnSpin 0.75s linear infinite;
    flex-shrink: 0;
}
.auth-btn-spinner[hidden] { display: none; }

.btn-auth-submit.is-loading,
.btn-google.is-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-auth-submit.is-loading { opacity: 0.92; pointer-events: none; }

.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 10px 0; color: var(--text-3);
    font-size: 10px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-form .field { margin-bottom: 9px; }
.auth-form label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-2); margin-bottom: 5px;
    letter-spacing: .3px;
    text-transform: none;
}
.auth-form input {
    width: 100%; padding: 9px 12px; border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-1);
    font-family: var(--font); font-size: 13px;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
    outline: none;
}
.auth-form input:hover { border-color: var(--border-hover); }
.auth-form input:focus {
    border-color: var(--border-active);
    background: var(--surface-1);
    box-shadow: 0 0 0 4px var(--sage-faint);
}
.auth-form input::placeholder { color: var(--text-3); }

.btn-auth-submit {
    width: 100%; margin-top: 4px; padding: 10px 18px;
    border-radius: 10px; border: 1px solid var(--sage-deep);
    background: linear-gradient(180deg, var(--sage) 0%, var(--sage-deep) 100%);
    color: #0c1614;
    font-weight: 700; font-size: 13.5px;
    letter-spacing: .1px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .25s var(--ease);
    position: relative; overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset,
                0 6px 18px -6px rgba(74,157,120,0.45);
}
.btn-auth-submit::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .55s var(--ease);
}
.btn-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
                0 10px 26px -6px rgba(74,157,120,0.55);
}
.btn-auth-submit:hover::before { transform: translateX(100%); }
.btn-auth-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.auth-footer-links { margin-top: 8px; text-align: center; font-size: 12px; }
.auth-footer-links a {
    color: var(--sage);
    font-weight: 600;
    transition: color .2s, opacity .2s;
    position: relative;
}
.auth-footer-links a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1px; background: var(--sage);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.auth-footer-links a:hover { color: var(--sage-hi); }
.auth-footer-links a:hover::after { transform: scaleX(1); }

.auth-fineprint {
    margin-top: 12px;
    font-size: 10.5px;
    color: var(--text-3);
    text-align: center;
    letter-spacing: .2px;
}
.auth-fineprint span { color: var(--text-2); }

.auth-msg {
    padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
    margin-bottom: 10px; display: none; line-height: 1.45;
}
.auth-msg.show { display: block; }
.auth-msg code { font-size: 12px; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.05); }
.auth-msg.error { background: var(--red-faint); border: 1px solid rgba(224,122,122,0.22); color: #f0b0b0; }
.auth-msg.success { background: var(--sage-faint); border: 1px solid var(--sage-line); color: var(--sage); }
.auth-msg.hint { background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2); }

.auth-form input[aria-invalid="true"] {
    border-color: rgba(224,122,122,0.55);
    box-shadow: 0 0 0 3px rgba(224,122,122,0.10);
}

/* ============================================
   RIGHT — VISUAL PREVIEW PANEL
   ============================================ */
.auth-popup-preview {
    position: relative;
    padding: 22px 26px 20px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 80% 20%, rgba(74,157,120,0.11), transparent 65%),
        radial-gradient(80% 70% at 20% 100%, rgba(58,133,102,0.08), transparent 60%),
        linear-gradient(165deg, #121815 0%, #0d1210 60%, #0a0d0c 100%);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
}

.preview-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.preview-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.preview-orb-a { width: 240px; height: 240px; background: rgba(74,157,120,0.14); top: -10%; right: -10%; animation: orbDrift1 16s ease-in-out infinite; }
.preview-orb-b { width: 180px; height: 180px; background: rgba(58,133,102,0.10); bottom: -8%; left: -10%; animation: orbDrift2 20s ease-in-out infinite; }
.preview-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(74,157,120,0.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74,157,120,0.020) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
}

.preview-channels {
    position: relative; z-index: 1;
    display: flex; justify-content: center; gap: 7px;
    margin-bottom: 12px;
}
.preview-channels .ch {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2); font-size: 12px;
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.preview-channels .ch-wa {
    color: var(--sage);
    background: var(--sage-faint);
    border-color: var(--sage-line);
    transform: scale(1.06);
}
.preview-channels .ch:hover { transform: translateY(-2px); border-color: var(--border-hover); }

.preview-phone {
    position: relative; z-index: 1;
    flex: 1;
    background: rgba(8,11,10,0.55);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 11px 12px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 14px 40px -10px rgba(0,0,0,0.5);
}

.phone-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}
.phone-avatar {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%);
    color: #0c1614;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    box-shadow: 0 0 0 3px var(--sage-faint);
    flex-shrink: 0;
}
.phone-dot {
    position: absolute; bottom: -1px; right: -1px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--sage-hi);
    border: 2px solid var(--surface-0);
    animation: pulseDot 2.4s ease-in-out infinite;
}
.phone-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.phone-meta strong {
    color: var(--text-1);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.1px;
}
.phone-meta span {
    color: var(--text-3);
    font-size: 10px;
    display: inline-flex; align-items: center; gap: 5px;
}
.phone-status-dot {
    color: var(--sage) !important;
    font-size: 6px !important;
}

/* Chat thread — sequenced animation */
.phone-thread {
    display: flex; flex-direction: column; gap: 5px;
    padding: 2px 1px;
    perspective: 800px;
}
.bubble {
    max-width: 80%;
    padding: 6px 10px 5px;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.42;
    color: var(--text-1);
    position: relative;
    opacity: 0;
    animation: bubbleIn .45s var(--ease) both;
    display: flex; flex-direction: column;
}
.bubble span { display: inline; }
.bubble em {
    display: block;
    font-style: normal;
    color: var(--text-3);
    font-size: 9px;
    margin-top: 2px;
    text-align: right;
    letter-spacing: .2px;
}
.bubble em i { color: var(--sage); margin-left: 3px; }

.bubble-in {
    align-self: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-top-left-radius: 4px;
}
.bubble-out {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(74,157,120,0.22), rgba(74,157,120,0.13));
    border: 1px solid var(--sage-line);
    border-top-right-radius: 4px;
    color: #e8efec;
}

/* Sequential reveal timing */
.bubble.step-1 { animation-delay: .4s; }
.bubble.step-2 {
    animation: typingTransient 1.8s var(--ease) both;
    animation-delay: 1.4s;
    overflow: hidden;
}
.bubble.step-3 { animation-delay: 3.2s; }
.bubble.step-4 { animation-delay: 4.5s; }
.bubble.step-5 { animation-delay: 5.6s; }

.bubble-typing { padding: 8px 12px; }
.bubble-typing .dots { display: inline-flex; gap: 4px; align-items: center; }
.bubble-typing .dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--sage-hi);
    display: inline-block;
    animation: typingDot 1.2s ease-in-out infinite;
}
.bubble-typing .dots i:nth-child(2) { animation-delay: .15s; }
.bubble-typing .dots i:nth-child(3) { animation-delay: .3s; }

.preview-caption {
    position: relative; z-index: 1;
    margin-top: 10px;
    text-align: center;
}
.preview-caption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
    letter-spacing: -.3px;
    margin-bottom: 3px;
}
.preview-caption span {
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: .1px;
}

/* ============================================
   Hidden / compat classes
   ============================================ */
.navbar, .auth-page, .auth-page-inner { display: none; }
.auth-icon-wrap { display: none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .auth-popup {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .auth-popup-preview { display: none; }
    .auth-popup-form { padding: 24px 28px 18px; }
}

@media (max-width: 768px) {
    .auth-stage {
        padding: 64px 14px 20px;
        align-items: stretch;
    }
    .auth-popup {
        max-width: 100%;
        border-radius: 16px;
    }
    .auth-popup-form { padding: 20px 18px 16px; }
    .auth-card { max-width: 100%; }

    .auth-topbar { padding: 10px 12px; gap: 10px; }
    .auth-topbar-brand span { display: none; }
    .auth-nav-back span { display: inline; }

    .auth-form-logo { justify-content: center; }
    .auth-card-header { text-align: center; }
    .auth-card-header h1 { font-size: 20px; }

    .auth-form input,
    .auth-form textarea,
    .auth-form select { font-size: 16px !important; }

    .auth-form button[type="submit"],
    #btn-google { width: 100%; min-height: 44px; }

    .auth-tabs { width: 100%; }
    .auth-tabs button { flex: 1; min-height: 40px; }
}

@media (max-width: 479.98px) {
    .auth-popup-form { padding: 18px 14px 14px; }
    .auth-card-header h1 { font-size: 19px; }
    .auth-card-header p { font-size: 12px; }
    .auth-form-logo img { height: 28px; }
    .auth-form .field { margin-bottom: 9px; }
    .auth-form .field input { min-height: 42px; padding: 9px 12px; }
}

/* Short-viewport laptops */
@media (max-height: 760px) and (min-width: 901px) {
    .auth-stage { padding: 56px 24px 16px; }
    .auth-popup-form { padding: 18px 26px 14px; }
    .auth-popup-preview { padding: 18px 22px 16px; }
    .auth-form-logo { margin-bottom: 8px; }
    .auth-card-header { margin-bottom: 8px; }
    .auth-card-header h1 { font-size: 20px; }
    .auth-divider { margin: 8px 0; }
    .auth-form .field { margin-bottom: 8px; }
    .auth-fineprint { margin-top: 8px; }
}

/* Focus-visible */
.auth-form :focus-visible,
#btn-google:focus-visible,
.auth-tab:focus-visible,
.btn-lang:focus-visible,
.auth-nav-back:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ambient-orb, .preview-orb, .phone-dot, .bubble-typing .dots i { animation: none !important; }
    html.login-ready .auth-popup { animation: none; }
    html.page-login.login-ready .auth-popup { transform: scale(1.02); }
    .bubble { opacity: 1; animation: none !important; }
    .bubble.step-2 { display: none; }
}

/* ============================================
   Login page only — +2% popup card & content
   ============================================ */
@keyframes popInLogin {
    from { opacity: 0; transform: translateY(12px) scale(1.0047); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0); }
}

html.page-login .auth-popup {
    transform: scale(1.02);
    transform-origin: center center;
}

html.page-login.login-ready .auth-popup {
    animation: popInLogin .55s var(--ease) both;
}