#loginBox.login-weather-shell {
  --login-text: #f4f8fc;
  --login-muted: #c5d2df;
  --login-border: rgba(232, 243, 254, .23);
  --login-accent: #518dcc;
  --login-accent-end: #244f8b;
  grid-template-columns: minmax(0, 1fr) 428px;
  grid-template-rows: auto 1fr auto;
  gap: 28px 72px;
  padding: 42px 4.9% 31px;
  color: var(--login-text);
  background: var(--portal-canvas);
}

#loginBox.login-weather-shell::before { display: none; }
.login-weather-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #06152b; }
.login-weather-photo { position: absolute; inset: 0; background-size: cover; background-position: 35% center; transition: opacity 1.4s ease; }
.login-weather-photo-day { background-image: url('/assets/login-weather/energy-day-home.webp?v=20261009_165531_v2'); }
.login-weather-photo-night { background-image: url('/assets/login-weather/energy-night.webp?v=20261009'); opacity: 0; }
.login-weather-shell[data-period="night"] .login-weather-photo-night { opacity: 1; }
.login-weather-light { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 65% 10%, rgba(255, 231, 172, .12), transparent 55%); transition: opacity 2s; animation: login-weather-glow 16s ease-in-out infinite alternate; }
.login-weather-shell[data-weather="clear"][data-period="day"] .login-weather-light { opacity: 1; }
.login-weather-clouds { position: absolute; inset: -15%; opacity: 0; background: radial-gradient(ellipse at 20% 24%, rgba(224, 231, 234, .12), transparent 30%), radial-gradient(ellipse at 80% 36%, rgba(221, 230, 232, .1), transparent 36%); transition: opacity 2s; animation: login-weather-cloud-drift 50s ease-in-out infinite alternate; }
.login-weather-shell:is([data-weather="cloudy"], [data-weather="rain"], [data-weather="storm"]) .login-weather-clouds { opacity: 1; }
.login-weather-mist { position: absolute; inset: -15%; opacity: 0; background: linear-gradient(180deg, transparent 10%, rgba(207, 214, 216, .22) 60%, rgba(209, 217, 219, .08)); transition: opacity 2s; animation: login-weather-cloud-drift 36s ease-in-out infinite alternate-reverse; }
.login-weather-shell[data-weather="fog"] .login-weather-mist { opacity: 1; }
.login-weather-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 25, 34, .42), rgba(12, 25, 34, .07) 42%, rgba(12, 25, 34, .035) 62%, rgba(7, 21, 30, .44)), linear-gradient(90deg, rgba(14, 31, 42, .2), transparent 56%, rgba(14, 31, 42, .06)); }
.login-weather-particles { position: absolute; inset: 0; overflow: hidden; display: none; }
.login-weather-particle { position: absolute; left: var(--particle-left); top: -32px; pointer-events: none; }
.login-weather-shell:is([data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) .login-weather-particles { display: block; }
.login-weather-shell:is([data-weather="rain"], [data-weather="storm"]) .login-weather-particle { width: 1px; height: 26px; background: linear-gradient(transparent, rgba(218, 235, 240, .4)); animation: login-weather-rain var(--rain-duration) linear var(--particle-delay) infinite; }
.login-weather-shell[data-weather="snow"] .login-weather-particle { width: var(--snow-size); height: var(--snow-size); border-radius: 50%; background: rgba(250, 253, 255, .7); animation: login-weather-snow var(--snow-duration) linear var(--particle-delay) infinite; }
.login-weather-shell[data-motion="paused"] .login-weather-backdrop *, .login-weather-shell[data-motion="paused"] .login-weather-backdrop *::before { animation-play-state: paused !important; }
.login-page-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.login-weather-shell .login-brand { display: flex; align-items: start; color: var(--login-text); }
.login-weather-shell .login-brand-logo { width: 93px; height: 58.5px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 12, 30, .12)); }
.login-scene-switch { display: flex; flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid rgba(210, 228, 244, .2); border-radius: 26px; background: rgba(36, 51, 66, .24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#loginBox .login-scene-switch button { min-height: 35px; margin: 0; padding: 7px 16px !important; border: 0; border-radius: 22px; background: transparent; color: var(--login-muted); box-shadow: none; font-size: 12px !important; font-weight: 400; line-height: 1.5; transform: none; }
#loginBox .login-scene-switch button[aria-pressed="true"] { background: rgba(222, 239, 251, .18); color: #fff; box-shadow: inset 0 1px rgba(248, 253, 255, .1); }
#loginBox .login-scene-switch button:hover { color: #fff; background: rgba(222, 239, 251, .12); }
.login-weather-shell .login-art-panel { grid-column: 1; grid-row: 2; align-self: start; z-index: 1; min-height: 0; padding: 34px 0 0; color: var(--login-text); }
.login-weather-intro { margin: 0; text-shadow: 0 3px 20px rgba(0, 17, 35, .4); }
#loginBox .login-weather-intro h1 { margin: 0; padding: 0; color: var(--login-text); font-size: clamp(32px, 3.25vw, 54px); font-weight: 600; line-height: 1.35; letter-spacing: .065em; background: none; }
#loginBox .login-title-ai { color: #2688ff; font-family: Arial, "Microsoft YaHei", sans-serif; font-weight: 600; letter-spacing: .01em; }
#loginBox .login-title-cloud { color: #bed7fb; }
.login-weather-intro > .login-value-proposition { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 16px 0 0; color: #d3e3f8; font-size: 15px; font-weight: 400; letter-spacing: .12em; line-height: 1.9; }
.login-value-proposition > span { white-space: nowrap; }
.login-value-proposition > [aria-hidden] { color: #a5c5ea; }
.login-weather-shell .login-form-panel { grid-column: 2; grid-row: 2; z-index: 1; align-self: center; }
#loginBox.login-weather-shell .login-form-inner {
  width: min(428px, 100%);
  padding: 37px 37px 30px;
  border-radius: 30px;
  border: 1px solid var(--login-border);
  color: var(--login-text);
  background: linear-gradient(145deg, rgba(209, 221, 226, .12), rgba(209, 221, 226, .04) 38%, rgba(216, 230, 236, .07)), rgba(38, 48, 57, .42);
  -webkit-backdrop-filter: blur(22px) saturate(105%);
  backdrop-filter: blur(22px) saturate(105%);
  box-shadow: 0 20px 65px rgba(13, 27, 37, .2), inset 0 1px rgba(255, 255, 255, .13);
}
#loginBox.login-weather-shell h2 { margin: 0 0 8px; color: var(--login-text); font-size: 28px; font-weight: 500; line-height: 1.45; letter-spacing: .06em; }
#loginBox.login-weather-shell .login-form-inner p { margin-bottom: 30px; color: var(--login-muted); font-size: 13px; line-height: 1.5; }
#loginBox.login-weather-shell .login-form-inner label:not(.login-check) { margin: 21px 0 10px; color: var(--login-text); font-size: 13px; font-weight: 400; line-height: 1.5; }
#loginBox.login-weather-shell input:is([type="text"], [type="password"]) { height: 52px; padding-left: 48px; border-color: rgba(214, 228, 250, .34); border-radius: 999px; background: rgba(12, 25, 49, .42); color: var(--login-text); color-scheme: dark; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 9, 27, .08); }
#loginBox.login-weather-shell input::placeholder { color: #d0dce2; }
#loginBox.login-weather-shell input:is([type="text"], [type="password"]):focus { border-color: #8fc4ef; box-shadow: 0 0 0 3px rgba(105, 176, 235, .18); }
.login-username-wrap { position: relative; }
.login-field-icon { position: absolute; z-index: 1; left: 19px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #c4d5ec; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#loginBox.login-weather-shell .login-pwd-toggle { color: #d9e5ed !important; font-size: 12px !important; font-weight: 400; }
#loginBox.login-weather-shell .login-options { margin: 19px 0 28px; }
#loginBox.login-weather-shell .login-check { color: var(--login-muted); font-size: 12px; }
#loginBox.login-weather-shell .login-check input { accent-color: #2d8cff; color-scheme: dark; }
#loginBox.login-weather-shell .login-submit { min-height: 52px; padding: 12px 24px; border: 1px solid rgba(182, 220, 255, .5); border-radius: 999px; background: linear-gradient(180deg, var(--login-accent), var(--login-accent-end)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 24px rgba(0, 20, 51, .2); font-size: 15px; font-weight: 600; letter-spacing: .16em; }
#loginBox.login-weather-shell .login-submit:hover { filter: brightness(1.07); }
#loginBox.login-weather-shell .login-version { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; color: var(--login-muted); font-size: 11px; white-space: nowrap; }
#loginBox.login-weather-shell .login-version::before, #loginBox.login-weather-shell .login-version::after { content: ''; flex: 1; height: 1px; margin: 0 5px; background: rgba(221, 237, 252, .16); }
#loginBox.login-weather-shell #loginErr { color: #ffcbce; line-height: 1.6; }
#loginBox.login-weather-shell button:focus-visible, #loginBox.login-weather-shell input[type="checkbox"]:focus-visible { outline: 2px solid #b9dfff; outline-offset: 3px; }
.login-weather-info { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; font-variant-numeric: tabular-nums; }
.login-weather-reading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 22px; align-items: center; }
.login-weather-place { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.login-weather-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #b9c6cc; }
.login-weather-shell[data-weather-status="ok"] .login-weather-dot { background: #8ad9c3; box-shadow: 0 0 12px rgba(108, 224, 192, .28); }
#loginWeatherLocationMode { color: var(--login-muted); font-size: 11px; }
.login-weather-summary { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: baseline; flex-wrap: wrap; gap: 13px; padding-right: 22px; border-right: 1px solid rgba(215, 235, 249, .25); }
#loginWeatherTemperature { font-size: 28px; line-height: 1.2; font-weight: 400; letter-spacing: -.04em; }
#loginWeatherTemperature small { display: inline-block; margin-left: 3px; font-size: 15px; font-weight: 400; letter-spacing: 0; }
#loginWeatherDescription { font-size: 12px; }
#loginWeatherStatus { grid-column: 2; grid-row: 2; max-width: 500px; margin: 0; color: var(--login-muted); font-size: 11px; line-height: 1.7; }
.login-weather-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 10px; margin: 0; color: rgba(255, 255, 255, .3); }
#loginBox .login-weather-actions button { min-height: 34px; margin: 0; padding: 4px 0 !important; border: 0; border-radius: 0; background: transparent; color: #e5edf0; box-shadow: none; font-size: 12px !important; font-weight: 400; transform: none; }
#loginBox .login-weather-actions button:hover { color: #b9dfff; text-decoration: underline; text-underline-offset: 4px; }
#loginBox .login-weather-actions button:disabled { opacity: .7; cursor: default; text-decoration: none; }
.login-weather-caption { grid-column: 1 / -1; margin: 9px 0 0; color: var(--login-muted); font-size: 11px; letter-spacing: .03em; line-height: 1.7; }
#loginBox.login-weather-shell[data-period="night"] { --login-muted: #c5d2df; }
.login-weather-shell[data-period="night"] .login-weather-shade { background: linear-gradient(180deg, rgba(2, 12, 27, .24), transparent 39%, rgba(2, 10, 23, .26)), linear-gradient(90deg, rgba(4, 18, 36, .05), transparent 49%, rgba(5, 14, 27, .06)); }
#loginBox.login-weather-shell[data-period="night"] .login-form-inner { background: linear-gradient(145deg, rgba(193, 208, 218, .095), rgba(48, 59, 70, .03) 45%, rgba(189, 204, 216, .04)), rgba(45, 56, 70, .42); box-shadow: 0 20px 65px rgba(0, 9, 26, .21), inset 0 1px rgba(245, 249, 255, .06); }
#loginBox.login-weather-shell[data-period="night"] input:is([type="text"], [type="password"]) { border-color: rgba(214, 228, 250, .3); background: rgba(12, 25, 49, .56); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #loginBox.login-weather-shell .login-form-inner, #loginBox.login-weather-shell[data-period="night"] .login-form-inner { background: rgba(44, 53, 59, .94); }
}

@keyframes login-weather-cloud-drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, 1%, 0); } }
@keyframes login-weather-glow { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes login-weather-rain { from { transform: translate3d(0, -40px, 0) rotate(12deg); } to { transform: translate3d(-100px, calc(100vh + 180px), 0) rotate(12deg); } }
@keyframes login-weather-snow { from { transform: translate3d(0, -40px, 0); } to { transform: translate3d(70px, calc(100vh + 180px), 0); } }

@media (max-width: 1150px) and (min-width: 769px) {
  #loginBox.login-weather-shell { grid-template-columns: minmax(0, 1fr) 358px; gap: 28px 34px; padding: 30px 4% 27px; }
  #loginBox.login-weather-shell .login-form-inner { padding: 29px 27px 24px; }
  #loginBox .login-weather-intro h1 { font-size: 32px; }
  .login-weather-intro > .login-value-proposition { gap: 0 10px; font-size: 12px; letter-spacing: .06em; }
  .login-weather-info { column-gap: 18px; }
  .login-weather-reading { column-gap: 14px; }
  .login-weather-summary { flex-direction: column; gap: 3px; padding-right: 14px; }
}

@media (max-width: 768px) {
  #loginBox.login-weather-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 28px !important; padding: max(26px, env(safe-area-inset-top)) 24px max(25px, env(safe-area-inset-bottom)) !important; justify-items: stretch; align-content: start; }
  .login-weather-photo { background-position: 18% center; }
  .login-page-header { grid-column: 1; grid-row: 1; flex-wrap: wrap; gap: 16px; }
  .login-weather-shell .login-brand-logo { width: 68px; height: 42.8px; }
  #loginBox .login-scene-switch button { padding: 6px 9px !important; font-size: 11px !important; }
  .login-weather-shell .login-art-panel { display: block; grid-column: 1; grid-row: 2; min-height: clamp(250px, 38svh, 390px) !important; padding: 14px 0 6px !important; }
  .login-weather-intro { display: block; }
  #loginBox .login-weather-intro h1 { font-size: clamp(27px, 6.7vw, 40px) !important; }
  .login-weather-intro > .login-value-proposition { gap: 0 10px; margin-top: 12px; font-size: 11px; letter-spacing: .055em; }
  .login-weather-shell .login-form-panel { grid-column: 1; grid-row: 3; width: 100%; justify-self: center; }
  #loginBox.login-weather-shell .login-form-inner, #loginBox.login-weather-shell[data-period="night"] .login-form-inner { padding: 0; border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  #loginBox.login-weather-shell .login-form-inner :is(h2, p, label:not(.login-check)) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #loginBox.login-weather-shell .login-password-wrap { margin-top: 16px; }
  #loginBox.login-weather-shell input:is([type="text"], [type="password"]) { padding-left: 48px !important; font-size: 16px; }
  #loginBox.login-weather-shell .login-options { margin: 12px 0 22px; }
  #loginBox.login-weather-shell .login-version { margin-top: 18px; }
  .login-weather-info { grid-column: 1; grid-row: 4; width: min(428px, 100%); justify-self: center; grid-template-columns: minmax(0, 1fr); row-gap: 5px; }
  .login-weather-reading { gap: 5px 12px; }
  .login-weather-summary { flex-direction: column; gap: 5px; padding-right: 12px; }
  .login-weather-place { gap: 6px; }
  #loginWeatherStatus { font-size: 11px; }
  .login-weather-actions { justify-content: start; }
  #loginBox .login-weather-actions button { min-height: 40px; }
  .login-weather-caption { margin-top: 0; }
  .login-weather-particle:nth-child(n+23) { display: none; }
}

@media (pointer: coarse) {
  #loginBox .login-scene-switch button { min-height: 44px; }
  #loginBox.login-weather-shell .login-pwd-toggle { min-height: 44px !important; }
  #loginBox.login-weather-shell .login-check { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-weather-shell .login-weather-backdrop * { animation: none !important; transition: none !important; }
  .login-weather-shell .login-weather-particles { display: none !important; }
}