:root {
  --bg: #0f1720;
  --panel: #182230;
  --text: #e8eef5;
  --muted: #93a4b5;
  --accent: #2f9e7b;
  --warn: #c47b2c;
  --danger: #c44545;
  --banner: #1a3d32;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1d3348 0%, transparent 55%),
    linear-gradient(180deg, #0c1219, #121a24 40%, #0f1720);
  color: var(--text);
  min-height: 100vh;
}
.banner {
  background: var(--banner);
  color: #b8f0d8;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.75rem;
  border-bottom: 2px solid #2f9e7b;
}
header { padding: 1.25rem 1.5rem 0.5rem; }
header h1 { margin: 0; font-size: 1.6rem; }
.sub { margin: 0.35rem 0 0; color: #93a4b5; }
.controls {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end;
  padding: 1rem 1.5rem;
}
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #93a4b5; }
input {
  background: #0d141c; border: 1px solid #2a3a4d; color: var(--text);
  padding: 0.45rem 0.6rem; border-radius: 6px; min-width: 8rem;
}
button, .button-link {
  background: var(--accent); color: #04140f; border: 0; border-radius: 6px;
  padding: 0.55rem 0.9rem; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
button.secondary { background: #35506b; color: #e8eef5; }
button.danger { background: var(--danger); color: #fff; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; padding: 0 1.5rem 1rem;
}
.grid.two { grid-template-columns: 1fr 1fr; }
article, section > pre {
  background: color-mix(in srgb, var(--panel) 92%, black);
  border: 1px solid #243447; border-radius: 10px; padding: 1rem;
}
h2 { margin: 0 0 0.6rem; font-size: 1rem; color: #b7c6d6; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-size: 0.85rem; }
.scroll { max-height: 280px; overflow: auto; font-size: 0.85rem; }
.scroll div { padding: 0.4rem 0; border-bottom: 1px solid #243447; }
section { padding: 0 1.5rem 1.5rem; }
@media (max-width: 700px) {
  .grid.two { grid-template-columns: 1fr; }
}