:root {
  font-family: 'Avenir Next', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #17233a;
  background: #f3f6fb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 10% -20%, #dbe7ff 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 120%, #ffeadb 0%, transparent 50%),
    #f8fafc;
}

.wrap {
  width: min(920px, 96vw);
  border-radius: 22px;
  background: #ffffffcc;
  backdrop-filter: blur(8px);
  border: 1px solid #dde5f3;
  padding: 30px;
  box-shadow: 0 20px 50px rgba(17, 27, 55, 0.12);
}

.hero { margin-bottom: 18px; }

.eyebrow {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a678a;
}

h1 {
  margin: 6px 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.subtitle {
  margin: 0;
  color: #4b5a80;
}

.panel {
  border: 1px solid #d8e1f2;
  border-radius: 16px;
  padding: 16px;
  background: #f8faff;
  margin: 16px 0;
}

button {
  border: 0;
  background: #1f4fe0;
  color: #fff;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 1rem;
  min-height: 48px;
  cursor: pointer;
  min-width: 180px;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background-color 0.2s ease;
  outline: none;
}

button:focus-visible,
button:hover {
  background: #254bc4;
  transform: translateY(-1px);
}

button:focus-visible {
  border-color: #6b87ff;
  box-shadow: 0 0 0 4px #c7d4ff80;
}

#statusText {
  min-height: 1.4rem;
  color: #233457;
}

.grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

article {
  border-radius: 12px;
  border: 1px solid #dbe6f7;
  background: #fff;
  padding: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
