/* App-level: boot screen and Blazor error UI */

.wb-boot {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--wb-space-4); font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-muted);
}
.wb-boot img { width: 48px; height: 48px; }
.wb-boot__bar { width: 160px; height: 2px; background: var(--wb-line); border-radius: 2px; overflow: hidden; }
.wb-boot__bar span {
  display: block; height: 100%; background: var(--wb-accent);
  width: var(--blazor-load-percentage, 0%); transition: width var(--wb-fast) linear;
}
.wb-boot__text::after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--wb-surface-raised); color: var(--wb-text); border-top: 2px solid var(--wb-danger);
  padding: var(--wb-space-3) var(--wb-space-5); font-size: var(--wb-text-md);
}
#blazor-error-ui .reload { color: var(--wb-accent); text-decoration: underline; margin-left: var(--wb-space-3); }
#blazor-error-ui .dismiss { position: absolute; right: var(--wb-space-4); top: var(--wb-space-2); cursor: pointer; background: none; border: none; color: var(--wb-text-muted); }

.blazor-error-boundary { background: var(--wb-surface-raised); border: 1px solid var(--wb-danger); border-radius: var(--wb-radius-lg); padding: var(--wb-space-4); color: var(--wb-text); }
.blazor-error-boundary::after { content: "Something went wrong rendering this panel."; }