:root {
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #9aa4b2;
  --accent: #6ee7b7;
  --radius: 14px;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: #d7e3ef;
  padding: 2rem;
}

.app {
  max-width: 800px;
  margin: auto;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}

.tab {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
}

.tab.active {
  background: var(--accent);
  color: #03201c;
}

.panel {
  display: none;
  padding: 20px;
  background: var(--card);
  border-radius: var(--radius);
}

.panel[hidden] {
  display: none;
}

.panel:not([hidden]) {
  display: block;
}

input, button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-family: inherit;
}

button {
  background: var(--accent);
  color: #03201c;
  cursor: pointer;
}

.messages {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  height: 200px;
  overflow-y: auto;
  margin-bottom: 8px;
}