/* =============================================================
   VA Books 365 — Auth Pages Shared Stylesheet
   ============================================================= */

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

/* ── 2. Variables ── */
:root {
    --amber:       #f59e0b;
    --amber-l:     #fbbf24;
    --amber-b:     #fcd34d;
    --amber-dim:   rgba(245,158,11,0.13);
    --amber-bdr:   rgba(245,158,11,0.24);
    --blue:        #2563eb;
    --blue-h:      #1d4ed8;
    --green:       #10b981;
    --green-dim:   rgba(16,185,129,0.12);
    --ink:         #070b14;
    --slate:       #475569;
    --mist:        #94a3b8;
    --fog:         #cbd5e1;
    --white:       #ffffff;
    --r:           10px;
    --r-lg:        16px;
    --input-focus: 0 0 0 3.5px rgba(245,158,11,0.18);
    --ease:        cubic-bezier(0.4,0,0.2,1);
}

/* ── 3. Base ── */
html, body {
    width: 100%; min-height: 100%;
    font-family: 'Sora', sans-serif;
    background: var(--ink);
    color: #fff;
}

/* ── 4. Background ── */
.bg {
    position: fixed; inset: 0; z-index: 0;
    background: linear-gradient(145deg, #070b14 0%, #0d1525 55%, #080e1a 100%);
}
.bg::before {
    content: ''; position: absolute; inset: -5%;
    background-image:
        linear-gradient(rgba(245,158,11,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,158,11,.04) 1px, transparent 1px);
    background-size: 54px 54px;
    animation: grid 22s linear infinite;
}
.orb { position: absolute; border-radius: 50%; filter: blur(88px); animation: float 9s ease-in-out infinite; }
.o1  { width:58vw;height:58vw;top:-18%;left:-12%;  background:radial-gradient(circle,#1e3a5f,transparent 64%);opacity:.35; }
.o2  { width:40vw;height:40vw;bottom:-12%;right:-8%;background:radial-gradient(circle,#f59e0b,transparent 64%);opacity:.08;animation-delay:-5s;animation-duration:12s; }
.o3  { width:24vw;height:24vw;top:35%;left:52%;    background:radial-gradient(circle,#2563eb,transparent 64%);opacity:.1;animation-delay:-2.5s;animation-duration:14s; }

/* ── 5. Animations ── */
@keyframes grid  { to { transform: translate(54px,54px); } }
@keyframes float { 0%,100%{transform:scale(1)translateY(0);}50%{transform:scale(1.06)translateY(-16px);} }
@keyframes rise  { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.3); }
    50%      { box-shadow: 0 0 0 14px rgba(245,158,11,0); }
}
@keyframes glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.3); }
    50%      { box-shadow: 0 0 0 16px rgba(16,185,129,0); }
}
@keyframes blink  { 0%,100%{opacity:1;} 50%{opacity:.3;} }
@keyframes fadeIn { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);} }

/* ── 6. Page layout ── */
.page {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px;
}
/* doc pages need top padding too */
.page--doc { align-items: flex-start; padding: 40px 16px 60px; }

