/**
 * auth.mirabl.io/asset/css/auth.css
 * Design System v3.0 — Apple-inspired, brand #533afe
 */

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
    font-family: 'mirabl';
    src: url('../font/mirabl-Regular.woff2') format('woff2'),
         url('../font/mirabl-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'mirabl';
    src: url('../font/mirabl-Medium.woff2') format('woff2'),
         url('../font/mirabl-Medium.woff') format('woff');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'mirabl';
    src: url('../font/mirabl-Bold.woff2') format('woff2'),
         url('../font/mirabl-Bold.woff') format('woff');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    --accent:    #533afe;
    --accent-h:  #4228fe;
    --accent-l:  rgba(83,58,254,.10);
    --accent-b:  rgba(83,58,254,.20);
    --green:     #34c759;
    --green-l:   rgba(52,199,89,.12);
    --bg-grad:   linear-gradient(180deg, #e8f4fc 0%, #f5f5f7 30%, #f5f5f7 100%);
    --white:     #ffffff;
    --gray1:     #f5f5f7;
    --gray2:     #f2f2f7;
    --border:    rgba(0,0,0,.10);
    --border2:   rgba(0,0,0,.18);
    --t1:        #1c1c1e;
    --t2:        #3a3a3c;
    --t3:        #6e6e73;
    --t4:        #aeaeb2;
    --r16:       16px;
    --r12:       12px;
    --r8:        8px;
    --sh:        0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --sh2:       0 6px 24px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'mirabl', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    min-height: 100vh;
    color: var(--t1);
    background: var(--bg-grad);
    overflow-x: hidden;
}
body.auth-split {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    padding: 0;
    background: var(--white);
}

/* ============================================================
   ANIMATED BACKGROUND (ORBS) — kept for onboarding/centered pages
   ============================================================ */
.fluid-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; overflow: hidden; pointer-events: none;
    background: var(--bg-grad);
}
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px); pointer-events: none; will-change: transform;
}
.orb-1 { width: 500px; height: 500px; background: rgba(90,201,247,.45); top: 50%; left: 50%; margin: -250px; }
.orb-2 { width: 450px; height: 450px; background: rgba(251,176,32,.40); top: 50%; left: 50%; margin: -225px; animation-delay: -7s; }
.orb-3 { width: 480px; height: 480px; background: rgba(215,157,255,.35); top: 50%; left: 50%; margin: -240px; animation-delay: -14s; }
.orb-4 { width: 420px; height: 420px; background: rgba(254,52,102,.30); top: 50%; left: 50%; margin: -210px; animation-delay: -5s; }

/* ============================================================
   SPLIT SCREEN — AUTH LAYOUT
   ============================================================ */
