html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-y: scroll;
}


body:has(#matchesGrid) .matches-grid,
body:has(#matchesGrid) #matchesGrid {
  margin-top: 28px;
}
:root {
  --bg: #0b0f14;
  --surface: #121821;
  --surface-2: #18212c;
  --surface-3: #1e2936;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --text: #f4f7fb;
  --muted: #99a7b7;
  --soft: #6f8093;
  --accent: #33d69f;
  --accent-2: #5cb8ff;
  --danger: #ff6b7a;
  --warning: #ffb84d;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(51,214,159,.08), transparent 24%),
    radial-gradient(circle at top left, rgba(92,184,255,.08), transparent 30%),
    linear-gradient(180deg, #091017 0%, #0b0f14 100%);
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input { font: inherit; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; background:#fff; color:#000; padding:10px 14px; z-index:9999; border-radius:10px; }
.site-header {
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(18px);
  background: rgba(10,14,19,.78);
  border-bottom: 1px solid var(--line);
}
.header-row { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.04em; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(51,214,159,.2), rgba(92,184,255,.22));
  border: 1px solid var(--line-strong); display:grid; place-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.logo-mark svg { width: 22px; height: 22px; }
.main-nav { display:flex; align-items:center; gap:12px; }
.nav-list { display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.nav-link {
  padding: 12px 16px; color: var(--muted); border-radius: 999px;
  transition: .2s ease; min-height:44px; display:flex; align-items:center;
}
.nav-link:hover, .nav-link.active { color:#fff; background: rgba(255,255,255,.06); }
.header-actions { display:flex; align-items:center; gap:12px; }
.mobile-menu-btn {
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background: var(--surface); color:#fff;
}
.btn {
  min-height: 46px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius: 999px; padding: 0 18px; border:1px solid transparent; cursor:pointer;
  transition: .2s ease; font-weight: 700;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #48e0b0); color:#04130e; box-shadow: 0 10px 24px rgba(51,214,159,.22); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-secondary { background: rgba(255,255,255,.04); color:#fff; border-color: var(--line); }
.btn-secondary:hover { background: rgba(255,255,255,.08); }
.hero { padding: 72px 0 40px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; }
.kicker { display:inline-flex; gap:8px; align-items:center; color:var(--accent); font-size:.92rem; font-weight:700; margin-bottom:16px; }
.hero-card, .panel, .stat-card, .match-card, .review-card, .faq-card, .timeline-item, .order-card, .empty-state, .glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card { padding: 36px; }
.hero h1 { font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: 1.02; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: 1.05rem; max-width: 62ch; }
.hero-actions { margin-top: 24px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-side { padding: 20px; display:grid; gap:16px; }
.hero-video { overflow:hidden; border-radius: 20px; border:1px solid var(--line); aspect-ratio:16/10; background:#0a0d12; }
.hero-video video { width:100%; height:100%; object-fit:cover; }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top: 18px; }
.stat-card { padding: 18px; }
.stat-label { color: var(--soft); font-size:.9rem; }
.stat-value { font-size: 1.8rem; font-weight: 800; margin-top: 8px; }
.stat-note { color: var(--muted); font-size:.9rem; margin-top:4px; }
.section { padding: 26px 0 48px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom: 18px; }
.section-head h2 { margin:0; font-size: clamp(1.4rem, 2vw, 2.2rem); }
.section-head p { margin:6px 0 0; color:var(--muted); }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.feature-item, .step-item { padding: 22px; }
.feature-icon, .step-number {
  width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center;
  background: rgba(51,214,159,.12); color: var(--accent); margin-bottom: 14px; font-weight: 800;
}
.muted { color: var(--muted); }
.controls-bar, .toolbar {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin: 18px 0 18px;
}
.filter-group, .search-group, .sort-group { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.chip, .filter-btn {
  min-height:42px; border-radius:999px; padding:0 14px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color:var(--muted); cursor:pointer;
}
.chip.active, .filter-btn.active { background: rgba(51,214,159,.13); color:#fff; border-color: rgba(51,214,159,.35); }
.search-input, .select-input, .email-input, .faq-search {
  min-height: 48px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.03);
  color:#fff; padding: 0 16px; outline: none; width:100%;
}

.promo-input {
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.promo-feedback {
    display: none;
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: var(--muted);
}

.promo-feedback.show {
    display: block;
}

.promo-feedback.success {
    border-color: rgba(51,214,159,.35);
    background: rgba(51,214,159,.10);
    color: #d9fff2;
}

.promo-feedback.error {
    border-color: rgba(255,107,122,.26);
    background: rgba(255,107,122,.10);
    color: #ffd7dd;
}

.search-input:focus, .select-input:focus, .email-input:focus, .faq-search:focus { border-color: rgba(92,184,255,.45); box-shadow: 0 0 0 4px rgba(92,184,255,.12); }
.matches-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.match-card { padding: 18px; position:relative; overflow:hidden; }
.match-card.available::before, .match-card.completed::before {
  content:''; position:absolute; inset:0 auto auto 0; width:100%; height:4px;
}
.match-card.available::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.match-card.completed::before { background: linear-gradient(90deg, #667085, #3b4451); }
.match-top { display:flex; align-items:start; justify-content:space-between; gap:10px; margin-bottom:16px; }
.badge {
  display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border-radius:999px;
  background: rgba(255,255,255,.05); border:1px solid var(--line); color:#fff; font-size:.82rem; font-weight:700;
}
.badge.live { color: #04130e; background: rgba(51,214,159,.95); border-color: transparent; }
.match-title { font-size: 1.12rem; font-weight: 800; margin: 0 0 4px; }
.match-sub { color: var(--muted); font-size: .94rem; }
.match-metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin: 16px 0; }
.metric { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border:1px solid var(--line); }
.metric-label { color: var(--soft); font-size:.78rem; }
.metric-value { margin-top:6px; font-size: 1.12rem; font-weight: 800; }
.match-footer { display:flex; gap:10px; margin-top: 16px; }
.icon-btn {
  width:46px; height:46px; border-radius:14px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color:#fff; cursor:pointer;
}
.activity-feed { display:grid; gap:12px; }
.timeline-item { padding:16px 18px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.timeline-item strong { display:block; margin-bottom:4px; }
.review-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap:16px; }
.review-card { padding: 20px; }
.review-top { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.avatar { width:50px; height:50px; border-radius:50%; background: linear-gradient(135deg, var(--accent-2), #d3e9ff); color:#06131d; display:grid; place-items:center; font-weight:800; }
.rating { color: #ffb84d; letter-spacing: .12em; }
.tag-row { display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px; }
.tag { padding: 6px 10px; border-radius:999px; border:1px solid var(--line); color: var(--muted); font-size:.8rem; }
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.gallery-item { overflow:hidden; border-radius: 16px; border:1px solid var(--line); aspect-ratio: 1 / 1; background: rgba(255,255,255,.03); cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:.25s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.faq-layout { display:grid; grid-template-columns: 300px 1fr; gap:16px; }
.faq-sidebar, .faq-content-panel { padding:20px; }
.category-list { display:grid; gap:10px; }
.category-btn {
  min-height:46px; border-radius:14px; text-align:left; padding:0 14px;
  border:1px solid var(--line); background: rgba(255,255,255,.03); color:#fff; cursor:pointer;
}
.category-btn.active { background: rgba(92,184,255,.14); border-color: rgba(92,184,255,.32); }
.faq-item { border:1px solid var(--line); border-radius:16px; overflow:hidden; background: rgba(255,255,255,.03); }
.faq-item + .faq-item { margin-top: 12px; }
.faq-question {
  width:100%; min-height:58px; padding:16px 18px; border:0; background:transparent; color:#fff; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; font-weight:700;
}
.faq-answer { display:none; padding: 0 18px 18px; color: var(--muted); }
.faq-item.open .faq-answer { display:block; }
.modal-overlay, .photo-viewer {
  position: fixed; inset: 0; background: rgba(5,8,11,.82); backdrop-filter: blur(14px);
  display:none; align-items:center; justify-content:center; z-index:500;
}
.modal-overlay.active, .photo-viewer.active { display:flex; }
.modal, .photo-container {
  width:min(680px, calc(100% - 24px)); background: #111824; border:1px solid var(--line);
  border-radius: 24px; box-shadow: var(--shadow); padding: 22px;
}
.modal-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:16px; }
.modal-close, .photo-close, .photo-nav {
  width:46px; height:46px; border-radius:14px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color:#fff; cursor:pointer;
}
.checkout-grid { display:grid; gap:14px; }
.checkout-summary { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.summary-box { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border:1px solid var(--line); }
.stepper { display:flex; gap:10px; flex-wrap:wrap; }
.step-pill { padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid var(--line); color: var(--muted); font-size:.86rem; }
.step-pill.active { color:#fff; border-color: rgba(51,214,159,.35); background: rgba(51,214,159,.12); }
.notice { padding: 14px 16px; border-radius: 14px; background: rgba(92,184,255,.09); border:1px solid rgba(92,184,255,.25); color:#d8eefe; }
.error-message { display:none; padding: 12px 14px; background: rgba(255,107,122,.1); color:#ffd7dd; border:1px solid rgba(255,107,122,.26); border-radius:14px; }
.error-message.show { display:block; }
.success-shell { min-height:100vh; display:grid; place-items:center; padding:28px 0; }
.success-card { width:min(760px, calc(100% - 24px)); padding: 30px; }
.info-grid { display:grid; gap:10px; }
.info-row { display:flex; justify-content:space-between; gap:12px; align-items:start; padding: 14px 0; border-bottom:1px solid var(--line); }
.info-row:last-child { border-bottom:0; }
.info-label { color: var(--soft); }
.status-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); }
.status-paid { background: rgba(51,214,159,.12); color:#d9fff2; border-color: rgba(51,214,159,.28); }
.status-pending { background: rgba(255,184,77,.12); color:#ffe8c4; border-color: rgba(255,184,77,.28); }
.order-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top: 18px; }
.footer { padding: 26px 0 50px; color: var(--muted); }
.footer-grid { display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:16px; }
.ticker { display:flex; gap:10px; overflow:auto; padding-bottom:4px; scrollbar-width:none; }
.ticker::-webkit-scrollbar { display:none; }
.ticker-item { flex: 0 0 auto; min-width: 240px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.03); }
.skeleton { position:relative; overflow:hidden; background: rgba(255,255,255,.05); }
.skeleton::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
@media (max-width: 980px) {
  .hero-grid, .faq-layout, .grid-3, .grid-2, .footer-grid, .checkout-summary { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .main-nav {
    position:absolute; top:76px; left:16px; right:16px; padding:14px; border-radius:20px;
    border:1px solid var(--line); background: rgba(14,19,26,.98); flex-direction:column; align-items:stretch; display:none;
  }
  .main-nav.active { display:flex; }
  .nav-list { flex-direction:column; }
  .mobile-menu-btn { display:grid; place-items:center; }
}
@media (max-width: 640px) {
  .container { width: min(var(--max), calc(100% - 20px)); }
  .hero { padding-top: 34px; }
  .hero-card, .hero-side, .panel, .stat-card, .match-card, .review-card, .faq-sidebar, .faq-content-panel, .success-card { padding: 18px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .section-head { align-items:start; flex-direction:column; }
  .header-row { min-height:70px; }
  .btn { width:100%; }
  .header-actions .btn { display:none; }
  .match-footer { flex-direction:column; }
  .info-row { flex-direction:column; }
}


/* === UI consistency fixes === */
.purchase-modal .modal-content,
#purchase-modal .modal-content,
.modal-content.purchase-modal-content {
    font-family: inherit;
}

.purchase-modal .modal-content h2,
.purchase-modal .modal-content .match-name,
.purchase-modal .modal-content .match-odds,
.purchase-modal .modal-content .match-price,
#purchase-modal .modal-content h2,
#purchase-modal .modal-content .match-name,
#purchase-modal .modal-content .match-odds,
#purchase-modal .modal-content .match-price,
#purchaseModal .modal-content h2,
#purchaseModal .modal-content .match-name,
#purchaseModal .modal-content .match-odds,
#purchaseModal .modal-content .match-price,
#purchase-match-modal .modal-content h2,
#purchase-match-modal .modal-content .match-name,
#purchase-match-modal .modal-content .match-odds,
#purchase-match-modal .modal-content .match-price,
.modal-content h2,
.modal-content .match-name,
.modal-content .match-odds,
.modal-content .match-price {
    font-family: inherit !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-style: normal !important;
}

.modal-header,
.modal-body,
.modal-body p,
.modal-body span,
.match-info,
.match-info p,
.match-details {
    font-family: inherit;
}

header nav,
.nav-links,
.nav-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

header nav a,
.nav-links a,
.nav-menu a,
header .nav-button,
.nav-links .nav-button,
.nav-menu .nav-button,
header nav .active,
.nav-links .active,
.nav-menu .active,
header nav a.active,
.nav-links a.active,
.nav-menu a.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

header nav a:hover,
.nav-links a:hover,
.nav-menu a:hover,
header .nav-button:hover,
.nav-links .nav-button:hover,
.nav-menu .nav-button:hover {
    transform: translateY(-1px);
}

header nav a.active,
.nav-links a.active,
.nav-menu a.active,
header nav a[aria-current="page"],
.nav-links a[aria-current="page"],
.nav-menu a[aria-current="page"] {
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
}

button.check-result,
.check-result,
.check-result-btn,
.result-check-btn,
button[data-action="check-result"] {
    background: linear-gradient(135deg, #23c483 0%, #139d67 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 24px rgba(19,157,103,.32), 0 4px 10px rgba(0,0,0,.18) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

button.check-result:hover,
.check-result:hover,
.check-result-btn:hover,
.result-check-btn:hover,
button[data-action="check-result"]:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

button.check-result:disabled,
.check-result:disabled,
.check-result-btn:disabled,
.result-check-btn:disabled,
button[data-action="check-result"]:disabled {
    opacity: .88 !important;
    cursor: pointer;
}

@media (max-width: 768px) {
    header nav,
    .nav-links,
    .nav-menu {
        justify-content: center;
        gap: 10px;
    }

    header nav a,
    .nav-links a,
    .nav-menu a,
    header .nav-button,
    .nav-links .nav-button,
    .nav-menu .nav-button {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 14px;
    }
}


.promo-input {
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promo-feedback {
  display: none;
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}

.promo-feedback.show {
  display: block;
}

.promo-feedback.success {
  border-color: rgba(51,214,159,.35);
  background: rgba(51,214,159,.10);
  color: #d9fff2;
}

.promo-feedback.error {
  border-color: rgba(255,107,122,.26);
  background: rgba(255,107,122,.10);
  color: #ffd7dd;
}

.newsletter-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
}

.newsletter-modal.active {
    display: block;
}

.newsletter-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
}

.newsletter-modal__content {
    position: relative;
    max-width: 460px;
    width: calc(100% - 32px);
    margin: 10vh auto 0;
    background: linear-gradient(180deg, #171923, #10131b);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.newsletter-modal__content h2 {
    margin-bottom: 12px;
    font-size: 24px;
}

.newsletter-modal__content p {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
}

.newsletter-modal__form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.newsletter-modal__form input {
    flex: 1 1 240px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    outline: none;
}

.newsletter-modal__form button {
    flex: 0 0 auto;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #2b87d1, #32a882);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.newsletter-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.newsletter-message {
    margin-top: 14px;
    min-height: 22px;
    font-size: 14px;
}

.newsletter-message.success {
    color: #5ee6a8;
}

.newsletter-message.error {
    color: #ff7b88;
}

.text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0;
    margin-top: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.text-btn:hover {
    color: #ffffff;
    opacity: 0.92;
}

.text-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


body.auth-page {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #090b10;
}


body.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 14% 18%, rgba(17,69,126,.42), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(215,20,26,.35), transparent 26%),
    linear-gradient(135deg, rgba(17,69,126,.48) 0%, rgba(17,69,126,.48) 31%, rgba(255,255,255,.08) 31%, rgba(255,255,255,.08) 62%, rgba(215,20,26,.34) 62%, rgba(215,20,26,.34) 100%),
    rgba(0,0,0,.48);
}

body.auth-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  pointer-events: none;
}

body.auth-page .auth-overlay {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 42px 18px;
}

body.auth-page .auth-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(340px, 460px);
  gap: 28px;
  align-items: center;
}

body.auth-page .auth-hero-copy {
  color: #fff;
  padding: 30px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}

body.auth-page .auth-flag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(17,69,126,.8), rgba(255,255,255,.14), rgba(215,20,26,.72));
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .02em;
}

body.auth-page .auth-hero-copy h1 {
  margin: 22px 0 14px;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

body.auth-page .auth-hero-copy p {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  max-width: 58ch;
}

body.auth-page .auth-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

body.auth-page .auth-mini-grid div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}

body.auth-page .auth-mini-grid strong { display: block; color: #fff; font-size: 1.1rem; }
body.auth-page .auth-mini-grid span { display: block; color: rgba(255,255,255,.66); font-size: .85rem; margin-top: 5px; }

body.auth-page .auth-card {
  position: relative;
  width: 100%;
  padding: 28px;
  border-radius: 28px;
  background: rgba(9, 13, 22, 0.84);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

body.auth-page .auth-card::before {
  content: '';
  position: absolute;
  inset: -90px -80px auto auto;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(215,20,26,.18);
  filter: blur(8px);
  pointer-events: none;
}

body.auth-page .auth-flag-line {
  height: 7px;
  margin: -28px -28px 22px;
  background: linear-gradient(90deg, #11457E 0%, #11457E 34%, #fff 34%, #fff 66%, #D7141A 66%, #D7141A 100%);
}

body.auth-page .auth-brand {
  margin-bottom: 18px;
  text-align: left;
}

body.auth-page .auth-logo {
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #4ba3ff 0%, #ffffff 50%, #ff4b55 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body.auth-page .auth-brand p {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.94rem;
  line-height: 1.45;
}

body.auth-page .auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

body.auth-page .auth-tab {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 850;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

body.auth-page .auth-tab:hover { color: #fff; transform: translateY(-1px); }
body.auth-page .auth-tab.active { background: #ffffff; color: #0b1020; box-shadow: 0 12px 26px rgba(0,0,0,.22); }

body.auth-page .auth-panel { display: none; }
body.auth-page .auth-panel.active { display: block; }
body.auth-page .auth-panel form, body.auth-page .auth-reset-form { display: grid; gap: 12px; }

body.auth-page .auth-field {
  display: grid;
  gap: 7px;
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  font-weight: 800;
}

body.auth-page .auth-panel input,
body.auth-page .auth-reset-form input,
body.auth-page .auth-panel button,
body.auth-page .auth-reset-form button {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.075);
  color: #fff;
  outline: none;
}

body.auth-page .auth-panel input:focus,
body.auth-page .auth-reset-form input:focus {
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 0 0 4px rgba(17,69,126,.18);
}

body.auth-page .auth-panel button,
body.auth-page .auth-reset-form button {
  margin-top: 4px;
  background: linear-gradient(135deg, #11457E 0%, #ffffff 52%, #D7141A 100%);
  color: #07101c;
  border: 0;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(17,69,126,.25);
}

body.auth-page .auth-panel button:disabled,
body.auth-page .auth-reset-form button:disabled { opacity: 0.65; cursor: not-allowed; }
body.auth-page .auth-panel input::placeholder,
body.auth-page .auth-reset-form input::placeholder { color: rgba(255,255,255,0.46); }

body.auth-page .auth-note {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: .82rem;
  line-height: 1.45;
}

body.auth-page .auth-message {
  margin-top: 14px;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.74);
}

body.auth-page .auth-message.error { color: #ff9aa8; }
body.auth-page .auth-message.success { color: #8dffbf; }

body.auth-page .auth-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 18px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #07101c;
  font-weight: 950;
  text-decoration: none;
}

body.auth-page .sound-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(15,18,32,0.75);
  color: #fff;
  font-size: 20px;
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  body.auth-page .auth-shell { grid-template-columns: 1fr; }
  body.auth-page .auth-hero-copy { display: none; }
  body.auth-page .auth-card { width: min(94vw, 460px); margin: 0 auto; }
}

@media (max-width: 520px) {
  body.auth-page .auth-overlay { padding: 18px 12px 86px; align-items: flex-start; }
  body.auth-page .auth-tabs { grid-template-columns: 1fr; }
  body.auth-page .auth-card { padding: 20px; border-radius: 22px; }
  body.auth-page .auth-flag-line { margin: -20px -20px 18px; }
}

/* === v5 auth page refinements === */
body.auth-page::before {
  background: rgba(0,0,0,.42) !important;
}
body.auth-page::after {
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  mask-image: radial-gradient(circle at 72% 50%, #000 0%, transparent 78%) !important;
}
body.auth-page .auth-overlay-right,
body.auth-page .auth-overlay {
  justify-content: flex-end;
  padding: 48px clamp(18px, 6vw, 86px) 48px 18px;
}
body.auth-page .auth-card {
  width: min(100%, 520px);
  padding: 34px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(7,12,24,.90), rgba(7,10,18,.84));
  border: 1px solid rgba(255,255,255,.18);
}
body.auth-page .auth-flag-line {
  height: 9px;
  margin: -34px -34px 26px;
  background: linear-gradient(135deg, #11457E 0%, #11457E 34%, #fff 34%, #fff 66%, #D7141A 66%, #D7141A 100%);
}
body.auth-page .auth-brand { margin-bottom: 24px; }
body.auth-page .auth-brand p { font-size: 1rem; color: rgba(255,255,255,.78); }
body.auth-page .auth-tabs { margin-bottom: 22px; }
body.auth-page .auth-tab { min-height: 50px; font-size: 1rem; }
body.auth-page .auth-panel form, body.auth-page .auth-reset-form { gap: 15px; }
body.auth-page .auth-field { font-size: .9rem; color: rgba(255,255,255,.86); }
body.auth-page .auth-panel input,
body.auth-page .auth-reset-form input,
body.auth-page .auth-panel button,
body.auth-page .auth-reset-form button {
  min-height: 56px;
  font-size: 1rem;
  padding: 0 17px;
  background: rgba(255,255,255,.105);
  border-color: rgba(255,255,255,.20);
}
body.auth-page .auth-panel input::placeholder,
body.auth-page .auth-reset-form input::placeholder {
  color: rgba(255,255,255,.72) !important;
}
body.auth-page .auth-panel button,
body.auth-page .auth-reset-form button {
  min-height: 58px;
  background: linear-gradient(135deg, #11457E 0%, #ffffff 50%, #D7141A 100%);
  color: #06101f;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
body.auth-page .auth-secondary-button {
  margin-top: 0 !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.auth-page .auth-note { color: rgba(255,255,255,.70); font-size: .88rem; }
body.auth-page .auth-message { font-size: 15px; min-height: 24px; }
@media (max-width: 720px) {
  body.auth-page .auth-overlay-right,
  body.auth-page .auth-overlay { justify-content:center; padding:20px 12px 86px; align-items:flex-start; }
  body.auth-page .auth-card { width: min(96vw, 520px); padding: 24px; }
  body.auth-page .auth-flag-line { margin: -24px -24px 20px; }
}


/* === v6 centered compact auth form === */
body.auth-page::before {
  background: rgba(0,0,0,.48) !important;
}
body.auth-page::after {
  background-image: none !important;
  mask-image: none !important;
}
body.auth-page .auth-overlay-right,
body.auth-page .auth-overlay {
  justify-content: center !important;
  align-items: center !important;
  padding: 28px 14px 84px !important;
}
body.auth-page .auth-card {
  width: min(92vw, 430px) !important;
  padding: 26px !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(7,11,21,.86), rgba(7,10,18,.78)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.auth-page .auth-card::before {
  width: 150px !important;
  height: 150px !important;
  opacity: .55 !important;
}
body.auth-page .auth-flag-line {
  height: 6px !important;
  margin: -26px -26px 20px !important;
}
body.auth-page .auth-tabs {
  margin-bottom: 18px !important;
  gap: 6px !important;
  padding: 5px !important;
  border-radius: 16px !important;
}
body.auth-page .auth-tab {
  min-height: 42px !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}
body.auth-page .auth-panel form,
body.auth-page .auth-reset-form {
  gap: 12px !important;
}
body.auth-page .auth-field {
  gap: 6px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.78) !important;
}
body.auth-page .auth-panel input,
body.auth-page .auth-reset-form input,
body.auth-page .auth-panel button,
body.auth-page .auth-reset-form button {
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
}
body.auth-page .auth-panel input,
body.auth-page .auth-reset-form input {
  background: rgba(255,255,255,.115) !important;
  border-color: rgba(255,255,255,.22) !important;
}
body.auth-page .auth-panel input::placeholder,
body.auth-page .auth-reset-form input::placeholder {
  color: rgba(255,255,255,.68) !important;
  font-weight: 400 !important;
}
body.auth-page .auth-panel button,
body.auth-page .auth-reset-form button {
  min-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
body.auth-page .auth-secondary-button {
  min-height: 46px !important;
  font-weight: 600 !important;
}
body.auth-page .auth-note {
  font-size: .82rem !important;
  color: rgba(255,255,255,.62) !important;
  line-height: 1.42 !important;
}
body.auth-page .auth-message {
  font-size: 14px !important;
  min-height: 20px !important;
}
@media (max-width: 520px) {
  body.auth-page .auth-card { width: min(94vw, 410px) !important; padding: 22px !important; }
  body.auth-page .auth-flag-line { margin: -22px -22px 18px !important; }
  body.auth-page .auth-tabs { grid-template-columns: repeat(3, 1fr) !important; }
  body.auth-page .auth-tab { font-size: .82rem !important; padding: 0 6px !important; }
}


/* === v7 auth availability hints === */
body.auth-page .availability-hint {
  min-height: 17px;
  margin-top: 4px;
  font-size: .78rem;
  line-height: 1.25;
  color: rgba(255,255,255,.58);
}
body.auth-page .availability-hint.ok { color: #8dffbf; }
body.auth-page .availability-hint.error { color: #ff9aa8; }
body.auth-page .auth-card { width: min(92vw, 410px) !important; }

/* === v8 auth form refinements === */
body.auth-page .auth-card {
  width: min(92vw, 390px) !important;
  padding: 22px !important;
}
body.auth-page .auth-flag-line {
  margin: -22px -22px 18px !important;
}
body.auth-page .auth-panel form,
body.auth-page .auth-reset-form {
  gap: 10px !important;
}
body.auth-page .availability-hint,
body.auth-page .password-strength-text {
  display: none;
  min-height: 0 !important;
  margin: 0 !important;
  font-size: .76rem;
  line-height: 1.25;
}
body.auth-page .availability-hint.visible,
body.auth-page .password-strength-text.visible {
  display: block;
  margin-top: 3px !important;
}
body.auth-page .password-strength {
  display: none;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.10);
}
body.auth-page .password-strength:not([data-level="empty"]) {
  display: block;
  margin-top: 3px;
}
body.auth-page .password-strength-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width .2s ease, background .2s ease;
}
body.auth-page .password-strength[data-level="weak"] .password-strength-bar { width: 34%; background: #ff4d5f; }
body.auth-page .password-strength[data-level="medium"] .password-strength-bar { width: 68%; background: #ffcf5a; }
body.auth-page .password-strength[data-level="strong"] .password-strength-bar { width: 100%; background: #38d996; }
body.auth-page .password-strength-text.weak { color: #ff9aa8; }
body.auth-page .password-strength-text.medium { color: #ffe28a; }
body.auth-page .password-strength-text.strong { color: #8dffbf; }
body.auth-page .auth-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body.auth-page .auth-dialog.active { display: flex; }
body.auth-page .auth-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
}
body.auth-page .auth-dialog-card {
  position: relative;
  width: min(92vw, 380px);
  overflow: hidden;
  border-radius: 24px;
  padding: 26px;
  background: linear-gradient(180deg, rgba(8,13,24,.96), rgba(10,13,20,.94));
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 26px 70px rgba(0,0,0,.52);
  text-align: center;
}
body.auth-page .auth-dialog-card .auth-flag-line { margin: -26px -26px 22px !important; height: 6px !important; }
body.auth-page .auth-dialog-card h2 { margin: 0 0 10px; font-size: 1.35rem; }
body.auth-page .auth-dialog-card p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.6; }
body.auth-page .auth-dialog-card button {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  background: linear-gradient(135deg, #11457E 0%, #ffffff 50%, #D7141A 100%);
  color: #06101f;
}
@media (max-width: 520px) {
  body.auth-page .auth-card { width: min(94vw, 390px) !important; }
}

/* === v11 auth/accessibility refinements === */
body.auth-page .auth-overlay,
body.auth-page .auth-overlay-right {
  justify-content: center !important;
  align-items: center !important;
  padding: 24px !important;
}
body.auth-page .auth-card {
  width: min(94vw, 472px) !important;
  padding: 28px !important;
  border-radius: 26px !important;
  font-weight: 400 !important;
}
body.auth-page .auth-logo,
body.auth-page .auth-tabs,
body.auth-page .auth-field span,
body.auth-page .auth-panel button {
  font-weight: 650 !important;
}
body.auth-page .auth-field input {
  min-height: 52px !important;
  font-size: 15px !important;
}
body.auth-page .auth-field input::placeholder {
  color: rgba(255,255,255,.62) !important;
  opacity: 1 !important;
}
.password-wrap {
  position: relative;
  display: block;
}
.password-wrap input {
  padding-right: 48px !important;
}
.password-eye {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.72) !important;
  cursor: pointer;
}
.password-eye.active,
.password-eye:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}
.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.68);
  font-size: 14px;
  margin: -2px 0 4px;
}
.remember-row input {
  width: 16px;
  height: 16px;
  accent-color: #11457E;
}
body.auth-page .sound-toggle {
  width: 57px !important;
  height: 57px !important;
  font-size: 21px !important;
}
.availability-hint:not(.visible),
.password-strength-text:not(.visible) {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.availability-hint.visible,
.password-strength-text.visible {
  display: block !important;
  margin-top: 7px !important;
}
@media (max-width: 640px) {
  body.auth-page .auth-card { width: min(96vw, 444px) !important; padding: 22px !important; }
}


/* === v12 auth polish === */
body.auth-page .auth-card {
  width: min(94vw, 540px) !important;
  padding: 30px !important;
  border-radius: 28px !important;
}
body.auth-page .auth-flag-line {
  height: 8px !important;
  margin: -12px 0 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#11457E 0%,#11457E 33.333%,#ffffff 33.333%,#ffffff 66.666%,#D7141A 66.666%,#D7141A 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
body.auth-page .auth-tabs { margin-bottom: 20px !important; }
body.auth-page .auth-field { gap: 7px !important; }
body.auth-page .auth-field input { font-weight: 400 !important; }
.password-wrap input { padding-right: 44px !important; }
.password-eye {
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.045) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  margin: 0 !important;
  color: rgba(255,255,255,.70) !important;
}
.password-eye:hover,.password-eye.active { background: rgba(255,255,255,.095) !important; color:#fff !important; }
.remember-row {
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: -2px 0 2px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
.remember-row input {
  width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 3px !important;
  accent-color: #11457E !important;
}
body.auth-page .sound-toggle { width: 60px !important; height: 60px !important; font-size: 22px !important; }
@media (max-width: 640px) { body.auth-page .auth-card { width:min(96vw, 480px) !important; padding:24px !important; } }


/* === v13 precise auth controls and checkout alignment === */
body.auth-page .password-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
body.auth-page .password-wrap > input {
  width: 100% !important;
  padding-right: 58px !important;
}
body.auth-page .password-eye {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  top: 50% !important;
  right: 9px !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease !important;
}
body.auth-page .password-eye::before {
  content: '';
  width: 16px;
  height: 10px;
  border: 1.7px solid currentColor;
  border-radius: 50% / 62%;
  box-sizing: border-box;
}
body.auth-page .password-eye::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
body.auth-page .password-eye:hover,
body.auth-page .password-eye.active,
body.auth-page .password-eye:focus-visible {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(17,69,126,.18), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
body.auth-page .password-eye:active {
  transform: translateY(-50%) scale(.96) !important;
}
body.auth-page .remember-row {
  width: fit-content !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: -1px 0 3px !important;
  padding: 3px 2px !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 14.5px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  user-select: none !important;
}
body.auth-page .remember-row > span {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
body.auth-page .remember-row input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
body.auth-page .remember-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #07101c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .14s ease;
}
body.auth-page .remember-row input[type="checkbox"]:checked {
  background: linear-gradient(135deg,#eaf3ff,#ffffff) !important;
  border-color: rgba(255,255,255,.78) !important;
}
body.auth-page .remember-row input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}
body.auth-page .remember-row input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(17,69,126,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.50) !important;
}

#purchaseModal .modal-content,
#purchaseModal .email-section {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#purchaseModal .email-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#purchaseModal #emailInput,
#purchaseModal #promoCodeInput,
#purchaseModal .email-input,
#purchaseModal .promo-input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
#purchaseModal .promo-input { margin-top: 0 !important; }

@media (max-width: 520px) {
  body.auth-page .remember-row { font-size: 14px !important; }
  body.auth-page .password-eye { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; }
}


/* === v14 clean password control and legal links === */
body.auth-page .password-eye,
body.auth-page .password-eye:hover,
body.auth-page .password-eye.active,
body.auth-page .password-eye:focus,
body.auth-page .password-eye:focus-visible,
body.auth-page .password-eye:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body.auth-page .password-eye {
  background: transparent !important;
  border-radius: 10px !important;
}
body.auth-page .password-eye:hover,
body.auth-page .password-eye.active,
body.auth-page .password-eye:focus-visible {
  background: rgba(255,255,255,.09) !important;
}
body.auth-page .password-eye::before {
  border-width: 1.6px !important;
}
body.auth-page .auth-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.auth-page .auth-legal-links a {
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
body.auth-page .auth-legal-links a:hover,
body.auth-page .auth-legal-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* === v15 borderless password visibility control === */
body.auth-page button.password-eye,
body.auth-page button.password-eye:hover,
body.auth-page button.password-eye.active,
body.auth-page button.password-eye:focus,
body.auth-page button.password-eye:focus-visible,
body.auth-page button.password-eye:active {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
body.auth-page button.password-eye:focus-visible::before {
  color: #fff;
}


/* === V6 password visibility and compact auth spacing === */
.password-eye{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;display:inline-grid!important;place-items:center!important}
.password-eye::before{content:'';width:18px;height:12px;border:1.8px solid currentColor;border-radius:50% 50% 48% 48%;transform:rotate(-2deg);opacity:.9}
.password-eye::after{content:'';position:absolute;width:21px;height:1.8px;border-radius:999px;background:currentColor;transform:rotate(-43deg);box-shadow:0 0 0 1px rgba(7,11,18,.72);opacity:1;transition:opacity .15s ease}
.password-eye.active::after{opacity:0}
.password-eye.active::before{box-shadow:inset 0 0 0 4px rgba(255,255,255,.05)}
.password-eye:hover,.password-eye.active,.password-eye:focus-visible{background:rgba(255,255,255,.06)!important;color:#fff!important}
.password-eye:focus-visible{outline:2px solid rgba(92,184,255,.42)!important;outline-offset:2px!important}
body.auth-page .auth-message:empty{display:none!important;margin:0!important;min-height:0!important}
body.auth-page .auth-message:not(:empty){margin-top:8px!important;min-height:0!important}
body.auth-page .auth-legal-links{margin-top:13px!important;padding-top:0!important}
body.auth-page #loginForm{row-gap:9px!important}
body.auth-page #registerForm{row-gap:10px!important}
body.auth-page #registerForm>button[type="submit"]{margin-top:7px!important}
body.auth-page #forgotForm{row-gap:9px!important}
body.auth-page #forgotForm .auth-note{margin-top:1px!important}

body.auth-page button.password-eye::before{content:''!important;width:18px!important;height:12px!important;border:1.8px solid currentColor!important;border-radius:50% 50% 48% 48%!important;background:transparent!important;box-shadow:none!important;transform:rotate(-2deg)!important}
body.auth-page button.password-eye::after{content:''!important;position:absolute!important;width:21px!important;height:1.8px!important;border-radius:999px!important;background:currentColor!important;transform:rotate(-43deg)!important;box-shadow:0 0 0 1px rgba(7,11,18,.72)!important;opacity:1!important;transition:opacity .15s ease!important}
body.auth-page button.password-eye.active::after{opacity:0!important}


/* === V7 eye pupil and lower legal links === */
body.auth-page button.password-eye::before,.password-eye::before{background:radial-gradient(circle at center,currentColor 0 2.15px,transparent 2.5px)!important}
body.auth-page .auth-legal-links{margin-top:30px!important;padding-top:18px!important}


/* v8 password eye pupil refinement */
.password-eye,.password-eye::before,.password-eye::after{position:relative}
.password-eye::before{background:transparent!important;box-shadow:none!important}
.password-eye::after{content:''!important;position:absolute!important;inset:50% auto auto 50%!important;width:4px!important;height:4px!important;margin:-2px 0 0 -2px!important;border-radius:50%!important;background:currentColor!important;box-shadow:none!important;opacity:.95!important;transform:none!important}
.password-eye.active::after{opacity:0!important}
.password-eye:not(.active)::before{border-color:currentColor!important}
body.auth-page button.password-eye::before,.password-eye::before{background:transparent!important}
body.auth-page button.password-eye::after{content:''!important;position:absolute!important;inset:50% auto auto 50%!important;width:4px!important;height:4px!important;margin:-2px 0 0 -2px!important;border-radius:50%!important;background:currentColor!important;transform:none!important;box-shadow:none!important;opacity:.95!important}
body.auth-page button.password-eye.active::after{opacity:0!important}

/* Final password eye: pupil remains visible, slash disappears only when password is shown. */
.password-eye::before,
body.auth-page button.password-eye::before{
  content:''!important;
  position:relative!important;
  width:18px!important;
  height:12px!important;
  border:1.8px solid currentColor!important;
  border-radius:50% 50% 48% 48%!important;
  background:radial-gradient(circle at center,currentColor 0 2.15px,transparent 2.55px)!important;
  box-shadow:none!important;
  transform:rotate(-2deg)!important;
  opacity:.95!important;
}
.password-eye::after,
body.auth-page button.password-eye::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:21px!important;
  height:1.8px!important;
  margin:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform:translate(-50%,-50%) rotate(-43deg)!important;
  box-shadow:0 0 0 1px rgba(7,11,18,.72)!important;
  opacity:1!important;
  transition:opacity .15s ease!important;
}
.password-eye.active::after,
body.auth-page button.password-eye.active::after{opacity:0!important}

/* Final identical password eye for Login and Register. */
body.auth-page .password-eye::before,
body.auth-page .password-eye::after,
.password-eye::before,
.password-eye::after{content:none!important;display:none!important}
.password-eye{position:relative!important;display:inline-grid!important;place-items:center!important;color:rgba(235,241,250,.74)!important}
.password-eye .eye-shape{position:relative;width:19px;height:13px;display:block;border:1.8px solid currentColor;border-radius:55% 45% 55% 45%;transform:rotate(-1deg)}
.password-eye .eye-pupil{position:absolute;left:50%;top:50%;width:4.5px;height:4.5px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}
.password-eye .eye-slash{position:absolute;left:50%;top:50%;width:23px;height:1.8px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%) rotate(-43deg);box-shadow:0 0 0 1px rgba(7,11,18,.78);opacity:1;transition:opacity .15s ease}
.password-eye.active .eye-slash{opacity:0}
.password-eye:hover,.password-eye.active,.password-eye:focus-visible{color:#fff!important;background:rgba(255,255,255,.055)!important}


/* Keep the password eye visible on Chrome/Edge autofilled light fields. */
body.auth-page .password-wrap input:-webkit-autofill + .password-eye,
body.auth-page .password-wrap input:-webkit-autofill:hover + .password-eye,
body.auth-page .password-wrap input:-webkit-autofill:focus + .password-eye{
  color:#17202c!important;
  background:rgba(255,255,255,.12)!important;
}
body.auth-page .password-wrap input:-webkit-autofill + .password-eye .eye-slash{box-shadow:0 0 0 1px rgba(235,241,250,.92)!important}
body.auth-page .password-wrap input:not(:-webkit-autofill) + .password-eye{color:rgba(235,241,250,.78)!important}

/* Optional user two-factor login */
.user-2fa-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(1,4,10,.82);backdrop-filter:blur(18px)}
.user-2fa-overlay.active{display:flex}
.user-2fa-card{position:relative;width:min(430px,100%);padding:30px;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:linear-gradient(180deg,rgba(14,20,32,.99),rgba(7,11,19,.99));box-shadow:0 30px 90px rgba(0,0,0,.62);color:#fff}
.user-2fa-card h2{margin:7px 0 9px;font-size:1.55rem;letter-spacing:-.035em}
.user-2fa-card p{margin:0 0 20px;color:rgba(235,241,249,.64);font-size:.92rem;line-height:1.6}
.user-2fa-kicker{color:#8fb9e6;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.user-2fa-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.055);color:#fff;font-size:21px;cursor:pointer}
.user-2fa-card label{display:block;margin:0 0 8px;font-size:.83rem;font-weight:800;color:rgba(255,255,255,.78)}
.user-2fa-card input{width:100%;height:56px;padding:0 16px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#eef4ff;color:#07101c;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.05rem;font-weight:800;letter-spacing:.09em;outline:none}
.user-2fa-card input:focus{border-color:#7cb8f0;box-shadow:0 0 0 4px rgba(73,142,207,.16)}
.user-2fa-error{min-height:22px;padding-top:7px;color:#ff8b91;font-size:.8rem;line-height:1.35}
.user-2fa-submit{width:100%;margin-top:5px}
@media(max-width:520px){.user-2fa-card{padding:25px 19px 21px;border-radius:21px}}

/* V15 first-login email confirmation */
.auth-inline-resend{display:block;width:100%;margin-top:12px;border:0;background:transparent;color:#9fc7f2;font-size:.86rem;font-weight:800;cursor:pointer;padding:9px}.auth-inline-resend:hover{text-decoration:underline}.auth-inline-resend:disabled{opacity:.55;cursor:wait}.user-2fa-error.ok{color:#72dda0}

/* V18 centered confirmation and polished user verification dialogs */
body.auth-result-page{
  min-height:100dvh!important;
  height:100dvh!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) 48px!important;
}
body.auth-result-page .auth-overlay{
  min-height:0!important;
  height:100%!important;
  width:100%!important;
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
body.auth-result-page .auth-result-card{
  width:min(520px,calc(100vw - 28px))!important;
  margin:0 auto!important;
  padding:34px!important;
  text-align:center!important;
  border-radius:24px!important;
}
body.auth-result-page .auth-result-title{margin:10px 0 11px!important;font-size:clamp(1.65rem,4vw,2.35rem)!important;line-height:1.08!important}
body.auth-result-page .auth-result-message{margin:0 auto 22px!important;max-width:42ch!important;color:rgba(239,244,252,.76)!important;font-size:1rem!important;line-height:1.65!important}
body.auth-result-page .auth-action-link{width:100%!important;min-height:52px!important;border-radius:15px!important;background:linear-gradient(180deg,#fff,#dfe8f3)!important;color:#07101b!important;font-size:.98rem!important;font-weight:900!important;box-shadow:0 14px 30px rgba(0,0,0,.28)!important}
body.auth-result-page .legal-footer{height:48px!important;min-height:48px!important}

.user-2fa-overlay{
  align-items:flex-start!important;
  justify-content:center!important;
  padding:clamp(66px,10vh,108px) 18px 24px!important;
  overflow:auto!important;
}
.user-2fa-card{
  width:min(500px,100%)!important;
  padding:36px!important;
  border-radius:27px!important;
  box-shadow:0 34px 110px rgba(0,0,0,.68)!important;
}
.user-2fa-card h2{font-size:clamp(1.65rem,4vw,2rem)!important;margin:8px 42px 10px 0!important}
.user-2fa-card p{font-size:.98rem!important;line-height:1.65!important;margin-bottom:22px!important}
.user-2fa-card input{height:60px!important;border-radius:16px!important;font-size:1.18rem!important;text-align:center!important;letter-spacing:.18em!important}
.user-2fa-submit{
  width:100%!important;
  min-height:54px!important;
  margin-top:7px!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fff 0%,#dce7f3 100%)!important;
  color:#07101b!important;
  font-size:.98rem!important;
  font-weight:950!important;
  box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 #fff!important;
  cursor:pointer!important;
}
.user-2fa-submit:hover:not(:disabled){transform:translateY(-1px)!important;filter:brightness(1.02)!important}
.user-2fa-submit:disabled{opacity:.58!important;cursor:wait!important}
.auth-inline-resend{
  min-height:44px!important;
  margin-top:11px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.055)!important;
  color:#a9d2f7!important;
  text-decoration:none!important;
}
.auth-inline-resend:hover:not(:disabled){background:rgba(255,255,255,.09)!important;text-decoration:none!important}
@media(max-width:540px){
  body.auth-result-page .auth-overlay{padding:16px!important}
  body.auth-result-page .auth-result-card{padding:27px 20px!important}
  .user-2fa-overlay{padding:46px 12px 20px!important}
  .user-2fa-card{padding:28px 20px!important;border-radius:22px!important}
}


/* V21 verification result layout */
body.auth-result-page{
  position:relative!important;
  width:100%!important;
  min-height:100dvh!important;
  height:100dvh!important;
  margin:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) var(--cz-footer-height,48px)!important;
}
body.auth-result-page .dark-web-backdrop{position:fixed!important;inset:0!important;width:100%!important;height:100%!important}
body.auth-result-page .auth-result-overlay{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  padding:clamp(16px,3vw,32px)!important;
  overflow:hidden!important;
}
body.auth-result-page .auth-result-card{
  align-self:center!important;
  justify-self:center!important;
  width:min(520px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - var(--cz-footer-height,48px) - 32px)!important;
  overflow:auto!important;
  margin:0!important;
  padding:clamp(26px,4vw,38px)!important;
}
body.auth-result-page .auth-result-countdown{
  margin:-8px 0 18px!important;
  color:rgba(174,208,241,.88)!important;
  font-size:.88rem!important;
  font-weight:800!important;
}
body.auth-result-page .auth-page-footer{margin:0 auto!important;position:relative!important;inset:auto!important}
@media(max-width:620px){
  body.auth-result-page{grid-template-rows:minmax(0,1fr) auto!important;overflow:auto!important}
  body.auth-result-page .auth-result-overlay{padding:14px!important;min-height:calc(100dvh - 64px)!important}
  body.auth-result-page .auth-result-card{max-height:none!important;padding:25px 19px!important}
}


/* V22 final alignment and polish */
html:has(body.auth-result-page),body.auth-result-page{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
body.auth-result-page *{box-sizing:border-box!important;min-width:0}
body.auth-result-page .auth-result-overlay{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;padding:clamp(14px,3vw,30px)!important}
body.auth-result-page .auth-result-card{
  width:min(580px,calc(100vw - 28px))!important;
  max-width:580px!important;max-height:calc(100dvh - 76px)!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding:clamp(28px,4.3vw,42px)!important;
}
body.auth-result-page .auth-result-message{max-width:46ch!important;overflow-wrap:anywhere!important;word-break:normal!important}
body.auth-result-page .auth-action-link{max-width:100%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
body.auth-result-page .auth-page-footer{max-width:calc(100vw - 16px)!important;overflow:hidden!important}
@media(max-width:620px){
  body.auth-result-page{overflow-y:auto!important;overflow-x:hidden!important}
  body.auth-result-page .auth-result-overlay{min-height:calc(100svh - 66px)!important;padding:12px!important}
  body.auth-result-page .auth-result-card{width:100%!important;max-height:none!important;padding:27px 19px!important}
}