:root {
  --epi-font-sans: "Inter", "Segoe UI Variable", "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --epi-font-display: "Inter", "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --login-bg: #f8f9ff;
  --login-text: #0b1c30;
  --login-muted: #52606a;
  --login-primary: #006a37;
  --login-primary-soft: rgba(16, 133, 72, .16);
  --login-card: rgba(255, 255, 255, .9);
  --login-shadow: 0 24px 70px rgba(11, 28, 48, .14), 0 2px 8px rgba(11, 28, 48, .05);
}

html,
body {
  min-height: 100%;
  width: 100%;
}

body[data-page-login="1"] {
  background: var(--login-bg);
  font-family: var(--epi-font-sans);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow: hidden !important;
}

body[data-page-login="1"] main {
  min-height: 100dvh;
  box-sizing: border-box;
}

.login-page {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden !important;
  color: var(--login-text);
  background:
    radial-gradient(circle at 78% 18%, rgba(117, 219, 148, .16), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(0, 106, 55, .11), transparent 25%),
    linear-gradient(135deg, #f8f9ff 0%, #edf6ff 48%, #f8f9ff 100%);
}

.login-ambient,
.ambient-image,
.ambient-grid,
.ambient-orbit,
.login-particles {
  position: absolute;
  inset: 0;
}

.login-ambient {
  pointer-events: none;
  z-index: 0;
}

.ambient-image {
  background: url('/storage/asset/icons/background-autoprice3.jpg') center/cover no-repeat;
  opacity: .11;
  mix-blend-mode: multiply;
  transform: scale(1.06);
  animation: bgFloat 24s ease-in-out infinite;
}

.ambient-grid {
  background-image:
    linear-gradient(rgba(0, 106, 55, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 106, 55, .08) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 48%, rgba(33, 49, 69, .05) 49%, transparent 50% 100%);
  background-size: 76px 76px, 76px 76px, 220px 220px;
  mask-image: radial-gradient(circle at 50% 44%, black 0 48%, transparent 78%);
  opacity: .58;
}

.ambient-orbit {
  width: 46vmax;
  height: 46vmax;
  border: 1px solid rgba(0, 106, 55, .14);
  border-radius: 50%;
  filter: blur(.2px);
  animation: orbitDrift 18s linear infinite;
}

.orbit-one {
  inset: auto auto -21vmax -15vmax;
}

.orbit-two {
  inset: -22vmax -18vmax auto auto;
  animation-duration: 26s;
  animation-direction: reverse;
}

.login-particles {
  width: 100%;
  height: 100%;
}

.login-shell {
  position: relative;
  z-index: 1;
  height: calc(100dvh - 46px);
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 10px 14px 12px;
}

.login-card {
  position: relative;
  width: min(100%, 392px);
  max-height: calc(100dvh - 66px);
  padding: clamp(16px, 3.4vw, 24px);
  border: 1px solid rgba(190, 202, 189, .82);
  border-radius: 14px;
  background: var(--login-card);
  box-shadow: var(--login-shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transform-style: preserve-3d;
  animation: cardIn .68s cubic-bezier(.2, .75, .2, 1) both;
}

.login-card.is-wide {
  width: min(100%, 430px);
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.78) 48%, transparent 58% 100%);
  opacity: .62;
  transform: translateX(-130%);
  animation: cardSweep 6s ease-in-out 1s infinite;
  pointer-events: none;
}

.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(0,106,55,.07);
  pointer-events: none;
}

.brand-wrap,
.login-copy,
.system-badges,
.login-fields,
.login-actions,
.btn-login,
.login-alert,
.auth-note,
.auth-secondary-actions {
  position: relative;
  z-index: 1;
}

.brand-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.login-logo {
  width: min(174px, 58vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(11, 28, 48, .09));
}

.login-copy {
  text-align: center;
}