.auth-left {
    width: 440px;
    flex-shrink: 0;
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 36px 44px 36px;
    position: relative;
    z-index: 1;
}
.auth-right {
    flex: 1;
    background: var(--bg-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 64px;
    position: relative;
    overflow: hidden;
}
.auth-right::before {
    content: '';
    position: absolute;
    width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(83,58,254,.07) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Logo in left panel */
.auth-logo {
    display: flex;
    align-items: center;
    margin-bottom: 38px;
}
.auth-logo img { height: 38px; width: auto; display: block; }
.auth-logo a { display: flex; align-items: center; text-decoration: none; }

/* Segmented control */
.seg-ctrl {
    display: flex;
    background: var(--gray2);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 28px;
}
.seg-ctrl a, .seg-ctrl button {
    flex: 1; padding: 9px; text-align: center;
    font-family: 'mirabl', sans-serif; font-size: 13.5px; font-weight: 500;
    color: var(--t3); border: none; background: none; border-radius: 8px;
    cursor: pointer; transition: all .18s cubic-bezier(.2,.8,.2,1);
    text-decoration: none; display: block;
}
.seg-ctrl a.on, .seg-ctrl button.on, .seg-ctrl a.active, .seg-ctrl button.active {
    background: var(--white); color: var(--t1);
    box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 .5px 1px rgba(0,0,0,.06);
}
/* Keep legacy login-tabs working */
.login-tabs { display: flex; background: var(--gray2); border-radius: 10px; padding: 3px; margin-bottom: 28px; }
.login-tab {
    flex: 1; padding: 9px; text-align: center;
    font-size: 13.5px; font-weight: 500; color: var(--t3);
    text-decoration: none; border-radius: 8px; transition: all .18s;
}
.login-tab:hover { color: var(--t1); }
.login-tab.active { background: var(--white); color: var(--t1); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ============================================================
   PLAN BADGE (signup)
   ============================================================ */
.plan-badge {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 14px 16px; border-radius: 14px;
    background: var(--accent-l); color: var(--accent);
    border: 1px solid var(--accent-b);
    width: 100%; margin-bottom: 22px;
    position: relative; overflow: hidden; gap: 3px;
}
.plan-badge::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: badgeShine 3s ease-in-out infinite;
}
@keyframes badgeShine { 0%,100%{left:-100%} 50%{left:150%} }
.plan-badge .trial_t1 { font-size: 17px; font-weight: 700; display: block; }
.plan-badge .trial_t2 { font-size: 14px; font-weight: 400; opacity: .8; display: block; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--t2); margin-bottom: 7px; letter-spacing: -.1px;
}
.form-input {
    display: block; width: 100%;
    padding: 13px 15px;
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: var(--r12);
    font-family: 'mirabl', sans-serif; font-size: 15px; font-weight: 400;
    color: var(--t1); outline: none;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
}
.form-input::placeholder { color: var(--t4); }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); }
.form-input.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; letter-spacing: .3px; }
.form-hint { font-size: 12px; color: var(--t3); margin-top: 5px; }

.password-wrapper { position: relative; }
.password-wrapper .form-input { padding-right: 48px; }
.password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--t4); cursor: pointer; padding: 4px;
    transition: color .15s;
}
.password-toggle:hover { color: var(--t1); }

.form-row { display: flex; gap: 12px; }
.form-half { flex: 1; min-width: 0; }

/* ============================================================
   CTA BUTTON
   ============================================================ */
.btn-primary,
.login-btn {
    display: block; width: 100%;
    padding: 15px 16px;
    background: var(--accent); color: var(--white);
    font-family: 'mirabl', sans-serif; font-size: 15.5px; font-weight: 700;
    letter-spacing: -.2px; border: none; border-radius: var(--r16);
    cursor: pointer; transition: all .2s cubic-bezier(.2,.8,.2,1);
    text-align: center; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px;
}
.btn-primary:hover, .login-btn:hover {
    background: var(--accent-h);
    box-shadow: 0 8px 28px rgba(83,58,254,.30);
    transform: translateY(-1px);
}
.btn-primary:active, .login-btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary:disabled, .login-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary.loading .btn-text,
.login-btn.loading .btn-text { display: none; }
.btn-primary.loading .spinner,
.login-btn.loading .spinner { display: block; }

/* CTA with 2-line label (signup) */
.btn-primary.has-sub { flex-direction: column; gap: 2px; padding: 13px 16px; }
.btn-primary .cta-main { font-size: 15.5px; font-weight: 700; }
.btn-primary .cta-sub { font-size: 12px; font-weight: 400; opacity: .82; }

/* Secondary / outline button */
.btn-back {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 20px;
    background: var(--white); border: 1.5px solid var(--border2);
    border-radius: var(--r8); color: var(--t2);
    font-family: 'mirabl', sans-serif; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all .18s; text-decoration: none;
}
.btn-back:hover { background: var(--gray1); }
.btn-back-link {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%; font-size: 13px; color: var(--t3);
    text-decoration: none; margin-top: 14px; transition: color .2s;
}
.btn-back-link:hover { color: var(--accent); }

