/* Auth v2 - Bolão do Sidão (Copa 2026)  v0.290
   Design split: formulário à esquerda + painel de marca à direita.
   Portado do design Claude Design "Entrar Bolão do Sidão (single)".
   Tokens oklch, Inter + JetBrains Mono. Usado por login.php e register.php. */

:root {
  --neutral-50: oklch(0.985 0.005 240); --neutral-100: oklch(0.96 0.008 240); --neutral-150: oklch(0.94 0.01 240);
  --neutral-200: oklch(0.92 0.01 240); --neutral-300: oklch(0.85 0.01 240); --neutral-400: oklch(0.7 0.01 240);
  --neutral-500: oklch(0.55 0.012 240); --neutral-600: oklch(0.45 0.012 240); --neutral-700: oklch(0.35 0.012 240);
  --neutral-800: oklch(0.25 0.012 240); --neutral-900: oklch(0.18 0.015 240);
  --green-50: oklch(0.97 0.03 145); --green-100: oklch(0.93 0.06 145); --green-300: oklch(0.82 0.12 145);
  --green-500: oklch(0.65 0.17 145); --green-600: oklch(0.55 0.16 145); --green-700: oklch(0.45 0.14 145); --green-900: oklch(0.26 0.08 148);
  --blue-500: oklch(0.58 0.18 250); --gold-500: oklch(0.8 0.16 84); --red-500: oklch(0.62 0.22 25);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--neutral-50); }
body, button, input { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--neutral-900); }
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
input::placeholder { color: var(--neutral-400); }

.av-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

.av-form-side { display: flex; flex-direction: column; padding: 28px clamp(24px, 5vw, 72px); min-width: 0; background: var(--neutral-50); }
.av-form-top { display: flex; align-items: center; justify-content: space-between; }
.av-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--neutral-500); }
.av-form-center { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 410px; margin-inline: auto; padding-block: 36px; }
.av-foot { font-size: 12px; color: var(--neutral-400); text-align: center; }

.av-brand { display: inline-flex; align-items: center; gap: 11px; }
.av-brand-mark { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--green-500), var(--blue-500)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 17px; font-style: italic; }
.av-brand-name { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -0.4px; color: var(--neutral-900); }
.av-brand-sub { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--neutral-400); margin-top: 2px; }
.av-brand--mono .av-brand-mark { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); }
.av-brand--mono .av-brand-name { color: #fff; }
.av-brand--mono .av-brand-sub { color: rgba(255,255,255,0.7); }

.av-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--green-700); }
.av-h1 { margin: 6px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.8px; color: var(--neutral-900); }
.av-lead { margin: 8px 0 26px; font-size: 14.5px; line-height: 1.55; color: var(--neutral-600); }

.av-fields { display: flex; flex-direction: column; gap: 14px; }
.av-field { display: block; }
.av-field-label { font-size: 12.5px; font-weight: 700; color: var(--neutral-700); display: block; margin-bottom: 7px; }
.av-field-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-radius: 11px; border: 1.5px solid var(--neutral-200); transition: border-color .15s, box-shadow .15s; }
.av-field-box:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 4px var(--green-100); }
.av-field-ic { color: var(--neutral-400); display: inline-flex; transition: color .15s; }
.av-field-box:focus-within .av-field-ic { color: var(--green-600); }
.av-field-box input { flex: 1; border: none; outline: none; background: transparent; color: var(--neutral-900); font-size: 14.5px; font-weight: 500; min-width: 0; }
.av-toggle { background: none; border: none; cursor: pointer; color: var(--neutral-400); display: inline-flex; padding: 0; }
.av-toggle.is-on { color: var(--green-600); }

.av-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.av-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.av-check input, .av-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-check-box { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; background: #fff; border: 1.5px solid var(--neutral-300); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .12s, border-color .12s; }
.av-check input:checked + .av-check-box, .av-terms input:checked + .av-check-box { background: var(--green-600); border-color: var(--green-600); }
.av-check-box svg { opacity: 0; }
.av-check input:checked + .av-check-box svg, .av-terms input:checked + .av-check-box svg { opacity: 1; }
.av-check-label { font-size: 13px; font-weight: 500; color: var(--neutral-600); }
.av-link { font-size: 13px; font-weight: 700; color: var(--green-700); }

.av-btn { width: 100%; padding: 15px 18px; border: none; border-radius: 12px; background: var(--green-600); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 10px 26px -10px oklch(0.55 0.16 145 / 0.85); transition: transform .1s, filter .15s; }
.av-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.av-btn:disabled { opacity: .6; cursor: default; filter: none; transform: none; }

.av-btn-secondary { width: 100%; padding: 13px 18px; border: 1px solid var(--neutral-200); border-radius: 12px; background: #fff; color: var(--neutral-700); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .15s, background .15s; }
.av-btn-secondary:hover { border-color: var(--neutral-300); background: var(--neutral-50); }

.av-switch { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--neutral-200); text-align: center; font-size: 13.5px; color: var(--neutral-600); }
.av-switch a { color: var(--green-700); font-weight: 700; }

.av-strength { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.av-strength-bars { flex: 1; display: flex; gap: 4px; }
.av-strength-bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--neutral-200); display: block; }
.av-strength-label { font-size: 11.5px; font-weight: 700; min-width: 52px; text-align: right; }