/* ── 7. Card ── */
.card {
    width: 100%; max-width: 480px;
    background: rgba(13,21,37,.65);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 40px 44px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px rgba(245,158,11,.06), 0 24px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    animation: rise .55s cubic-bezier(.22,1,.36,1) both;
}
.card::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg,transparent,var(--amber),var(--amber-l),transparent);
    border-radius: 3px 3px 0 0;
    margin: -40px -44px 32px;
    opacity: .6;
}
/* Size modifiers */
.card--sm     { max-width: 440px; }
.card--md     { max-width: 500px; }
.card--lg     { max-width: 580px; padding: 40px 48px; }
.card--lg::before { margin: -40px -48px 32px; }
.card--xl     { max-width: 620px; padding: 40px 48px; }
.card--xl::before { margin: -40px -48px 32px; }
.card--status { max-width: 500px; padding: 44px 48px; }
.card--status::before { margin: -44px -48px 36px; }
/* Top accent colour variants */
.card--green-top::before { background: linear-gradient(90deg,transparent,#10b981,#34d399,transparent); opacity: .7; }
.card--blue-top::before  { background: linear-gradient(90deg,transparent,#2563eb,#60a5fa,transparent); opacity: .7; }
/* Alignment */
.card--center { text-align: center; }

/* ── 8. Logo / Brand ── */
.c-logo { display:flex;align-items:center;gap:12px;margin-bottom:20px; }
.c-logo--center { justify-content:center;margin-bottom:28px; }
.c-brand .t { font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.15; }
.c-brand .t span { color:var(--amber-l); }
.c-brand .b { font-size:.6rem;color:var(--mist);letter-spacing:.11em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace; }

/* ── 9. Typography ── */
.eyebrow { font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-l);margin-bottom:6px;font-family:'IBM Plex Mono',monospace; }
.c-title  { font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.025em;margin-bottom:8px; }
.c-sub    { font-size:.84rem;color:var(--mist);font-weight:300;line-height:1.7; }
.divider  { height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:20px 0; }

/* ── 10. Form layout ── */
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-grid .span-2 { grid-column:span 2; }

/* ── 11. Form fields ── */
.fg { margin-bottom: 0; }
.fl { display:block;margin-bottom:6px;font-size:.74rem;font-weight:600;color:var(--fog);letter-spacing:.04em; }

.is { position:relative;display:flex;align-items:center; }
.ii { position:absolute;left:14px;display:flex;align-items:center;pointer-events:none; }
.ii svg { width:15px;height:15px;color:var(--slate);transition:color .2s var(--ease); }
.is:focus-within .ii svg { color:var(--amber-l); }

.fi {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: var(--r);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: .85rem;
    outline: none;
    transition: all .22s var(--ease);
}
.fi::placeholder { color: var(--slate); }
.fi:focus { border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.06);box-shadow:var(--input-focus); }
.fi-no-icon { padding-left: 14px; }
select.fi { appearance: none; cursor: pointer; }

/* ── 12. Buttons ── */
.btn-sub {
    width:100%; padding:13px;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;border:none;border-radius:var(--r);
    font-family:'Sora',sans-serif;
    font-size:.88rem;font-weight:600;letter-spacing:.025em;
    cursor:pointer;position:relative;overflow:hidden;
    transition:transform .2s var(--ease),box-shadow .2s var(--ease);
    box-shadow: 0 4px 18px rgba(37,99,235,.35);
}
.btn-sub::before {
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.13),transparent);
    opacity:0;transition:opacity .2s;
}
.btn-sub:hover { transform:translateY(-1px);box-shadow:0 8px 26px rgba(37,99,235,.5); }
.btn-sub:hover::before { opacity:1; }
.btn-sub:active { transform:translateY(0); }
.bi { display:flex;align-items:center;justify-content:center;gap:8px; }
.bi svg { width:15px;height:15px; }