/* External platform buttons */
.btn-external {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; text-decoration: none;
}
.btn-external.btn-woo    { background: #7f54b4; }
.btn-external.btn-shopify{ background: #7aa841; }
.btn-external.btn-presta { background: #000; }
.btn-external.clicked    { opacity: .55; }

/* Celebration CTA */
.btn-celebrate { background: var(--accent); margin-top: 20px; text-decoration: none !important; }
.btn-celebrate:hover { box-shadow: 0 8px 28px rgba(83,58,254,.32); }

/* ============================================================
   TRUST BADGES
   ============================================================ */
.trust {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    margin: 14px 0 18px;
}
.trust-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 14px; color: var(--t2); font-weight: 400;
}
.trust-check {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--green-l);
    display: grid; place-items: center; flex-shrink: 0;
}
.trust-check::after {
    content: ''; width: 8px; height: 5.5px;
    border-left: 1.5px solid var(--green);
    border-bottom: 1.5px solid var(--green);
    transform: rotate(-45deg) translateY(-.5px);
    display: block;
}
.trust-sep { color: var(--border2); font-size: 14px; }

/* ============================================================
   DIVIDER & GOOGLE
   ============================================================ */
.divider { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: 12px; color: var(--t4); font-weight: 500; }

.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 13px;
    background: var(--white); border: 1.5px solid var(--border2);
    border-radius: var(--r12);
    font-family: 'mirabl', sans-serif; font-size: 14.5px; font-weight: 500;
    color: var(--t2); cursor: pointer; transition: all .18s;
}
.google-btn:hover { background: var(--gray1); border-color: rgba(0,0,0,.24); }
.google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   ALERTS
   ============================================================ */
.login-error, .alert-error {
    background: rgba(227,0,0,.08); border: 1px solid rgba(227,0,0,.2);
    color: #c00; padding: 12px 16px; border-radius: var(--r12);
    margin-bottom: 18px; font-size: 14px; text-align: center;
}
.login-success, .alert-success {
    background: var(--green-l); border: 1px solid rgba(52,199,89,.3);
    color: #248a3d; padding: 12px 16px; border-radius: var(--r12);
    margin-bottom: 18px; font-size: 14px; text-align: center;
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
    display: none; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: spin .6s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   MISC LINKS
   ============================================================ */
.login-link, .login-info a {
    display: block; text-align: center; margin-top: 18px;
    color: var(--accent); text-decoration: none; font-size: 14px;
}
.login-link:hover { text-decoration: underline; }
.login-info {
    text-align: center; margin-bottom: 22px;
    color: var(--t3); font-size: 14px; line-height: 1.5;
}
.legal-text {
    font-size: 11px; color: var(--t4); text-align: center;
    margin-top: 14px; line-height: 1.5;
}
.legal-text a { color: var(--t3); text-decoration: underline; }

/* ============================================================
   RIGHT PANEL — BENEFITS
   ============================================================ */
.b-panel { position: relative; z-index: 1; max-width: 500px; width: 100%; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(83,58,254,.10); border: 1px solid var(--accent-b);
    border-radius: 100px; padding: 5px 12px;
    font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 18px;
}
.pdot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: pd 2s ease infinite;
}
@keyframes pd { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }

.hero-title {
    font-size: 32px; font-weight: 700; letter-spacing: -.8px; line-height: 1.17;
    margin-bottom: 14px; color: var(--t1);
}
.tw-text { color: var(--accent); border-right: 2.5px solid var(--accent); padding-right: 2px; white-space: nowrap; }

.b-desc {
    font-size: 17px; color: var(--t3); line-height: 1.65;
    margin-bottom: 24px; font-weight: 400;
}

.b-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 22px; }
.b-row {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    background: rgba(255,255,255,.75); backdrop-filter: blur(12px);
    border-radius: var(--r12); box-shadow: var(--sh);
    animation: bIn .4s cubic-bezier(.2,.8,.2,1) both;
    transition: box-shadow .18s;
}
.b-row:hover { box-shadow: var(--sh2); }
.b-row:nth-child(1){animation-delay:.05s}
.b-row:nth-child(2){animation-delay:.11s}
.b-row:nth-child(3){animation-delay:.17s}
.b-row:nth-child(4){animation-delay:.23s}
@keyframes bIn { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }
.b-ico {
    width: 34px; height: 34px; background: var(--accent-l); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.b-txt h4 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--t1); margin-bottom: 1px; }
