/* ═══════════════ Login ═══════════════ */
.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100dvh;
}

/* ── Brand panel ── */
.auth-brand {
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-brand::before {
  content: '';
  position: absolute;
  inset-inline-end: -120px;
  top: -140px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,145,.18), transparent 66%);
}
.auth-brand::after {
  content: '';
  position: absolute;
  inset-inline-start: -90px;
  bottom: -160px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,145,.10), transparent 68%);
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-logo { height: 34px; width: auto; }

.auth-brand-copy h2 {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.auth-brand-copy ul {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.auth-brand-copy li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}
.auth-brand-copy li i {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(0,255,145,.13);
  color: var(--accent-mint);
  font-size: 13px;
  flex-shrink: 0;
}
.auth-brand-foot {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  font-family: var(--font-en);
}

/* ── Form panel ── */
.auth-form {
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 32px 24px;
  position: relative;
}
.auth-lang {
  position: absolute;
  top: 22px;
  inset-inline-end: 24px;
}
.auth-box {
  width: 100%;
  max-width: 372px;
  animation: rise .4s var(--ease) both;
}
.auth-logo-sm { height: 30px; width: auto; margin-bottom: 26px; }
.auth-box h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.auth-sub { font-size: 13.5px; color: var(--tx-3); margin-top: 3px; }

.input-icon { position: relative; }
.input-icon > i {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%; transform: translateY(-50%);
  color: var(--tx-4);
  font-size: 13px;
  pointer-events: none;
}
.input-icon .input { padding-inline-start: 38px; padding-inline-end: 38px; }
.input-icon .reveal {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  color: var(--tx-4);
  font-size: 12px;
}
.input-icon .reveal:hover { color: var(--tx-2); background: var(--surface-2); }

/* Arrow points "forward" in each direction */
.auth-arrow { transition: transform var(--fast); }
html[dir="ltr"] .auth-arrow { transform: rotate(180deg); }
#lg-btn:hover .auth-arrow { transform: translateX(-3px); }
html[dir="ltr"] #lg-btn:hover .auth-arrow { transform: rotate(180deg) translateX(-3px); }

.auth-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--warn-bg);
  border: 1px solid #f3d9a8;
  color: #8a4c05;
  border-radius: var(--r);
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form { min-height: 100dvh; }
}