.pw-btn {
    position:absolute;right:13px;
    background:none;border:none;cursor:pointer;padding:4px;
    color:rgba(255,255,255,.7);
    display:flex;align-items:center;
    transition:color .2s;
}
.pw-btn:hover { color:#fff; }
.pw-btn svg { width:15px;height:15px; }

.back-link { display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;font-size:.8rem;color:var(--mist);text-decoration:none;transition:color .2s; }
.back-link:hover { color:var(--amber-l); }
.back-link svg { width:13px;height:13px; }

.btn-resend {
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:13px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;border:none;border-radius:var(--r);
    font-family:'Sora',sans-serif;
    font-size:.88rem;font-weight:600;letter-spacing:.025em;
    cursor:pointer;text-decoration:none;
    transition:transform .2s,box-shadow .2s;
    box-shadow:0 4px 18px rgba(37,99,235,.35);
}
.btn-resend:hover { transform:translateY(-1px);box-shadow:0 8px 26px rgba(37,99,235,.5);color:#fff;text-decoration:none; }
.btn-resend:active { transform:translateY(0); }
.btn-resend svg { width:15px;height:15px; }
.btn-resend:disabled,.btn-resend.sending { opacity:.65;cursor:not-allowed;transform:none !important;box-shadow:0 4px 18px rgba(37,99,235,.2) !important; }

.btn-logout {
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:14px;padding:11px;width:100%;
    background:rgba(255,255,255,.05);
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:var(--r);
    color:var(--mist);font-family:'Sora',sans-serif;
    font-size:.84rem;font-weight:500;
    cursor:pointer;text-decoration:none;
    transition:background .2s,border-color .2s,color .2s;
}
.btn-logout:hover { background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.3);color:#fca5a5;text-decoration:none; }
.btn-logout svg { width:14px;height:14px; }

.btn-login {
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:13px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;border:none;border-radius:var(--r);
    font-family:'Sora',sans-serif;
    font-size:.88rem;font-weight:600;letter-spacing:.025em;
    cursor:pointer;text-decoration:none;
    transition:transform .2s,box-shadow .2s;
    box-shadow:0 4px 18px rgba(37,99,235,.35);
}
.btn-login:hover { transform:translateY(-1px);box-shadow:0 8px 26px rgba(37,99,235,.5);color:#fff;text-decoration:none; }
.btn-login svg { width:15px;height:15px; }

/* ── 13. Alerts & helpers ── */
.err {
    padding:8px 12px;margin-top:5px;
    background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.28);
    border-radius:6px;color:#fca5a5;font-size:.75rem;
    display:flex;align-items:center;gap:7px;
}
.err svg { width:13px;height:13px;flex-shrink:0; }

.status-msg {
    padding:10px 14px;margin-bottom:16px;
    background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.3);
    border-radius:var(--r);color:#93c5fd;
    font-size:.8rem;line-height:1.5;text-align:left;
}

.sn {
    display:flex;align-items:center;justify-content:center;gap:5px;
    margin-top:20px;font-size:.63rem;color:var(--slate);
    font-family:'IBM Plex Mono',monospace;
}
.sn svg { width:10px;height:10px; }

.rr { text-align:center;margin-top:16px;font-size:.8rem;color:var(--mist); }
.rr a { color:var(--amber-l);text-decoration:none;font-weight:600; }
.rr a:hover { color:var(--amber-b); }

.icon-wrap {
    width:52px;height:52px;border-radius:14px;
    background:var(--amber-dim);border:1px solid rgba(245,158,11,.24);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
}
.icon-wrap svg { width:22px;height:22px;color:var(--amber-l); }

/* ── 14. Select2 dark theme ── */
.select2-container { width:100% !important; }
.select2-container--default .select2-selection--single {
    background:rgba(255,255,255,.05) !important;
    border:1.5px solid rgba(255,255,255,.1) !important;
    border-radius:var(--r) !important;
    height:44px !important;
    display:flex !important; align-items:center !important;
    transition:all .22s var(--ease) !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color:rgba(245,158,11,.5) !important;
    background:rgba(245,158,11,.06) !important;
    box-shadow:var(--input-focus) !important;
    outline:none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:#fff !important; font-family:'Sora',sans-serif !important;
    font-size:.85rem !important; padding-left:42px !important;
    padding-right:32px !important; line-height:44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color:var(--slate) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:44px !important; right:10px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color:var(--mist) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color:transparent transparent var(--amber-l) transparent !important;
}
.select2-dropdown {
    background:#111827 !important;
    border:1px solid rgba(245,158,11,.2) !important;
    border-radius:10px !important;
    box-shadow:0 12px 40px rgba(0,0,0,.6) !important;
    overflow:hidden !important;
    font-family:'Sora',sans-serif !important;
}
.select2-container--default .select2-search--dropdown {
    padding:8px 10px !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    background:transparent !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.1) !important;
    border-radius:6px !important; color:#fff !important;
    font-family:'Sora',sans-serif !important; font-size:.8rem !important;
    padding:7px 10px !important; outline:none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color:rgba(245,158,11,.4) !important; }
