:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080d18;
  color: #edf3ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(36, 106, 255, .2), transparent 32rem),
    #080d18;
}

.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
.eyebrow { color: #6fa3ff; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
h1 { max-width: 800px; margin: 8px 0; font-size: clamp(2.25rem, 7vw, 4.8rem); letter-spacing: -.055em; line-height: .98; }
.lede { max-width: 720px; margin: 20px 0 36px; color: #9caac2; font-size: 1.08rem; line-height: 1.65; }

.panel { border: 1px solid #24314a; border-radius: 18px; background: rgba(14, 22, 38, .86); box-shadow: 0 20px 70px rgba(0,0,0,.24); }
.controls { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px; align-items: end; padding: 20px; }
label { display: grid; gap: 8px; color: #aebbd0; font-size: .82rem; font-weight: 700; }
select, input, button { min-height: 48px; border-radius: 11px; font: inherit; }
select, input { width: 100%; border: 1px solid #34435e; padding: 0 14px; background: #0b1322; color: #f5f8ff; outline: none; }
select:focus, input:focus { border-color: #4c8dff; box-shadow: 0 0 0 3px rgba(76,141,255,.16); }
button { border: 0; padding: 0 22px; background: #397cff; color: white; font-weight: 800; cursor: pointer; }
button:hover { background: #5791ff; }
button:disabled { opacity: .55; cursor: wait; }

.status-row { display: flex; gap: 12px; align-items: center; min-width: 0; margin: 18px 2px 44px; color: #7f8ca3; }
.status-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { flex: none; border-radius: 999px; padding: 7px 11px; font-size: .76rem; font-weight: 800; }
.idle { background: #1a2436; }
.loading { background: #2b2410; color: #ffd467; }
.success { background: #0d3226; color: #6ce5ad; }
.error { background: #3a1821; color: #ff8da4; }

.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
h2 { margin: 0; font-size: 1.35rem; }
#count { color: #8492aa; font-size: .9rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { overflow: hidden; min-height: 128px; border: 1px solid #202d44; border-radius: 14px; padding: 18px; background: #0d1525; }
.card h3 { overflow-wrap: anywhere; margin: 0 0 16px; font-size: 1rem; }
.card p { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; color: #7f8da5; font-size: .78rem; }
.card code { max-width: 68%; overflow-wrap: anywhere; color: #c8d5eb; text-align: right; }
.empty { grid-column: 1 / -1; border: 1px dashed #293752; border-radius: 14px; padding: 34px; color: #718099; text-align: center; }

.raw { margin-top: 28px; }
.raw summary { padding: 18px 20px; cursor: pointer; font-weight: 800; }
pre { overflow: auto; max-height: 600px; margin: 0; border-top: 1px solid #24314a; padding: 20px; color: #b9d1ff; font: .82rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 760px) {
  .shell { padding: 38px 0; }
  .controls { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .status-row { align-items: flex-start; flex-direction: column; }
}