/* ---- Basic reset + font ---- */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #222; }
.auth-shell { min-height:100vh; display:flex; flex-direction:column; }

/* ---- Header / brand ---- */
.auth-header { padding:18px 28px; display:flex; align-items:center; justify-content:center; background: linear-gradient(90deg,#5b8ef6 0%, #7b61ff 100%); color:white; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:36px; height:36px; object-fit:contain; border-radius:6px; background:rgba(255,255,255,0.15); padding:6px; }
.brand-title { font-weight:700; font-size:1.15rem; letter-spacing:0.2px; }

/* ---- Main area ---- */
.auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:32px; 
  background: radial-gradient(circle at 10% 10%, rgba(123,97,255,0.06), transparent 25%),
              radial-gradient(circle at 90% 90%, rgba(91,142,246,0.03), transparent 25%); }

/* ---- grid: info | form ---- */
.auth-grid { width:100%; max-width:1100px; display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:stretch; }

/* panel styles */
.auth-panel { border-radius:14px; overflow:hidden; box-shadow:0 8px 30px rgba(20,20,50,0.06); }
.info-panel { display:flex; align-items:center; justify-content:center; background-image: url('/static/logo.jpg'); background-size:cover; background-position:center; color:white; padding:36px; min-height:340px; }
.info-inner { padding:28px; background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.28)); border-radius:8px; }
.info-inner h1 { margin:0 0 10px; font-size:1.8rem; }
.lead { margin:0 0 16px; opacity:0.95; line-height:1.4; }
.features { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-weight:500; opacity:0.95; }
.features li::before { content:"•"; margin-right:8px; color:#ffd166; }

/* form panel */
.form-panel { background: linear-gradient(180deg,#ffffff,#fbfbff); padding:28px; min-height:340px; display:flex; align-items:center; }
.form-inner { width:100%; }
.form-inner h2 { margin-top:0; margin-bottom:12px; font-size:1.2rem; }
.auth-form { display:flex; flex-direction:column; gap:12px; margin-bottom:8px; }
.auth-form input { padding:12px 14px; border-radius:10px; border:1px solid #e6e7f2; font-size:0.95rem; background:white; outline:none; }
.auth-form input:focus { box-shadow:0 6px 18px rgba(81, 95, 255, 0.12); border-color:#9aa2ff; }

/* buttons */
.btn { display:inline-block; padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:600; }
.btn.primary { background: linear-gradient(90deg,#5b8ef6,#7b61ff); color:#fff; box-shadow:0 8px 20px rgba(123,97,255,0.12); }
.btn.alt { background:#f5f6fb; color:#333; border:1px solid #e6e7f2; }
.text-link { color:#6b7df3; text-decoration:none; align-self:center; margin-left:12px; font-weight:600; font-size:0.95rem; }

/* small helpers */
.form-row { display:flex; gap:12px; align-items:center; margin-top:6px; }
.divider { text-align:center; margin:12px 0; color:#9aa2ff; }
.divider span{ background:#fff; padding:0 12px; position:relative; top:-10px; }
.socials { display:flex; gap:10px; flex-wrap:wrap; }

/* footer */
.auth-footer { text-align:center; padding:14px 10px; color:#777; font-size:0.9rem; }

/* accessibility helpers */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .auth-grid { grid-template-columns: 1fr; max-width:760px; padding:16px; gap:18px; }
  .info-panel { min-height:200px; order:2; }
  .form-panel { order:1; padding:20px; }
}
@media (max-width:420px) {
  .auth-main { padding:18px; }
  .info-inner h1 { font-size:1.4rem; }
  .auth-form input { padding:10px; }
  .btn { padding:10px; font-size:0.95rem; }
}