:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color: #edf2f7;
  background: #080b10;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% -20%, rgba(52, 107, 255, .23), transparent 42rem),
    linear-gradient(180deg, #0c1018 0%, #07090d 100%);
}

button, input { font: inherit; }

.shell {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(48px, 8vh) 0 56px;
}

header { margin-bottom: 32px; }

.eyebrow, .label {
  margin: 0 0 8px;
  color: #8fa6c3;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 7vw, 3.65rem); line-height: .98; }
h2 { font-size: 1.18rem; }
.lede { max-width: 560px; color: #9aa9bb; line-height: 1.55; }

.panel {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 18px;
  background: rgba(17, 23, 33, .78);
  box-shadow: 0 20px 70px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
}

.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.status { color: #b4c0ce; }
.badge { padding: 7px 10px; border-radius: 999px; background: #262c36; color: #aeb8c5; font-size: .78rem; font-weight: 700; }
.badge[data-state="ready"] { color: #a9f7cf; background: rgba(36, 172, 101, .16); }
.badge[data-state="starting"] { color: #ffe4a7; background: rgba(216, 152, 37, .15); }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: rgba(255,255,255,.075);
}

.grid div { min-width: 0; padding: 15px; background: #101620; }
.grid span { display: block; margin-bottom: 5px; color: #75869a; font-size: .76rem; }
.grid strong { display: block; overflow: hidden; color: #e8edf4; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }

.endpoints { display: grid; gap: 7px; margin: -6px 0 20px; }
code { overflow-wrap: anywhere; color: #a9c5ff; font-size: .78rem; }

.actions { display: flex; flex-wrap: wrap; gap: 9px; }
button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  color: #dfe7f1;
  background: #1a2230;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #232e40; }
button:focus-visible { outline: 3px solid #91b7ff; outline-offset: 3px; }
button.primary { border-color: #3f6fc8; background: #2d62bf; color: white; }
button.primary:hover:not(:disabled) { background: #3973d7; }
button.danger { color: #ffb4b4; }
button:disabled { cursor: not-allowed; opacity: .42; }
.busy button { pointer-events: none; opacity: .55; }
.message { min-height: 24px; padding: 0 4px; color: #a9bad0; font-size: .88rem; }
.message[data-error="true"] { color: #ffadad; }

@media (max-width: 560px) {
  .shell { width: min(100% - 20px, 720px); padding-top: 28px; }
  .panel { padding: 18px; border-radius: 15px; }
  .grid { grid-template-columns: 1fr; }
  .actions { display: grid; grid-template-columns: 1fr; }
  button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}