/* ============================================================
   DM — Login page (independent /login route, email code)
   ============================================================ */
.login { position: relative; width: 1440px; height: 900px; background: var(--bg-warm); }

.login .left-panel { position: absolute; left: 0; top: 0; width: 560px; height: 900px; background: var(--teal); overflow: hidden; }
.login .deco-circle { position: absolute; left: 280px; top: 580px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,138,61,0.18); }
.login .logo-square { position: absolute; left: 64px; top: 64px; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; }
.login .logo-square img { width: 34px; height: auto; }
.login .tagline { position: absolute; left: 64px; top: 300px; font-size: 52px; font-weight: 800; line-height: 60px; color: #fff; letter-spacing: -1px; }
.login .l-sub { position: absolute; left: 64px; top: 492px; width: 420px; font-size: 18px; font-weight: 400; line-height: 28px; color: #B8D4CF; }

.login .right-panel { position: absolute; left: 560px; top: 0; width: 880px; height: 900px; background: var(--bg-warm); }

/* Right panel — single column, ONE full-width button (login) */
.login .heading { position: absolute; left: 140px; top: 180px; font-size: 44px; font-weight: 800; line-height: 52px; color: var(--text-dark); letter-spacing: -0.5px; }
.login .r-sub   { position: absolute; left: 140px; top: 256px; width: 560px; font-size: 17px; font-weight: 400; line-height: 26px; color: var(--text-gray); }

/* Step 1: email + send on one row — send is compact (NOT full-width) */
.login .email-row { position: absolute; left: 140px; top: 348px; width: 560px; display: flex; align-items: center; gap: 12px; }
.login .email-input {
  flex: 1; width: auto; height: 56px;
  border-radius: 14px; background: #fff; border: 1.5px solid #E6DBD1;
  display: flex; align-items: center; padding: 0 22px;
  font-size: 16px; color: #998C80; box-sizing: border-box;
}
.login .email-input:focus { outline: none; border-color: var(--brand-orange); color: var(--text-dark); }
.login .send-btn {
  flex: none; width: 132px; height: 56px; border-radius: 14px;
  background: var(--brand-gradient); color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  border: none; cursor: pointer; font-family: inherit;
}
.login .send-btn:disabled { opacity: 0.6; cursor: default; }
.login .msg     { position: absolute; left: 140px; top: 424px; width: 560px; font-size: 14px; font-weight: 500; line-height: 22px; min-height: 22px; }
.login .msg.ok  { color: #0E4F4A; }
.login .msg.err { color: #C2410C; }

/* Step 2: code + login — login is the ONE full-width button */
.login .step2 { position: absolute; left: 140px; top: 472px; width: 560px; display: flex; flex-direction: column; gap: 14px; }
.login .code-input { width: 100%; height: 56px; border-radius: 14px; border: 1.5px solid #E6DBD1; padding: 0 22px; font-size: 16px; letter-spacing: 6px; color: var(--text-dark); box-sizing: border-box; }
.login .code-input:focus { outline: none; border-color: var(--brand-orange); }
.login .verify-btn { width: 100%; height: 56px; border-radius: 16px; background: var(--brand-gradient); color: #fff; font-size: 17px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; }
.login .verify-btn:disabled { opacity: 0.6; cursor: default; }

/* Note + Terms */
.login .note   { position: absolute; left: 140px; top: 760px; font-size: 13px; font-weight: 500; line-height: 20px; color: #998C80; white-space: nowrap; }
.login .terms { position: absolute; left: 140px; top: 820px; font-size: 13px; font-weight: 400; color: #998C80; }

/* Dev access shortcut (no backend needed) */
.login .dev-access { position: absolute; left: 620px; top: 820px; font-size: 13px; font-weight: 600; color: #C9B7A8; text-decoration: none; }
.login .dev-access:hover { color: var(--brand-orange); }

/* Captcha modal (popup — overlays the whole login canvas) */
.captcha-modal { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.captcha-modal[hidden] { display: none; }
.captcha-box { width: 360px; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.25); }
.captcha-title { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
.captcha-body { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.captcha-img { width: 150px; height: 50px; border: 1px solid #E6DBD1; border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; flex: none; }
.captcha-img svg { display: block; width: 100%; height: 100%; }
.captcha-input { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1.5px solid #E6DBD1; padding: 0 16px; font-size: 16px; color: #998C80; box-sizing: border-box; }
.captcha-input:focus { outline: none; border-color: var(--brand-orange); color: var(--text-dark); }
.captcha-actions { display: flex; gap: 12px; }
.captcha-cancel { flex: 1; height: 48px; border-radius: 12px; border: 1.5px solid #E6DBD1; background: #fff; color: #6B7280; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.captcha-confirm { flex: 1; height: 48px; border-radius: 12px; border: none; background: var(--brand-gradient); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }