/* auth.css - login / register styles (mobile-first) */

:root{
  --bg: #f6fbff;
  --card: #ffffff;
  --brand: #0b79d0;
  --muted: #6b7280;
  --radius: 12px;
  --max-width: 460px;
}

/* base */
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: #0b1a2b; }
a { color: var(--brand); text-decoration: none; }
.muted { color: var(--muted); }

/* auth page layout */
.auth-page { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: calc(100vh - 80px); }
.auth-card { width: 100%; max-width: var(--max-width); background: var(--card); padding: 1.25rem; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(2,6,23,0.06); }

/* brand block */
.auth-card__brand { text-align: center; margin-bottom: 0.75rem; }
.auth-card__brand h1 { font-size: 1.25rem; margin: .5rem 0 0; }
.auth-card__brand .muted { margin: 0.25rem 0 0; font-size: .95rem; }

/* form */
.auth-form { display: grid; gap: .75rem; }
.label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .95rem; }
.input { width: 100%; padding: .65rem .75rem; border-radius: 8px; border: 1px solid rgba(2,6,23,0.08); font-size: 1rem; }
.input:focus { outline: none; box-shadow: 0 0 0 3px rgba(11,121,208,0.12); border-color: var(--brand); }

.input-group { display: flex; align-items: center; gap: .5rem; }
.toggle-password { background: transparent; border: 0; color: var(--brand); font-weight: 700; cursor: pointer; padding: .35rem .5rem; border-radius: 6px; }

/* form row */
.form-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .95rem; }
.checkbox { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.checkbox input { width: 16px; height: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border-radius: 8px; font-weight: 700; border: 0; cursor: pointer; }
.btn--primary { background: var(--brand); color: #fff; width: auto; }
.btn--full { width: 100%; }

/* footer / hints */
.auth-card__signup { text-align: center; margin: .5rem 0 0; font-size: .95rem; }

/* responsive */
@media (min-width: 720px) {
  .auth-card { padding: 1.75rem; }
}