/* ── Login (auth/login.php), in the dashboard style. Other auth pages still use auth.css alone. ── */
.lg-page {
  --hd-ink: #1c1d1c;
  --hd-muted: #6b6c66;
  --hd-accent: #ffd653;
  --hd-accent-hover: #f0c42a;
  --hd-glow: rgba(255,222,110,.55);
  --hd-glow-soft: rgba(255,236,170,.45);
  --hd-warm: #f7f1dc;
  --hd-dark: #252623;
  width: 100%;
  color: var(--hd-ink);
}

.lg-page[data-skin="green"] {
  --hd-accent: #8fd5a0;
  --hd-accent-hover: #6fc485;
  --hd-glow: rgba(143,213,160,.5);
  --hd-glow-soft: rgba(196,236,205,.5);
  --hd-warm: #e6f2e9;
}

.lg-page[data-skin="blue"] {
  --hd-accent: #9cc3f5;
  --hd-accent-hover: #7aaef0;
  --hd-glow: rgba(156,195,245,.5);
  --hd-glow-soft: rgba(204,224,250,.5);
  --hd-warm: #e7eef8;
}

/* Page background: a deeper shade of the skin, as on the dashboard. */
body.lg-body {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.3), transparent 40%),
    linear-gradient(165deg, #dcc888 0%, #cdb46b 55%, #bfa25a 100%);
  background-attachment: fixed;
}

body.lg-body:has(.lg-page[data-skin="green"]) {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.3), transparent 40%),
    linear-gradient(165deg, #a9cdb2 0%, #8fbb9b 55%, #7aa887 100%);
  background-attachment: fixed;
}

body.lg-body:has(.lg-page[data-skin="blue"]) {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.3), transparent 40%),
    linear-gradient(165deg, #aec3e2 0%, #93add6 55%, #7f9bc8 100%);
  background-attachment: fixed;
}

.lg-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 14px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 40px;
  background:
    radial-gradient(circle at 100% 100%, var(--hd-glow), transparent 42%),
    radial-gradient(circle at 100% 0%, var(--hd-glow-soft), transparent 35%),
    linear-gradient(135deg, #ebebe8 0%, #f2f1ed 45%, var(--hd-warm) 100%);
  box-shadow: 0 40px 90px rgba(40,46,60,.32), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Left: dark intro panel */
.lg-intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 34px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 100%, var(--hd-glow), transparent 55%),
    var(--hd-dark);
  color: #fff;
}

.lg-brand {
  align-self: flex-start;
  padding: 8px 18px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.lg-brand span,
.lg-logo-mark span { color: var(--hd-accent); }

.lg-intro-text { margin-top: auto; }
.lg-intro h2 { margin: 0; color: #fff; font-size: clamp(30px, 3.4vw, 42px); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.lg-intro p { margin: 14px 0 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.55; }

.lg-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.lg-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.lg-points b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--hd-accent);
  color: var(--hd-ink);
  font-size: 13px;
  font-weight: 500;
}

/* Right: the form card */
.lg-card {
  padding: 34px 32px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 30px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(38,43,50,.05);
}

