html, body { background: var(--bs-body-bg); color: var(--bs-body-color); -webkit-tap-highlight-color: transparent; }
body { font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); }
h1:focus { outline: none; }

#blazor-error-ui { color-scheme: light only; background: #FEF3C7; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }


/* ---------- Splash (antes do Blazor carregar) ---------- */
.mq-splash {
  --mq-splash-color: #111827;
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #F7F7F8; color: #111827; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  animation: mq-splash-in .25s ease-out .15s both;
}
html[data-bs-theme="dark"] .mq-splash { background: #0B0F17; color: #F3F4F6; }
.mq-splash-mark {
  width: 72px; height: 72px; border-radius: 20px; background: var(--mq-splash-color); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px -12px var(--mq-splash-color);
  animation: mq-splash-pulse 1.6s ease-in-out infinite;
}
.mq-splash-mark svg { width: 38px; height: 38px; }
.mq-splash-logo { max-width: 200px; max-height: 72px; object-fit: contain; border-radius: 14px; }
.mq-splash-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; text-align: center; max-width: 280px; }
.mq-splash-bar { width: 160px; height: 4px; border-radius: 4px; background: rgba(127, 127, 127, .18); overflow: hidden; }
.mq-splash-bar > span {
  display: block; height: 100%; border-radius: 4px; background: var(--mq-splash-color);
  width: max(8%, var(--blazor-load-percentage, 0%)); transition: width .2s ease-out;
}
html[data-bs-theme="dark"] .mq-splash-bar > span, html[data-bs-theme="dark"] .mq-splash-mark { filter: brightness(1.15); }
@keyframes mq-splash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mq-splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .mq-splash, .mq-splash-mark { animation: none; } }