/* Isolated login surface: dashboard themes/layout and authentication are untouched. */
#login-screen {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr;
  min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: #070b12; color: #e7edf7;
  --text: #e7edf7; --text-2: #9daabd; --text-3: #8492a8;
  --line: #263043; --line-strong: #354159;
}
.login-scene { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.login-scene canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.login-scene-fallback {
  position: absolute; inset: -30%;
  background: radial-gradient(ellipse at 70% 35%, #193c591c, transparent 48%),
    radial-gradient(ellipse at 20% 65%, #34508726, transparent 50%),
    repeating-radial-gradient(ellipse at center, transparent 0 116px, #91b5ec12 117px, transparent 118px 210px);
  transform: rotate(-18deg);
}
.login-scene[data-state="running"] .login-scene-fallback { opacity: .3; }
#login-screen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 340px 365px at 50% 51%, #060a12ed 0%, #060a12c9 55%, #060a1200 100%),
    linear-gradient(0deg, #070b12c9, transparent 20%, transparent 78%, #070b12c2);
}
#login-screen .login-art { position: absolute; inset: 0; min-height: 0; overflow: visible; pointer-events: none; }
#login-screen .art-copy { inset: 35px auto auto 42px; max-width: 275px; z-index: 1; }
#login-screen .art-copy .brand-mark { width: 35px; height: 35px; margin: 0 0 17px; border-radius: 11px; }
#login-screen .art-copy .brand-mark-ring { width: 23px; height: 23px; }
#login-screen .art-copy .brand-mark-core { width: 8px; height: 8px; }
#login-screen .art-copy .eyebrow { color: #9eb4d0; font-size: 9px; letter-spacing: .18em; }
#login-screen .art-copy h1 { margin: 13px 0 10px; font-size: 25px; font-weight: 600; line-height: 1.24; letter-spacing: -.045em; }
#login-screen .art-copy h1 span { color: #8cb9e9; }
#login-screen .art-description { display: block; font-size: 11px; line-height: 1.7; color: #8493aa; max-width: 245px; }
#login-screen .art-signal { position: fixed; bottom: 31px; left: 42px; margin: 0; font-size: 10px; color: #8e9bb0; }
#login-screen .art-signal .signal-dot { width: 5px; height: 5px; box-shadow: 0 0 0 4px #45d2bd0d; }
#login-screen .login-panel-wrap {
  position: static; z-index: 2; width: 100%; min-height: 100svh;
  display: grid; place-items: center; padding: 140px 24px 90px; background: transparent; pointer-events: none;
}
#login-screen .login-panel {
  pointer-events: auto; width: min(100%, 428px); margin: 0; padding: 34px;
  border: 1px solid #a5bfe51f; border-radius: 23px;
  background: linear-gradient(150deg, #172131a8, #0b121edb 62%);
  box-shadow: 0 22px 90px #00000057, inset 0 1px 0 #ffffff06;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#login-screen .mobile-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 32px; color: #eff4ff; font-size: 15px; font-weight: 600; letter-spacing: -.035em; }
#login-screen .mobile-brand .brand-symbol { width: 27px; height: 27px; border-radius: 9px; border-color: #45618b; background: #6e9efa0b; }
#login-screen .login-kicker { color: #8a9ab1; font-size: 9px; letter-spacing: .16em; gap: 8px; }
#login-screen .login-panel h2 { margin: 14px 0 10px; font-size: 32px; font-weight: 600; line-height: 1.18; letter-spacing: -.05em; color: #eff4ff; }
#login-screen .login-lede { color: #9aa8bc; font-size: 12px; margin-bottom: 27px; line-height: 1.7; }
#login-screen .pin-form { gap: 10px; }
#login-screen .pin-form label { color: #bcc8da; font-size: 11px; font-weight: 400; }
#login-screen .pin-input-wrap input { min-height: 54px; padding: 14px 52px 14px 16px; color: #f1f5ff; background: #080e19b3; border: 1px solid #36435b; font-size: 17px; border-radius: 11px; }
#login-screen .pin-input-wrap input::placeholder { color: #657994; }
#login-screen .pin-input-wrap input:focus { border-color: #729ded; box-shadow: 0 0 0 3px #6c99f41c; outline-color: #6c99f433; }
#login-screen .pin-reveal { color: #8a9ab0; top: 6px; right: 6px; height: 42px !important; }
#login-screen .pin-reveal:hover { background: #728fb51c; color: #d5e4ff; }
#login-screen .login-button { justify-content: space-between; min-height: 48px; margin-top: 6px; padding-inline: 17px; border: 1px solid #9dbaff26; background: #3973e7; box-shadow: 0 5px 24px #2367f229; font-weight: 600; }
#login-screen .login-button:hover { background: #4882f4; }
#login-screen .login-footer { margin-top: 25px; padding-top: 21px; border-top: 1px solid #96b5e014; color: #7d8ca2; font-size: 9px; gap: 8px; line-height: 1.6; }
#login-screen .tiny-lock { background: #7b9fd713; color: #91afe0; flex: 0 0 23px; }
#login-screen .login-language-switch { position: absolute; top: 32px; right: 40px; pointer-events: auto; color: #b2c2d8; border-color: #8eafe226; background: #101925b3; }
#login-screen .login-meta { left: auto; right: 40px; bottom: 27px; color: #69788f; gap: 13px; font-size: 9px; }
#login-screen .login-meta .meta-line { width: 25px; background: #7a99c22b; flex: none; }
#login-screen .login-error { background: #3c1b25d9; border-color: #92536666; box-shadow: none; }
#login-screen .login-error-icon { background: #8e3a4d38; color: #ff9aaa; }
#login-screen .login-error-copy strong { color: #ffb4bf; }
#login-screen .login-error-copy > span { color: #ce99a5; }
@media (max-width: 760px) {
  #login-screen .art-copy { left: 24px; top: 26px; max-width: 210px; }
  #login-screen .art-copy .brand-mark, #login-screen .art-description, #login-screen .art-signal { display: none; }
  #login-screen .art-copy h1 { font-size: 17px; margin-top: 9px; }
  #login-screen .art-copy .eyebrow { font-size: 8px; }
  #login-screen .login-panel-wrap { padding: 140px 20px 80px; }
  #login-screen .login-panel { padding: 27px; border-radius: 19px; }
  #login-screen .login-language-switch { right: 22px; top: 24px; }
  #login-screen .login-meta { left: 24px; right: 24px; bottom: 22px; justify-content: center; font-size: 8px; }
  #login-screen .mobile-brand { margin-bottom: 25px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  #login-screen .login-panel-wrap { padding: 34px 24px 60px; }
  #login-screen .art-copy { max-width: 200px; }
  #login-screen .art-copy h1 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  #login-screen *, #login-screen *::before, #login-screen *::after { animation: none !important; transition: none !important; }
}