:root {
  color-scheme: dark;
  --bg: #0b0d0c;
  --panel: #121613;
  --panel-2: #171d18;
  --line: #2a342c;
  --text: #edf2ed;
  --muted: #96a398;
  --green: #86efac;
  --green-dark: #173b25;
  --red: #fca5a5;
  --red-dark: #431c1c;
  --amber: #fcd34d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at top left, #142018 0, var(--bg) 38rem);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}

button, input, textarea { font: inherit; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.topbar h1, .panel h2, .auth-card h1 { margin: 0; }
.eyebrow { margin: 0 0 5px; color: var(--green); letter-spacing: .14em; text-transform: uppercase; font: 700 12px/1.2 ui-monospace, monospace; }
.muted, .panel-head p, .connection-panel p { color: var(--muted); }
.top-actions, .actions { display: flex; align-items: center; gap: 10px; }

.layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 18px; }
.sidebar { display: grid; gap: 18px; align-content: start; }
.panel { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.panel-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.panel-head p { margin: 7px 0 0; line-height: 1.45; }
.editor-panel textarea { width: 100%; min-height: 570px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; background: #090c0a; color: #d6e4d8; padding: 15px; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; outline: none; }
.editor-panel textarea:focus, input:focus { border-color: #4d7357; box-shadow: 0 0 0 3px rgba(134,239,172,.1); }
.actions { margin-top: 14px; justify-content: flex-end; }

button { border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 9px 14px; cursor: pointer; }
button.primary { background: var(--green); color: #071109; border-color: var(--green); font-weight: 750; }
button.ghost { background: var(--panel-2); }
button:hover { filter: brightness(1.08); }
.wide { width: 100%; }

.status-pill { padding: 7px 11px; border-radius: 999px; background: #282315; color: var(--amber); font-size: 13px; }
.status-pill[data-state="proxy_listening"] { background: var(--green-dark); color: var(--green); }
.status-pill[data-state="starting"] { background: #352b12; color: var(--amber); }

.kv { margin: 15px 0 18px; }
.kv > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; font-family: ui-monospace, monospace; }
.flash { margin: 14px 0 0; border-radius: 9px; padding: 11px 13px; }
.flash.ok { background: var(--green-dark); color: var(--green); }
.flash.error { background: var(--red-dark); color: var(--red); }
.test-result { min-height: 22px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.ok-text { color: var(--green); }
.error-text { color: var(--red); }

.connection-panel { margin-top: 18px; }
.code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
pre { margin: 0; overflow: auto; background: #090c0a; border: 1px solid var(--line); border-radius: 9px; padding: 14px; color: #c9ddcc; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.auth-body { display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 28px; }
.stack { display: grid; gap: 15px; margin-top: 22px; }
label { display: grid; gap: 7px; color: var(--muted); }
input { width: 100%; background: #090c0a; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; outline: none; }

@media (max-width: 860px) {
  .layout, .code-grid { grid-template-columns: 1fr; }
  .editor-panel textarea { min-height: 430px; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 20px, 1180px); padding-top: 16px; }
  .topbar { align-items: flex-start; gap: 12px; }
  .top-actions { flex-direction: column; align-items: flex-end; }
  .actions { flex-direction: column; }
  .actions button { width: 100%; }
}