:root {
  --bg: #111417;
  --panel: #181d20;
  --panel-2: #20272a;
  --line: #384246;
  --ink: #e6e1d2;
  --muted: #9da8a4;
  --gold: #d8ae61;
  --green: #83bd9c;
  --red: #d78072;
  --blue: #8cb5cf;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1280px; margin: 0 auto; padding: 24px; }
.topbar {
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
  border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 22px;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(24px, 4vw, 38px); letter-spacing: 0; }
h2 { margin-bottom: 6px; font-size: 22px; }
h3 { margin-bottom: 0; font-size: 15px; }
.eyebrow { margin-bottom: 8px; color: var(--gold); font-size: 12px; letter-spacing: 2px; }
.muted { color: var(--muted); }
.top-actions { display: flex; gap: 8px; }
.icon-button, .quick-commands button {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  padding: 8px 12px; border-radius: 4px;
}
.icon-button:hover, .quick-commands button:hover { border-color: var(--gold); color: var(--gold); }
.character-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 28px;
  background: var(--panel); border: 1px solid var(--line); padding: 28px; border-radius: 6px;
}
.character-form { display: grid; gap: 14px; align-content: start; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
input, select {
  width: 100%; border: 1px solid var(--line); background: #101416; color: var(--ink);
  border-radius: 4px; padding: 11px 12px; outline: none;
}
input:focus, select:focus { border-color: var(--gold); }
.primary-button {
  border: 1px solid var(--gold); background: var(--gold); color: #201a12;
  border-radius: 4px; padding: 10px 14px; font-weight: 700;
}
.primary-button:hover { background: #e8c67e; }
.game-panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; }
.sidebar { display: grid; align-content: start; gap: 12px; }
.player-card, .sidebar-section, .terminal-wrap {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
.player-card, .sidebar-section { padding: 16px; }
.stat-list { display: grid; gap: 8px; margin-top: 16px; }
.stat-row, .section-heading { display: flex; justify-content: space-between; gap: 12px; }
.stat-row { color: var(--muted); font-size: 13px; }
.stat-row strong { color: var(--ink); font-weight: 500; }
.section-heading { align-items: center; margin-bottom: 10px; }
.section-heading span { color: var(--gold); font-size: 12px; }
.compact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.compact-list li { color: var(--muted); font-size: 13px; line-height: 1.5; }
.compact-list li.done { color: var(--green); }
.compact-list li.locked { color: #69736f; }
.terminal-wrap { min-width: 0; overflow: hidden; }
.terminal {
  min-height: 580px; max-height: 68vh; overflow-y: auto; padding: 22px;
  background: #0d1112; font-family: Consolas, "Courier New", monospace; line-height: 1.7;
}
.terminal-line { margin: 0 0 14px; white-space: pre-wrap; }
.terminal-line.system { color: var(--blue); }
.terminal-line.room { color: var(--ink); }
.terminal-line.success { color: var(--green); }
.terminal-line.warning { color: var(--red); }
.terminal-line.command { color: var(--gold); }
.command-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.quick-commands { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; }
.quick-commands button { font-size: 12px; }
.hidden { display: none !important; }
@media (max-width: 820px) {
  .app-shell { padding: 14px; }
  .character-panel, .game-panel { grid-template-columns: 1fr; }
  .terminal { min-height: 480px; max-height: none; }
  .topbar { align-items: center; }
}