.lg-logo { display: none; margin-bottom: 22px; }
.lg-logo-mark { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.lg-logo-sub { margin-top: 2px; color: var(--hd-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.lg-title { margin: 0; color: var(--hd-ink); font-size: 30px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.lg-sub { margin: 8px 0 24px; color: #3c3d38; font-size: 14px; }

.lg-error {
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.8);
  border-left: 5px solid #b03030;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  color: #8f2525;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

.lg-oauth { display: grid; gap: 8px; }

.lg-page .google-login-btn,
.lg-page .github-login-btn {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(32,33,31,.06);
}

.lg-page .google-login-btn,
.lg-page .github-login-btn { background: #fff; color: var(--hd-ink); }
.lg-page .google-login-btn:hover,
.lg-page .github-login-btn:hover { background: #fff; color: var(--hd-ink); box-shadow: 0 0 0 2px var(--hd-accent), 0 8px 18px rgba(32,33,31,.1); }
.lg-page .google-login-btn:focus-visible,
.lg-page .github-login-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--hd-accent); }

.lg-divider {
  position: relative;
  margin: 20px 0;
  color: var(--hd-muted);
  font-size: 12px;
  text-align: center;
}

.lg-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(32,33,31,.2);
}

.lg-divider span {
  position: relative;
  padding: 2px 12px;
  border-radius: 999px;
  background: #f4f3ef;
}

.lg-form { display: grid; gap: 14px; }
.lg-field { display: grid; gap: 7px; }
.lg-field > span { margin-left: 14px; color: #3c3d38; font-size: 13px; }

.lg-input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(32,33,31,.12);
  border-radius: 999px;
  background: #fff;
  color: var(--hd-ink);
  font: inherit;
  font-size: 14.5px;
}

.lg-input:focus { outline: 0; border-color: transparent; box-shadow: 0 0 0 2px var(--hd-accent); }

.lg-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: #20211f;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(32,33,31,.18);
  transition: background .15s, color .15s, transform .15s;
}

.lg-submit:hover { transform: translateY(-1px); background: var(--hd-accent); color: var(--hd-ink); }
.lg-submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--hd-accent); }

/* Phones and small tablets: form only, with the logo on top. */
@media (max-width: 820px) {
  .lg-shell { grid-template-columns: minmax(0, 1fr); max-width: 460px; padding: 10px; border-radius: 32px; }
  .lg-intro { display: none; }
  .lg-logo { display: block; }
  .lg-card { padding: 28px 22px; border-radius: 24px; }
}

/* ── Single-card auth pages: forgot password, reset password, verify email ── */
.lg-shell.lg-single { grid-template-columns: minmax(0, 1fr); max-width: 470px; padding: 10px; border-radius: 34px; }

.lg-page .auth-card.lg-card {
  max-width: none;
  padding: 34px 30px 26px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(38,43,50,.05);
  overflow: visible;
}

.lg-page .auth-card.lg-card::before { display: none; }

.lg-page .auth-logo { margin-bottom: 26px; text-align: left; }
.lg-page .auth-logo-mark { display: inline-block; padding: 7px 18px; border: 1.5px solid rgba(32,33,31,.45); border-radius: 999px; color: var(--hd-ink); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.lg-page .auth-logo-mark .v { color: var(--hd-accent-hover); }
.lg-page .auth-logo-sub { margin: 8px 0 0 4px; color: var(--hd-muted); font-size: 11px; letter-spacing: .1em; }

.lg-page .auth-title { margin-bottom: 8px; color: var(--hd-ink); font-size: 30px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.lg-page .auth-sub { margin-bottom: 22px; color: #3c3d38; font-size: 14px; line-height: 1.5; }

.lg-page .alert {
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 0;
  border-left: 5px solid var(--hd-muted);
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  color: var(--hd-ink);
  font-size: 13.5px;
  line-height: 1.5;
}

.lg-page .alert-success { border-left-color: #1f7a57; color: #1f7a57; }
.lg-page .alert-error { border-left-color: #b03030; color: #8f2525; }

.lg-page .form-group { margin-bottom: 14px; }
.lg-page .form-label { margin: 0 0 7px 14px; color: #3c3d38; font-size: 13px; font-weight: 400; }

.lg-page .form-input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(32,33,31,.12);
  border-radius: 999px;
  background: #fff;
  color: var(--hd-ink);
  font: inherit;
  font-size: 14.5px;
}

.lg-page .form-input:focus { outline: 0; border-color: transparent; box-shadow: 0 0 0 2px var(--hd-accent); }

.lg-page .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: #20211f;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(32,33,31,.18);
  transition: background .15s, color .15s, transform .15s;
}

.lg-page .btn-primary:hover { transform: translateY(-1px); background: var(--hd-accent); color: var(--hd-ink); }

.lg-page .auth-link { margin-top: 20px; text-align: center; font-size: 13.5px; }
.lg-page .auth-link a { color: var(--hd-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--hd-accent-hover); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lg-page .auth-link a:hover { text-decoration-color: var(--hd-ink); }

@media (max-width: 820px) {
  .lg-page .auth-card.lg-card { padding: 28px 22px 22px; }
}