/* ============================================================
   Dzenity — sign-in page. Auth column left, ambient art right.
   The art panel owns this page's motion (slow, transform/opacity).
   ============================================================ */

.login-page { min-height: 100vh; }

.lg-shell {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: 100vh;
}

/* ---------------- Left column ---------------- */

.lg-form-col {
  display: flex; flex-direction: column;
  padding: 22px 48px 28px;
  min-height: 100vh;
}

.lg-header { display: flex; align-items: center; justify-content: space-between; }
.lg-header-actions { display: flex; align-items: center; gap: 10px; }

.lg-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 0;
}

.lg-card { width: 100%; max-width: 400px; }

.lg-title {
  font-family: var(--serif);
  font-size: 40px; line-height: 1.15; font-weight: 500;
  letter-spacing: -0.005em;
}
.lg-sub { margin-top: 10px; font-size: 15px; color: var(--ink-2); }

.lg-alert {
  margin-top: 20px;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 500; line-height: 1.45;
}
.lg-alert[hidden] { display: none; }
.lg-alert-danger { background: var(--danger-bg); color: var(--danger); }
.lg-alert-warn { background: var(--warn-bg); color: var(--warn); }

.lg-hint { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }

.lg-demo {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px; color: var(--ink-disabled);
}
.lg-demo a { color: var(--ink-3); }

.lg-form { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.lg-form[hidden], #login-2fa[hidden] { display: none; }
#login-2fa { margin-top: 30px; }
#login-code { letter-spacing: 0.35em; font-variant-numeric: tabular-nums; font-size: 18px; }

.lg-field label {
  display: block;
  font-size: 13.5px; font-weight: 600;
  margin-bottom: 7px;
}
.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg-forgot { font-size: 13px; font-weight: 500; }

.lg-field input[type="email"],
.lg-field input[type="password"],
.lg-field input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line-input);
  background: var(--card);
  color: var(--ink);
  font: inherit; letter-spacing: inherit; font-size: 15px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.lg-field input:hover { border-color: var(--ink-3); }
.lg-field input:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.lg-field input[aria-invalid="true"] { border-color: var(--danger); }
.lg-field .l-error { margin-top: 7px; }

.lg-password-wrap { position: relative; }
.lg-password-wrap input { padding-right: 46px; }
.lg-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.lg-eye:hover { color: var(--ink); background: var(--card-sunken); }
.lg-eye .icon-eye-off { display: none; }
.lg-eye.is-showing .icon-eye { display: none; }
.lg-eye.is-showing .icon-eye-off { display: block; }

.lg-remember {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.lg-remember input {
  width: 17px; height: 17px;
  accent-color: var(--flame);
  cursor: pointer;
}

.lg-submit { width: 100%; height: 48px; font-size: 15.5px; }
.lg-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.lg-submit:disabled:hover { background: var(--flame); }

.lg-alt { margin-top: 26px; font-size: 14px; color: var(--ink-2); }
.lg-support { margin-top: 10px; font-size: 13px; }
.lg-support a { color: var(--ink-3); }
.lg-support a:hover { color: var(--flame); }

.lg-admin-hint {
  margin-top: 34px;
  font-size: 12.5px; color: var(--ink-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Right: ambient art ---------------- */

.lg-art {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 560px at 30% 25%, rgba(250, 93, 0, 0.16), transparent 65%),
    radial-gradient(820px 640px at 80% 70%, rgba(254, 227, 181, 0.6), transparent 70%),
    var(--card-sunken);
  border-left: 1px solid var(--line-canvas);
  display: flex; align-items: flex-end;
  padding: 56px;
}
[data-theme="dark"] .lg-art {
  background:
    radial-gradient(720px 560px at 30% 25%, rgba(251, 106, 20, 0.16), transparent 65%),
    radial-gradient(820px 640px at 80% 70%, rgba(254, 180, 90, 0.07), transparent 70%),
    var(--card-sunken);
}

.lg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: lg-drift 22s var(--ease-in-out) infinite alternate;
}
.lg-orb-1 { width: 340px; height: 340px; left: 8%; top: 12%; background: rgba(250, 93, 0, 0.22); }
.lg-orb-2 { width: 420px; height: 420px; right: -6%; top: 42%; background: rgba(254, 200, 120, 0.35); animation-duration: 27s; animation-delay: -8s; }
.lg-orb-3 { width: 260px; height: 260px; left: 38%; bottom: -6%; background: rgba(250, 140, 40, 0.18); animation-duration: 19s; animation-delay: -14s; }
[data-theme="dark"] .lg-orb-1 { background: rgba(251, 106, 20, 0.15); }
[data-theme="dark"] .lg-orb-2 { background: rgba(254, 180, 90, 0.09); }
[data-theme="dark"] .lg-orb-3 { background: rgba(250, 140, 40, 0.1); }

@keyframes lg-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(46px, -34px) scale(1.12); }
}

.lg-float {
  position: absolute;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px 13px 14px;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
  animation: lg-bob 7s var(--ease-in-out) infinite alternate;
}
.lg-float-1 { left: 14%; top: 22%; }
.lg-float-2 { right: 12%; top: 42%; animation-duration: 8.5s; animation-delay: -3s; }
.lg-float-3 { left: 22%; top: 62%; animation-duration: 6.5s; animation-delay: -5s; }

@keyframes lg-bob {
  from { transform: translateY(0) rotate(-0.4deg); }
  to { transform: translateY(-16px) rotate(0.6deg); }
}

.lg-float-title { font-size: 14px; font-weight: 600; }
.lg-float-meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.lg-tagline {
  position: relative;
  font-family: var(--serif);
  font-size: 26px; line-height: 1.3; font-weight: 500;
  font-style: italic;
  color: var(--ink-2);
  max-width: 380px;
  text-wrap: balance;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .lg-shell { grid-template-columns: minmax(0, 1fr); }
  .lg-art { display: none; }
  .lg-form-col { padding: 18px 22px 24px; }
}