.select2-results__options { max-height:240px !important; overflow-y:auto !important; }
.select2-results__options::-webkit-scrollbar { width:4px; }
.select2-results__options::-webkit-scrollbar-track { background:transparent; }
.select2-results__options::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15);border-radius:4px; }
.select2-container--default .select2-results__option {
    padding:9px 14px !important; font-size:.83rem !important;
    color:var(--fog) !important; background:transparent !important;
    transition:background .1s !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:rgba(245,158,11,.12) !important; color:#fff !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background:rgba(245,158,11,.18) !important; color:var(--amber-l) !important; font-weight:600 !important; }
/* Icon overlay helpers */
.s2-country-icon { position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1; }
.s2-country-icon svg { width:15px;height:15px;color:var(--slate); }
.select2-container--default.select2-container--open ~ .s2-country-icon svg,
.select2-container--default.select2-container--focus ~ .s2-country-icon svg { color:var(--amber-l); }
.country-wrap { position:relative; }
.s2-icon { position:absolute;left:14px;z-index:2;display:flex;align-items:center;pointer-events:none; }
.s2-icon svg { width:15px;height:15px;color:var(--slate); }

/* ── 15. Phone prefix dropdown ── */
.phone-wrap { display:flex;gap:0; }
.phone-prefix { position:relative;flex-shrink:0; }
.prefix-btn {
    display:flex;align-items:center;gap:6px;
    height:100%;padding:0 10px 0 12px;
    background:rgba(255,255,255,.07);
    border:1.5px solid rgba(255,255,255,.1);
    border-right:none;
    border-radius:var(--r) 0 0 var(--r);
    color:#fff;font-family:'Sora',sans-serif;
    font-size:.84rem;font-weight:600;
    cursor:pointer;white-space:nowrap;
    transition:background .18s,border-color .18s;
    min-width:86px;
}
.prefix-btn:hover { background:rgba(255,255,255,.12); }
.prefix-btn .flag { font-size:1.1rem;line-height:1; }
.prefix-btn .code { font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--amber-l); }
.prefix-btn .arr  { margin-left:2px;opacity:.5;font-size:.6rem; }
.prefix-dropdown {
    display:none;position:absolute;
    top:calc(100% + 4px);left:0;
    width:260px;max-height:300px;
    background:#111827;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    box-shadow:0 12px 40px rgba(0,0,0,.6);
    z-index:200;overflow:hidden;flex-direction:column;
}
.prefix-dropdown.open { display:flex; }
.prefix-search-wrap { padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0; }
.prefix-search {
    width:100%;padding:7px 10px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;color:#fff;
    font-family:'Sora',sans-serif;font-size:.8rem;outline:none;
}
.prefix-search::placeholder { color:var(--slate); }
.prefix-list { overflow-y:auto;flex:1; }
.prefix-list::-webkit-scrollbar { width:4px; }
.prefix-list::-webkit-scrollbar-track { background:transparent; }
.prefix-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15);border-radius:4px; }
.prefix-item {
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;cursor:pointer;
    transition:background .1s;font-size:.82rem;color:var(--fog);
}
.prefix-item:hover { background:rgba(245,158,11,.1); }
.prefix-item.selected { background:rgba(245,158,11,.12);color:#fff; }
.prefix-item .flag { font-size:1.1rem;line-height:1;flex-shrink:0; }
.prefix-item .name { flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.prefix-item .dial { font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--amber-l);flex-shrink:0; }
.phone-input-wrap { flex:1;position:relative; }
.phone-input-wrap input.fi { border-radius:0 var(--r) var(--r) 0 !important;padding-left:14px !important; }
.phone-wrap:focus-within .prefix-btn { border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.06); }

/* ── 16. Terms checkbox ── */
.terms-row { display:flex;align-items:flex-start;gap:10px;margin:16px 0; }
.terms-row input[type="checkbox"] { display:none; }
.cb {
    flex-shrink:0;margin-top:2px;
    width:17px;height:17px;border-radius:5px;
    border:1.5px solid rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .2s;
}
.terms-row input:checked ~ .cb,
.rl input:checked ~ .cb { background:#2563eb;border-color:#2563eb; }
.ck { display:none;width:9px;height:9px;color:#fff; }
.terms-row input:checked ~ .cb .ck,
.rl input:checked ~ .cb .ck { display:block; }
.terms-text { font-size:.78rem;color:var(--mist);line-height:1.5; }
.terms-text a { color:var(--amber-l);text-decoration:none;font-weight:500; }
.terms-text a:hover { color:var(--amber-b); }

/* ── 17. Progress steps (register-org) ── */
.progress-wrap { display:flex;align-items:center;gap:0;margin-bottom:24px; }
.prog-step { display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--slate);font-family:'IBM Plex Mono',monospace; }
.prog-step .num {
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.65rem;font-weight:700;
}
.prog-step.done .num   { background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.4);color:#34d399; }
.prog-step.active .num { background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.4);color:var(--amber-l); }
.prog-step.active { color:var(--fog); }
.prog-step.done   { color:var(--mist); }
.prog-line { flex:1;height:1px;background:rgba(255,255,255,.1);margin:0 10px; }
.prog-line.done { background:rgba(16,185,129,.3); }

/* Info banner */
.info-banner {
    display:flex;align-items:flex-start;gap:10px;
    padding:12px 16px;margin-bottom:4px;
    background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);
    border-radius:var(--r);
}
.info-banner svg { width:16px;height:16px;color:#60a5fa;flex-shrink:0;margin-top:1px; }
.info-banner p { font-size:.79rem;color:#93c5fd;line-height:1.55;margin:0; }

/* ── 18. VAT toggle ── */
.vat-row {
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px;
    background:rgba(255,255,255,.04);
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:var(--r);
    transition:border-color .22s,background .22s;
}
.vat-row.active { border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.06); }
.vat-label { display:flex;align-items:center;gap:10px; }
.vat-label svg { width:16px;height:16px;color:var(--slate); }
.vat-label-text .vt { font-size:.84rem;font-weight:600;color:var(--fog); }
.vat-label-text .vs { font-size:.72rem;color:var(--mist);margin-top:1px; }
.toggle-switch { position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0; }
.toggle-switch input { opacity:0;width:0;height:0; }
.toggle-slider {
    position:absolute;inset:0;cursor:pointer;
    background:rgba(255,255,255,.1);border-radius:24px;
    border:1.5px solid rgba(255,255,255,.15);
    transition:background .25s,border-color .25s;
}
.toggle-slider::before {
    content:'';position:absolute;
    width:16px;height:16px;border-radius:50%;
    left:3px;top:50%;transform:translateY(-50%);
    background:#fff;opacity:.5;
    transition:transform .25s,opacity .25s,background .25s;
}
.toggle-switch input:checked + .toggle-slider { background:rgba(16,185,129,.3);border-color:rgba(16,185,129,.5); }
.toggle-switch input:checked + .toggle-slider::before { transform:translate(18px,-50%);background:#10b981;opacity:1; }

/* TRN field */
#trn-wrap { display:none;animation:fadeIn .25s ease both; }
#trn-wrap.visible { display:block; }
.trn-counter { float:right;font-size:.7rem;color:var(--slate);font-family:'IBM Plex Mono',monospace;margin-top:4px; }
.trn-counter.exact { color:#10b981; }
.trn-counter.over  { color:#f87171; }

/* ── 19. Email animation (verify-email) ── */
.email-anim {
    width:80px;height:80px;border-radius:50%;
    background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(37,99,235,.15));
    border:1px solid rgba(245,158,11,.2);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 24px;
    animation:pulse 2.5s ease-in-out infinite;
}
.email-anim svg { width:36px;height:36px;color:var(--amber-l); }

.cooldown-wrap { display:none;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:.78rem;color:var(--mist);font-family:'IBM Plex Mono',monospace; }
.cooldown-wrap.visible { display:flex; }
.cooldown-wrap svg { width:13px;height:13px;color:var(--amber-l); }
#countdown { color:var(--amber-l);font-weight:600; }

/* ── 20. Reg-status ── */
.success-ring {
    width:88px;height:88px;border-radius:50%;
    background:var(--green-dim);border:1px solid rgba(16,185,129,.3);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 24px;
    animation:glow 2.5s ease-in-out infinite;
}
.success-ring svg { width:38px;height:38px;color:#10b981; }
.badge-status {
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 14px;border-radius:20px;
    background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);
    font-size:.7rem;font-weight:600;color:var(--amber-l);
    letter-spacing:.08em;text-transform:uppercase;
    font-family:'IBM Plex Mono',monospace;margin-bottom:16px;
}
.badge-status .dot { width:6px;height:6px;border-radius:50%;background:var(--amber-l);animation:blink 1.4s ease-in-out infinite; }
.steps { display:flex;flex-direction:column;gap:12px;margin-bottom:28px;text-align:left; }
.step  { display:flex;align-items:flex-start;gap:12px; }
.step-num {
    flex-shrink:0;
    width:26px;height:26px;border-radius:50%;
    background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.3);
    display:flex;align-items:center;justify-content:center;
    font-size:.68rem;font-weight:700;color:#60a5fa;
    font-family:'IBM Plex Mono',monospace;
}
.step-num.done { background:var(--green-dim);border-color:rgba(16,185,129,.3);color:#34d399; }
.step-text  { font-size:.82rem;color:var(--fog);line-height:1.5;padding-top:4px; }
.step-title { font-weight:600;color:#fff;font-size:.84rem; }

/* ── 21. Document pages (terms / privacy) ── */
.container-doc { max-width:800px;margin:0 auto; }
.doc-header {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:40px;padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.back-btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 16px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    border-radius:var(--r);
    color:var(--mist);font-family:'Sora',sans-serif;
    font-size:.8rem;font-weight:500;text-decoration:none;
    transition:background .2s,border-color .2s,color .2s;
}
.back-btn:hover { background:rgba(255,255,255,.1);color:#fff;text-decoration:none; }
.back-btn svg { width:13px;height:13px; }
.doc-card {
    background:rgba(13,21,37,.65);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;padding:44px 52px;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
    animation:rise .55s cubic-bezier(.22,1,.36,1) both;
}
.doc-card::before {
    content:'';display:block;height:3px;
    background:linear-gradient(90deg,transparent,var(--amber),var(--amber-l),transparent);
    border-radius:3px 3px 0 0;margin:-44px -52px 40px;opacity:.6;
}
.doc-card--blue::before { background:linear-gradient(90deg,transparent,#2563eb,#60a5fa,transparent);opacity:.7; }
.doc-eyebrow { font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-l);margin-bottom:8px;font-family:'IBM Plex Mono',monospace; }
.doc-card--blue .doc-eyebrow { color:#60a5fa; }
.doc-title { font-size:2rem;font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:8px; }
.doc-meta { font-size:.78rem;color:var(--mist);margin-bottom:32px;font-family:'IBM Plex Mono',monospace; }
.doc-meta span { color:var(--amber-l); }
.doc-card--blue .doc-meta span { color:#60a5fa; }
.doc-intro {
    font-size:.9rem;color:var(--fog);line-height:1.8;margin-bottom:36px;
    padding:18px 20px;border-radius:var(--r);
    background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.15);
}
.doc-card--blue .doc-intro { background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2); }
/* doc sections reuse .section / .section-title / .divider */
.section { margin-bottom:36px; }
.section-title {
    font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.015em;
    margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.section-title .num {
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:6px;flex-shrink:0;
    font-size:.7rem;font-weight:700;font-family:'IBM Plex Mono',monospace;
    background:var(--amber-dim);border:1px solid rgba(245,158,11,.25);color:var(--amber-l);
}
.doc-card--blue .section-title .num { background:rgba(37,99,235,.15);border-color:rgba(37,99,235,.3);color:#60a5fa; }
.section p,.section li { font-size:.86rem;color:var(--mist);line-height:1.85; }
.section ul,.section ol { padding-left:20px;margin-top:8px; }
.section li { margin-bottom:6px; }
.section strong { color:var(--fog); }
.doc-card .divider { margin:32px 0; }
.highlight-box { padding:16px 20px;margin-top:12px;border-radius:var(--r);background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.15); }
.doc-card--blue .highlight-box { background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2); }
.highlight-box p { color:var(--fog) !important; }
.contact-box { padding:20px 24px;background:rgba(13,21,37,.8);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);margin-top:12px; }
.contact-box p { color:var(--fog) !important;margin-bottom:4px; }
.contact-box a { color:var(--amber-l);text-decoration:none; }
.contact-box a:hover { text-decoration:underline; }
.doc-card--blue .contact-box a { color:#60a5fa; }
.data-table { width:100%;margin-top:14px;border-collapse:collapse;font-size:.82rem; }
.data-table th { text-align:left;padding:10px 14px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.2);color:#93c5fd;font-weight:600;font-size:.78rem; }
.data-table td { padding:10px 14px;border:1px solid rgba(255,255,255,.06);color:var(--mist); }
.data-table tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.doc-footer { text-align:center;margin-top:40px;font-size:.72rem;color:var(--slate);font-family:'IBM Plex Mono',monospace; }

/* ── 22. Login two-panel layout ── */
.wrap {
    position:relative;z-index:1;
    width:100%;height:100vh;
    display:grid;
    grid-template-columns:1fr clamp(480px,42vw,580px);
}
.left {
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(28px,4vw,64px) clamp(32px,5vw,80px);
    border-right:1px solid rgba(245,158,11,.08);
    overflow:hidden;
}
.logo { display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(24px,3.5vh,48px); }
.logo-text .n { font-size:clamp(.95rem,1.4vw,1.3rem);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1; }
.logo-text .n span { color:var(--amber-l); }
.logo-text .s { font-size:clamp(.55rem,.7vw,.67rem);color:var(--mist);letter-spacing:.12em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;margin-top:3px; }
.hero-title { font-size:clamp(1.7rem,3.4vw,3.3rem);font-weight:700;line-height:1.11;letter-spacing:-.03em;color:#fff;margin-bottom:clamp(12px,1.8vh,20px); }
.hero-title em { font-style:normal;background:linear-gradient(90deg,var(--amber-l),var(--amber-b));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-sub { font-size:clamp(.78rem,1vw,.93rem);color:var(--mist);font-weight:300;line-height:1.72;max-width:420px;margin-bottom:clamp(20px,3vh,44px); }
.stats { display:flex;gap:clamp(22px,3.5vw,44px); }
.stat .n { font-size:clamp(1.1rem,1.9vw,1.7rem);font-weight:700;color:#fff;font-family:'IBM Plex Mono',monospace;letter-spacing:-.03em; }
.stat .n span { color:var(--amber-l); }
.stat .l { font-size:clamp(.6rem,.72vw,.7rem);color:var(--mist);text-transform:uppercase;letter-spacing:.07em;margin-top:2px; }
.features { display:flex;flex-direction:column;gap:clamp(9px,1.4vh,14px);margin-top:clamp(18px,3vh,44px); }
.feat { display:flex;align-items:center;gap:12px; }
.feat-icon { flex-shrink:0;width:clamp(28px,2.8vw,34px);height:clamp(28px,2.8vw,34px);border-radius:7px;background:var(--amber-dim);border:1px solid var(--amber-bdr);display:flex;align-items:center;justify-content:center; }
.feat-icon svg { width:clamp(12px,1.3vw,15px);height:clamp(12px,1.3vw,15px);color:var(--amber-l); }
.feat-text { font-size:clamp(.74rem,.88vw,.86rem);color:var(--fog); }
.right {
    display:flex;align-items:center;justify-content:center;
    padding:clamp(20px,2.5vh,36px) clamp(32px,4vw,60px);
    background:rgba(255,255,255,.012);
    border-left:1px solid rgba(245,158,11,.06);
}
.right .card { max-width:100%; }
/* Remember / forgot row */
.ar { display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(14px,2vh,20px); }
.rl { display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none; }
.rl input { display:none; }
.rt  { font-size:clamp(.7rem,.78vw,.79rem);color:var(--mist); }
.fgt { font-size:clamp(.7rem,.78vw,.79rem);color:var(--amber-l);text-decoration:none;font-weight:500;transition:color .2s; }
.fgt:hover { color:var(--amber-b); }

/* ── 23. Preloader ── */
#ldr { position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:opacity .4s; }
#ldr.gone { opacity:0;pointer-events:none; }
.ring { width:32px;height:32px;border:2.5px solid rgba(245,158,11,.12);border-top-color:var(--amber-l);border-radius:50%;animation:spin .7s linear infinite; }

/* ── 24. Responsive ── */
@media (max-width:1200px) { .wrap { grid-template-columns:1fr clamp(460px,44vw,540px); } }
@media (max-width:960px)  { .wrap { grid-template-columns:1fr clamp(420px,50vw,500px); } }
@media (max-width:780px) {
    .wrap { grid-template-columns:1fr; }
    .left { display:none; }
    .right { background:transparent;border-left:none;padding:20px 24px; }
    .right .card { max-width:520px;margin:0 auto; }
}
@media (max-width:640px) {
    .doc-card { padding:28px 20px;border-radius:14px; }
    .doc-card::before { margin:-28px -20px 28px; }
    .doc-title { font-size:1.5rem; }
    .doc-header { flex-direction:column;align-items:flex-start;gap:16px; }
    .data-table { font-size:.75rem; }
}
@media (max-width:600px) {
    .form-grid { grid-template-columns:1fr; }
    .form-grid .span-2 { grid-column:span 1; }
}
@media (max-width:480px) {
    .card { padding:28px 20px;border-radius:14px; }
    .card::before { margin:-28px -20px 24px; }
    .card--lg,.card--xl { padding:28px 20px; }
    .card--lg::before,.card--xl::before { margin:-28px -20px 24px; }
    .right { padding:16px 14px; }
}
@media (max-height:680px) {
    .logo     { margin-bottom:clamp(12px,2vh,20px); }
    .hero-sub { margin-bottom:clamp(12px,2vh,20px); }
    .features { margin-top:clamp(10px,1.8vh,18px);gap:8px; }
    .divider  { margin:10px 0; }
    .ar       { margin-bottom:11px; }
}