:root {
  --tpl-boot-bg: #f4f6fa;
  --tpl-boot-ink: #12213a;
  --tpl-boot-muted: #5a6880;
  --tpl-boot-accent: #0b3a8c;
  --tpl-boot-track: #dee4ee;
  --tpl-brand-orange: #e14830;
  color-scheme: light;
}

:root[data-theme=dark] {
  --tpl-boot-bg: #0c1320;
  --tpl-boot-ink: #e7edf7;
  --tpl-boot-muted: #9caac0;
  --tpl-boot-accent: #8fb1f5;
  --tpl-boot-track: #26334a;
  --tpl-brand-orange: #ff7a5c;
  color-scheme: dark;
}

html,
body {
  margin: 0;
  background: var(--tpl-boot-bg);
}

.tpl-brand {
  display: block;
  height: 44px;
  width: auto;
  color: var(--tpl-boot-ink);
}

.tpl-brand-word {
  fill: currentColor;
}

.tpl-brand-accent {
  fill: var(--tpl-brand-orange);
}

.tpl-brand--sm {
  height: 30px;
}

.tpl-brand--lg {
  height: 64px;
}

.tpl-brand--on-dark {
  color: #ffffff;
}
.tpl-brand--on-dark .tpl-brand-accent {
  fill: #ff7a5c;
}

.tpl-wait {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  font-family: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--tpl-boot-ink);
  background: var(--tpl-boot-bg);
}

.tpl-wait--boot {
  position: fixed;
  inset: 0;
  z-index: 2000;
  transition: opacity 0.28s ease;
}

.tpl-wait--done {
  opacity: 0;
  pointer-events: none;
}

.tpl-wait-bar {
  position: relative;
  width: min(220px, 60vw);
  height: 4px;
  border-radius: 999px;
  background: var(--tpl-boot-track);
  overflow: hidden;
}
.tpl-wait-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--tpl-boot-accent);
  animation: tpl-wait-slide 1.25s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.tpl-wait-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tpl-boot-muted);
}

@keyframes tpl-wait-slide {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(260%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-wait-bar span {
    animation: none;
    width: 100%;
    opacity: 0.6;
  }
  .tpl-wait--boot {
    transition: none;
  }
}
#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 3000;
  padding: 12px 20px;
  font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
  font-size: 0.9rem;
  color: #12213a;
  background: #ffe9b8;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
}
#blazor-error-ui .reload {
  margin-left: 8px;
  color: #0b3a8c;
  font-weight: 600;
}
#blazor-error-ui .dismiss {
  position: absolute;
  right: 16px;
  top: 10px;
  cursor: pointer;
}