:root {
  --login-page-bg-image: linear-gradient(135deg, #ebebf5 0%, #f5f5ff 100%);
  --login-panel-bg-image: linear-gradient(135deg, #020024 0%, #091979 60%, #1e8bb3 100%);
  --login-panel-text: #ffffff;
  --login-card-bg-color: #ffffff;
  --login-card-bg-image: none;
  --login-card-text: #333333;
  --login-input-bg-color: #ffffff;
  --login-input-bg-image: none;
  --login-input-text: #333333;
  --login-input-border: #cccccc;
  --login-input-focus-border: #3399cc;
  --login-button-bg-color: #3399cc;
  --login-button-bg-image: none;
  --login-button-hover-bg-color: #2a7ea8;
  --login-button-hover-bg-image: none;
  --login-button-text: #ffffff;
  --login-link-text: #3399cc;
  --login-footer-text: #777777;
  --login-card-radius: 20px;
  --login-card-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  --login-logo-height: 64px;
  --login-logo-align: flex-start;
}
html[theme="dark-mode"]:has(#login-screen:not([hidden])) {
  filter: none;
  --login-page-bg-image: linear-gradient(135deg, #10131a 0%, #161b26 100%);
  --login-panel-bg-image: linear-gradient(135deg, #020024 0%, #091979 60%, #1e8bb3 100%);
  --login-panel-text: #ffffff;
  --login-card-bg-color: #1c2230;
  --login-card-bg-image: none;
  --login-card-text: #e6e8ec;
  --login-input-bg-color: #131823;
  --login-input-bg-image: none;
  --login-input-text: #e6e8ec;
  --login-input-border: #3a4354;
  --login-input-focus-border: #54b4dd;
  --login-button-bg-color: #2f88b8;
  --login-button-bg-image: none;
  --login-button-hover-bg-color: #256f97;
  --login-button-hover-bg-image: none;
  --login-button-text: #ffffff;
  --login-link-text: #7cc6e6;
  --login-footer-text: #9aa3b2;
}
html[theme="dark-mode"]:has(#login-screen:not([hidden])) #login-screen img,
html[theme="dark-mode"]:has(#login-screen:not([hidden])) #login-screen video,
html[theme="dark-mode"]:has(#login-screen:not([hidden])) #login-screen .no-invert {
  filter: none;
}