noscript .ns-wrapper,
.ns-main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem;
  line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: #e5e7eb;
}

noscript h1,
.ns-main h1 {
  font-size: 2rem;
  margin: 0 0 1.5rem;
  font-weight: 700;
  color: #e5e7eb;
}

noscript h2,
.ns-main h2 {
  font-size: 1.25rem;
  margin: 2rem 0 .75rem;
  font-weight: 600;
  color: #e5e7eb;
}

noscript p,
noscript li,
.ns-main p,
.ns-main li {
  font-size: .95rem;
  color: #cbd5e1;
}

noscript ul,
noscript ol,
.ns-main ul,
.ns-main ol {
  padding-left: 1.25rem;
  margin: .5rem 0 1.5rem;
}

noscript .ns-table,
.ns-main .ns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  margin: .75rem 0 1.25rem;
}

noscript .ns-table th,
noscript .ns-table td,
.ns-main .ns-table th,
.ns-main .ns-table td {
  border: 1px solid #1f2937;
  padding: .45rem .55rem;
  text-align: left;
}

noscript .ns-table thead th,
.ns-main .ns-table thead th {
  background: #020617;
  font-weight: 600;
  color: #e5e7eb;
}

/* note-box / info boxes */
noscript .note-box,
.ns-main .note-box {
  background: #0f172a;
  border-left: 4px solid #0ea5e9;
  padding: .75rem 1rem;
  margin: 1rem 0;
  border-radius: 6px;
  font-size: .9rem;
  color: #e5e7eb;
}

noscript .faq-item,
.faq-card {
  margin-bottom: .75rem;
}

noscript a,
.ns-main a {
  color: #7dd3fc;
  text-decoration: none;
}

noscript a:hover,
.ns-main a:hover {
  text-decoration: underline;
}

noscript .warning,
.ns-main .warning {
  background: #1f2937;
  border-left: 4px solid #f97316;
  padding: .65rem .9rem;
  margin: 1rem 0;
  font-size: .85rem;
}

noscript .muted,
.ns-main .ns-muted {
  color: #94a3b8;
  font-size: .85rem;
  margin-top: 2.5rem;
}

/* cards used on FAQ page */
.faq-card {
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #020617;
}

.faq-card h2 {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin: 0 0 .25rem;
}

.faq-card p {
  color: #cbd5e1;
  font-size: .9rem;
  margin: 0;
}

/* simple nav for noscript fallback */
noscript .ns-nav,
.ns-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  background: #0b1220;
  padding: .5rem;
  border-radius: 8px;
}

noscript .ns-nav .ns-brand,
.ns-nav .ns-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: #fff;
}

noscript .ns-nav .ns-brand .badge,
.ns-nav .ns-brand .badge {
  background: #0ea5e9;
  color: #072a3a;
  border-radius: 4px;
  padding: .15rem .5rem;
  font-weight: 700;
  font-size: .75rem;
}

noscript .ns-nav .ns-brand .ns-icon,
.ns-nav .ns-brand .ns-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

noscript .ns-nav a,
.ns-nav a {
  color: #cbd5e1;
  text-decoration: none;
  padding: .35rem .55rem;
  border-radius: 6px;
  background: transparent;
}

noscript .ns-nav a:hover,
.ns-nav a:hover {
  background: #1f2937;
  color: #fff;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
}

/* Layout: prefer column flex layout so footer stays pinned to the bottom of the viewport
   when the page has little content, but allows content to grow and scroll when the
   page is long. We keep legacy height 100% usage minimal and use min-height/ flex. */
html, body {
  min-height: 100vh; /* ensure viewport is filled */
  display: flex;
  flex-direction: column;
}

#root {
  /* Make the React root fill available space and allow its internal content to scroll
     if necessary. This ensures the footer remains after the end of the layout. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to shrink/scroll inside flex containers */
}

body {
  @apply bg-slate-950 text-slate-100;
  /* Animated base gradient */
  background-image:
    linear-gradient(45deg, #0f172a, #16354b, #134e4a, #312e81, #0f172a),
    radial-gradient(60% 60% at 50% 0%, rgba(14, 165, 233, 0.15), transparent 60%),
    radial-gradient(45% 45% at 80% 10%, rgba(34, 197, 94, 0.12), transparent 60%),
    radial-gradient(30% 30% at 20% 0%, rgba(59, 130, 246, 0.12), transparent 60%);
  background-size: 400% 400%, auto, auto, auto;
  /* Disable heavy background animation by default to reduce GPU usage.
     You can opt-in by setting the CSS variable --bg-animation on html or body.
     Example: html.bg-anim { --bg-animation: gradientFlow 60s linear infinite; } */
  animation: var(--bg-animation, none);
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%, center, center, center; }
  50% { background-position: 100% 50%, center, center, center; }
  100% { background-position: 0% 50%, center, center, center; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

.container-max {
  @apply max-w-6xl mx-auto px-4;
}

.card {
  @apply bg-slate-900/90 backdrop-blur rounded-xl border border-slate-700/60 shadow-lg;
}

.dashed {
  border: 2px dashed rgba(148, 163, 184, 0.35);
}