:root {
  --bg: #17181c;
  --panel: #212227;
  --line: #33343a;
  --text: #e8e8ea;
  --muted: #9a9ba3;
  --a: #d06060;
  --b: #2f81f7;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
header h1 { font-size: 22px; margin: 0 0 4px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.card h2 { font-size: 16px; margin: 0 0 12px; }
label { display: block; margin: 10px 0; color: var(--muted); font-size: 13px; }
input, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}
.row { display: flex; gap: 12px; align-items: center; }
.row > * { flex: 1; }
button, .btn {
  padding: 8px 16px;
  background: var(--b);
  border: none;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: default; }
button.danger { background: #a33; }
.cmd-block { position: relative; margin: 10px 0; }
.cmd-block pre {
  margin: 0;
  padding: 10px 70px 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
.cmd-block button {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--line);
}
a { color: var(--b); }
.chat { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.msg { display: flex; }
.msg.left { justify-content: flex-start; }
.msg.right { justify-content: flex-end; }
.bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.msg.left .bubble { border-left: 3px solid var(--a); }
.msg.right .bubble { border-right: 3px solid var(--b); background: #1c2735; }
.who { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.text { white-space: pre-wrap; word-break: break-word; }
.system { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0; }
.badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.badge.live { background: #1d3a2a; color: #7ee2a8; }
.badge.ended { background: #3a2a2a; color: #e2a87e; }
footer { margin-top: 24px; font-size: 13px; }