/* Login themes share the admin theme contract; authentication remains in Vue. */
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed {
  --login-primary: var(--theme-primary, #7356ef);
  --login-ink: var(--theme-ink, #191c31);
  --login-muted: var(--theme-muted, #6c7085);
  --login-lime: var(--theme-accent, #d5ff63);
  --login-stage: var(--theme-hero, #101325);
  --login-stage-ink: var(--theme-hero-ink, #f4f5fb);
  --login-stage-muted: var(--theme-hero-muted, #adb2cc);
  --login-stage-accent: var(--theme-accent, #d5ff63);
  --login-card: var(--theme-surface, #fcfcff);
  --login-control-bg: var(--theme-surface, #fff);
  --login-tab-active: var(--theme-surface, #fff);
  --login-field-line: var(--theme-line, #dddde9);
  --login-error: #c63249;
  --login-error-bg: #fff0f2;
  --login-card-shadow: var(--theme-shadow, 0 28px 70px -28px rgba(0, 0, 0, .45));
  color: var(--login-ink);
  background: var(--login-stage) !important;
  color-scheme: light;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .container {
  background: var(--login-stage) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top .header {
  flex: 1 1 170px;
  min-width: 0;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top .header a {
  min-width: 0;
  color: var(--login-stage-ink);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top .header .title {
  min-width: 0;
  overflow: hidden;
  color: var(--login-stage-ink) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The switch stays in the header flow, including narrow mobile screens. */
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .admin-theme-trigger--login {
  position: static !important;
  inset: auto !important;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  min-height: 42px;
  margin: 0 0 0 auto;
  padding: 9px 12px;
  color: var(--login-stage-ink) !important;
  font-size: 12px;
  line-height: 1.5;
  background: transparent !important;
  border: 1px solid var(--login-stage-muted);
  border-color: color-mix(in srgb, var(--login-stage-ink) 25%, transparent);
  border-radius: var(--theme-control-radius, 9px);
  box-shadow: none;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .admin-theme-trigger--login:hover {
  background: color-mix(in srgb, var(--login-stage-ink) 8%, transparent) !important;
  border-color: var(--login-stage-accent);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-workspace-label,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-welcome-description {
  color: var(--login-stage-muted);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-workspace-label::before {
  background: var(--login-stage-accent);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-welcome-panel h1 {
  color: var(--login-stage-ink);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-welcome-panel h1 span {
  color: var(--login-stage-accent);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-tech-mascot {
  filter: var(--theme-art-filter, none);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .main {
  color: var(--login-ink);
  background: var(--login-card);
  border-color: var(--login-field-line);
  border-radius: var(--theme-radius, 24px);
  box-shadow: var(--login-card-shadow);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-card-heading h2,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-field-label {
  color: var(--login-ink);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-card-heading p,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-card-note {
  color: var(--login-muted);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-card-note {
  border-color: var(--login-field-line);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-tabs-nav {
  background: var(--theme-soft, #f0eef7);
  border-radius: calc(var(--theme-control-radius, 9px) + 3px);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-tabs-tab {
  color: var(--login-muted);
  border-radius: var(--theme-control-radius, 9px);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-tabs-tab:hover,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-tabs-tab-active {
  color: var(--login-primary) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-tabs-tab-active {
  background: var(--login-tab-active);
  box-shadow: 0 2px 5px rgba(20, 28, 45, .08);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input {
  color: var(--login-ink);
  caret-color: var(--login-primary);
  background: var(--login-control-bg) !important;
  border-color: var(--login-field-line) !important;
  border-radius: var(--theme-control-radius, 9px) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input::placeholder {
  color: var(--login-muted);
  opacity: 1;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input:hover {
  border-color: var(--login-primary) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input:focus {
  border-color: var(--login-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-primary) 18%, transparent) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input:-webkit-autofill {
  -webkit-text-fill-color: var(--login-ink) !important;
  caret-color: var(--login-primary);
  box-shadow: 0 0 0 1000px var(--login-control-bg) inset !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input-prefix {
  color: var(--login-muted) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-password-toggle {
  color: var(--login-muted);
  border-radius: max(3px, calc(var(--theme-control-radius, 9px) - 3px));
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .login-password-toggle:hover {
  color: var(--login-primary);
  background: var(--theme-soft, #f1edff);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login button.login-button {
  color: var(--theme-on-primary, #fff) !important;
  background: var(--login-primary) !important;
  border-color: var(--login-primary) !important;
  border-radius: var(--theme-control-radius, 9px) !important;
  box-shadow: none !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login button.login-button:hover,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login button.login-button:focus {
  background: var(--theme-primary-hover, #6143db) !important;
  border-color: var(--theme-primary-hover, #6143db) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .image-c .miniapp-code {
  background: #fff;
  border-color: var(--login-field-line) !important;
  border-radius: var(--theme-control-radius, 9px);
  filter: none;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login button.login-qr-instruction,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login button.login-qr-instruction:hover,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login button.login-qr-instruction:focus {
  color: var(--login-muted) !important;
  background: var(--theme-soft, #f2effa) !important;
  border-color: transparent !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .has-error .ant-input,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .has-error .ant-input:hover,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .has-error .ant-input:focus {
  border-color: var(--login-error) !important;
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .has-error .ant-form-explain,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .has-error .ant-form-split,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .has-error .ant-form-item-children-icon {
  color: var(--login-error);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .ant-alert-error {
  color: var(--login-error);
  background: var(--login-error-bg);
  border-color: var(--login-error);
}
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .ant-alert-error .ant-alert-message,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .ant-alert-error .ant-alert-description,
html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .ant-alert-error .ant-alert-icon {
  color: var(--login-error);
}

/* Individual stages keep the eight themes distinct without changing form layout. */
html[data-admin-theme="orbit"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: #101325;
  --login-stage-ink: #f4f5fb;
  --login-stage-muted: #adb2cc;
  --login-stage-accent: #d5ff63;
}
html[data-admin-theme="arctic"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: linear-gradient(120deg, #f2f9ff 0%, #e4f1fc 66%, #d6ebfa 100%);
  --login-stage-ink: #17344b;
  --login-stage-muted: #516d82;
  --login-stage-accent: #1c70b9;
  --login-card-shadow: 0 26px 65px -32px rgba(43, 100, 146, .3);
}
html[data-admin-theme="cyber"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: #071219;
  --login-stage-ink: #e3fdf7;
  --login-stage-muted: #8db8b3;
  --login-stage-accent: #55f5d2;
  --login-control-bg: #0b1a20;
  --login-tab-active: #17372f;
  --login-error: #ff98aa;
  --login-error-bg: #371e2a;
  --login-card-shadow: 12px 12px 0 rgba(31, 94, 81, .18);
  color-scheme: dark;
}
html[data-admin-theme="cyber"] #userLayout.user-layout-wrapper.login-refreshed .main {
  border-color: #31534e;
  border-top: 3px solid var(--login-primary);
}
html[data-admin-theme="cyber"] #userLayout.user-layout-wrapper.login-refreshed .login-workspace-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  letter-spacing: 3px;
}
html[data-admin-theme="sakura"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: linear-gradient(135deg, #fff3f7 0%, #fbe7ef 70%, #f8dde9 100%);
  --login-stage-ink: #51283b;
  --login-stage-muted: #875d72;
  --login-stage-accent: #b93172;
  --login-card-shadow: 0 28px 64px -34px rgba(157, 60, 103, .34);
}
html[data-admin-theme="sakura"] #userLayout.user-layout-wrapper.login-refreshed .login-workspace-label::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
html[data-admin-theme="mint"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: #e8f5ef;
  --login-stage-ink: #173e34;
  --login-stage-muted: #54776b;
  --login-stage-accent: #167653;
  --login-card-shadow: 0 22px 60px -30px rgba(22, 92, 65, .24);
}
html[data-admin-theme="mint"] #userLayout.user-layout-wrapper.login-refreshed .main {
  border-top: 4px solid var(--login-primary);
}
html[data-admin-theme="sunset"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: #332018;
  --login-stage-ink: #fff5e9;
  --login-stage-muted: #d9b69b;
  --login-stage-accent: #ffb56c;
  --login-card-shadow: 0 30px 70px -30px rgba(20, 10, 4, .58);
}
html[data-admin-theme="sunset"] #userLayout.user-layout-wrapper.login-refreshed .login-workspace-label::before {
  width: 16px;
  height: 8px;
  border-radius: 16px 16px 0 0;
}
html[data-admin-theme="mono"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: #e9e9ec;
  --login-stage-ink: #191b22;
  --login-stage-muted: #626773;
  --login-stage-accent: #191b22;
  --login-card-shadow: 9px 9px 0 #d6d7dc;
}
html[data-admin-theme="mono"] #userLayout.user-layout-wrapper.login-refreshed .main {
  border-color: #b7b9c1;
}
html[data-admin-theme="mono"] #userLayout.user-layout-wrapper.login-refreshed .login-welcome-panel h1 {
  font-weight: 750;
  letter-spacing: -2px;
}
html[data-admin-theme="mono"] #userLayout.user-layout-wrapper.login-refreshed .top .header .logo {
  border-radius: 3px !important;
}
html[data-admin-theme="mono"] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-tabs-tab-active {
  box-shadow: 0 1px 0 #c4c5cb;
}
html[data-admin-theme="aurora"] #userLayout.user-layout-wrapper.login-refreshed {
  --login-stage: linear-gradient(120deg, #081c39 0%, #102d53 100%);
  --login-stage-ink: #f0f7ff;
  --login-stage-muted: #a5bfdf;
  --login-stage-accent: #78bcff;
  --login-card-shadow: 0 28px 70px -28px rgba(0, 9, 25, .64);
}
html[data-admin-theme="aurora"] #userLayout.user-layout-wrapper.login-refreshed .main {
  border-top: 4px solid var(--login-primary);
}
@media (max-width: 820px) {
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top {
    gap: 12px;
  }
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top .header a {
    gap: 10px;
  }
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .main {
    border-radius: min(var(--theme-radius, 24px), 26px);
  }
}
@media (max-width: 450px) {
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top .header {
    flex-basis: 148px;
  }
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .top .header .title {
    font-size: 18px !important;
  }
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .admin-theme-trigger--login {
    gap: 5px;
    padding-right: 9px;
    padding-left: 9px;
    font-size: 11px;
  }
  html[data-admin-theme] #userLayout.user-layout-wrapper.login-refreshed .user-layout-login .ant-input {
    font-size: 16px;
  }
}