/* auth.css — QuantumExchange (Login/Register, 58px logo, mobile-polished v8) */
:root{
  --bg:#0b0f15; --bg-soft:#11161f; --card:#121824; --surface:#0f141d;
  --text:#e8edf3; --muted:#9aa4b2; --good:#19c37d; --bad:#ef4444;
  --accent:#f0b90b; --border:#1e2633;
}
.theme-light{
  --bg:#ffffff; --bg-soft:#f6f7f9; --card:#ffffff; --surface:#ffffff;
  --text:#0b0f15; --muted:#596273; --good:#0CAF60; --bad:#d32f2f;
  --accent:#f0b90b; --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.link{color:color-mix(in oklab, var(--text) 85%, transparent)} .link:hover{color:var(--text)}
.muted{color:var(--muted)}

/* Centered card */
.center-wrap{min-height:100svh;display:grid;place-items:center;padding:24px;padding-left:calc(24px + env(safe-area-inset-left,0));padding-right:calc(24px + env(safe-area-inset-right,0))}
.auth-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:18px;width:100%;max-width:560px;padding:22px;overflow-x:hidden}
.auth-card--center{box-shadow:0 10px 40px rgba(0,0,0,.25)}
.card-brand{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:6px}
.logo{width:58px;height:58px;display:block} /* 58px everywhere */
.brand-text{font-weight:800;letter-spacing:.3px}
.qr-box{width:32px;height:32px;border-radius:6px;border:1px solid var(--border);background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 6px,var(--surface) 6px,var(--surface) 12px)}
.title{margin:6px 0 12px}

/* Forms */
.form{display:none}.form.active{display:block}
.field{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.field label{font-weight:700}
.field input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px 12px;outline:none;width:100%;font-size:16px}
.field input:focus{border-color:color-mix(in oklab, var(--accent) 40%, var(--border))}
.password{position:relative}
.toggle-pass{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--bg);cursor:pointer}
.toggle-pass:after{content:"👁";display:block;text-align:center;line-height:34px;font-size:16px;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.checkbox{display:flex;align-items:center;gap:8px}
.mt8{margin-top:8px}
.full{width:100%}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 14px;border:1px solid var(--border);background:transparent;color:var(--text);font-weight:800;cursor:pointer;font-size:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#111}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--surface)}
.btn.ghost:hover{filter:brightness(1.02)}
.alert{background:#2a1a1a;border:1px solid #5a2a2a;color:#ffdcdc;padding:10px 12px;border-radius:10px;margin-bottom:8px}

/* Divider */
.or{display:flex;align-items:center;gap:8px;margin:14px 0;color:var(--muted)}
.or:before,.or:after{content:"";height:1px;background:var(--border);flex:1}

/* Socials */
.socials{display:flex;flex-direction:column;gap:10px;width:100%}
.socials .btn{width:100%;max-width:100%;height:48px;border-radius:12px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Strength Bar */
.strength{height:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-top:6px}
.strength span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f87171,#f59e0b,#10b981);transition:width .3s ease}

/* Footer note */
.foot-note{margin-top:14px;text-align:center}

/* Mobile */
@media (max-width:560px){
  .center-wrap{padding:0;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
  .auth-card{border-radius:0;max-width:none;min-height:100svh;height:auto;padding:16px;display:flex;flex-direction:column;gap:6px}
  .card-brand{margin-bottom:2px}
  .field{margin:10px 0}
  .btn{padding:12px 12px}
  .btn.primary.full{height:48px}
  .socials{gap:8px;margin-top:6px;margin-bottom:8px}
  .socials .btn{height:48px}
  .or{margin:12px 0}
}
@media (max-width:360px){
  .auth-card{padding:14px}
  .logo{width:52px;height:52px} /* tiny devices */
}
section,header,footer{overflow-x:clip}