/* ── Login page — glassmorphism v2 (aurora / gold) ──────────────── */
/* Dark violet aurora background with vivid color orbs; the sign-in
   card is heavily frosted glass with orbs bleeding through the blur. */

body.login-page {
  margin: 0;
  /* 100% (not 100vh) — mineledger.css's html-level `zoom` scale-down makes
     vh resolve against the real device viewport and come up short; % of
     the already-zoomed, explicitly height:100% html/body box is correct. */
  min-height: 100%;
  background:
    radial-gradient(1000px 700px at 85% 15%, rgba(124, 92, 255, .30), transparent 60%),
    radial-gradient(900px 650px at 8% 88%, rgba(217, 70, 160, .22), transparent 60%),
    linear-gradient(150deg, #2A1650 0%, #1B1038 52%, #0F0A1F 100%);
}

.login-shell {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  position: relative;
  overflow: hidden;
}

/* Language dropdown — shared component (.lang-dd in mineledger.css), just
   positioned here on the shell itself (not the brand panel) so it stays
   visible even when the brand panel is hidden on mobile. */
.login-lang-pos { position: absolute; top: 24px; right: 24px; z-index: 20; }
@media (max-width: 560px) {
  .login-lang-pos { top: 14px; right: 14px; }
}

/* ── Left brand panel ───────────────────────────────────────────── */
.login-brand {
  color: #fff;
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* Vivid aurora orbs (repurposed decorative rings) */
.login-brand__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.login-brand__ring--1 {
  top: -120px; right: -80px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(246, 178, 60, .50), transparent 62%);
  animation: orb-drift 16s var(--ease) infinite alternate;
}
.login-brand__ring--2 {
  bottom: -160px; left: -100px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(217, 70, 160, .45), transparent 62%);
  animation: orb-drift 20s var(--ease) infinite alternate-reverse;
}
@keyframes orb-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-40px, 30px); }
}

/* Faceted crystal shards — angular glass, on the mineral theme */
.login-brand::before,
.login-brand::after {
  content: "";
  position: absolute;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 70%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.login-brand::before {
  width: 170px; height: 210px;
  top: 13%; right: 9%;
  clip-path: polygon(50% 0%, 96% 32%, 74% 100%, 22% 92%, 4% 30%);
  transform: rotate(-14deg);
}
.login-brand::after {
  width: 90px; height: 115px;
  bottom: 17%; right: 24%;
  clip-path: polygon(50% 0%, 100% 40%, 68% 100%, 12% 82%, 8% 28%);
  transform: rotate(22deg);
}

/* Mineral glints — tiny gold sparks in the rock */
.login-glint {
  position: absolute;
  width: 6px; height: 6px;
  background: #F6C667;
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(246, 198, 103, .85);
  pointer-events: none;
  animation: glint-twinkle 4s ease-in-out infinite;
}
.login-glint:nth-of-type(1) { top: 22%; left: 12%; }
.login-glint:nth-of-type(2) { top: 12%; left: 46%; width: 4px; height: 4px; animation-delay: 1.2s; }
.login-glint:nth-of-type(3) { top: 58%; left: 72%; animation-delay: 2.1s; }
.login-glint:nth-of-type(4) { top: 76%; left: 30%; width: 4px; height: 4px; animation-delay: .6s; }
.login-glint:nth-of-type(5) { top: 40%; left: 88%; width: 5px; height: 5px; animation-delay: 2.8s; }
@keyframes glint-twinkle {
  0%, 100% { opacity: .15; }
  50%      { opacity: .95; }
}

/* Logo row */
.login-brand__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.login-brand__mark {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 8px 24px rgba(10, 6, 24, .45);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.login-brand__img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 3px;
}

.login-brand__name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1.2;
}

.login-brand__sub {
  font-size: 11px;
  color: rgba(224, 213, 245, .70);
  margin-top: 3px;
}

/* Hero copy */
.login-brand__hero { position: relative; max-width: 440px; z-index: 1; }

/* Gold eyebrow line above the headline */
.login-brand__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F6C667;
  margin-bottom: 14px;
}
.login-brand__eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #F6C667, rgba(246, 198, 103, 0));
}

