:root {
  --bg: #0f1115;
  --bg-2: #171a21;
  --panel: #1e232c;
  --panel-2: #262c37;
  --border: #333b48;
  --text: #e6e8ec;
  --text-dim: #9aa3b2;
  --accent: #c8442b;      /* 三国朱红 */
  --accent-2: #e0a13c;    /* 金 */
  --wei: #d1443c;         /* 魏 红 */
  --shu: #43a047;         /* 蜀 绿 */
  --wu: #4a78c8;          /* 吴 蓝 */
  --qun: #8e8e8e;         /* 群 灰 */
  --han: #b06fd0;         /* 汉 紫 */
  --ta: #b89a5a;          /* 他 */
  --radius: 8px;
  --shadow: 0 4px 16px rgba(0,0,0,.45);
  --font: "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  height: 100%;
}
a { color: var(--accent-2); text-decoration: none; }

button, .btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font);
  transition: background .15s, border-color .15s;
}
button:hover, .btn:hover { background: #303845; border-color: var(--accent-2); }
button.primary, .btn.primary {
  background: linear-gradient(180deg, var(--accent), #a5341f);
  border-color: #a5341f; color: #fff; font-weight: 600;
}
button.primary:hover { background: linear-gradient(180deg, #d84e35, var(--accent)); }

input, select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  font-family: var(--font);
  outline: none;
}
input:focus, select:focus { border-color: var(--accent-2); }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.topbar .logo {
  font-weight: 800; font-size: 18px; letter-spacing: 1px;
  color: var(--accent-2);
}
.topbar .spacer { flex: 1; }

/* 势力色标 */
.faction-魏, .faction-蓝 { color: var(--wei); }
.faction-蜀 { color: var(--shu); }
.faction-吴, .faction-吳 { color: var(--wu); }
.faction-群 { color: var(--qun); }
.faction-汉, .faction-漢 { color: var(--han); }
.faction-他 { color: var(--ta); }

.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; border: 1px solid var(--border); background: var(--panel);
}

.card-back {
  background:
    repeating-linear-gradient(45deg, #6b1f13 0 8px, #7d271a 8px 16px);
  border: 1px solid #3a130c;
  display: flex; align-items: center; justify-content: center;
  color: #e0a13c; font-weight: 800;
}

.scroll { overflow: auto; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: #3a4250; border-radius: 6px; }
.scroll::-webkit-scrollbar-track { background: transparent; }