/* Auth pages: dark, premium aesthetic, mobile-first */
:root{
  --bg:#0b0b0d;
  --card:#0f1113;
  --muted:#9aa0a6;
  --accent:#e6b800; /* warm gold */
  --text:#e6e6e6;
  --error:#ff5a5f;
}

body.auth-page{background:linear-gradient(180deg,#070708 0%, #0b0b0d 100%);color:var(--text);font-family:'DM Sans',system-ui,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}

.auth-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px}

.auth-hero{max-width:500px;text-align:center;margin-bottom:20px}
.auth-title{font-size:1.75rem;letter-spacing:0.02em;margin:0 0 6px;color:var(--text)}
.auth-sub{color:var(--muted);margin:0;font-size:0.95rem}

.auth-card{width:100%;max-width:500px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px;box-shadow:0 10px 30px rgba(2,2,6,0.7);padding:24px;backdrop-filter:blur(6px)}
.form{display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column}
.form-group label{font-size:0.9rem;color:var(--muted);margin-bottom:8px}
.password-wrapper{position:relative;display:flex;align-items:center}
.password-wrapper input{flex:1;padding-right:45px}
.toggle-password{position:absolute;right:12px;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}
.toggle-password:hover{color:var(--accent)}
.toggle-password:focus{outline:2px solid rgba(230,184,0,0.3);border-radius:4px}
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="password"],.form-group input[type="tel"]{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:12px 14px;border-radius:8px;color:var(--text);outline:none;font-size:1rem}
.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(230,184,0,0.08)}
.field-error{color:var(--error);font-size:0.85rem;height:auto;min-height:1.1em;margin-top:6px}

.form-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.checkbox-label{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:0.95rem}
.checkbox-label input{width:18px;height:18px;border-radius:4px}
.link-muted{color:var(--muted);font-size:0.95rem}

.form-actions{display:flex;align-items:center;justify-content:center;margin-top:4px}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ffdd57);color:#111;border:none;padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(230,184,0,0.12);transition:transform .15s ease,box-shadow .15s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(230,184,0,0.16)}
.btn-primary:focus{outline:3px solid rgba(230,184,0,0.12)}

.form-secondary{color:var(--muted);text-align:center;margin:8px 0 0}
.form-secondary a{color:var(--text);text-decoration:underline}

.form-status{margin-top:8px;color:var(--muted);font-size:0.95rem}

.visually-hidden{position:absolute;border:0;padding:0;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media(min-width:900px){
  .auth-main{padding:72px}
  .auth-title{font-size:2rem}
}

/* focus-visible support */
*:focus{outline:none}
*:focus-visible{outline:3px solid rgba(230,184,0,0.12);outline-offset:2px}