body:has(#connection-card:not([hidden])) { background: #11110f; }
body:has(#connection-card:not([hidden])) .shell { width: 100%; margin: 0; }
body:has(#connection-card:not([hidden])) .console-header,
body:has(#connection-card:not([hidden])) #notice { display: none; }
body:has(#connection-card[hidden]) .login-footer { display: none; }

.login-scene {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #f5f1e8;
  background: #11110f;
  color-scheme: dark;
}
.login-scene[hidden] { display: none; }
.login-scene-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.login-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(7 7 6 / 88%), rgb(7 7 6 / 66%) 32%, rgb(7 7 6 / 12%) 70%), linear-gradient(0deg, rgb(7 7 6 / 45%), transparent 50%);
}
.login-content { width: min(1280px, 100%); margin: 0 auto; padding: 64px 48px 40px; }
.login-eyebrow { color: #e3c58f; margin: 0 0 20px; font-size: 13px; font-weight: 600; }
.login-content h1 { margin: 0; max-width: 100%; font-family: "Songti SC", SimSun, serif; font-size: 48px; line-height: 1.25; font-weight: 600; letter-spacing: 0; }
.login-subtitle { color: #bdb8ad; font-size: 15px; margin: 16px 0 36px; }
.login-content form { width: min(360px, 100%); gap: 20px; }
.login-content label { color: #e6e1d6; gap: 9px; font-size: 13px; }
.login-content input { min-height: 48px; border-radius: 4px; border-color: rgb(227 197 143 / 35%); background: rgb(17 17 15 / 70%); color: #f5f1e8; font-size: 16px; }
.login-content input:hover { border-color: #c8a66a; }
.login-content input:focus-visible, .login-content button:focus-visible, .login-content summary:focus-visible { outline-color: #e3c58f; }
.login-content button { min-height: 48px; border-radius: 4px; background: #c8a66a; color: #171611; }
.login-content button:hover { background: #e3c58f; }
.login-content button:active { background: #b3945c; }
.login-connection { color: #bdb8ad; font-size: 12px; }
.login-connection summary { padding: 4px 0; cursor: pointer; transition: color 120ms; }
.login-connection summary:hover { color: #e3c58f; }
.login-connection label { margin-top: 12px; }
#login-notice { min-height: 24px; margin: 0; font-size: 13px; line-height: 1.6; color: #c4ddc2; overflow-wrap: anywhere; }
#login-notice.error { color: #ffb4ac; }
.login-footer { min-height: 64px; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #bdb8ad; background: #11110f; border-top: 1px solid rgb(227 197 143 / 24%); font-size: 12px; }
.login-footer span:first-child { font-family: "Songti SC", SimSun, serif; font-size: 15px; }
@media (max-width: 700px) {
  .login-scene { align-items: end; }
  .login-scene-image { object-position: 66% 35%; }
  .login-scene::before { background: linear-gradient(0deg, rgb(7 7 6 / 96%), rgb(7 7 6 / 76%) 50%, rgb(7 7 6 / 8%) 100%); }
  .login-content { padding: 180px 24px 24px; }
  .login-content h1 { font-size: 36px; }
  .login-content form { width: 100%; max-width: 400px; }
  .login-subtitle { margin-bottom: 28px; }
  .login-footer { padding-inline: 24px; }
}
@media (max-width: 360px) { .login-content h1 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .login-content :is(input, button, summary) { transition: none; } }