/* Login / account page. Builds on site.css. */
.muted { color: var(--muted); }
.auth-wrap { min-height: calc(100vh - 220px); min-height: calc(100dvh - 220px); display: grid; place-items: center; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.auth { width: min(440px, 100%); padding: clamp(1.6rem, 5vw, 2.4rem); text-align: center; animation: rise .4s both; }
.auth h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); margin-top: 1rem; }
.auth p { margin: .4rem 0 1.4rem; }
.logo.big { width: 56px; height: 56px; border-radius: 16px; font-size: 1.6rem; margin: 0 auto; }
.avatar { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: var(--grad); font-size: 2rem; font-weight: 800; text-transform: uppercase; }
form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
form label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--muted); }
form label small { font-size: .78rem; }
form input:not([type="checkbox"]) {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 16px; color: var(--text);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s;
}
form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 92, 255, .25); }
.pw { position: relative; display: block; }
.pw input { padding-right: 3rem !important; }
.eye { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: .4rem; border-radius: 8px; opacity: .7; }
.eye:hover, .eye.on { opacity: 1; }
.check { flex-direction: row !important; align-items: center; gap: .5rem !important; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.error { margin: 0 !important; padding: .7rem .9rem; border-radius: 12px; background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .45); color: #fecaca; font-size: .9rem; }
.btn.full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.acc-actions { display: flex; flex-direction: column; gap: .6rem; }
.acc-actions .btn { justify-content: center; }
.change-pw { margin-top: 1.6rem; text-align: left; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.change-pw summary { cursor: pointer; color: var(--muted); margin-bottom: 1rem; }