/* YamaCRM login — DD Bodega design-125 "Lava Ember Field".
   Scoped to body.login-page so it never touches the rest of the app. */
.login-page {
  --molten: #ff5a0f; --molten-hot: #ffb142; --molten-white: #fff0c8; --crack: #ff7a1a;
  --rock: #100805; --cream: #fbeede; --muted2: #d7b598; --line2: rgba(255,122,26,.2);
  margin: 0; min-height: 100vh; background: var(--rock); color: var(--cream);
  font-family: "Inter", system-ui, sans-serif; overflow: hidden;
}
.login-page .topbar { position: fixed; inset-inline: 0; top: 0; background: transparent; border: 0; backdrop-filter: none; z-index: 5; }
.login-page .brand { color: var(--cream); }
.login-page .brand::before { background: linear-gradient(135deg, var(--molten-hot), var(--molten)); box-shadow: 0 6px 18px -4px rgba(255,90,15,.6); }
.login-page .content { padding: 0; max-width: none; }

.login-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(140% 90% at 50% 120%, #ff5a0f 0%, #c2300a 22%, #3a140a 50%, #15080500 75%),
    linear-gradient(180deg, #14080500 0%, #1a0c06 30%, #2a140b 100%),
    #100805;
}
.lava-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: screen; }
.lava-crack {
  position: absolute; border-radius: 4px; filter: blur(1px);
  background: linear-gradient(90deg, transparent, var(--crack), var(--molten-white), var(--crack), transparent);
  box-shadow: 0 0 24px 6px rgba(255,110,25,.7);
}
.lava-crack--1 { left: 8%; bottom: 14%; width: 42%; height: 5px; transform: rotate(-7deg); animation: pulseCrack 3.2s ease-in-out infinite; }
.lava-crack--2 { right: 6%; bottom: 30%; width: 34%; height: 4px; transform: rotate(6deg); animation: pulseCrack 2.6s ease-in-out infinite .6s; }
.lava-crack--3 { left: 26%; bottom: 8%; width: 50%; height: 6px; transform: rotate(-2deg); animation: pulseCrack 3.8s ease-in-out infinite .3s; }
@keyframes pulseCrack { 0%,100% { opacity: .55; filter: blur(1px) brightness(.9); } 50% { opacity: 1; filter: blur(1px) brightness(1.5); } }
.lava-pulse {
  position: absolute; left: 50%; bottom: -10%; width: 120%; height: 70%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 100%, rgba(255,140,40,.55), rgba(255,90,15,.18) 40%, transparent 70%);
  filter: blur(10px); mix-blend-mode: screen; animation: lavaPulse 4s ease-in-out infinite;
}
@keyframes lavaPulse { 0%,100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }

.login-page .login-wrap { position: relative; z-index: 5; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-page .login-card {
  width: 380px; max-width: 92vw;
  background: linear-gradient(180deg, rgba(42,20,11,.72), rgba(16,8,5,.8));
  border: 1px solid var(--line2); border-radius: 18px; padding: 2.4rem 2rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,177,66,.06);
  backdrop-filter: blur(8px); text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.login-mark {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -.5px;
  background: linear-gradient(120deg, var(--molten-hot), var(--molten));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-sub { color: var(--muted2); margin: .3rem 0 1.6rem; }
.login-page .form-group label { color: var(--muted2); font-family: "Space Grotesk", system-ui, sans-serif; }
.login-page .form-group input {
  background: rgba(0,0,0,.35); border: 1px solid var(--line2); color: var(--cream);
  border-radius: 10px; padding: .8rem .9rem;
}
.login-page .form-group input:focus { border-color: var(--molten-hot); box-shadow: 0 0 0 3px rgba(255,177,66,.2); }
.login-page .alert-danger { background: rgba(255,90,15,.14); color: #ffb59a; border: 1px solid var(--line2); }

.btn-ember {
  width: 100%; margin-top: .4rem; padding: .92rem 1.4rem; border: 0; border-radius: 10px; cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #1a0805;
  background: linear-gradient(135deg, var(--molten), var(--molten-hot));
  box-shadow: 0 10px 34px rgba(255,90,15,.5); transition: transform .2s ease, box-shadow .2s ease;
}
.btn-ember:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(255,90,15,.7); }
.btn-ember:focus-visible { outline: 3px solid var(--molten-hot); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lava-canvas { display: none; }
  .lava-crack, .lava-pulse { animation: none !important; }
}