/* ============================================================
   VTUQuick — Auth Pages CSS
   Matches dashboard violet/amber theme
   Plus Jakarta Sans font
============================================================ */
:root {
  --pri:#7c3aed; --pri2:#9f67ff; --pri3:#ede9fe;
  --sec:#f59e0b; --grn:#10b981; --red:#ef4444;
  --bg:#faf9ff; --dark:#1e1b4b; --dark2:#312e81;
  --txt:#1e1b4b; --txt2:#4c4580; --muted:#9896b8;
  --border:#e8e4ff; --border2:#d1caf8;
  --ff:'Plus Jakarta Sans',sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-font-smoothing:antialiased }

html, body {
  height:auto;
  min-height:100vh;
}
body {
  font-family:var(--ff);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:linear-gradient(135deg,#5b21b6 0%,#7c3aed 50%,#8b5cf6 100%);
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
}
body::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(253,230,138,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(16,185,129,.14) 0%, transparent 60%);
}

/* ── Auth wrap + card ── */
.auth-wrap { width:100%; max-width:440px; position:relative; z-index:1; }
.auth-card {
  background:#fff; border-radius:20px; padding:40px 36px;
  box-shadow:0 24px 80px rgba(30,27,75,.35);
}

/* ── Logo ── */
.auth-logo {
  display:flex; align-items:center; gap:10px;
  font-weight:900; font-size:1.4rem; color:var(--dark);
  text-decoration:none; margin-bottom:28px;
}
.logo-mark {
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(135deg,var(--pri),var(--pri2));
  display:flex; align-items:center; justify-content:center;
  font-size:.86rem; font-weight:900; color:#fff;
  box-shadow:0 4px 12px rgba(124,58,237,.4);
  flex-shrink:0;
}
.auth-logo span { color:var(--dark) }
.auth-logo em   { color:var(--pri); font-style:normal }
.logo-fallback  { display:flex; align-items:center; gap:10px; }

/* ── Headings ── */
h1 {
  font-size:1.7rem; font-weight:900; color:var(--dark);
  margin-bottom:6px; letter-spacing:-.02em;
}
.auth-sub {
  color:var(--muted); font-size:.88rem;
  margin-bottom:26px; line-height:1.6;
}

/* ── Alerts ── */
.alert {
  border-radius:10px; padding:12px 15px;
  font-size:.87rem; margin-bottom:18px;
  line-height:1.55; font-weight:700;
}
.alert a { font-weight:800; text-decoration:underline; }
.alert-error   { background:#7f1d1d; border:1.5px solid #f87171; color:#fff; }
.alert-error a { color:#fca5a5; }
.alert-success { background:#065f46; border:1.5px solid #34d399; color:#fff; }
.alert-success a { color:#6ee7b7; }
.alert-warning { background:#78350f; border:1.5px solid #fbbf24; color:#fff; }

/* ── Form groups ── */
.form-group { margin-bottom:18px; }
.form-group label {
  display:block; font-size:.76rem; font-weight:800;
  color:var(--txt2); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:7px;
}
.form-group input {
  width:100%; background:var(--bg);
  border:1.5px solid var(--border); color:var(--txt);
  border-radius:10px; padding:12px 14px;
  font-size:.93rem; font-family:var(--ff);
  outline:none; transition:all .18s;
}
.form-group input:focus {
  border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(124,58,237,.1);
}
.form-group input::placeholder { color:var(--muted) }

/* ── Submit button ── */
.btn-submit {
  width:100%;
  background:linear-gradient(135deg,var(--pri),var(--pri2));
  color:#fff; font-family:var(--ff); font-size:.95rem;
  font-weight:800; border:none; border-radius:50px;
  padding:13px; cursor:pointer; transition:all .2s;
  box-shadow:0 4px 16px rgba(124,58,237,.35);
  margin-top:4px;
}
.btn-submit:hover { opacity:.92; transform:translateY(-1px); }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Footer link ── */
.auth-footer {
  text-align:center; color:var(--muted);
  font-size:.87rem; margin-top:22px;
}
.auth-footer a { color:var(--pri); text-decoration:none; font-weight:700; }
.auth-footer a:hover { text-decoration:underline; }

/* ── Forgot password link ── */
.forgot-link {
  display:block; text-align:right;
  color:var(--pri); font-size:.84rem;
  font-weight:700; text-decoration:none;
  margin-bottom:18px; margin-top:-8px;
}
.forgot-link:hover { text-decoration:underline; }

/* ── Two-col name fields ── */
.name-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── Divider ── */
.auth-divider {
  display:flex; align-items:center; gap:12px;
  margin:20px 0; color:var(--muted); font-size:.82rem;
}
.auth-divider::before,
.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Responsive ── */
@media (max-width:480px) {
  .auth-card { padding:28px 18px; }
  h1 { font-size:1.45rem; }
  .name-row { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  body {
    align-items:flex-start;
    padding:16px 14px 40px;
  }
  .auth-wrap { margin-top:10px; }
}