/* CSGO Matchmaking — log in / sign up */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:32px 48px 40px;border-right:1px solid var(--line)}
.auth-side::before{content:"";position:absolute;inset:0;background:url(/assets/img/inferno.jpg) center/cover;filter:grayscale(1) contrast(1.15) brightness(.4)}
.auth-side::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(22,71,184,.55) 0%,rgba(0,0,0,.75) 55%,#000 100%)}
.auth-side>*{position:relative;z-index:1}
.auth-side h1{font:900 clamp(48px,5.6vw,84px)/.88 var(--display);text-transform:uppercase;max-width:10ch}
.auth-side h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--ice)}
.auth-side .lede{margin-top:18px;color:#B7C3DA;max-width:42ch}
.perks{list-style:none;display:grid;gap:16px;margin-top:36px;max-width:420px}
.perks li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.perks .ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(47,123,255,.15);color:var(--ice)}
.perks svg{width:18px;height:18px}
.perks strong{display:block;font-weight:600}
.perks span{font-size:14px;color:#B7C3DA}
.auth-side small{color:var(--dim);font-size:12px}

.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--black)}
.auth-card{width:100%;max-width:400px}
.auth-card .brand.mobile{display:none;margin-bottom:28px}
.auth-card h2{font:900 46px/.95 var(--display);text-transform:uppercase}
.auth-card .sub{color:var(--muted);margin-top:10px;font-size:15px}

.form{display:grid;gap:16px;margin-top:28px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:500}
.label-row{display:flex;justify-content:space-between;align-items:baseline}
.label-row a{font-size:13px;color:var(--ice)}
.label-row a:hover{text-decoration:underline}
.field input{height:48px;width:100%;background:var(--hull);border:1px solid var(--line-hi);border-radius:var(--r-sm);color:var(--text);font:inherit;padding:0 14px}
.field input::placeholder{color:var(--dim)}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,123,255,.22)}
.field.invalid input{border-color:#E5484D}
.field-error{font-size:13px;color:#FF8A8D;min-height:0}
.field-error:empty{display:none}
.field-hint{font-size:12px;color:var(--muted)}
.pw{position:relative}
.pw input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:6px;height:36px;padding:0 10px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--muted)}
.pw-toggle:hover{color:var(--text);background:var(--deck)}
.form-error{padding:12px 14px;border-radius:var(--r-sm);background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.4);color:#FFB3B5;font-size:14px}
.btn-block{width:100%;height:50px;font-size:15px}
.btn[disabled]{opacity:.6;cursor:progress}
.btn-steam{background:#000;border:1px solid var(--line-hi);color:var(--text)}
.btn-steam:hover{border-color:var(--ice)}
.btn-steam img{width:20px;height:20px}
.or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--dim);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-card .fine{font-size:12.5px;color:var(--muted);margin-top:10px}
.switch{margin-top:26px;font-size:14px;color:var(--muted)}
.switch a,.legal-note a{color:var(--ice);font-weight:600}
.switch a:hover,.legal-note a:hover{text-decoration:underline}
.legal-note{margin-top:10px;font-size:12.5px;color:var(--dim)}
.legal-note a{font-weight:500}
.cf-turnstile{min-height:65px}
.cf-turnstile[hidden]{display:none}

@media (max-width:900px){
  .auth-page{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-card .brand.mobile{display:flex}
  .auth-main{align-items:flex-start;padding-top:32px}
}
.form-done{margin-top:24px;padding:18px 20px;border:1px solid var(--blue);border-radius:var(--r-md);background:rgba(47,123,255,.08)}
.form-done strong{font:800 24px/1 var(--display);text-transform:uppercase}
.form-done p{color:#B7C3DA;margin-top:8px;font-size:14px}

.form-error.form-ok{color:var(--ice);border-color:var(--line-hi);background:rgba(47,123,255,.08)}