/* ═══════════════════════════════════════════════════════════════════════════
   X10 AUTH DIALOG — login / register, matched to https://x10tn.net/ (measured on the live reference).
   Observed on the reference (CSS px): overlay rgba(0,0,0,.5) + blur(2px); card width 90% / max 480, bg #0F2032,
   radius 10, padding 30px 20px; tabs 18/700 gap 18, active = white + 1.5px #E9A722 underline, idle = white 50%;
   labels 12/700 white; inputs 40px, bg #132C46, radius 10, padding 0 20px; buttons 40px, radius 10, 12/700 caps;
   primary = #E9A722, secondary = 1.5px #E9A722 outline; divider 65x1 rgba(255,255,255,.15); close 30px at 10/10.
   Deliberate deviations: primary-button text is navy (the reference's white on #E9A722 is ~2:1 contrast);
   idle (empty form) buttons are dimmed like the reference but stay clickable so autofill and screen readers work.
   Only loaded for guests. Class names are all x10am-* so nothing outside the dialog is affected.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --x10am-panel: #0F2032;
    --x10am-field: #132C46;
    --x10am-gold: #E9A722;
    --x10am-text: #fff;
    --x10am-muted: rgba(255, 255, 255, .5);
    --x10am-error: #FF6B6B;
}

/* scroll lock without layout shift (scrollbar width is compensated by JS via --x10am-sbw) */
html.x10am-lock { overflow: hidden; }
body.x10am-lock { padding-right: var(--x10am-sbw, 0px); }

.x10am[hidden] { display: none; }
.x10am {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; height: 100dvh; padding: 0; box-sizing: border-box;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    font-family: 'Proxima Nova', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0; transition: opacity var(--x10-dur-base, 160ms) ease;
}
.x10am.is-open { opacity: 1; }

.x10am-card {
    position: relative; box-sizing: border-box;
    width: 90%; max-width: 480px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    padding: 30px 20px; border-radius: 10px; background: var(--x10am-panel); color: var(--x10am-text);
    outline: none; transform: translateY(8px); transition: transform var(--x10-dur-base, 160ms) var(--x10-ease-out, ease);
}
.x10am.is-open .x10am-card { transform: none; }

.x10am-close {
    position: absolute; top: 10px; right: 10px; z-index: 5; width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
}
.x10am-close:hover { background: rgba(255, 255, 255, .08); }