.b-txt p  { font-size: 13px; color: var(--t3); font-weight: 400; line-height: 1.4; }

.b-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.b-stat {
    background: rgba(255,255,255,.75); backdrop-filter: blur(12px);
    border-radius: var(--r12); padding: 13px 10px; text-align: center; box-shadow: var(--sh);
}
.b-stat-n { font-size: 22px; font-weight: 700; letter-spacing: -.8px; color: var(--accent); }
.b-stat-l { font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.35; font-weight: 400; }

/* ============================================================
   CENTERED CARD (onboarding / signup steps 2-3)
   ============================================================ */
body.auth-centered {
    display: flex; align-items: center; justify-content: center;
    padding: 30px 20px; min-height: 100vh;
}
.login-card, .card {
    position: relative; z-index: 1; width: 100%; max-width: 460px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border); border-radius: 28px;
    padding: 44px 42px 40px;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    animation: cardIn .5s ease;
}
.card { max-width: 520px; }
@keyframes cardIn { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Titles inside centered card */
.card-title, .login-title {
    text-align: center; font-size: 24px; font-weight: 500;
    color: var(--accent); margin-bottom: 22px;
    letter-spacing: -.2px;
}
.card-subtitle, .subtitle {
    text-align: center; font-size: 15px;
    color: var(--t2); margin-bottom: 14px; line-height: 1.5;
}

/* ============================================================
   LANGUAGE SELECTOR
   ============================================================ */
.lang-selector { position: fixed; top: 20px; right: 20px; z-index: 200; }
.lang-trigger {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--r12);
    background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
    border: 1px solid var(--border); cursor: pointer;
    font-size: 13.5px; font-family: inherit; color: var(--t1);
    transition: all .2s;
}
.lang-trigger:hover { border-color: var(--accent-b); background: var(--white); }
.lang-trigger svg { width: 16px; height: 16px; color: var(--t3); }
.lang-trigger .arrow { width: 12px; height: 12px; transition: transform .2s; }
.lang-selector.open .lang-trigger .arrow { transform: rotate(180deg); }
.lang-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; width: 180px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(20px);
    border: 1px solid var(--border); border-radius: var(--r16);
    box-shadow: var(--sh2); padding: 8px 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all .2s;
}
.lang-selector.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-item {
    display: flex; align-items: center;
    padding: 9px 16px; margin: 2px 8px; border-radius: 8px;
    cursor: pointer; font-size: 14px; color: var(--t1); transition: all .15s;
}
.lang-item:hover { background: var(--accent-l); }
.lang-item.active { background: var(--accent-l); color: var(--accent); font-weight: 500; }
.lang-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
.lang-item:not(.active) { padding-left: 32px; }

/* ============================================================
   SITE LOGO (fixed top-left for centered pages)
   ============================================================ */
.site-logo { position: fixed; top: 22px; left: 28px; z-index: 200; text-decoration: none; transition: opacity .2s; }
.site-logo img { height: 38px; width: auto; display: block; }
.site-logo:hover { opacity: .7; }

/* ============================================================
   URL FIELD
   ============================================================ */
.url-wrap {
    display: flex; background: var(--white);
    border: 1.5px solid var(--border2); border-radius: var(--r12);
    overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.url-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); }
.url-prefix { padding: 13px 12px 13px 15px; background: var(--gray2); border-right: 1px solid var(--border); font-size: 14px; color: var(--t3); white-space: nowrap; display: flex; align-items: center; }
.url-wrap .form-input { border: none; border-radius: 0; padding-left: 10px; box-shadow: none !important; background: transparent; }

