dialog[open]:not(.loading-overlay) {
  animation: window-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
dialog[open]::backdrop {
  animation: backdrop-in 0.2s ease-out both;
}
dialog[open].is-closing {
  animation: window-out 0.16s ease-in both;
}
dialog[open].is-closing::backdrop {
  animation: backdrop-out 0.16s ease-in both;
}
.user-management:not([hidden]),
.login-card,
.tutorial-card {
  animation: panel-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.app-sidebar,
.has-app-sidebar {
  transition:
    width 0.24s ease,
    padding-left 0.24s ease;
}
.app-sidebar button,
.remote-actions button,
.user-management button,
.app-dialog button {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.loading-overlay {
  box-sizing: border-box;
  max-height: calc(100dvh - 32px);
  visibility: visible;
  width: min(340px, calc(100% - 32px));
  padding: 32px 24px;
  border: 1px solid #ffffff24;
  border-radius: 24px;
  background: linear-gradient(155deg, #193c60f7, #0b2545fa);
  box-shadow: 0 30px 90px #04142766;
  color: white;
  text-align: center;
  overflow: hidden;
  animation: window-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.loading-overlay::backdrop {
  background: #05162cb3;
  backdrop-filter: blur(5px);
}
.loading-overlay h2 {
  font:
    600 1rem/1.5 Inter,
    system-ui,
    sans-serif;
  margin: 18px 0 8px;
}
.loading-overlay p {
  font:
    400 0.85rem/1.5 Inter,
    system-ui,
    sans-serif;
  color: #c7d8ed;
  margin: 0;
}
.loading-overlay button {
  margin-top: 20px;
  padding: 9px 18px;
  border: 1px solid #b4c8e45c;
  border-radius: 8px;
  color: #fff;
  background: #ffffff0d;
  font: inherit;
  cursor: pointer;
}
.loading-overlay button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 4px;
}
.loading-visual {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.loading-orbit {
  position: absolute;
  inset: 6px;
  border: 1px solid #8dbbea2b;
  border-top: 2px solid #b6dcff;
  border-right: 2px solid #78b8ff;
  border-radius: 50%;
  animation: orbit 1.7s cubic-bezier(0.65, 0.05, 0.35, 0.95) infinite;
}
.loading-orbit-inner {
  inset: 20px;
  border-color: #b6dcff1a;
  border-bottom: 2px solid #d9ad6b;
  animation: orbit 2.1s linear infinite reverse;
}
.loading-core {
  width: 48px;
  height: auto;
  animation: brand-breathe 2s ease-in-out infinite;
}
@keyframes brand-breathe {
  50% { opacity: 0.75; transform: scale(0.92); }
}
@keyframes window-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes window-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}
@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backdrop-out {
  to {
    opacity: 0;
  }
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop,
  .user-management:not([hidden]),
  .login-card,
  .tutorial-card,
  .loading-overlay,
  .loading-visual * {
    animation: none !important;
  }
  .app-sidebar,
  .has-app-sidebar,
  .app-sidebar button,
  .remote-actions button,
  .user-management button,
  .app-dialog button {
    transition: none !important;
  }
}
@media print {
  .loading-overlay {
    display: none !important;
  }
  dialog[open],
  dialog[open]::backdrop,
  .user-management,
  .tutorial-card {
    animation: none !important;
  }
}