/* ═══ Auth pages: login / register / demo / recovery ═══
   From the "ElitePing Auth" design (claude.ai/design). One stylesheet for the
   four pages so they share a card, tab bar and hero instead of each carrying
   its own copy. Presentation only: every form keeps its own markup contract
   (field names, ids, CSRF, captcha, nvFetch submit) with its page's PHP.

   Dark is the design; light mode follows the site toggle through the same
   variables, since these pages have always honoured it. */
.au-page {
    --au-bg: #0d0f12;
    --au-grid: rgba(255,255,255,.022);
    --au-ink: #fff;
    --au-ink-2: #d1d5db;
    --au-ink-3: #9ca3af;
    --au-ink-4: #6b7280;
    --au-ink-5: #4b5563;
    --au-surface: rgba(255,255,255,.03);
    --au-surface-2: rgba(255,255,255,.05);
    --au-surface-3: rgba(255,255,255,.07);
    --au-line: rgba(255,255,255,.08);
    --au-line-2: rgba(255,255,255,.1);
    --au-accent: #10b981;
    --au-accent-2: #06b6d4;
    --au-link: #34d399;
    --au-grad: linear-gradient(135deg,#10b981,#06b6d4);
    --au-shadow: 0 4px 24px rgba(0,0,0,.3);
    --au-hero: rgba(255,255,255,.015);
    --au-hero-card: rgba(13,15,18,.6);
    color-scheme: dark;
}
html:not(.dark) .au-page {
    --au-bg: #f4f6f8;
    --au-grid: rgba(15,23,42,.035);
    --au-ink: #0f172a;
    --au-ink-2: #334155;
    --au-ink-3: #475569;
    --au-ink-4: #64748b;
    --au-ink-5: #94a3b8;
    --au-surface: #fff;
    --au-surface-2: #f8fafc;
    --au-surface-3: #fff;
    --au-line: rgba(15,23,42,.08);
    --au-line-2: rgba(15,23,42,.14);
    --au-link: #047857;
    --au-shadow: 0 6px 24px rgba(15,23,42,.08);
    --au-hero: rgba(16,185,129,.03);
    --au-hero-card: #fff;
    color-scheme: light;
}

body.au-page {
    margin: 0; min-height: 100vh; color: var(--au-ink); line-height: 1.5;
    background-color: var(--au-bg);
    background-image:
        linear-gradient(var(--au-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--au-grid) 1px, transparent 1px),
        radial-gradient(ellipse 80% 50% at 20% -5%, rgba(16,185,129,.11) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 110%, rgba(6,182,212,.07) 0%, transparent 60%);
    background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
    -webkit-font-smoothing: antialiased;
    font-family: "Dana", Vazirmatn, Tahoma, -apple-system, sans-serif;
}
/* Buttons and inputs do not inherit the font by default. */
.au-page button, .au-page input { font-family: inherit; }
.au-page a { color: var(--au-link); text-decoration: none; transition: color .2s; }
.au-page a:hover { color: #6ee7b7; }
html:not(.dark) .au-page a:hover { color: #065f46; }

.au-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; align-items: stretch; }
/* Form column narrower than the hero: the card is 26rem wide, so more than
   ~30rem of column is just empty margin. The hero gets the rest. */
@media (min-width: 1024px) { .au-wrap { grid-template-columns: minmax(28rem, 42%) minmax(0, 1fr); } }

/* ── Form side ── */
.au-form-side { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.25rem; position: relative; }
.au-inner { width: 100%; max-width: 30rem; margin: 0 auto; }
.au-brand { display: flex; align-items: center; gap: .625rem; width: fit-content; margin: 0 auto 1rem; color: var(--au-ink) !important; }
.au-brand img { height: 2.25rem; width: auto; }
.au-brand span { font-size: 1rem; font-weight: 900; }

.au-tabs { display: flex; gap: .25rem; padding: .25rem; border-radius: .875rem; margin-bottom: .875rem; background: var(--au-surface-2); border: 1px solid var(--au-line); }
.au-tab { flex: 1; padding: .55rem .5rem; border-radius: .625rem; font-size: .8125rem; font-weight: 700; text-align: center; white-space: nowrap;
    color: var(--au-ink-3) !important; transition: background-color .25s, color .25s, box-shadow .25s; }
.au-tab:hover { color: var(--au-ink) !important; }
.au-tab[aria-current="page"] { color: #fff !important; background: var(--au-grad); box-shadow: 0 4px 15px rgba(16,185,129,.3); }

.au-card { border-radius: 1.25rem; padding: 1.5rem; background: var(--au-surface); border: 1px solid var(--au-line); box-shadow: var(--au-shadow);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: au-in .35s cubic-bezier(.23,1,.32,1) both; }
.au-title { font-size: 1.25rem; font-weight: 900; color: var(--au-ink); margin: 0 0 .125rem; line-height: 1.6; }
.au-sub { color: var(--au-ink-3); font-size: .8125rem; margin: 0 0 1rem; line-height: 1.6; }

.au-form { display: flex; flex-direction: column; gap: .625rem; margin: 0; }
.au-form.au-tight { gap: .5rem; }
.au-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 380px) { .au-row2 { grid-template-columns: 1fr; } }
.au-label { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; font-weight: 700; color: var(--au-ink-2); margin-bottom: .25rem; }
.au-label a { font-weight: 600; }
.au-control { position: relative; display: block; }
.au-control > .au-ico { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .875rem; font-size: .75rem; color: var(--au-ink-4); pointer-events: none; }
.au-input { width: 100%; padding: .625rem 1rem; border-radius: .75rem; font: inherit; font-size: .875rem; color: var(--au-ink); outline: none;
    background: var(--au-surface-2); border: 1px solid var(--au-line-2); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.au-input::placeholder { color: var(--au-ink-4); }
.au-input:focus { border-color: rgba(16,185,129,.6); box-shadow: 0 0 0 3px rgba(16,185,129,.12); background: var(--au-surface-3); }
/* Icon and eye sit on the PAGE's start/end sides, but several inputs are
   dir="ltr" (username, phone, password), which flips their own logical
   padding to the other side. So pad physically, keyed on the page. */
html[dir="rtl"] .au-control > .au-ico ~ .au-input { padding-right: 2.5rem; }
html[dir="ltr"] .au-control > .au-ico ~ .au-input { padding-left: 2.5rem; }
.au-input.au-ltr { direction: ltr; text-align: left; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
.au-input.au-code { letter-spacing: .3em; text-align: center; }
.au-eye { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 2.75rem; display: flex; align-items: center; justify-content: center; color: var(--au-ink-4); background: none; border: 0; cursor: pointer; }
.au-eye:hover { color: var(--au-ink-2); }
html[dir="rtl"] .au-control > .au-eye ~ .au-input { padding-left: 2.75rem; }
html[dir="ltr"] .au-control > .au-eye ~ .au-input { padding-right: 2.75rem; }

/* Real server captcha image, not the design's placeholder text. */
.au-captcha { display: flex; align-items: center; gap: .5rem; }
.au-captcha .au-control { flex: 1; min-width: 0; }
.au-captcha img { height: 2.625rem; border-radius: .75rem; flex-shrink: 0; border: 1px solid var(--au-line-2); cursor: pointer; }
.au-icon-btn { width: 2.625rem; height: 2.625rem; flex-shrink: 0; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center;
    color: var(--au-ink-4); background: var(--au-surface-2); border: 1px solid var(--au-line-2); cursor: pointer; transition: color .2s, border-color .2s; }
.au-icon-btn:hover { color: var(--au-ink); border-color: rgba(16,185,129,.4); }

.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .75rem; border: 0; border-radius: .75rem; cursor: pointer;
    font: inherit; font-size: .9375rem; font-weight: 700; color: #fff !important; background: var(--au-grad); box-shadow: 0 4px 15px rgba(16,185,129,.3);
    transition: box-shadow .2s, transform .16s cubic-bezier(.23,1,.32,1); }
.au-btn:hover { box-shadow: 0 6px 25px rgba(16,185,129,.5); transform: translateY(-1px); }
.au-btn:active { transform: scale(.98); }
.au-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.au-btn-discord { background: #5865F2; box-shadow: 0 4px 15px rgba(88,101,242,.3); }
.au-btn-discord:hover { background: #4752c4; box-shadow: 0 6px 22px rgba(88,101,242,.45); }
.au-btn-ghost { background: var(--au-surface-2); color: var(--au-ink-2) !important; border: 1px solid var(--au-line-2); box-shadow: none; font-size: .8125rem; font-weight: 600; padding: .7rem; }
.au-btn-ghost:hover { border-color: rgba(16,185,129,.4); color: var(--au-ink) !important; box-shadow: none; }
.au-btns { display: flex; gap: .5rem; }
.au-btns > * { flex: 1; }

.au-sep { display: flex; align-items: center; gap: .75rem; color: var(--au-ink-5); font-size: .75rem; }
.au-sep::before, .au-sep::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }
.au-alt { text-align: center; font-size: .8125rem; color: var(--au-ink-3); margin: .25rem 0 0; }
.au-alt a { font-weight: 700; }
.au-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .75rem; color: var(--au-ink-3); line-height: 1.6; }
.au-check input { margin-top: .2rem; accent-color: #10b981; flex-shrink: 0; }
.au-muted { font-size: .75rem; color: var(--au-ink-4); text-align: center; }

.au-note { border-radius: 1rem; padding: .875rem 1rem; display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; line-height: 1.7; }
.au-note i { margin-top: .2rem; flex-shrink: 0; }
.au-note p, .au-note ul { margin: 0; padding: 0; list-style: none; }
.au-note-info { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); color: #93c5fd; }
.au-note-info i { color: #60a5fa; }
.au-note-warn { background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.2); color: #fde68a; }
.au-note-warn i { color: #facc15; }
.au-note-ok { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.22); color: #6ee7b7; }
.au-note-ok i { color: #34d399; }
.au-note-bad { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); color: #fca5a5; }
.au-note-bad i { color: #f87171; }
html:not(.dark) .au-note-info { color: #1e40af; }
html:not(.dark) .au-note-warn { color: #854d0e; }
html:not(.dark) .au-note-ok { color: #065f46; }
html:not(.dark) .au-note-bad { color: #991b1b; }

/* Step chips (demo) and progress bar (recovery) */
.au-steps { display: flex; gap: .5rem; }
.au-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .75rem .5rem; border-radius: .875rem; text-align: center;
    background: var(--au-surface); border: 1px solid var(--au-line); opacity: .7; }
.au-step i { font-size: .9rem; color: var(--au-ink-4); }
.au-step span { font-size: .625rem; font-weight: 700; color: var(--au-ink-2); }
.au-step.is-on { opacity: 1; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); }
.au-step.is-on i { color: #34d399; }
.au-step.is-done { opacity: 1; }
.au-step.is-done i { color: #10b981; }
.au-progress { display: flex; gap: .375rem; }
.au-progress span { flex: 1; height: 4px; border-radius: 999px; background: var(--au-line); transition: background .3s; }
.au-progress span.is-on { background: linear-gradient(90deg,#10b981,#06b6d4); }

.au-kv { border-radius: 1rem; padding: .5rem 1rem; background: var(--au-surface-2); border: 1px solid var(--au-line); }
.au-kv div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .75rem; padding: .45rem 0; }
.au-kv div + div { border-top: 1px solid var(--au-line); }
.au-kv dt, .au-kv span:first-child { color: var(--au-ink-4); }
.au-kv b { color: var(--au-ink); font-weight: 700; }
.au-count { font-size: 2.25rem; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; direction: ltr;
    background-image: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.au-strength { display: flex; gap: .25rem; margin-top: .375rem; }
.au-strength div { height: 4px; flex: 1; border-radius: 999px; background: var(--au-line-2); transition: background .2s; }
.au-strength-label { font-size: .625rem; color: var(--au-ink-4); margin: .25rem 0 0; }

.au-foot { text-align: center; font-size: .6875rem; color: var(--au-ink-5); margin: .875rem 0 0; }
.au-foot a { color: var(--au-ink-4); }
.au-theme { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .6875rem; color: var(--au-ink-4); background: none; border: 0; cursor: pointer; margin-inline-start: .35rem; }
.au-theme:hover { color: var(--au-ink-2); }

/* ── Hero side (desktop only) ── */
.au-hero { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.25rem;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem); background: linear-gradient(180deg, rgba(16,185,129,.06), transparent 40%), var(--au-hero);
    border-inline-start: 1px solid var(--au-line); }
.au-hero::before { content: ""; position: absolute; top: -10rem; inset-inline-end: -8rem; width: 34rem; height: 34rem; border-radius: 999px; pointer-events: none;
    background: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%); filter: blur(60px); }
.au-hero > * { position: relative; width: 100%; max-width: 32rem; }
.au-hero h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 900; color: var(--au-ink); line-height: 1.6; margin: 0 0 .625rem; text-wrap: balance; }
.au-hero h2 span { display: block; margin-top: .125rem; padding-bottom: .15em; background-image: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-hero p { color: var(--au-ink-3); font-size: .9375rem; line-height: 1.8; max-width: 28rem; margin: 0 auto; text-wrap: pretty; }
.au-route-head { text-align: start; }

/* Extras under the route card: stats, feature chips, supported games. */
.au-stats { display: flex; justify-content: center; align-items: stretch; gap: 0; padding: .875rem 0; border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); }
.au-stats > div { flex: 1; padding: 0 .75rem; }
.au-stats > div + div { border-inline-start: 1px solid var(--au-line); }
.au-stats b { display: block; font-size: 1.375rem; font-weight: 900; line-height: 1.4; background-image: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-stats small { display: block; font-size: .6875rem; color: var(--au-ink-4); margin-top: .2rem; }
.au-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.au-feats span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; font-size: .75rem; color: var(--au-ink-2); background: var(--au-surface-2); border: 1px solid var(--au-line); }
.au-feats i { color: #34d399; font-size: .7rem; }
.au-games { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.au-games div { display: flex; gap: .4rem; }
.au-games img { width: 2.25rem; height: 2.25rem; border-radius: .6rem; object-fit: cover; border: 1px solid var(--au-line); opacity: .85; transition: opacity .2s, transform .16s; }
.au-games img:hover { opacity: 1; transform: translateY(-2px); }
.au-games small { font-size: .6875rem; color: var(--au-ink-4); }
@media (max-height: 760px) { .au-games, .au-feats { display: none; } }

.au-route { border-radius: 1.25rem; padding: 1.125rem; background: var(--au-hero-card); border: 1px solid var(--au-line); box-shadow: var(--au-shadow);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.au-route-head { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.au-route-head > img { width: 2.25rem; height: 2.25rem; border-radius: .5rem; object-fit: cover; }
.au-route-name { font-size: .8125rem; font-weight: 700; color: var(--au-ink); line-height: 1.3; }
.au-route-srv { font-size: .625rem; color: var(--au-ink-4); }
.au-route-pick { margin-inline-start: auto; display: flex; gap: .25rem; padding: .1875rem; border-radius: .5rem; background: var(--au-surface); border: 1px solid var(--au-line); }
.au-route-pick button { width: 1.75rem; height: 1.75rem; border-radius: .375rem; overflow: hidden; padding: 0; border: 0; cursor: pointer; opacity: .45;
    outline: 1px solid transparent; transition: opacity .2s, outline-color .2s; background: none; }
.au-route-pick button[aria-pressed="true"] { opacity: 1; outline-color: rgba(16,185,129,.6); }
.au-route-pick button:focus-visible { outline: 2px solid #10b981; }
.au-route-pick img { width: 100%; height: 100%; object-fit: cover; }
.au-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.au-route-grid > div { padding: .75rem .875rem; border-radius: .875rem; }
.au-route-before { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.16); }
.au-route-after { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.2); }
.au-route-grid small { display: block; font-size: .625rem; color: var(--au-ink-3); margin-bottom: .25rem; }
.au-route-grid b { font-size: 1.75rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.au-route-before b { color: #f87171; }
.au-route-after b { background-image: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-route-grid em { font-style: normal; font-size: .6875rem; color: var(--au-ink-4); margin-inline-start: .25rem; }
.au-route-note { font-size: .625rem; color: var(--au-ink-5); margin: .75rem 0 0; }

@media (max-width: 1023px) { .au-hero { display: none; } }

@keyframes au-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .au-card { animation: none; }
    .au-btn, .au-tab, .au-input { transition: none; }
}

/* Tailwind's .hidden is loaded before this file, and .au-form sets display,
   so without this the login 2FA step (toggled with .hidden) would show. */
.au-page .hidden { display: none !important; }