.system-kicker {
  margin: 0 0 5px;
  color: var(--login-primary);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-copy h1 {
  margin: 0 0 6px;
  color: #061429;
  font-size: clamp(1.32rem, 4vw, 1.7rem);
  font-family: var(--epi-font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.login-copy p {
  max-width: 350px;
  margin: 0 auto;
  color: var(--login-muted);
  font-size: .86rem;
  line-height: 1.38;
}

.login-copy strong {
  color: #102318;
  font-weight: 600;
}

.system-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.system-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 4px 10px;
  border: 1px solid rgba(190, 202, 189, .9);
  border-radius: 8px;
  background: linear-gradient(180deg, #eff4ff, #e2ebfb);
  color: #3e4a40;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.login-alert {
  border-radius: 10px;
  font-size: .8rem;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.login-fields {
  display: grid;
  gap: 12px;
}

.field-group {
  display: grid;
  gap: 6px;
}

.field-group label {
  margin: 0;
  color: #111827;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.input-shell input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(110, 122, 111, .45);
  border-radius: 10px;
  background: rgba(248, 249, 255, .92);
  color: var(--login-text);
  font: inherit;
  font-size: .96rem;
  outline: 0;
  padding: 0 42px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.input-shell input::placeholder {
  color: rgba(82, 96, 106, .76);
}

.input-shell input:hover {
  border-color: rgba(0, 106, 55, .5);
  box-shadow: 0 10px 24px rgba(11, 28, 48, .06);
}

.input-shell input:focus {
  border-color: var(--login-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--login-primary-soft), 0 12px 26px rgba(0, 106, 55, .1);
  transform: translateY(-1px);
}

.input-icon,
.input-hint,
.password-toggle {
  position: absolute;
  z-index: 2;
  color: #5d5e62;
}

.input-icon {
  left: 15px;
  font-size: 1rem;
}

.input-hint {
  right: 15px;
  cursor: help;
}

.password-toggle {
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--login-primary);
  background: rgba(0, 106, 55, .08);
  transform: scale(1.05);
}

.login-actions,
.auth-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 12px 0 14px;
}

.auth-secondary-actions {
  justify-content: center;
  margin: 12px 0 0;
}

.login-actions a,
.auth-secondary-actions a,
.login-footer a {
  color: var(--login-primary);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

.login-actions a:hover,
.auth-secondary-actions a:hover,
.login-footer a:hover {
  color: #108548;
  text-shadow: 0 0 18px rgba(16, 133, 72, .24);
}

.btn-login {
  position: relative;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #00783e 0%, #006a37 48%, #004c28 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 14px 32px rgba(0, 106, 55, .24), inset 0 1px 0 rgba(255,255,255,.2);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn-login:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 20px 44px rgba(0, 106, 55, .3), 0 0 22px rgba(0, 184, 99, .22), inset 0 1px 0 rgba(255,255,255,.25);
  filter: saturate(1.08);
}

.btn-login:active {
  transform: translateY(0) scale(.97);
}

.btn-login:focus-visible {
  outline: 3px solid rgba(0, 106, 55, .28);
  outline-offset: 4px;
}

.btn-login.is-loading {
  pointer-events: none;
}

.btn-login.is-loading .btn-content {
  opacity: .78;
}

.btn-login.is-loading .btn-content i {
  animation: spin .8s linear infinite;
}

.btn-glow {
  position: absolute;
  inset: -40% -20%;
  background:
    linear-gradient(110deg, transparent 20%, rgba(255,255,255,.38) 42%, transparent 62%),
    radial-gradient(circle, rgba(117,219,148,.36), transparent 42%);
  transform: translateX(-65%) rotate(7deg);
  animation: buttonShine 3.2s ease-in-out infinite;
}

.btn-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-ripple {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: translate(-50%, -50%) scale(1);
  animation: ripple .62s ease-out forwards;
  pointer-events: none;
}

.auth-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 106, 55, .16);
  border-radius: 10px;
  background: rgba(0, 106, 55, .06);
  color: #3e4a40;
  font-size: .82rem;
  line-height: 1.5;
}

.login-footer {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(14px, 4vw, 36px);
  border-top: 1px solid rgba(190, 202, 189, .72);
  background: rgba(248, 249, 255, .82);
  backdrop-filter: blur(12px);
  color: #5d5e62;
  font-size: .76rem;
}

.login-footer nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cardSweep {
  0%, 42% { transform: translateX(-130%); }
  58%, 100% { transform: translateX(130%); }
}

@keyframes bgFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1.06); }
  50% { transform: translate3d(0,-16px,0) scale(1.08); }
}

@keyframes orbitDrift {
  to { transform: rotate(360deg); }
}

@keyframes buttonShine {
  0%, 40% { transform: translateX(-70%) rotate(7deg); }
  75%, 100% { transform: translateX(70%) rotate(7deg); }
}

@keyframes ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 620px) {
  body[data-page-login="1"] {
    overflow: hidden !important;
  }

  .login-shell {
    height: calc(100dvh - 38px);
    padding: 8px 10px;
  }

  .login-card {
    width: min(100%, 352px);
    max-height: calc(100dvh - 50px);
    padding: 14px;
  }

  .login-footer {
    min-height: 38px;
    padding: 8px 10px;
    text-align: center;
    justify-content: center;
  }

  .login-footer nav,
  .system-kicker {
    display: none;
  }

  .login-logo {
    width: min(150px, 54vw);
  }

  .login-copy h1 {
    font-size: 1.24rem;
  }

  .login-copy p {
    font-size: .8rem;
  }

  .system-badges {
    margin: 10px 0 12px;
  }

  .system-badges span {
    min-height: 23px;
    padding: 3px 8px;
    font-size: .66rem;
  }
}

@media (max-height: 620px) {
  .ambient-orbit,
  .system-badges,
  .login-footer nav {
    display: none;
  }

  .login-shell {
    height: 100dvh;
    padding: 8px;
  }

  .login-footer {
    display: none;
  }

  .login-card {
    max-height: calc(100dvh - 16px);
  }

  .brand-wrap {
    margin-bottom: 8px;
  }

  .login-logo {
    width: min(136px, 48vw);
  }

  .login-copy p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}