:root {
  --surface: hsl(240 6% 2%);
  --surface-100: hsl(240 4% 6%);
  --surface-200: hsl(240 5% 4%);
  --surface-alpha: hsla(0, 0%, 100%, 0.04);
  --surface-alpha-strong: hsla(0, 0%, 100%, 0.08);
  --stroke-base: hsla(0, 0%, 100%, 0.05);
  --stroke-strong: hsla(0, 0%, 100%, 0.1);
  --stroke-stronger: hsla(0, 0%, 100%, 0.15);
  --content-strong: hsl(0 0% 98%);
  --content-base: hsl(0 0% 88%);
  --content-light: hsl(240 4% 67%);
  --content-muted: hsl(240 4% 42%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 6% 3%);
  --success: hsl(142 71% 45%);
  --error: hsl(349 100% 69%);
  --warning: hsl(36 100% 60%);
  --radius: 6px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100vh;
  background: radial-gradient(1200px 700px at 50% -10%, hsl(240 15% 10%) 0%, var(--surface) 60%);
  color: var(--content-base);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--content-light); text-decoration: none; border-bottom: 1px dashed currentColor; }
a:hover { color: var(--content-strong); }

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

.card {
  width: 100%;
  max-width: 440px;
  padding: 36px 32px 28px;
  background: var(--surface-100);
  border: 1px solid var(--stroke-base);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--stroke-base), 0 30px 60px -20px rgba(0,0,0,0.6);
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.brand-word {
  font-size: 30px; font-weight: 800; letter-spacing: -0.05em;
  color: var(--content-strong); line-height: 1;
}
.brand-logo { color: var(--content-strong); }

h1 {
  margin: 4px 0 4px;
  font-size: 26px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--content-strong);
}
.tagline {
  margin: 0 0 28px;
  color: var(--content-muted);
  font-size: 13px;
}

/* ═══ Settings form ═══ */
.settings { text-align: left; display: grid; gap: 16px; }
.settings.hidden, .state.hidden { display: none; }

.form-row { display: grid; gap: 6px; }
.form-row label {
  font-size: 11px; font-weight: 600;
  color: var(--content-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.form-row small { color: var(--content-muted); font-size: 11px; }

input {
  display: block; width: 100%; height: 40px;
  padding: 0 12px;
  background: var(--surface-200);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius);
  color: var(--content-strong);
  font-family: inherit; font-size: 13px; font-weight: 500;
  transition: all 0.12s;
}
input:hover { border-color: var(--stroke-stronger); }
input:focus {
  outline: none;
  border-color: hsla(0,0%,100%,0.25);
  box-shadow: 0 0 0 3px hsla(0,0%,100%,0.06);
}
input::placeholder { color: var(--content-muted); font-weight: 400; }

/* ═══ Buttons ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 14px; height: 36px;
  background: var(--surface-alpha);
  color: var(--content-strong);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius);
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.12s;
}
.btn:hover:not(:disabled) { background: var(--surface-alpha-strong); border-color: var(--stroke-stronger); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: transparent;
}
.btn-primary:hover:not(:disabled) { background: hsl(0 0% 100%); }

.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; width: 100%; }
.btn-xl { height: 50px; padding: 0 22px; font-size: 15px; min-width: 180px; letter-spacing: -0.015em; }

.btn-text {
  background: none; border: none; color: var(--content-muted);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 8px;
  margin-top: 8px;
  text-decoration: underline; text-decoration-color: var(--content-muted);
  text-underline-offset: 3px;
}
.btn-text:hover { color: var(--content-light); }

.hidden { display: none !important; }

/* ═══ Status ═══ */
.state { display: grid; gap: 16px; justify-items: center; }

.status-row {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--surface-alpha);
  border: 1px solid var(--stroke-base);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--content-light);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--content-muted);
}
.status-dot.running { background: var(--success); box-shadow: 0 0 10px hsl(142 71% 45% / 0.6); animation: pulse 1.8s ease-in-out infinite; }
.status-dot.starting { background: var(--warning); animation: pulse 1s ease-in-out infinite; }
.status-dot.error { background: var(--error); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

.status-text.running { color: var(--content-strong); }

.endpoint-line {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--content-muted);
}
.endpoint-line:empty { display: none; }

.actions {
  display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 4px;
}

/* ═══ Logs ═══ */
.logs-wrap {
  margin-top: 24px;
  text-align: left;
  border-top: 1px solid var(--stroke-base);
  padding-top: 16px;
}
.logs-wrap summary {
  cursor: pointer; font-size: 11px; font-weight: 500;
  color: var(--content-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  user-select: none;
}
.logs-wrap summary:hover { color: var(--content-light); }
.logs {
  margin: 12px 0 0;
  max-height: 220px; overflow: auto;
  padding: 12px;
  background: var(--surface-200);
  border: 1px solid var(--stroke-base);
  border-radius: var(--radius);
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.55;
  color: var(--content-light);
  white-space: pre-wrap; word-break: break-word;
}
