:root {
  --scandaq-loading-surface: var(--surface-1, #f7f9fa);
  --scandaq-loading-panel: var(--surface-0, #fff);
  --scandaq-loading-line: color-mix(in srgb, var(--text-muted, #617178) 18%, transparent);
  --scandaq-loading-accent: var(--accent-600, #157a76);
}

#scandaqBootstrapGuard {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-content: center;
  min-height: 100dvh;
  padding: 24px;
  background: var(--scandaq-loading-surface);
  color: var(--text-primary, #17323b);
  text-align: center;
}

.scandaq-bootstrap-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 48px));
}

.scandaq-bootstrap-wordmark {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.scandaq-bootstrap-copy { margin: 0; color: var(--text-secondary, #4d6269); }
.scandaq-bootstrap-progress { width: 72px; height: 2px; overflow: hidden; border-radius: 999px; background: var(--scandaq-loading-line); }
.scandaq-bootstrap-progress::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--scandaq-loading-accent); animation: scandaq-loading-progress 1.1s ease-in-out infinite alternate; }

#appMainContent { position: relative; }
.scandaq-route-loading {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: start;
  gap: 24px;
  min-height: min(620px, calc(100dvh - 112px));
  padding: clamp(24px, 4vw, 48px);
  background: var(--scandaq-loading-surface);
  color: var(--text-primary, #17323b);
}

.scandaq-loading-copy { display: flex; align-items: center; gap: 12px; max-width: 720px; }
.scandaq-loading-copy strong { display: block; font-size: 1rem; }
.scandaq-loading-copy p { margin: 3px 0 0; color: var(--text-secondary, #4d6269); }
.scandaq-loading-copy small { display: block; margin-top: 6px; color: var(--text-muted, #617178); }
.scandaq-loading-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--scandaq-loading-accent) 35%, transparent); border-radius: 8px; color: var(--scandaq-loading-accent); font-weight: 800; }

.scandaq-loading-table,
.scandaq-loading-form,
.scandaq-loading-dashboard,
.scandaq-loading-viewer {
  display: grid;
  gap: 12px;
  max-width: 1120px;
  padding: 20px;
  border: 1px solid var(--scandaq-loading-line);
  border-radius: 12px;
  background: var(--scandaq-loading-panel);
}

.scandaq-loading-table > span,
.scandaq-loading-form > span,
.scandaq-loading-dashboard > span,
.scandaq-loading-viewer > span {
  display: block;
  min-height: 38px;
  border-radius: 7px;
  background: var(--scandaq-loading-line);
}

.scandaq-loading-table > span:not(.scandaq-loading-wide) { min-height: 46px; }
.scandaq-loading-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scandaq-loading-form .scandaq-loading-wide { grid-column: 1 / -1; min-height: 54px; }
.scandaq-loading-dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scandaq-loading-dashboard > span { min-height: 108px; }
.scandaq-loading-viewer { grid-template-columns: 220px minmax(0, 1fr); min-height: 480px; }
.scandaq-loading-viewer-toolbar { min-height: 440px !important; }
.scandaq-loading-viewer-page { min-height: 440px !important; background: color-mix(in srgb, var(--scandaq-loading-line) 60%, var(--scandaq-loading-panel)) !important; }
.scandaq-loading-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@keyframes scandaq-loading-progress { from { transform: translateX(-55%); } to { transform: translateX(125%); } }

@media (max-width: 820px) {
  .scandaq-route-loading { min-height: calc(100dvh - 88px); padding: 20px 16px; }
  .scandaq-loading-dashboard, .scandaq-loading-form { grid-template-columns: 1fr; }
  .scandaq-loading-form .scandaq-loading-wide { grid-column: auto; }
  .scandaq-loading-viewer { grid-template-columns: 1fr; }
  .scandaq-loading-viewer-toolbar { min-height: 52px !important; }
  .scandaq-loading-viewer-page { min-height: 420px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scandaq-bootstrap-progress::after { animation: none; width: 72%; }
}