@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");

:root {
  --ds-primary: #2563eb;
  --ds-primary-2: #0284c7;
  --ds-grad: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  --ds-glow: rgba(37, 99, 235, .18);
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
}

body[data-path="login"], body[data-path="update-password"] {
  font-family: "Inter", sans-serif;
  background: #f8fafc;
  min-height: 100vh;
  overflow-x: hidden;
}
body[data-path="login"] .navbar, body[data-path="login"] footer,
body[data-path="login"] .web-footer { display: none; }

#ds-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container { position: relative; z-index: 2; }

/* glass card */
.for-login .page-card, .for-forgot .page-card, .for-email-login .page-card, .for-signup .page-card {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 0; border-radius: 24px;
  padding: 2.75rem 2.5rem; max-width: 460px; position: relative;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, .08), 0 0 0 1px rgba(226, 232, 240, .9);
  animation: ds-rise .8s var(--ds-ease) both;
}
.for-login .page-card::before, .for-forgot .page-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--ds-grad); border-radius: 24px 24px 0 0;
}
.page-card-head .app-logo, .page-card-head img { max-height: 46px; margin-bottom: .5rem; }
.page-card-head h4 {
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.75rem; color: #0f172a;
}

.for-login .form-control, .for-forgot .form-control {
  height: 48px; border-radius: 12px; border: 1px solid #cbd5e1;
  background: rgba(248, 250, 252, .85); transition: all .2s ease;
}
.for-login .form-control:focus, .for-forgot .form-control:focus {
  background: #fff; border-color: var(--ds-primary); box-shadow: 0 0 0 4px var(--ds-glow);
}
.for-login .btn-primary, .for-forgot .btn-primary {
  height: 48px; border: 0; border-radius: 12px; width: 100%;
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1rem;
  background: var(--ds-grad); box-shadow: 0 8px 16px -2px var(--ds-glow);
  transition: transform .25s var(--ds-ease), box-shadow .25s var(--ds-ease);
}
.for-login .btn-primary:hover, .for-forgot .btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 12px 20px -2px rgba(37, 99, 235, .3);
}
.for-login .btn-primary:active { transform: translateY(0) scale(.99); }

@keyframes ds-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Frappe v16 drives colors from --primary; button is .btn-login */
:root { --primary: #2563eb; --primary-color: #2563eb; }
.page-card .btn-login, .page-card .btn-login-with-email-link {
  height: 48px; border-radius: 12px; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1rem;
  transition: transform .25s var(--ds-ease), box-shadow .25s var(--ds-ease);
}
.page-card .btn-login {
  border: 0; color: #fff; background: var(--ds-grad); box-shadow: 0 8px 16px -2px var(--ds-glow);
}
.page-card .btn-login:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -2px rgba(37, 99, 235, .3); color: #fff; }
.page-card .btn-login:active { transform: scale(.99); }
.page-card .btn-login-with-email-link { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; }
.page-card .btn-login-with-email-link:hover { background: #e2e8f0; }
.page-card .form-control { height: 48px; border-radius: 12px; border: 1px solid #cbd5e1; background: rgba(248,250,252,.85); transition: all .2s ease; }
.page-card .form-control:focus { background: #fff; border-color: var(--ds-primary); box-shadow: 0 0 0 4px var(--ds-glow); }
.page-card-head .app-logo { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 4px 14px rgba(2,132,199,.25); }
.page-card-head { text-align: center; }
.page-card-head h4 { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.75rem; color: #0f172a; }
.page-card-subtitle { color: #64748b; }

/* beat Frappe's own .btn-default specificity */
body .btn.btn-login { background: var(--ds-grad) !important; color: #fff !important; border: 0 !important; }

/* ---- split layout: hero left, form right ---- */
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container { max-width: none; width: 100%; padding: 0; margin: 0; }
body[data-path="login"] .for-login {
  margin-left: 50%; width: 50%; min-height: 100vh; padding: 2rem;
  display: flex; align-items: center; justify-content: center;
}
body[data-path="login"] .for-login .page-card { width: 100%; max-width: 440px; margin: 0; }

#ds-hero {
  position: fixed; inset: 0 50% 0 0; z-index: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 4rem 4.5rem; font-family: "Inter", sans-serif;
}
#ds-hero .ds-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .95rem;
  border-radius: 9999px; background: #eff6ff; color: var(--ds-primary); border: 1px solid #bfdbfe;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  animation: ds-rise .8s var(--ds-ease) both;
}
#ds-hero h1 {
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.03em; color: #0f172a; margin: 1.25rem 0 1rem;
  animation: ds-rise .9s .1s var(--ds-ease) both;
}
#ds-hero h1 em {
  font-style: normal; background: var(--ds-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#ds-hero p { max-width: 30rem; color: #475569; font-size: 1.05rem; line-height: 1.6; animation: ds-rise .9s .2s var(--ds-ease) both; }
#ds-hero ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
#ds-hero li {
  display: flex; align-items: center; gap: .8rem; color: #334155; font-weight: 500;
  animation: ds-rise .9s var(--ds-ease) both;
}
#ds-hero li:nth-child(1) { animation-delay: .3s; } #ds-hero li:nth-child(2) { animation-delay: .4s; } #ds-hero li:nth-child(3) { animation-delay: .5s; }
#ds-hero li b {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: #fff; color: var(--ds-primary); box-shadow: 0 0 0 1px #e2e8f0, 0 4px 10px rgba(15,23,42,.05);
}
@media (max-width: 900px) {
  #ds-hero { display: none; }
  body[data-path="login"] .for-login { margin-left: 0; width: 100%; }
}

/* ---- AI emphasis ---- */
#ds-hero { overflow: hidden; }
#ds-hero .ds-blob {
  position: absolute; width: 520px; height: 520px; left: -120px; bottom: -180px; z-index: -1; opacity: .55; filter: blur(46px);
  background: radial-gradient(circle at 30% 30%, #38bdf8, #2563eb 55%, #818cf8);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: ds-morph 14s ease-in-out infinite;
}
@keyframes ds-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0); }
  33% { border-radius: 58% 42% 38% 62% / 55% 37% 63% 45%; transform: translate(40px, -30px) rotate(60deg); }
  66% { border-radius: 37% 63% 55% 45% / 62% 56% 44% 38%; transform: translate(-20px, 20px) rotate(120deg); }
}
#ds-hero .ds-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-primary); animation: ds-pulse 1.8s ease-in-out infinite; }
@keyframes ds-pulse { 50% { box-shadow: 0 0 0 6px rgba(37,99,235,.18); } }
#ds-hero .ds-prompt {
  margin-top: 2rem; max-width: 30rem; display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem;
  border-radius: 16px; background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px #e2e8f0, 0 12px 28px -12px rgba(37,99,235,.28); color: #0f172a; font-weight: 500; min-height: 3.2rem;
  animation: ds-rise .9s .35s var(--ds-ease) both;
}
#ds-hero .ds-spark { color: var(--ds-primary); }
#ds-hero .ds-caret { width: 2px; height: 1.1em; background: var(--ds-primary); animation: ds-blink 1s steps(1) infinite; }
@keyframes ds-blink { 50% { opacity: 0; } }
#ds-hero ul { display: none; }