/* Title: the visible heading in register mode, a screen-reader heading in login mode (the tabs are the visible title). */
.x10am-title { margin: 0 0 15px; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; color: #fff; }
.x10am[data-mode="login"] .x10am-title,
.x10am-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.x10am-panel[hidden] { display: none; }

/* ── tabs ─────────────────────────────────────────────────────────────────── */
.x10am-tabs { display: flex; justify-content: center; gap: 18px; margin: 0 0 15px; }
.x10am-tab {
    margin: 0; padding: 0 0 5px; border: 0; border-bottom: 1.5px solid transparent; background: transparent; cursor: pointer;
    font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--x10am-muted);
}
.x10am-tab:hover { color: rgba(255, 255, 255, .8); }
.x10am-tab.is-active { color: #fff; border-bottom-color: var(--x10am-gold); }

/* ── form ─────────────────────────────────────────────────────────────────── */
.x10am-form { display: flex; flex-direction: column; margin: 0; }
.x10am-field { margin: 0 0 10px; }
.x10am-label { display: block; margin: 0 0 5px; font-size: 12px; font-weight: 700; line-height: normal; color: #fff; }
.x10am-star { margin-left: 2px; color: var(--x10am-error); }

.x10am-input {
    position: relative; display: flex; align-items: center; box-sizing: border-box;
    height: 40px; padding: 0 20px; border-radius: 10px; background: var(--x10am-field);
    border: 1.5px solid transparent; transition: border-color var(--x10-dur-fast, 120ms) ease;
}
.x10am-input:focus-within { border-color: var(--x10am-gold); }
.x10am-input.is-invalid { border-color: var(--x10am-error); }
.x10am-input input, .x10am-input select {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
    font: inherit; font-size: 16px; /* >=16px: iOS does not zoom the page on focus */ color: #fff; caret-color: #fff; outline: none; box-shadow: none;
}
.x10am-input input::placeholder { color: var(--x10am-muted); opacity: 1; }
.x10am-input input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 40px var(--x10am-field) inset; caret-color: #fff; }
.x10am-input--select select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.x10am-input--select select option { color: #001021; }
.x10am-input--select::after { content: ''; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--x10am-muted); border-bottom: 1.5px solid var(--x10am-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.x10am-input--eye { padding-right: 58px; }
.x10am-eye {
    position: absolute; right: 14px; top: 50%; width: 36px; height: 36px; margin: -18px 0 0; padding: 0;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--x10am-muted); cursor: pointer;
}
.x10am-eye:hover { color: #fff; }
.x10am-eye .x10am-eye-off { display: none; }
.x10am-eye[aria-pressed="true"] .x10am-eye-on { display: none; }
.x10am-eye[aria-pressed="true"] .x10am-eye-off { display: block; }
.x10am-prefix { font-size: 14px; font-weight: 700; color: #fff; }
.x10am-prefix-sep { width: 1px; height: 22px; margin: 0 12px; background: var(--x10am-muted); flex: 0 0 1px; }

.x10am-field-error { min-height: 0; margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--x10am-error); }
.x10am-field-error:empty { display: none; }
.x10am-error { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 107, 107, .12); font-size: 12px; font-weight: 700; line-height: 1.35; color: #FFB4B4; overflow-wrap: anywhere; }
.x10am-error:empty { display: none; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.x10am-btn {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 7px;
    border-radius: 10px; font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: opacity var(--x10-dur-fast, 120ms) ease, background-color var(--x10-dur-fast, 120ms) ease, border-color var(--x10-dur-fast, 120ms) ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.x10am-btn--primary { margin-top: 15px; border: 0; background: var(--x10am-gold); color: #001021; }
.x10am-btn--primary:hover { background: #F2B94A; }
.x10am-btn--primary.is-idle { opacity: .5; }
.x10am-btn--primary.is-busy { opacity: .7; cursor: progress; }
.x10am-btn--ghost { border: 1.5px solid var(--x10am-gold); background: transparent; color: #fff; margin-bottom: 20px; }
.x10am-btn--ghost:hover { background: rgba(233, 167, 34, .12); }

.x10am-or { display: flex; flex-direction: column; align-items: center; margin: 20px 0 9px; }
.x10am-sep { display: block; width: 65px; height: 1px; margin: 0 0 20px; background: rgba(255, 255, 255, .15); }
.x10am-or-text { font-size: 12px; font-weight: 700; color: var(--x10am-muted); }

.x10am-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .85); }

/* ── register: terms row ──────────────────────────────────────────────────── */
.x10am-terms-wrap { margin: 0 0 6px; }
.x10am-terms { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.x10am-terms input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.x10am-check { flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 4px; background: var(--x10am-field); transition: background-color var(--x10-dur-fast, 120ms) ease, border-color var(--x10-dur-fast, 120ms) ease; }
.x10am-terms input:checked + .x10am-check { background: var(--x10am-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23001021' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--x10am-gold); }
.x10am-terms input:focus-visible + .x10am-check { outline: 2px solid #fff; outline-offset: 2px; }
.x10am-terms-text { font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; }
.x10am-terms-text a { color: var(--x10am-gold); text-decoration: underline; }

/* ── focus (keyboard) ─────────────────────────────────────────────────────── */
.x10am-btn:focus-visible, .x10am-tab:focus-visible, .x10am-close:focus-visible, .x10am-eye:focus-visible, .x10am-terms-text a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── small screens: same component, the card is already 90% wide ──────────── */
@media (max-height: 560px) { .x10am-card { padding-top: 24px; padding-bottom: 20px; } }
@media (max-width: 340px) { .x10am-card { padding-left: 14px; padding-right: 14px; } .x10am-tab { font-size: 16px; } .x10am-input { padding: 0 14px; } .x10am-input--eye { padding-right: 52px; } }

@media (prefers-reduced-motion: reduce) {
    .x10am, .x10am-card { transition: none; transform: none; }
}
html[data-x10-motion="reduced"] .x10am, html[data-x10-motion="reduced"] .x10am-card { transition: none; transform: none; }