:root { color-scheme: dark; }
html, body, #root { min-height: 100%; }
body { text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid rgba(0, 200, 255, 0.9); outline-offset: 2px; }
.noscript-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #0b1220;
  color: #e5eefb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.noscript-card {
  max-width: 42rem;
  width: 100%;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.noscript-title { margin: 0 0 .75rem; font-size: 1.5rem; }
.noscript-copy { margin: 0 0 .75rem; }
.noscript-copy-muted { margin-bottom: 0; opacity: .85; }
.app-boot-shell {
  display: none;
  margin: 0 auto;
  max-width: 64rem;
  padding: 2rem 1rem 0;
}
.app-boot-shell.is-visible { display: block; }
.app-boot-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .9);
  color: #dbeafe;
  border-radius: 1rem;
  padding: 1rem 1.125rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  font: 500 0.95rem/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.app-boot-copy { min-width: 0; }
.app-boot-title {
  font-weight: 700;
  margin-bottom: .25rem;
}
.app-boot-message { opacity: .96; }
.app-boot-actions { margin-top: .75rem; }
.app-boot-retry {
  appearance: none;
  border: 1px solid rgba(125, 211, 252, .35);
  background: rgba(2, 132, 199, .16);
  color: #e0f2fe;
  border-radius: .75rem;
  padding: .55rem .9rem;
  font: inherit;
  cursor: pointer;
}
.app-boot-retry:hover { background: rgba(2, 132, 199, .24); }
.app-boot-spinner {
  width: 1rem;
  height: 1rem;
  margin-top: .2rem;
  border-radius: 999px;
  border: 2px solid rgba(125, 211, 252, .25);
  border-top-color: rgba(125, 211, 252, .92);
  animation: boot-spin .8s linear infinite;
  flex: 0 0 auto;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
body.boot-failed .app-boot-card {
  border-color: rgba(248, 113, 113, .4);
  background: rgba(127, 29, 29, .14);
  color: #fee2e2;
}
body.boot-offline .app-boot-card {
  border-color: rgba(245, 158, 11, .4);
  background: rgba(120, 53, 15, .16);
  color: #fef3c7;
}
body.boot-ready .app-boot-shell { display: none !important; }
html[data-app-boot='pending'] #root:empty,
html[data-app-boot='boot-pending'] #root:empty,
html[data-app-boot='boot-failed'] #root:empty,
html[data-app-boot='boot-offline'] #root:empty {
  min-height: 8rem;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.app-boot-shell { pointer-events: none; }
.app-boot-shell .app-boot-card, .app-boot-shell .app-boot-retry { pointer-events: auto; }

body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
iframe { max-width: 100%; }
button, [role="button"], a, input, textarea, select { touch-action: manipulation; }
@media (max-width: 767px) {
  .container { width: 100%; }
  .section-dark, .section-light, .section-muted { overflow-x: clip; }
}

.noscript-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}
.noscript-link-grid a {
  display: block;
  padding: .8rem .9rem;
  border-radius: .75rem;
  background: rgba(30, 41, 59, .55);
  border: 1px solid rgba(148, 163, 184, .18);
}
img[width][height] { height: auto; }
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px; }
  .app-boot-shell { padding-top: 1rem; }
  .app-boot-card { padding: .95rem 1rem; }
}