/* Auth pages (neutral by default, validate only when interacted) */

body.auth{
  margin:0;
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 600px at 15% -20%, rgba(58,102,255,.14), transparent),
    radial-gradient(1000px 700px at 120% 120%, rgba(97,198,118,.10), transparent),
    var(--bg);
  display:grid;
  place-items:center;
  padding:4vh 16px;
}

/* Card */
.auth-card, .panel{
  width:min(520px, 100%);
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

/* Brand header */
.brand{ display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.brand__logo{ display:block; height:54px; width:auto; }
.brand__tagline{ margin:8px 0 0; text-align:center; color:var(--muted); font-size:13px; }

/* Headings */
h1{ margin:0 0 12px; font-weight:800; font-size:28px; letter-spacing:.3px; }
h1 .accent-blue  { color:var(--brand-blue); }
h1 .accent-green { color:var(--brand-green); }

/* Messages (top banners) */
.info, .success, .error{
  margin:8px 0 14px; padding:10px 12px;
  border-radius:10px; border:1px solid transparent; font-size:14px;
}
.info    { background:rgba(58,102,255,.12); border-color:rgba(58,102,255,.28); }
.success { background:rgba(42,211,139,.12); border-color:rgba(42,211,139,.28); color:#8FF0BE; }
.error   { background:rgba(255,107,107,.14); border-color:rgba(255,107,107,.28); color:#FF9B9B; }

/* Form */
form .field{ display:grid; gap:6px; margin:12px 0 }
label{ font-size:13px; color:var(--muted) }

input[type="text"], input[type="email"], input[type="password"]{
  width:100%; box-sizing:border-box;
  padding:12px 14px; border:1px solid var(--border);
  background:#0E1320; color:var(--text); border-radius:10px; outline:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{ color:#7f8798 }
input:focus{ border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--focus-ring) }

/* Per-field hints (small) – hidden by default */
.hint{ display:none; font-size:12px; border-radius:8px; padding:8px 10px; }
.hint.error{ background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.28); color:#FF9B9B; }
.hint.ok{ background:rgba(42,211,139,.10); border:1px solid rgba(42,211,139,.25); color:#8FF0BE; }

/* Validation styles (applied by JS ONLY when touched/validated) */
input.is-invalid{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.18) }
input.is-valid  { border-color:#2ad38b; box-shadow:0 0 0 3px rgba(42,211,139,.18) }
.field.show-error .hint.error{ display:block }
.field.show-ok    .hint.ok{ display:block }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:12px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; font-weight:700; line-height:1; user-select:none;
}
.btn[disabled]{ opacity:.55; cursor:not-allowed }
.btn-primary{ background:var(--brand-blue); color:#fff; border-color:var(--brand-blue) }
.btn-primary:hover{ filter:brightness(.96) }
.btn-primary:active{ transform:translateY(1px) }
.btn-ghost{ background:transparent; color:var(--brand-blue); border:0; padding:0 }

.actions{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:12px }
.small{ font-size:13px; color:var(--muted) }
.center{ text-align:center }
.footer-note{ margin-top:16px; font-size:12px; color:var(--muted); text-align:center }

/* Social auth */
.social{ margin:6px 0 12px; display:grid; gap:12px; }
.btn-social{
  background:#fff; color:#1f1f1f; border:1px solid #e1e4eb;
  font-weight:700; box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.btn-social:hover{ background:#f7f8fb }
.btn-apple{
  background:#0b0b0b; color:#fff; border-color:#1a1a1a;
}
.btn-apple:hover{ background:#141414 }
.btn-guest{
  background:transparent; color:var(--muted); border:1px solid var(--border);
}
.btn-guest:hover{ color:var(--text); border-color:#3b465c }
.btn-email{
  background:transparent; color:var(--brand-blue); border:1px dashed var(--border);
}
.btn-email:hover{ border-color:var(--brand-blue); }
.icon-google{
  width:16px; height:16px; display:inline-block; border-radius:50%;
  background:
    conic-gradient(#ea4335 0 90deg,#fbbc05 90deg 180deg,#34a853 180deg 270deg,#4285f4 270deg 360deg);
}
.divider{ position:relative; text-align:center; font-size:12px; color:var(--muted); }
.divider::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid var(--border); transform:translateY(-50%);
}
.divider span{
  position:relative; padding:0 10px; background:var(--card-bg);
}