/* #region zone:monitor.auth.login-style — หน้าเข้าสู่ระบบ Monitor แบบใหม่ (โทเคนล้วน ทั้งโหมดสว่างและมืด) */
/* Monitor-only refinement layered after login-shell.css (shared, synced with Desk: never edited here). */
.login-shell .login-shell-brand {
  color: var(--text-1);
  padding: clamp(var(--s-8), 5vw, 80px);
  background: var(--u-card);
  border-right: 1px solid var(--border-soft);
}
/* Ambient motion: two soft light blobs drift slowly behind the content. */
.login-shell .login-shell-brand::before,
.login-shell .login-shell-brand::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: auto;
  width: 46vmin;
  height: 46vmin;
  border: 0;
  border-radius: var(--r-full);
  filter: blur(var(--s-8));
  background: none;
  animation: monitor-login-drift 22s ease-in-out infinite alternate;
}
.login-shell .login-shell-brand::before {
  top: -8vmin;
  bottom: auto;
  right: -10vmin;
}
.login-shell .login-shell-brand::after {
  bottom: -12vmin;
  left: -8vmin;
  animation-duration: 30s;
  animation-direction: alternate-reverse;
  opacity: 0.7;
}
@keyframes monitor-login-drift {
  from {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  to {
    transform: translate3d(-6vmin, 5vmin, 0) scale(1.12);
  }
}
.login-shell .login-shell-brand-inner {
  max-width: 440px;
  gap: var(--s-6);
  align-items: stretch;
}
.login-brand-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.login-brand-title {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.login-shell .login-shell-brand-inner .login-brand-head .login-shell-logo {
  width: var(--s-12);
  height: var(--s-12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
}
.login-shell .login-shell-brand .login-shell-eyebrow {
  color: var(--accent-text, var(--accent));
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
}
.login-shell .login-shell-brand .login-shell-name {
  color: var(--text-1);
  font-size: var(--fs-2xl);
  line-height: 1.2;
}
.login-shell .login-shell-brand .login-agent {
  height: clamp(260px, 40vh, 440px);
  filter: drop-shadow(0 var(--s-6) var(--s-8) color-mix(in srgb, var(--accent) 18%, transparent));
}
.login-shell .login-shell-brand .login-shell-tagline {
  color: var(--text-1);
  font-size: var(--fs-xl);
  line-height: 1.6;
  font-weight: var(--fw-medium);
  max-width: 28ch;
}
.login-brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.login-brand-chips li {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--u-card-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.login-shell .login-shell-quote {
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
/* Form side: roomier rhythm, a clear title and one accent hairline. */
.login-shell .login-shell-form {
  gap: var(--s-5);
  padding: clamp(var(--s-8), 5vw, 80px);
  background: var(--surface-1);
  color: var(--text-1);
}
.login-shell .login-shell-form > h2 {
  font-size: clamp(var(--fs-2xl), 2.4vw, 32px);
  line-height: 1.35;
  padding-top: var(--s-4);
  border-top: 3px solid var(--accent);
}
.login-shell .login-shell-form > .login-help {
  color: var(--text-2);
}
.login-shell .login-shell-form .field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.login-shell .login-shell-form .login-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.login-shell .login-shell-form #login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.login-shell .login-shell-form .login-fields[hidden] {
  display: none;
}
.login-shell .login-shell-form #login-submit {
  margin-top: var(--s-2);
}
.login-shell .login-shell-form .login-foot {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
}
@media (max-width: 1024px) {
  .login-shell .login-shell-brand {
    padding: var(--s-8);
  }
  .login-shell .login-shell-form {
    padding: var(--s-12) var(--s-8);
  }
  .login-shell .login-shell-brand .login-agent {
    height: clamp(200px, 32vh, 320px);
  }
}
@media (max-width: 759px) {
  /* Phone: a compact brand strip, then the form straight away; 16px gutter. */
  .login-shell .login-shell-brand {
    padding: var(--s-4);
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .login-shell .login-shell-brand-inner {
    display: flex;
    max-width: none;
    gap: var(--s-3);
    margin: 0;
  }
  .login-shell .login-shell-brand .login-agent,
  .login-shell .login-shell-brand .login-shell-tagline,
  .login-shell .login-shell-brand .login-brand-chips,
  .login-shell .login-shell-quote {
    display: none;
  }
  .login-shell .login-shell-brand-inner .login-brand-head .login-shell-logo {
    width: var(--s-10);
    height: var(--s-10);
  }
  .login-shell .login-shell-form {
    padding: var(--s-6) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom));
    gap: var(--s-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-shell .login-shell-brand::before,
  .login-shell .login-shell-brand::after {
    animation: none;
  }
}
/* #endregion */