.login-brand__headline {
  color: #fff;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Gold → pink gradient text */
.login-brand__accent {
  background: linear-gradient(92deg, #F6C667 10%, #F08FB6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-brand__tagline {
  color: rgba(224, 213, 245, .72);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 22px;
}

/* Feature chips — glass pills */
.login-brand__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.login-chip {
  font-size: 12px;
  font-weight: 500;
  color: #EFE9FA;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.login-chip::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #F6C667;
  margin-right: 7px;
  vertical-align: 1px;
  opacity: .85;
}

/* Stat — glass tile */
.login-brand__stats {
  display: flex;
  gap: 16px;
}

.login-stat {
  padding: 14px 20px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px rgba(10, 6, 24, .30);
}

.login-stat__num {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  color: #F6C667;
  line-height: 1.1;
}

.login-stat__label {
  font-size: 11.5px;
  color: rgba(224, 213, 245, .70);
  margin-top: 2px;
}

/* Footer note */
.login-brand__footer {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .38);
  position: relative;
  z-index: 1;
}

/* ── Right panel: frosted-glass sign-in card ────────────────────── */
.login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
}

/* Vivid orbs tucked BEHIND the card so color bleeds through the blur */
.login-form-panel::before,
.login-form-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}
.login-form-panel::before {
  width: 340px; height: 340px;
  top: 12%; left: 6%;
  background: radial-gradient(circle, rgba(246, 178, 60, .55), transparent 62%);
}
.login-form-panel::after {
  width: 320px; height: 320px;
  bottom: 8%; right: 4%;
  background: radial-gradient(circle, rgba(124, 92, 255, .55), transparent 62%);
}

.login-form-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 40px 36px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .14));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, .45);
  box-shadow:
    0 30px 70px rgba(10, 6, 24, .55),
    inset 0 1px 0 rgba(255, 255, 255, .60);
  animation: card-in .5s var(--ease) both;
  overflow: hidden;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* One-time light sweep across the glass after load */
.login-form-wrap::before {
  content: "";
  position: absolute;
  top: -60%; left: -80%;
  width: 55%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .25), transparent);
  transform: rotate(12deg);
  pointer-events: none;
  animation: card-sheen 2.2s var(--ease) .7s 1 both;
}
@keyframes card-sheen {
  from { left: -80%; }
  to   { left: 150%; }
}

/* Solid fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-form-wrap { background: rgba(243, 239, 250, .97); }
  .login-chip, .login-stat { background: rgba(255, 255, 255, .16); }
  .login-form__title, .login-card__brand-name { color: var(--ink); }
  .login-form__sub { color: var(--ink-2); }
  .login-page .field-label { color: var(--ink-2); }
}

/* Compact brand row inside the card — mobile only */
.login-card__brand {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.login-card__brand .login-brand__mark {
  width: 36px; height: 36px;
  border-radius: 9px;
}
.login-card__brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}

/* Card text — light, on dark glass */
.login-form__title {
  font-size: 23px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.login-form__sub {
  font-size: 13.5px;
  color: rgba(233, 225, 248, .80);
  margin-bottom: 24px;
}

.login-page .field-label { color: rgba(238, 231, 250, .92); }

/* ── Form field groups ──────────────────────────────────────────── */
.login-field-group {
  margin-bottom: 18px;
}

/* Inputs — glass within glass */
.login-page .input {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.login-page .input::placeholder { color: rgba(235, 228, 250, .55); }
.login-page .input:focus {
  background: rgba(255, 255, 255, .22);
  border-color: #F6C667;
  box-shadow: 0 0 0 3px rgba(246, 198, 103, .25);
  outline: none;
}

/* Eye toggle inherits light text */
.login-page .ml-pwd-toggle { color: rgba(235, 228, 250, .75); }
.login-page .ml-pwd-toggle:hover { color: #fff; }

/* Submit button — gold gradient, dark text */
.login-page .btn-primary {
  background: linear-gradient(135deg, #F6C667, #EFA33D);
  border: none;
  color: #241242;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(246, 178, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
.login-page .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 36px rgba(246, 178, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.login-page .btn-primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Password wrapper (positioning context for eye toggle) ──────── */
.login-pwd-wrap {
  position: relative;
}
.login-pwd-wrap .input {
  padding-right: 46px;
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .login-brand__ring,
  .login-glint,
  .login-form-wrap,
  .login-form-wrap::before { animation: none; }
  .login-glint { opacity: .5; }
  .login-page .btn-primary:hover { transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-form-panel { min-height: 100%; padding: 24px; }
  .login-card__brand { display: flex; }
}