:root {
  color-scheme: dark;
  --bg: #0c1117;
  --surface: #121922;
  --surface-raised: #171f2a;
  --surface-input: #0a0f15;
  --line: #263241;
  --line-strong: #344457;
  --text: #f2f6fa;
  --muted: #91a0b1;
  --soft: #c6d0db;
  --green: #43d19e;
  --blue: #72a7ff;
  --red: #ff7186;
  --red-dark: #44202a;
  --amber: #f2bb5e;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; letter-spacing: 0; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 32px; }
.topbar, .brand, .connection-panel, .connection-form, .command-bar, .actions, .panel-heading, footer { display: flex; align-items: center; }
.topbar { justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.brand { gap: 13px; min-width: 0; }
.brand-mark { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid #315e51; border-radius: 8px; background: #11251f; }
.brand-mark span { width: 16px; height: 16px; border: 3px solid var(--green); border-radius: 50%; box-shadow: inset 0 0 0 3px #11251f; }
h1, h2, p { margin: 0; }
h1 { font-size: 20px; line-height: 1.2; font-weight: 720; }
h2 { font-size: 15px; line-height: 1.35; font-weight: 700; }
.brand p, .connection-copy p, .command-bar p, .panel-heading p { color: var(--muted); }
.brand p { margin-top: 3px; font-size: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 32px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.online { border-color: #27644f; background: #102a22; color: var(--green); }
.status-pill.stopped { border-color: #4c3c22; background: #281f12; color: var(--amber); }
.status-pill.error { border-color: #693040; background: #30181f; color: var(--red); }
.connection-panel { justify-content: space-between; gap: 24px; padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.connection-copy { min-width: 250px; }
.connection-copy p { margin-top: 3px; font-size: 12px; }
.connection-form { justify-content: flex-end; gap: 8px; width: min(100%, 530px); }
.token-field { position: relative; flex: 1; min-width: 180px; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--surface-input); color: var(--text); transition: border-color .16s ease, box-shadow .16s ease; }
input { height: 40px; padding: 0 58px 0 12px; }
input::placeholder, textarea::placeholder { color: #667485; }
input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(114, 167, 255, .12); }
.icon-button { position: absolute; top: 4px; right: 4px; height: 32px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.icon-button:hover { background: var(--surface-raised); color: var(--text); }
.button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-raised); color: var(--text); font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.button:hover:not(:disabled) { border-color: #4a5f75; background: #202b38; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:focus-visible, .icon-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button.primary { border-color: #2a8065; background: #1c6c54; color: #f7fffc; }
.button.primary:hover:not(:disabled) { border-color: #47be93; background: #238060; }
.button.danger { border-color: #713849; background: var(--red-dark); color: #ffdbe1; }
.button.danger:hover:not(:disabled) { border-color: #a94d63; background: #572633; }
.button.ghost { background: transparent; color: var(--soft); }
.button.is-loading { color: transparent; position: relative; pointer-events: none; }
.button.is-loading::after { position: absolute; inset: 0; width: 14px; height: 14px; margin: auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; color: var(--text); animation: spin .7s linear infinite; }
.overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.metric { min-width: 0; padding: 19px 20px 18px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.metric strong { display: block; min-height: 29px; overflow: hidden; color: var(--text); font-size: 21px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.metric-state strong { color: var(--amber); }
.metric-state.is-running strong { color: var(--green); }
.metric small { display: block; margin-top: 4px; overflow: hidden; color: #748394; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.command-bar { justify-content: space-between; gap: 18px; padding: 15px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.command-bar p { margin-top: 3px; font-size: 12px; }
.actions { justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.action-divider { width: 1px; height: 26px; margin: 0 3px; background: var(--line); }
.notice { min-height: 38px; margin: 10px 0 8px; padding: 9px 12px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: 12px; }
.notice:empty { visibility: hidden; }
.notice.success { border-color: #245f4c; background: #10271f; color: #72dbb5; }
.notice.error { border-color: #663040; background: #2c171d; color: #ff9aaa; }
.notice.info { border-color: #31557f; background: #14243a; color: #98bdff; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.workspace-panel { min-width: 0; }
.workspace-panel + .workspace-panel { border-left: 1px solid var(--line); }
.panel-heading { justify-content: space-between; gap: 16px; min-height: 68px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.panel-heading p { margin-top: 3px; font-size: 11px; }
textarea, pre { height: 430px; margin: 0; border: 0; border-radius: 0; }
textarea { display: block; padding: 15px; resize: vertical; font: 12px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace; tab-size: 2; }
textarea:disabled { opacity: .68; cursor: not-allowed; }
pre { overflow: auto; padding: 15px; background: var(--surface-input); color: #bac6d3; white-space: pre-wrap; word-break: break-word; font: 12px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
footer { justify-content: space-between; padding: 18px 2px 0; color: #647181; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .connection-panel { align-items: stretch; flex-direction: column; gap: 13px; }
  .connection-form { width: 100%; }
  .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .command-bar { align-items: flex-start; flex-direction: column; }
  .actions { justify-content: flex-start; }
  .workspace { grid-template-columns: 1fr; }
  .workspace-panel + .workspace-panel { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 620px) {
  .app-shell { width: min(100% - 24px, 1240px); padding-top: 18px; }
  .topbar { align-items: flex-start; gap: 12px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  h1 { font-size: 18px; }
  .brand p { max-width: 180px; }
  .status-pill { padding: 5px 9px; }
  .connection-panel { padding: 15px; }
  .connection-copy { min-width: 0; }
  .connection-form { align-items: stretch; flex-direction: column; }
  .token-field { min-width: 0; }
  .overview { grid-template-columns: 1fr; }
  .metric { padding: 15px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:nth-child(3) { border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .metric strong { font-size: 19px; }
  .command-bar { padding: 14px 2px; }
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .actions .button { width: 100%; padding: 0 9px; }
  .action-divider { display: none; }
  .panel-heading { align-items: flex-start; }
  .panel-heading .button { flex: 0 0 auto; }
  textarea, pre { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}