/* =====================================================================
   Nirvaan Design System — Login page
   Two-panel premium auth. Depends on ds-tokens.css.
   ===================================================================== */

.ds-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-bg);
  font-family: var(--font-sans);
  color: var(--c-text);
}

/* ---- Left: form panel ---- */
.ds-login-form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--sp-6);
}
.ds-login-card { width: 100%; max-width: 400px; }
.ds-login-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.ds-login-brand img { height: 40px; }
.ds-login-mark { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--aurora); color: #fff; font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; box-shadow: var(--aurora-glow); }
.ds-login-brand .name { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--c-text); }
.ds-login-title { font-size: var(--fs-30); font-weight: var(--fw-bold); line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.02em; }
.ds-login-subtitle { color: var(--c-text-muted); font-size: var(--fs-14); margin-bottom: var(--sp-8); }

.ds-field { margin-bottom: var(--sp-5); }
.ds-field label { display: block; font-size: var(--fs-13); font-weight: var(--fw-semibold); margin-bottom: 6px; color: var(--c-text); }
.ds-input-wrap { position: relative; }
.ds-input-wrap > i.lead-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-subtle); font-size: 18px; pointer-events: none; }
.ds-login input[type="text"],
.ds-login input[type="password"],
.ds-login input[type="email"] {
  width: 100%; height: 46px; padding: 0 44px 0 40px;
  border: 1px solid var(--c-border); border-radius: var(--radius-input);
  background: var(--c-surface); color: var(--c-text); font-size: var(--fs-14);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.ds-login input::placeholder { color: var(--c-text-subtle); }
.ds-login input:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.ds-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--c-text-subtle); cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.ds-pw-toggle:hover { color: var(--c-text); background: var(--c-surface-3); }

.ds-login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); font-size: var(--fs-13); }
.ds-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text-muted); cursor: pointer; }
.ds-remember input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.ds-login-row a { color: var(--c-primary); font-weight: var(--fw-medium); }

.ds-login-btn {
  width: 100%; height: 46px; border: none; border-radius: var(--radius-btn);
  background: var(--c-primary); color: var(--c-primary-contrast);
  font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.ds-login-btn:hover { background: var(--c-primary-hover); box-shadow: var(--shadow-2); }
.ds-login-btn:active { transform: translateY(1px); }
.ds-login-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.ds-login-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: ds-spin .6s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-login-foot { margin-top: var(--sp-8); text-align: center; color: var(--c-text-subtle); font-size: var(--fs-12); }
.ds-login .text-danger, .ds-login label.error { color: var(--c-danger) !important; font-size: var(--fs-12); font-weight: var(--fw-medium);
  display: block; margin-top: 6px; animation: ds-shake .3s var(--ease); }
@keyframes ds-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---- Right: brand visual panel (pure CSS, no image) ---- */
.ds-login-visual {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1b2540 0%, #3b46c9 50%, #6f5cf0 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-12);
}
.ds-login-visual::before, .ds-login-visual::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
.ds-login-visual::before { width: 460px; height: 460px; right: -140px; top: -120px; background: rgba(255,255,255,.14); }
.ds-login-visual::after { width: 320px; height: 320px; left: -100px; bottom: -120px; background: rgba(139,124,246,.4); }
.ds-login-visual .glow { position: absolute; inset: 0;
  background: radial-gradient(600px circle at 30% 20%, rgba(255,255,255,.18), transparent 40%); }
.ds-login-quote { position: relative; z-index: 1; max-width: 460px; color: #fff; }
.ds-login-quote .badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-pill);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .04em; margin-bottom: var(--sp-6); }
.ds-login-quote h2 { color: #fff; font-size: 34px; line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 0 0 var(--sp-4); }
.ds-login-quote p { color: rgba(255,255,255,.82); font-size: var(--fs-16); line-height: 1.6; margin: 0; }
.ds-login-dots { position: absolute; bottom: var(--sp-12); left: var(--sp-12); display: flex; gap: 8px; z-index: 1; }
.ds-login-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.ds-login-dots span.on { width: 26px; border-radius: var(--radius-pill); background: #fff; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .ds-login { grid-template-columns: 1fr; }
  .ds-login-visual { display: none; }
  .ds-login-form-panel { padding: var(--sp-6) var(--sp-5); min-height: 100vh; }
}