/* ============================================================
   PLATFORM CARDS (signup step 3)
   ============================================================ */
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.platform-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 12px;
    background: var(--white); border: 2px solid var(--border);
    border-radius: var(--r16); cursor: pointer;
    transition: all .18s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--sh); position: relative;
}
.platform-card input { display: none; }
.platform-card:hover { border-color: var(--border2); box-shadow: var(--sh2); transform: translateY(-1px); }
.platform-card.selected { border-color: var(--accent); background: var(--accent-l); }
.platform-card.selected::after {
    content: '✓'; position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); color: var(--white);
    font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.platform-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.platform-icon img { width: 40px; height: 40px; object-fit: contain; }
.platform-label { font-size: 13.5px; font-weight: 700; color: var(--t1); text-align: center; }
.platform-card.selected .platform-label { color: var(--accent); }

/* ============================================================
   OB-DOTS (multi-step progress pills)
   ============================================================ */
.ob-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.1); transition: all .3s; }
.ob-dot.done { background: var(--accent); }
.ob-dot.active { background: var(--accent); transform: scale(1.35); box-shadow: 0 0 0 3px var(--accent-l); }

/* ============================================================
   ONBOARDING CARD STYLES
   ============================================================ */
.ob-favicon-pair { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 20px; }
.ob-favicon-box {
    width: 60px; height: 60px; background: var(--white);
    border-radius: 14px; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sh);
}
.ob-favicon-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ob-favicon-link { flex-shrink: 0; animation: linkPulse 2s ease-in-out infinite; }
@keyframes linkPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.9)} }

.ob-create-instructions {
    text-align: left; margin: 18px 0 22px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--white); padding: 16px; border-radius: var(--r12);
    border: 1px solid var(--border);
}
.ob-create-step {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; color: var(--t2); line-height: 1.55;
}
.ob-create-step strong { color: var(--t1); }

.ob-guide-num {
    flex-shrink: 0; width: 22px; height: 22px;
    background: var(--accent); color: var(--white);
    border-radius: 50%; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}

.ob-actions-row {
    display: flex; gap: 10px; margin-top: 18px; align-items: stretch;
}
.ob-help-btn {
    flex: 1; margin: 0;
    border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
    border-radius: var(--r12); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 16px; cursor: pointer; transition: background .2s; text-decoration: none;
}
.ob-help-btn:hover { background: var(--accent-l); }
.ob-btn-continue { flex: 1; margin: 0; text-decoration: none !important; transition: opacity .3s; }

.ob-welcome-back {
    display: flex; align-items: center; gap: 8px;
    background: var(--green-l); border: 1px solid rgba(52,199,89,.25);
    border-radius: 10px; padding: 10px 16px;
    font-size: 14px; font-weight: 500; color: #248a3d; margin-bottom: 14px;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   CELEBRATION PAGE
   ============================================================ */
#confettiCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.card-celebrate { text-align: center; animation: celebrateIn .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes celebrateIn { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.celebrate-emoji {
    font-size: 48px; margin-bottom: 8px;
    animation: emojiBounce .6s cubic-bezier(.36,.07,.19,.97) .3s both;
}
@keyframes emojiBounce {
    0%{transform:scale(0) rotate(-20deg);opacity:0}
    50%{transform:scale(1.25) rotate(5deg);opacity:1}
    100%{transform:scale(1) rotate(0);opacity:1}
}
.celebrate-title { color: var(--accent) !important; font-size: 26px; }
.celebrate-subtitle { font-size: 16px; }

.ob-preview { margin: 18px 0; padding: 16px; background: rgba(0,0,0,.02); border: 1px solid var(--border); border-radius: var(--r16); }
.ob-preview-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.ob-preview-label { font-size: 11px; color: var(--t3); margin-bottom: 6px; font-weight: 500; }
.ob-preview-bar { height: 6px; background: rgba(0,0,0,.05); border-radius: 100px; overflow: hidden; }
.ob-preview-fill { height: 100%; background: linear-gradient(90deg,var(--green),#30d158); border-radius: 100px; animation: previewGrow 1.2s ease-out .5s both; }
@keyframes previewGrow { from{width:0 !important} }

.ob-benefits { text-align: left; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.ob-benefit {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--t1);
    opacity: 0; animation: benefitSlide .4s ease forwards;
}
.ob-benefit:nth-child(1){animation-delay:.6s}
.ob-benefit:nth-child(2){animation-delay:.8s}
.ob-benefit:nth-child(3){animation-delay:1.0s}
.ob-benefit:nth-child(4){animation-delay:1.2s}
@keyframes benefitSlide { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }

/* ============================================================
   VERIFY EMAIL — CODE INPUTS
   ============================================================ */
.code-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
.code-input {
    width: 48px; height: 56px; text-align: center;
    font-size: 24px; font-weight: 700;
    border: 2px solid var(--border2); border-radius: var(--r12);
    background: rgba(255,255,255,.7); outline: none;
    transition: all .2s; color: var(--t1); font-family: inherit;
}
.code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); background: var(--white); }
.code-input.filled { border-color: var(--accent); background: var(--accent-l); }
.code-input.error { border-color: #c00; box-shadow: 0 0 0 3px rgba(227,0,0,.1); }

.resend { text-align: center; margin-top: 18px; }
.resend-text { font-size: 14px; color: var(--t3); }
.resend-btn {
    background: none; border: none; color: var(--accent);
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit; padding: 0;
}
.resend-btn:hover { text-decoration: underline; }
.resend-btn:disabled { color: var(--t4); cursor: not-allowed; }

.back-link { display: block; text-align: center; margin-top: 16px; color: var(--t3); text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--t1); }

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
.toast-notification {
    position: fixed; top: 24px; right: 24px; z-index: 300;
    display: flex; align-items: flex-start; gap: 12px;
    max-width: 380px; padding: 16px 20px;
    background: rgba(255,255,255,.72); backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255,255,255,.5); border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
    overflow: hidden;
    animation: toastIn .5s cubic-bezier(.16,1,.3,1) forwards;
    transform: translateX(120%);
}
.toast-notification.dismissing { animation: toastOut .35s cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes toastIn  { from{transform:translateX(120%) scale(.9);opacity:0} to{transform:translateX(0) scale(1);opacity:1} }
@keyframes toastOut { from{transform:translateX(0) scale(1);opacity:1}     to{transform:translateX(120%) scale(.9);opacity:0} }
.toast-icon { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--accent-l); color:var(--accent); }
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.toast-message { font-size: 12px; color: var(--t3); line-height: 1.4; }
.toast-close { flex-shrink:0; background:none; border:none; color:var(--t4); cursor:pointer; padding:2px; border-radius:6px; transition: all .15s; }
.toast-close:hover { color: var(--t1); background: rgba(0,0,0,.05); }
.toast-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(83,58,254,.4); animation: toastTimer 8s linear forwards; transform-origin: left; }
@keyframes toastTimer { from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ============================================================
   POWERED BY
   ============================================================ */
.powered-by {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: var(--t4); z-index: 10; white-space: nowrap;
}
.powered-by a { color: var(--accent); text-decoration: none; }
@media (max-height:600px) { .powered-by { z-index: 0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .auth-right { display: none; }
    .auth-left { width: 100%; max-width: 480px; margin: auto; padding: 36px 32px; }
    body.auth-split { display: flex; align-items: center; justify-content: center; background: var(--bg-grad); }
}
@media (max-width: 520px) {
    .auth-left { padding: 32px 24px; }
    .login-card, .card { padding: 36px 28px 32px; border-radius: 24px; }
    .lang-selector { top: 12px; right: 12px; }
    .form-row { flex-direction: column; gap: 0; }
    .platform-grid { grid-template-columns: 1fr 1fr; }
    .code-inputs { gap: 6px; }
    .code-input { width: 42px; height: 50px; font-size: 20px; }
}
@media (max-height: 700px) {
    body.auth-centered { align-items: flex-start; padding-top: 80px; padding-bottom: 40px; }
}
@media (max-width: 520px) {
    .site-logo { top: 14px; left: 16px; }
    .site-logo img { height: 30px; }
}