.av-terms { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; margin-top: 2px; }
.av-terms .av-check-box { margin-top: 1px; }
.av-terms-txt { font-size: 12.5px; line-height: 1.5; color: var(--neutral-600); }
.av-terms-txt a { color: var(--green-700); font-weight: 600; }

.av-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 11px; font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
.av-alert.warning { background: oklch(0.96 0.05 90); border: 1px solid oklch(0.88 0.1 88); color: oklch(0.45 0.12 75); }
.av-alert.danger { background: oklch(0.96 0.04 25); border: 1px solid oklch(0.88 0.09 25); color: oklch(0.5 0.2 25); }
.av-alert.info { background: var(--green-50); border: 1px solid var(--green-300); color: var(--green-900); }
.av-invite { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 11px; background: var(--green-50); border: 1px solid var(--green-300); color: var(--green-900); font-size: 13px; line-height: 1.45; margin-bottom: 16px; }

.av-recaptcha { display: flex; justify-content: center; }

/* Painel de marca (direita) */
.av-panel { position: relative; overflow: hidden; background: var(--green-900); color: #fff; min-height: 540px; }
.av-panel-bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 85% 0%, oklch(0.55 0.16 145 / 0.55), transparent 60%), radial-gradient(50% 45% at 0% 100%, oklch(0.5 0.18 250 / 0.4), transparent 60%); }
.av-panel-grass { position: absolute; inset: 0; opacity: 0.5; background: repeating-linear-gradient(90deg, transparent 0 56px, oklch(1 0 0 / 0.03) 56px 112px); }
.av-panel-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 44px; }
.av-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.av-panel-cta { font-size: 13px; font-weight: 700; color: #fff; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); white-space: nowrap; }
.av-panel-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--green-300); margin-bottom: 14px; }
.av-panel-h2 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.8px; font-weight: 800; text-wrap: balance; }
.av-panel-p { margin: 12px 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 420px; }
.av-panel-stats { display: flex; align-items: center; gap: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.16); }
.av-stat-v { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.av-stat-l { font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.av-stat-sep { width: 1px; height: 34px; background: rgba(255,255,255,0.16); }

.av-mock { width: min(340px, 100%); display: flex; flex-direction: column; margin: 28px auto; }
.av-mock-card { background: #fff; border-radius: 18px; box-shadow: 0 26px 50px -22px oklch(0.1 0.05 150 / 0.7); overflow: hidden; color: var(--neutral-900); position: relative; z-index: 1; }
.av-mock-head { padding: 13px 18px; border-bottom: 1px solid var(--neutral-100); display: flex; align-items: center; justify-content: space-between; }
.av-mock-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--neutral-500); padding: 3px 7px; background: var(--neutral-100); border-radius: 5px; }
.av-mock-when { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--neutral-500); }
.av-mock-body { padding: 20px 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.av-mock-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.av-mock-team .fl { font-size: 30px; }
.av-mock-team .nm { font-size: 12.5px; font-weight: 700; color: var(--neutral-800); }
.av-mock-score-wrap { display: flex; align-items: center; gap: 7px; }
.av-mock-score { width: 40px; height: 48px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 800; }
.av-mock-score.a { background: var(--green-50); border: 2px solid var(--green-300); color: var(--green-700); }
.av-mock-score.b { background: var(--neutral-50); border: 2px solid var(--neutral-200); color: var(--neutral-700); }
.av-mock-x { font-size: 14px; font-weight: 700; color: var(--neutral-300); }
.av-mock-foot { padding: 0 18px 18px; }
.av-mock-save { width: 62%; padding: 10px; border-radius: 10px; background: var(--green-600); color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.av-mock-rank { width: 196px; margin: -16px -14px 0 auto; position: relative; z-index: 2; background: #fff; border-radius: 14px; box-shadow: 0 22px 44px -18px oklch(0.1 0.05 150 / 0.7); padding: 11px 13px; color: var(--neutral-900); }
.av-mock-rank-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.av-mock-rank-head .t { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--neutral-600); }
.av-mock-rank-head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); margin-left: auto; }
.av-mock-rk { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; }
.av-mock-rk.me { background: var(--green-50); }
.av-mock-rk .p { font-size: 11px; font-weight: 800; width: 12px; }
.av-mock-rk .n { font-size: 12px; font-weight: 600; color: var(--neutral-800); flex: 1; }
.av-mock-rk.me .n { font-weight: 800; }
.av-mock-rk .v { font-size: 12px; font-weight: 800; }

@media (max-width: 920px) {
  .av-page { grid-template-columns: 1fr; }
  .av-panel { display: none; }
}