:root {
  --paper: #f5f3ee;
  --paper-2: #eeece4;
  --card: #ffffff;
  --ink: #16191b;
  --ink-2: #3d4346;
  --muted: #737a76;
  --line: #e4e0d5;
  --line-strong: #d5cfbf;
  --gold: #b98a2f;
  --gold-soft: #f6ecd6;
  --red: #d3453a;
  --red-soft: #fbe9e6;
  --blue: #3a76c9;
  --blue-soft: #e9f0fb;
  --green: #2f9e6b;
  --green-soft: #e7f5ee;
  --shadow: 0 1px 2px rgba(30, 27, 20, .05), 0 8px 24px rgba(30, 27, 20, .05);
  --radius: 14px;
  --sidebar-w: 232px;
  --rail-w: clamp(304px, 23vw, 384px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, pre, .mono { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; }

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w);
  min-height: 100vh;
}

/* ============ 侧栏 ============ */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 14px 14px;
  background: #fbfaf6;
  border-right: 1px solid var(--line);
  overflow: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 6px;
}
.brand .mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #23261f;
  color: #f2e6c8;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .5px;
}
.brand strong { display: block; font-size: 14px; letter-spacing: 1.5px; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .5px; }

.server-switch-wrap { position: relative; }

.server-card {
  display: flex;
  gap: 10px;
  padding: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.server-card:hover { border-color: #d4cdb8; box-shadow: 0 2px 10px rgba(30, 27, 20, .06); }
.server-card[aria-expanded="true"] { border-color: #c9b98c; background: #fffdf7; }
.server-thumb {
  width: 46px;
  height: 34px;
  border-radius: 7px;
  overflow: hidden;
  flex: none;
  background: #e8e3d4;
}
.server-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.server-copy { min-width: 0; flex: 1; }
.server-caret { color: var(--muted); font-size: 12px; flex: none; line-height: 1; }
.server-card .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: normal; overflow: hidden; }
.server-card .meta { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-card .meta .dot { color: var(--gold); }

.server-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(24, 22, 16, .16);
  max-height: 360px;
  overflow: auto;
}
.server-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px 7px; color: var(--muted); font-size: 11px; }
.server-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.server-menu-item:hover { background: #f5f1e5; }
.server-menu-item.active { background: #fbf4df; }
.server-menu-dot { width: 7px; height: 7px; border-radius: 50%; background: #b9b3a4; flex: none; }
.server-menu-item.active .server-menu-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(185, 138, 47, .14); }
.server-menu-copy { min-width: 0; flex: 1; }
.server-menu-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.3; }
.server-menu-host { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-menu-go { flex: none; font-size: 10px; color: var(--muted); }
.server-menu-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.server-menu-foot button {
  width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; text-align: center;
}
.server-menu-foot button:hover { background: #f5f1e5; }

.server-list-card .card-head { align-items: flex-start; gap: 12px; }
.server-manage-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.server-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffefa;
}
.server-manage-row.is-active { border-color: #cdbb8b; background: #fffbf0; }
.server-manage-row.is-selected { box-shadow: 0 0 0 2px rgba(185, 138, 47, .12); }
.server-manage-mark { flex: none; color: var(--gold); font-size: 12px; width: 14px; text-align: center; }
.server-manage-copy { min-width: 0; flex: 1; }
.server-manage-copy .nm { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.server-manage-copy .sub { margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.server-pill { font-size: 10px; font-weight: 500; color: var(--gold); border: 1px solid rgba(185, 138, 47, .35); background: #fff8e6; border-radius: 999px; padding: 2px 7px; }
.server-manage-actions { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.server-list-card .notice { margin-top: 10px; }

.side-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.side-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12.5px;
}
.side-search kbd {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  background: #f7f5ee;
}

.nav-group { margin-top: 6px; }
.nav-group > span {
  display: block;
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: var(--ink-2);
}
.nav-item:hover { background: #f1eee5; }
.nav-item.active { background: #ede9dd; color: var(--ink); font-weight: 600; }
.nav-item .ico { width: 16px; text-align: center; opacity: .6; }
.nav-item .badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 10.5px;
  line-height: 17px;
  text-align: center;
}
.nav-item .badge.soft { background: #ece7da; color: var(--ink-2); }

.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.conn-line {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: #b9beb6; }
.conn-dot.on { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.conn-dot.warn { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.conn-dot.off { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.user-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e9e3d3; font-size: 12px; font-weight: 700;
}
.user-line .who { flex: 1; font-size: 12px; }
.user-line .who small { display: block; color: var(--muted); font-size: 10.5px; }
.icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink-2);
}
.icon-btn:hover { border-color: var(--line-strong); background: #fbf9f2; }
.icon-btn.wide { width: auto; padding: 0 9px; font-size: 11px; white-space: nowrap; flex: none; }

/* ============ 主栏 ============ */
.main { min-width: 0; display: flex; flex-direction: column; }

.hero {
  position: relative;
  padding: 26px 34px 0;
  min-height: 168px;
  overflow: hidden;
  border-bottom: 1px solid transparent;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 220px at 8% -30%, rgba(120, 132, 96, .45), transparent 70%),
    radial-gradient(700px 260px at 70% -40%, rgba(180, 158, 110, .35), transparent 70%),
    linear-gradient(180deg, #e9e6da 0%, #f2efe6 62%, var(--paper) 100%);
  opacity: .9;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .25;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 78%);
}
.hero-bg.has-art {
  background-image:
    linear-gradient(90deg, rgba(245, 242, 233, .985) 0%, rgba(245, 242, 233, .95) 30%, rgba(245, 242, 233, .7) 55%, rgba(245, 242, 233, .16) 100%),
    var(--hero-art);
  background-size: cover;
  background-position: center 44%;
  background-repeat: no-repeat;
  opacity: 1;
}
.hero-bg.has-art::after { opacity: .07; }
.hero-inner { position: relative; max-width: none; }
.hero-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: .3px;
}
.hero-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.3px;
  font-weight: 800;
}
.hero-title .lead { color: var(--gold); }
.hero-sub { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-2); }
.tabs { display: flex; gap: 6px; margin: 16px 0 0; flex-wrap: wrap; }
.tab {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--ink-2);
}
.tab:hover { background: rgba(255, 255, 255, .5); }
.tab.active { background: var(--card); border-color: var(--line); font-weight: 600; box-shadow: var(--shadow); }

.content { padding: 24px clamp(24px, 2.4vw, 48px) 56px; max-width: 1760px; width: 100%; margin: 0 auto; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head .hint { margin-left: auto; font-size: 11.5px; color: var(--muted); }

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
}
.section-title h2 { margin: 0; font-size: 17px; font-weight: 700; }
.section-title .hint { margin-left: auto; font-size: 11.5px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.grid-2 > .card { display: flex; flex-direction: column; }
.grid-2 > .card + .card { margin-top: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 7px; }
.spacer { flex: 1; }

.btn {
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #fbf8f0; }
.btn.primary { background: #262a26; border-color: #262a26; color: #f6f3ea; font-weight: 600; }
.btn.primary:hover { background: #333833; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
.btn.gold:hover { filter: brightness(1.05); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--ink-2); }
.field > span .tag {
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: #8a6620;
}
.field input, .field select, .field textarea, .input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 9px 11px;
  background: #fdfcf9;
  outline: 0;
  font-size: 13px;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field input[readonly] { background: #f4f2ec; color: var(--muted); }
textarea { resize: vertical; min-height: 62px; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { display: none; }
.switch i {
  width: 38px; height: 21px; border-radius: 999px; background: #dcd7ca; position: relative; transition: .18s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: .18s;
}
.switch input:checked + i { background: var(--gold); }
.switch input:checked + i::after { left: 19px; }
.switch span { font-size: 12.5px; color: var(--ink-2); }

.chip {
  border: 1px solid var(--line-strong);
  background: #fbfaf5;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.chip:hover { background: #f4f0e4; }
.chip.active { background: #262a26; border-color: #262a26; color: #fff; font-weight: 600; }
.chip .n { opacity: .55; margin-left: 5px; font-size: 11px; }
.chip.static { cursor: default; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: #f0ece0; color: var(--ink-2);
}
.pill.gold { background: var(--gold-soft); color: #8a6620; }
.pill.red { background: var(--red-soft); color: #a3352c; }
.pill.green { background: var(--green-soft); color: #227a51; }
.pill.blue { background: var(--blue-soft); color: #2d5f9f; }

.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono-num { font-variant-numeric: tabular-nums; }

.empty {
  padding: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #fbfaf5;
}

.notice {
  border: 1px solid #e8d9b4;
  background: #fbf3de;
  color: #6d5522;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.6;
}
.notice.red { border-color: #efc9c3; background: var(--red-soft); color: #97392f; }
.notice.green { border-color: #bfe1cd; background: var(--green-soft); color: #1f6c48; }

/* 阵营色 */
.f-blue { color: var(--blue); }
.f-red { color: var(--red); }
.f-green { color: var(--green); }
.b-bar { height: 4px; border-radius: 3px; background: #ece7da; overflow: hidden; }
.b-bar > i { display: block; height: 100%; border-radius: 3px; }

/* ============ 右栏 ============ */
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 16px clamp(14px, 1.2vw, 22px) 18px;
  border-left: 1px solid var(--line);
  background: #fbfaf6;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.35vh, 20px);
}

.rail-map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}
.rail-map .cover {
  height: clamp(96px, 10vh, 132px);
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 241, 205, .9), transparent 55%),
    linear-gradient(120deg, #8d9568 0%, #646b4a 45%, #3c453a 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}
.rail-map .cover .demo {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: rgba(20, 22, 20, .55); color: #f5efe2;
}
.rail-map .cover .mname { color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.rail-map .body { padding: 10px 12px 11px; }
.rail-map .body .line1 { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); }
.rail-map .body .line2 { margin-top: 3px; font-size: 10.5px; color: var(--muted); }

.rail-block { padding: 13px 2px 0; border-top: 1px solid rgba(213, 207, 191, .55); }
.rail-title { display: flex; align-items: baseline; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; letter-spacing: .3px; }
.rail-title .right { margin-left: auto; font-weight: 400; color: var(--muted); }

.score-row { margin-bottom: 9px; }
.score-row .top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.score-row .top .nm { font-weight: 600; }
.score-row .top .lead { font-size: 10px; color: var(--muted); }
.score-row .top .val { margin-left: auto; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-row .bar { margin-top: 4px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 2px 0; }
.stat .k { font-size: 10.5px; color: var(--muted); }
.stat .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 11px; font-weight: 400; color: var(--muted); }

.spark-wrap { position: relative; height: clamp(48px, 6vh, 72px); margin-top: 4px; }
.spark-wrap canvas { width: 100%; height: 100%; display: block; }
.spark-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 2px; }

.rail-next {
  display: flex; gap: 9px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--card);
}
.rail-next .thumb { width: 54px; height: 34px; border-radius: 6px; background: linear-gradient(150deg, #7d8a63, #4a5544); flex: none; background-size: cover; background-position: center; }
.rail-next .nm { font-size: 12px; font-weight: 600; }
.rail-next .sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.rail-next .idx { margin-left: auto; font-size: 10.5px; color: var(--muted); }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-grid .btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; font-size: 12.5px; min-width: 0; }

.broadcast {
  background: #fbfaf6;
  padding: 13px 2px 0;
  border-top: 1px solid var(--line-strong);
}
.broadcast textarea {
  width: 100%;
  min-height: clamp(84px, 10vh, 128px);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.broadcast textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185, 138, 47, .14); }
.broadcast textarea::placeholder { color: #9b9f99; }
.quick-head { display: flex; align-items: center; justify-content: space-between; margin: 9px 0 5px; font-size: 10.5px; color: var(--muted); }
.quick-head .quick-add { border: 0; background: transparent; padding: 2px 0; color: var(--gold); font-size: 10.5px; font-weight: 600; }
.quick-head .quick-add:hover { text-decoration: underline; }
.broadcast .presets { display: flex; flex-direction: column; gap: 5px; margin: 0 0 6px; max-height: 178px; overflow: auto; padding-right: 2px; }
.broadcast .quick-list { max-height: 146px; }
.preset-sep { font-size: 10px; color: #a5a9a2; margin: 3px 0 1px; }
.preset-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.preset-row .preset { flex: 1; min-width: 0; }
.preset-tools { display: flex; gap: 3px; flex: none; }
.preset-tools button {
  width: 25px; height: 27px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: #fbfaf5; color: var(--muted); font-size: 10.5px; line-height: 1;
}
.preset-tools button:hover { background: #f1ecdf; color: var(--ink-2); border-color: var(--line-strong); }
.quick-form { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.quick-form[hidden] { display: none; }
.quick-input {
  width: 100%; padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; font-size: 12px; line-height: 1.45; outline: none;
}
.quick-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185, 138, 47, .14); }
.quick-form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.broadcast .preset {
  text-align: left; border: 1px solid var(--line); background: #fbfaf5; border-radius: 7px;
  padding: 6px 9px; font-size: 11px; color: var(--ink-2);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.broadcast .preset:hover { background: #f3efe3; border-color: var(--line-strong); }
.broadcast .foot { display: flex; align-items: center; gap: 8px; }
.broadcast .count { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.broadcast .bcast-tip { font-size: 10px; color: #a5a9a2; }
.broadcast .send { margin-left: auto; min-width: 78px; height: 34px; }

/* ============ 玩家表 ============ */
.player-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.faction-col {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.faction-col .fc-head {
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--line);
  border-top: 3px solid var(--blue);
}
.faction-col .fc-head .nm { font-weight: 700; font-size: 13px; }
.faction-col .fc-head .nums { margin-left: auto; font-size: 20px; font-weight: 800; }
.faction-col .fc-sub { font-size: 10.5px; color: var(--muted); }
.plist { max-height: 560px; overflow: auto; }
.prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 46px auto;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f1eee6;
  cursor: pointer;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
}
.prow .row-faction { font-size: 11px; padding: 4px 8px; white-space: nowrap; justify-self: end; }
.prow.no-faction { grid-template-columns: minmax(0, 1fr) 64px 46px; }
.prow:hover { background: #faf7ef; }
.prow .pname { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.prow .pname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .kd { font-size: 11.5px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.prow .ping { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.prow .ping.warn { color: #b26a13; font-weight: 600; }
.prow .ping.bad { color: var(--red); font-weight: 600; }
.faction-pop {
  position: fixed;
  z-index: 62;
  width: 216px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.faction-pop .fp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 7px;
  border-bottom: 1px solid var(--line);
}
.faction-pop .fp-head strong { font-size: 12px; }
.faction-pop .fp-close {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.faction-pop .fp-close:hover { background: var(--paper-2); color: var(--ink); }
.faction-pop .fp-sub {
  padding: 6px 5px 4px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.faction-pop .fp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.faction-pop .fp-opt:hover { background: var(--paper); }
.faction-pop .fp-opt.active { background: var(--gold-soft); }
.faction-pop .fp-opt:disabled { opacity: .5; cursor: default; }
.faction-pop .fp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.faction-pop .fp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faction-pop .fp-cur { margin-left: auto; color: var(--muted); font-size: 10px; }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 4px; font-size: 12px; border-bottom: 1px solid #f1eee6; }
.table th { color: var(--muted); font-weight: 500; font-size: 11px; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .id { font-family: Consolas, monospace; font-size: 11.5px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.linklike:hover { color: var(--gold); }

/* 告警 */
.alert {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.alert .ah { display: flex; align-items: center; gap: 8px; }
.alert .ah .lvl {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--red-soft); color: #a3352c;
}
.alert .ah .lvl.mid { background: var(--gold-soft); color: #8a6620; }
.alert .ah strong { font-size: 13.5px; }
.alert .ah .time { margin-left: auto; font-size: 11px; color: var(--muted); }
.alert .body { margin-top: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.65; }
.alert .bars { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.alert .bars .b { display: grid; grid-template-columns: 90px 1fr 48px; gap: 8px; align-items: center; font-size: 11px; }
.alert .bars .track { height: 4px; background: #f0ece0; border-radius: 3px; overflow: hidden; }
.alert .bars .track i { display: block; height: 100%; background: #c58a22; }
.alert .actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.alert .actions .ignore { margin-left: auto; font-size: 11px; color: var(--muted); }

/* 地图卡 */
.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.map-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  padding: 0;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.map-card:hover { transform: translateY(-1px); border-color: #cdbf9a; }
.map-card .pic { aspect-ratio: 16 / 9; height: auto; background: #3d4438; position: relative; overflow: hidden; }
.map-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform .45s ease; }
.map-card:hover .pic img { transform: scale(1.055); }
.map-card .pic::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 14, .02) 38%, rgba(14, 17, 14, .74) 100%);
}
.map-card .pic .nm { position: absolute; z-index: 2; left: 12px; bottom: 10px; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .65); }
.map-card .pic .tag { position: absolute; z-index: 2; top: 9px; left: 10px; font-size: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(24, 26, 24, .6); color: #fff; backdrop-filter: blur(4px); }
.map-card .pic .tag.now { background: rgba(185, 138, 47, .92); }
.map-card .pic .ok { position: absolute; z-index: 2; top: 8px; right: 9px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-size: 10px; }
.map-card .cap { padding: 9px 11px; font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-card .cap .go { color: var(--gold); opacity: 0; transition: opacity .18s; }
.map-card:hover .cap .go { opacity: 1; }
.map-card.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }

.pick-block { margin-top: 20px; padding-top: 16px; border-top: 1px dashed #e7e1d2; }
.pick-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.pick-label b { font-size: 12.5px; color: var(--ink); }
.pick-label span { font-size: 11px; color: var(--muted); }
.mode-row .chip { padding: 6px 12px; }

.light-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.light-tile {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: #f7f4eb;
  padding: 0;
  position: relative;
  text-align: center;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.light-tile:hover { transform: translateY(-1px); border-color: #cdbf9a; }
.light-tile .sw { aspect-ratio: 1 / 1; height: auto; background: linear-gradient(135deg, #b9c2a0, #8f9a7c); overflow: hidden; position: relative; }
.light-tile .sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.light-tile .sw.def { background: linear-gradient(150deg, #d6ceb8, #a9a58f 55%, #8b917f); }
.light-tile .sw.def::after { content: "默认"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 10px; letter-spacing: 2px; }
.light-tile .lb { padding: 5px 5px 6px; font-size: 10.5px; color: var(--ink-2); background: var(--card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.light-tile.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.light-tile .cur { position: absolute; top: 5px; right: 5px; font-size: 9px; padding: 1px 5px; border-radius: 999px; background: rgba(24, 26, 24, .68); color: #fff; }

.alt-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.alt-block .pick-label { margin-bottom: 0; flex: 1 1 320px; }
.alt-block .pick-label b { display: block; width: 100%; margin-bottom: 3px; }
.map-alt { max-width: 330px; min-width: 240px; }
.quick-lights { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }

.pick-line {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2); margin-top: 16px;
  padding: 11px 13px; border: 1px solid #efe9dc; border-radius: 11px; background: #faf8f2;
}
.pick-line b { color: var(--ink); }
.pick-summary { min-width: 0; }
.pick-summary b { font-size: 13px; }
.pick-summary span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.danger-hint { margin: 7px 0 0; font-size: 11px; color: #a4573f; }

/* 轮换设置 */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #f1eee6; }
.set-row:last-of-type { border-bottom: 0; }
.set-row .nm { font-size: 12.5px; font-weight: 600; }
.set-row .sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.input.slim { width: 150px; flex: none; }
.input.num { width: 92px; flex: none; }

.pill-mini { display: inline-block; margin-left: 7px; padding: 0 5px; border: 1px solid #e5dfd0; border-radius: 4px; font-size: 9.5px; font-weight: 400; color: var(--muted); vertical-align: 1px; }

.lock-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lock-card.on { border-color: #d9c89b; background: #fbf7ec; }
.lock-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lock-ico { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #eee8d8; color: #8a6620; font-size: 16px; }
.lock-card.on .lock-ico { background: var(--gold); color: #fff; }
.lock-main .nm { font-size: 13px; font-weight: 700; }
.lock-main .sub { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 760px; line-height: 1.55; }
.map-card:disabled, .light-tile:disabled, .chip:disabled { opacity: .58; cursor: not-allowed; }
.map-card:disabled:hover, .light-tile:disabled:hover { transform: none; }

/* 列表 / 轮换 */
.list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid #f1eee6;
}
.list-row:last-child { border-bottom: 0; }
.list-row .idx { width: 18px; color: var(--muted); font-size: 11px; }
.list-row .thumb { width: 64px; height: 38px; border-radius: 6px; background: linear-gradient(135deg, #8b9469, #4f5a45) center/cover; flex: none; }
.list-row .meta { min-width: 0; }
.list-row .meta .nm { font-size: 12.5px; font-weight: 600; }
.list-row .meta .sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.list-row .actions { margin-left: auto; display: flex; gap: 5px; }

/* 抽屉 */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(20, 22, 20, .35);
  display: none; z-index: 50;
}
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px;
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(20, 22, 20, .15);
  transform: translateX(100%); transition: transform .22s ease;
  z-index: 51; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-mask.open { display: block; }
.drawer-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-head .nm { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.drawer-head .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-family: Consolas, monospace; }
.drawer-close { position: absolute; top: 12px; right: 12px; }
.drawer-body { padding: 16px 20px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.drawer-body .grp { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.drawer-body .grp > strong { font-size: 12px; display: block; margin-bottom: 8px; }
.drawer-body .grp .row { margin-top: 8px; }
.reason-quick { margin-top: 8px; }
.reason-cap { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reason-chip { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; font-size: 11.5px; cursor: pointer; }
.reason-del { opacity: .5; font-size: 12px; line-height: 1; padding: 0 1px; }
.reason-del:hover { opacity: 1; color: var(--red); }
.reason-add { border-style: dashed; color: var(--muted); padding: 4px 8px; font-size: 11.5px; cursor: pointer; }
.reason-add:hover { color: var(--ink); background: #fbfaf5; }
.reason-add-form { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.reason-add-form[hidden] { display: none; }
.reason-add-form .input { flex: 1; min-width: 150px; padding: 5px 8px; font-size: 11.5px; }
.reason-add-form .btn { padding: 5px 9px; font-size: 11.5px; }
.drawer-body .stat-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.drawer-body .stat-mini div { background: #faf8f1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.drawer-body .stat-mini .k { font-size: 10px; color: var(--muted); }
.drawer-body .stat-mini .v { font-size: 15px; font-weight: 700; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: #23261f; color: #f6f2e7; border-radius: 10px; padding: 10px 16px;
  font-size: 12.5px; opacity: 0; pointer-events: none; transition: .2s; z-index: 60;
  max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #8a2e26; }

/* 登录页 */
.auth-body { display: grid; place-items: center; min-height: 100vh; background: var(--paper); }
.auth-card {
  width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 26px 22px; box-shadow: var(--shadow);
}
.brand-lg { margin-bottom: 14px; }
.auth-hint { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.auth-hint code { background: #f4f1e8; padding: 1px 4px; border-radius: 4px; font-size: 10.5px; }
.auth-card form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.auth-card .primary { width: 100%; margin-top: 2px; }
.form-error { margin: 0; min-height: 16px; font-size: 11.5px; color: var(--red); }
.auth-foot { margin: 14px 0 0; font-size: 10.5px; color: var(--muted); }

/* 响应式 */
@media (min-width: 1500px) {
  :root { --sidebar-w: 244px; --rail-w: clamp(336px, 21vw, 400px); }
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w); }
  .content { padding-top: 28px; }
  .hero { padding: 30px 44px 26px; }
  .rail { padding: 20px clamp(16px, 1.2vw, 24px) 22px; }
}
@media (max-width: 1400px) {
  .app { grid-template-columns: 210px minmax(0, 1fr) var(--rail-w); }
  :root { --rail-w: clamp(280px, 22vw, 320px); }
}
@media (max-height: 860px) {
  .rail { gap: 11px; padding-top: 13px; }
  .rail-map .cover { height: 92px; }
  .spark-wrap { height: 46px; }
  .broadcast textarea { min-height: 70px; }
}
@media (max-width: 1180px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .rail { display: none; }
}
@media (max-width: 1000px) {
  .player-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; flex-direction: column; }
  .hero { padding: 20px; }
  .content { padding: 16px 20px 40px; }
  .player-cols, .map-grid, .grid-2 { grid-template-columns: 1fr; }
}

/* ---------------- 服务器配置页 ---------------- */
.cfg-import-card {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px;
}
.cfg-import-card .txt { flex: 1; min-width: 240px; }
.cfg-import-card h3 { margin: 0 0 5px; font-size: 14px; font-weight: 700; }
.cfg-import-card p { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.cfg-chips .chip { cursor: pointer; }
.cfg-card { padding: 0 20px 6px; margin-bottom: 16px; scroll-margin-top: 16px; }
.cfg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.cfg-pair > .card { margin-bottom: 0; }
.cfg-pair > .card + .card { margin-top: 0; }
@media (max-width: 1300px) { .cfg-pair { grid-template-columns: 1fr; } }
.cfg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 13px;
  border-bottom: 1px solid var(--line);
}
.cfg-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.cfg-info {
  margin-left: auto;
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: help;
}
.cfg-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cfg-row:last-child { border-bottom: 0; }
.cfg-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.cfg-desc { margin-top: 5px; max-width: 380px; font-size: 11px; line-height: 1.65; color: var(--muted); }
.cfg-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #cfe8da;
  background: #e9f4ee;
  color: #1f7a4f;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.cfg-badge.gold { border-color: #ecd9b0; background: #f8efd9; color: #8a6620; }
.cfg-badge.gray { border-color: #e2ded1; background: #f1f0ea; color: #6f6a5e; }
.cfg-control { min-width: 0; max-width: 460px; }
.cfg-input { width: 100%; max-width: 460px; padding: 9px 11px; font-size: 12.5px; }
.cfg-input[readonly], .cfg-input:disabled { background: #f7f5ee; color: #6f6a5e; cursor: default; }
.cfg-input[type="number"] { max-width: 120px; -moz-appearance: textfield; appearance: textfield; }
select.cfg-input { max-width: 120px; }
.cfg-input[type="password"] { max-width: 320px; }
.cfg-input[type="number"]::-webkit-outer-spin-button,
.cfg-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.switch input:disabled + i { opacity: 0.55; }
.switch input:disabled ~ span { color: var(--muted); }

/* ---------------- 玩法配置页 ---------------- */
.play-page-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  line-height: 1.65;
}
.play-page-note .pill { flex: none; margin-top: 1px; }
.play-card { padding: 18px 20px 14px; margin-bottom: 16px; }
.play-mode-card { padding-top: 16px; padding-bottom: 16px; }
.play-mode-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.server-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.server-mode-big {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.server-mode-big:hover { border-color: #c9b58a; }
.server-mode-big.is-on {
  border-color: #c8a760;
  background: #f7eedb;
  box-shadow: inset 0 0 0 1px #c8a760;
}
.server-mode-big strong { display: block; font-size: 14px; line-height: 1.3; }
.server-mode-big span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.server-mode-big em {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #2f6d4a;
  font-size: 10.5px;
  font-style: normal;
}
.server-mode-current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.server-mode-current strong { color: var(--ink); }
.server-mode-current .warn { color: #a15c14; font-weight: 600; }
.play-server-mode {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbf9f3;
}
.play-server-mode-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.play-server-mode-head strong { font-size: 12.5px; color: var(--ink); }
.play-server-mode-head .spacer { flex: 1; }
.play-server-mode-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.play-server-mode-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.server-mode-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.server-mode-btn.is-on { background: #f3e6c8; border-color: #c8a760; color: #6f5421; font-weight: 700; }
.play-server-mode-time,
.play-server-mode-value { font-size: 11px; color: var(--muted); text-align: right; }
.play-server-mode-note {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.play-mode-subhead { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.play-mode-subhead strong { font-size: 12.5px; color: var(--ink); }
@media (max-width: 900px) {
  .play-server-mode-row { grid-template-columns: 64px minmax(0, 1fr); }
  .play-server-mode-time,
  .play-server-mode-value { grid-column: 2; text-align: left; }
}
.mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfaf5;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.mode-option:hover { background: #f8f5eb; }
.mode-option strong { font-size: 13px; line-height: 1.4; }
.mode-option span { font-size: 11px; line-height: 1.55; color: var(--muted); }
.mode-option em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green);
}
.mode-option.is-on {
  border-color: #bfa16a;
  background: #fffdf4;
  box-shadow: inset 0 0 0 1px rgba(191, 161, 106, .18);
}
.mode-option.is-on strong { color: #6f5421; }
.play-mode-detail {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.play-mode-detail-head { display: flex; align-items: center; gap: 12px; }
.play-mode-detail-head h4 { margin: 0; font-size: 14px; font-weight: 700; }
.play-mode-detail-head h4 .pill { margin-left: 8px; vertical-align: 1px; }
.play-mode-detail-head .play-head-actions { margin-left: auto; }
.play-mode-detail-desc { margin: 6px 0 12px; line-height: 1.65; }
.play-mode-detail-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed #ddd3c0;
  border-radius: 10px;
  background: #fcfaf4;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}
.play-mode-detail-note strong { font-size: 12.5px; color: var(--ink); }
.play-card-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.play-title { min-width: 0; flex: 1; }
.play-title h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.play-title h3 .pill { margin-left: 8px; vertical-align: 2px; }
.play-title p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--muted); }
.play-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.play-head-actions .switch { white-space: nowrap; margin-left: auto; }
.play-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 13px;
  line-height: 1.55;
}
.play-status-line .pill { flex: none; }
.play-status-line .grow { flex: 1; min-width: 220px; font-size: 12px; }
.play-weapon-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  flex-wrap: wrap;
}
.play-tool-note { font-size: 11.5px; color: var(--muted); }
.play-tool-note b { color: var(--ink); font-weight: 700; }
.play-weapon-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 22px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--line);
}
.play-weapon-group { min-width: 0; }
.play-weapon-group.is-wide { grid-column: 1 / -1; }
.play-weapon-group.is-vehicle .play-wg-head > span:first-child::before,
.play-weapon-group.is-air .play-wg-head > span:first-child::before,
.play-weapon-group.is-fort .play-wg-head > span:first-child::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.play-weapon-group.is-vehicle .play-wg-head > span:first-child::before { background: #4b86b4; }
.play-weapon-group.is-air .play-wg-head > span:first-child::before { background: #4f8f7a; }
.play-weapon-group.is-fort .play-wg-head > span:first-child::before { background: #b07a3b; }
.play-wg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.play-wg-count {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--muted);
}
.play-wg-items { display: flex; flex-wrap: wrap; gap: 6px; }
.play-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.play-weapon-group.is-air .play-vehicle-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.play-vehicle-box {
  min-width: 0;
  padding: 8px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfaf5;
}
.play-vehicle-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #ddd6c7;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.play-vehicle-head > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-vehicle-count {
  margin-left: auto;
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
}
.play-vehicle-weapons { display: flex; flex-wrap: wrap; gap: 5px; }
.play-vehicle-box .play-wchip { background: #fff; }
.play-wchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfaf5;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.play-wchip input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.play-wchip-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
.play-wchip-name { font-size: 11px; }
.play-wchip-mount { font-size: 9px; color: var(--muted); line-height: 1.15; }
.play-wchip:hover { border-color: #cdc4b2; background: #fff; }
.play-wchip.is-on,
.play-wchip:has(input:checked) {
  border-color: #2a2d28;
  background: #2a2d28;
  color: #f7f2e4;
}
.play-wchip.is-on input,
.play-wchip:has(input:checked) input { accent-color: #d8b56a; }
.play-wchip.is-on .play-wchip-mount,
.play-wchip:has(input:checked) .play-wchip-mount { color: #b9b0a0; }
.play-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.play-mode-row {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 14px 0 16px;
}
.play-mode-field { margin: 0; }
.play-mode-field span { font-size: 11.5px; color: var(--muted); }
.play-mode-field select { max-width: 188px; }
.play-mode-static { display: flex; flex-direction: column; }
.play-mode-badge { margin-top: 6px; }
.play-mode-badge .pill { align-self: flex-start; }
.play-mode-info { min-width: 0; padding-top: 2px; }
.play-mode-label { margin-bottom: 6px; font-size: 11px; color: var(--muted); }
.play-factions { display: flex; flex-wrap: wrap; gap: 7px; }
.play-factions .pill { font-size: 10.5px; }
.play-factions .pill b { margin-left: 4px; font-weight: 700; }
.play-stage-wrap { border-top: 1px solid var(--line); padding-top: 10px; }
.play-stage-head,
.play-stage-row {
  display: grid;
  grid-template-columns: 86px 142px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}
.play-stage-head {
  padding: 0 2px 5px;
  font-size: 10.5px;
  color: var(--muted);
}
.play-stage-list { display: flex; flex-direction: column; gap: 7px; }
.play-stage-row .input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  font-size: 12px;
}
.play-stage-row .play-score { text-align: center; }
.play-stage-row .play-stage-msg { font-size: 11.5px; }
.play-remove {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.play-remove:hover { color: var(--red); }
.play-stage-empty {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 80px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfaf5;
  color: var(--muted);
}
.play-empty-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: 18px;
}
.play-stage-empty strong { display: block; margin-bottom: 3px; font-size: 12px; color: var(--ink-2); }
.play-stage-empty span { font-size: 11px; line-height: 1.55; }
.play-hint { margin: 9px 0 0; line-height: 1.6; }
.play-hint b { color: var(--ink-2); font-weight: 600; }

.balance50-card { margin-top: 0; }
.balance50-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 18px;
  margin: 14px 0 12px;
}
.balance50-grid .field { margin: 0; min-width: 0; }
.balance50-grid .field span { font-size: 11.5px; color: var(--muted); }
.balance50-grid .input { width: 100%; }
.balance50-announce { grid-column: 1 / -1; }
.balance50-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.balance50-pair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-2);
}
.balance50-last { margin-top: 8px; line-height: 1.6; }
@media (max-width: 900px) {
  .play-card-head { flex-wrap: wrap; }
  .play-head-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
  .play-weapon-groups { grid-template-columns: 1fr; }
  .balance50-grid { grid-template-columns: 1fr; }
  .play-mode-choice { grid-template-columns: 1fr; }
  .play-vehicle-grid,
  .play-weapon-group.is-air .play-vehicle-grid { grid-template-columns: 1fr; }
  .play-mode-row { grid-template-columns: 1fr; }
  .play-mode-field select { max-width: 100%; }
  .play-stage-head { display: none; }
  .play-stage-row { grid-template-columns: 76px 1fr 32px; }
  .play-stage-row .play-scope { grid-column: 1 / 3; grid-row: 2; }
  .play-stage-row .play-stage-msg { grid-column: 1 / 3; grid-row: 3; }
  .play-stage-row .play-remove { grid-column: 3; grid-row: 1; }
}
.cfg-static { padding: 6px 0; font-size: 12px; color: var(--ink-2); word-break: break-word; }
.cfg-note { margin: 14px 0 4px; line-height: 1.7; }
.cfg-banner {
  margin: 2px 0 10px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #faf8f2;
  display: flex; flex-direction: column; gap: 8px;
}
.cfg-banner img { display: block; width: 100%; max-width: 520px; border-radius: 6px; }
.cfg-footnote {
  padding: 11px 0 13px;
  font-size: 11px;
  color: var(--muted);
}
.cfg-list { display: flex; flex-direction: column; gap: 7px; }
.cfg-rot { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
.cfg-rot .idx { color: var(--muted); width: 16px; }
.cfg-rot .nm { font-weight: 600; }
.cfg-rot .sub { color: var(--muted); }
.cfg-idchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-idchip {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #faf8f2;
  font-size: 10.5px;
  color: var(--ink-2);
}
.cfg-idchip.muted { color: var(--muted); background: transparent; border-style: dashed; }
.cfg-kv {
  font-size: 11px;
  padding: 3px 0;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
  word-break: break-all;
}
.cfg-savebar {
  display: none;
  position: sticky;
  bottom: 12px;
  z-index: 30;
  align-items: center;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #262a26;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
.cfg-savebar.show { display: flex; }
.cfg-savebar span { font-size: 12px; }
.cfg-savebar .btn { background: #fff; color: #262a26; border-color: #fff; }
.cfg-savebar .btn.primary { background: var(--gold); border-color: var(--gold); color: #1f1a0e; }
.cfg-savebar .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
@media (max-width: 900px) {
  .cfg-row { grid-template-columns: 1fr; gap: 8px; }
  .cfg-desc { max-width: none; }
}


/* ============ 态势 · 数据分析 ============ */
.data-toolbar { padding: 16px 18px; }
.data-toolbar .row.wrap { flex-wrap: wrap; }
.range-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.data-note {
  margin-top: 11px; padding: 9px 11px; border: 1px dashed var(--line-strong);
  border-radius: 8px; background: #fbf7ec; color: var(--ink-2);
  font-size: 11.5px; line-height: 1.65;
}
.data-note strong { color: var(--ink); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 14px 16px 13px; min-width: 0;
}
.kpi-card .k { font-size: 11.5px; color: var(--muted); }
.kpi-card .v { margin: 6px 0 5px; font-size: 25px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; color: var(--ink); }
.kpi-card .s { font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.chart-card { padding: 16px 18px 8px; margin-bottom: 14px; }
.chart-card .card-head { margin-bottom: 6px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-grid line { stroke: rgba(120, 120, 105, .22); stroke-width: 1; }
.chart-grid text { fill: var(--muted); font-size: 11px; }
.chart-line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; }
.chart-area { fill: rgba(185, 138, 47, .12); }
.chart-dot { fill: var(--gold); }
.chart-dot-last { fill: #f4ead2; stroke: var(--gold); stroke-width: 2; }
.chart-axis text { fill: var(--muted); font-size: 11px; }
.chart-empty { height: 190px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.data-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.data-chart-grid .chart-card { margin-bottom: 14px; }
.data-chart-grid .chart-card + .chart-card { margin-top: 0; }
.faction-live { padding: 16px 18px; margin-bottom: 11px; }
.fbars { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.fbar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fbar .nm { width: 92px; flex: none; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbar .track { flex: 1; height: 8px; border-radius: 999px; background: #ece8dd; overflow: hidden; }
.fbar .track i { display: block; height: 100%; border-radius: 999px; }
.fbar .n { width: 54px; text-align: right; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.data-foot { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--muted); flex-wrap: wrap; }
.data-foot .btn { margin-left: auto; }
@media (max-width: 1000px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-chart-grid { grid-template-columns: 1fr; }
}

/* ============ 全服广播页：常用话术（与右栏同步） ============ */
.page-quick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.page-quick-list > .empty { grid-column: 1 / -1; }
.page-quick-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.page-quick-row .chip { flex: 1; min-width: 0; display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-quick-form { margin-top: 10px; }
@media (max-width: 900px) { .page-quick-list { grid-template-columns: 1fr; } }

/* 自动化规则 */
.auto-card { margin-top: 14px; }
.auto-intro { margin: 8px 0 14px; line-height: 1.7; }
.auto-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.auto-template {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.auto-template:hover { border-color: #d8c49a; background: #fffdf7; }
.auto-template-plus { color: var(--gold); font-size: 12px; font-weight: 700; line-height: 1; }
.auto-template-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--red-soft);
  color: #a3352c;
  font-size: 9.5px;
  font-weight: 600;
}
.auto-template strong { font-size: 12.5px; line-height: 1.35; }
.auto-template > span:last-child { font-size: 11px; line-height: 1.55; color: var(--muted); }
.auto-template.is-off { opacity: .55; cursor: not-allowed; background: #faf9f6; }
.auto-template.is-off:hover { border-color: var(--line); background: #faf9f6; }
.auto-list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.auto-list > .empty { padding: 18px 14px; }
.auto-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fcfbf7;
}
.auto-rule.is-on { background: #fffdf7; border-color: #d8c49a; }
.auto-check {
  position: relative;
  flex: none;
  width: 34px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: #ddd9cf;
  cursor: pointer;
  transition: background .15s;
}
.auto-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.auto-check span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
  transition: left .15s, background .15s;
  pointer-events: none;
}
.auto-check:has(input:checked) { background: #cfe7db; }
.auto-check input:checked + span { left: 18px; background: #2e7d5b; }
.auto-main { flex: 1; min-width: 0; }
.auto-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.auto-title strong { font-size: 13px; line-height: 1.35; }
.auto-preview { margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: #4f534d; overflow-wrap: anywhere; }
.auto-meta { margin-top: 5px; font-size: 10.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.auto-actions { display: flex; flex: none; align-items: center; gap: 4px; }
.btn.xs { height: 26px; padding: 0 8px; font-size: 11px; }
.auto-form {
  margin-top: 14px;
  padding: 12px 14px 10px;
  border: 1px dashed #d8c49a;
  border-radius: 10px;
  background: #fffdf7;
}
.auto-form-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.auto-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auto-field-wide { grid-column: 1 / -1; }
.auto-field textarea { min-height: 64px; resize: vertical; }
.auto-form-note { margin: 8px 0 0; }
.auto-form-actions { margin-top: 10px; }
.auto-log { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.auto-log-head { display: flex; align-items: baseline; gap: 8px; }
.auto-log-head h4 { margin: 0; font-size: 12.5px; }
.auto-log-head .hint { font-size: 10.5px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.auto-table { width: 100%; border-collapse: collapse; }
.auto-table th, .auto-table td { padding: 8px 6px; border-bottom: 1px solid #f1eee6; text-align: left; font-size: 11px; line-height: 1.45; vertical-align: top; }
.auto-table th { color: var(--muted); font-weight: 500; font-size: 10.5px; white-space: nowrap; }
.auto-table td:first-child { white-space: nowrap; color: var(--muted); }
.auto-table td:nth-child(4), .auto-table td:nth-child(6) { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .auto-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .auto-templates { grid-template-columns: 1fr; }
  .auto-rule { flex-wrap: wrap; }
  .auto-actions { width: 100%; margin-left: 46px; }
  .auto-form-grid { grid-template-columns: 1fr; }
  .auto-field-wide { grid-column: auto; }
}

/* ============ 轮换与对局：两卡对齐 + 文字排版 ============ */
.grid-2 > .card > .card-head { align-items: baseline; }
.grid-2 > .card > .card-head .hint { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 .set-row { padding: 11px 0; }
.grid-2 .set-row .nm,
.grid-2 .match-row .meta .nm { font-size: 13px; line-height: 1.35; }
.grid-2 .set-row .sub,
.grid-2 .match-row .meta .sub { font-size: 11px; line-height: 1.5; }
.match-row { padding: 12px 0; }
.match-row:last-of-type { border-bottom: 0; }
.match-note { margin-top: auto; padding-top: 12px; line-height: 1.6; }

/* ============ 排行榜 ============ */
.lb-card { padding-top: 16px; }
.lb-season-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.lb-season-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 21px; font-weight: 800; line-height: 1.25; }
.lb-season-sub { margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.lb-season-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; max-width: 46%; }
.lb-season-side .lb-live-meta { max-width: none; padding-top: 0; }
.lb-switch span { font-size: 11.5px; font-weight: 700; }
.lb-off-card { padding-bottom: 16px; }
.lb-off-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 42px 20px 48px; text-align: center; }
.lb-off-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-size: 26px; }
.lb-off-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.lb-off-text { max-width: 480px; font-size: 12px; line-height: 1.75; color: var(--muted); }
.lb-off-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.lb-off-notes > div { padding: 14px 16px; background: #fff; }
.lb-off-notes b { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--ink); }
.lb-off-notes span { display: block; font-size: 11.5px; line-height: 1.65; color: var(--muted); }
.server-lb-off { color: var(--gold); font-weight: 600; }
.lb-live-meta { max-width: 46%; padding-top: 4px; text-align: right; font-size: 11px; line-height: 1.6; color: var(--muted); }
.lb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 8px; }
.lb-sort-group { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-right: auto; }
.lb-sort {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 5px 9px;
  background: transparent;
  color: #64685f;
  font-size: 11.5px;
  line-height: 1.3;
}
.lb-sort:hover { background: #f5f2ea; }
.lb-sort.active { background: #23261f; border-color: #23261f; color: #fff; font-weight: 600; }
.lb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
}
.lb-search span { flex: none; font-size: 10.5px; color: var(--muted); }
.lb-search input { width: 168px; border: 0; outline: 0; background: transparent; font-size: 12px; }
.lb-faction {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}
.lb-tier-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0 10px; border-top: 1px dashed var(--line); }
.lb-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fdfcf8;
  color: #676b62;
  font-size: 10.5px;
  line-height: 1.5;
}
.lb-tier-chip:hover { background: #f6f2e8; }
.lb-tier-chip.active { border-color: #23261f; background: #23261f; color: #fff; }
.lb-tier-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tier-color, #999); }
.lb-tier-min { opacity: .72; font-variant-numeric: tabular-nums; }
.lb-count { padding: 0 0 8px; font-size: 11.5px; color: var(--muted); }
.lb-count b { color: var(--ink); font-weight: 700; }
.lb-table { min-width: 980px; }
.lb-table th, .lb-table td { padding: 9px 8px; }
.lb-table th { white-space: nowrap; }
.lb-table .lb-rank-col { width: 56px; text-align: center; }
.lb-table td.lb-rank-col { text-align: center; }
.lb-medal {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1efe8;
  color: #727870;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.lb-medal.m1 { background: #f4d98b; color: #74540c; }
.lb-medal.m2 { background: #e4e8ec; color: #56606a; }
.lb-medal.m3 { background: #ecd6bd; color: #7a5432; }
.lb-row.top-1 { background: linear-gradient(90deg, #fffaf0, rgba(255, 255, 255, 0)); }
.lb-row.top-2 { background: linear-gradient(90deg, #f8fafc, rgba(255, 255, 255, 0)); }
.lb-row.top-3 { background: linear-gradient(90deg, #fdf7f0, rgba(255, 255, 255, 0)); }
.lb-player .lb-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.lb-player .lb-id { margin-top: 2px; font-family: Consolas, "Courier New", monospace; font-size: 10.5px; color: var(--muted); }
.lb-online { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.lb-points { font-weight: 700; }
.lb-tier {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.55;
  white-space: nowrap;
}
.lb-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 10.5px; line-height: 1.7; color: var(--muted); }
.lb-empty { padding: 26px 0 18px; }
.lb-formula-text { margin: 4px 0 14px; font-size: 12px; line-height: 1.75; color: #52564f; }
.lb-formula-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lb-cfg-field > span { min-height: 18px; }
.lb-field-hint { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.45; }
.lb-tier-head, .lb-tier-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 140px 58px 38px; gap: 10px; align-items: center; }
.lb-tier-head { margin-bottom: 7px; color: var(--muted); font-size: 10.5px; }
.lb-tier-row { margin-bottom: 8px; }
.lb-tier-row .input { padding: 7px 10px; font-size: 12px; }
.lb-color { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; }
.lb-tier-del { width: 34px; padding: 5px 0; justify-content: center; }
.lb-season-field { max-width: 560px; margin-top: 4px; }
.lb-season-actions { margin-top: 12px; align-items: center; }
.lb-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.lb-history-empty { padding: 34px 26px 38px; }
.lb-empty-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: 22px;
}
.lb-history-empty h3 { margin: 0 0 6px; font-size: 17px; }
.lb-history-empty p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.lb-history-card { padding-top: 16px; }
@media (max-width: 1200px) {
  .lb-formula-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .lb-formula-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-season-bar { flex-direction: column; gap: 8px; }
  .lb-season-side { align-items: flex-start; width: 100%; max-width: 100%; }
  .lb-live-meta { max-width: 100%; text-align: left; }
  .lb-season-side .lb-live-meta { text-align: left; }
}
@media (max-width: 760px) {
  .lb-formula-grid { grid-template-columns: 1fr; }
  .lb-off-notes { grid-template-columns: 1fr; }
  .lb-tier-head, .lb-tier-row { grid-template-columns: minmax(0, 1fr) 82px 46px 34px; gap: 6px; }
  .lb-search input { width: 110px; }
  .lb-save-bar { flex-direction: column; align-items: stretch; }
}

/* ============ QQ 机器人 ============ */
body.qq-scene .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
body.qq-scene .rail { display: none; }

.qq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}
.qq-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.qq-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.qq-bot-card { padding: 20px 22px 16px; }
.qq-section { display: flex; flex-direction: column; gap: 12px; }
.qq-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.qq-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qq-section-head p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 560px; }
.qq-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}

.qq-bot-head { display: flex; align-items: center; gap: 13px; }
.qq-avatar {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #3d4b53, #1f262a);
  color: #f6f3ea;
  font-size: 20px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.qq-avatar.sm { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.qq-bot-id { min-width: 0; flex: 1; }
.qq-bot-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.qq-bot-sub { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.qq-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.qq-status i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.qq-status.ok { background: var(--green-soft); color: var(--green); }
.qq-status.ok i { background: var(--green); }
.qq-status.waiting { background: var(--paper-2); color: var(--muted); }
.qq-status.waiting i { background: #9aa29c; }

.qq-callback-row {
  margin-top: 15px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-2);
}
.qq-k { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
.qq-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.qq-process-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 10.5px;
  color: var(--muted);
}
.qq-process-row span { white-space: nowrap; }
.qq-process-row b { color: var(--ink-2); font-weight: 600; }
.qq-stats-grid {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.qq-stats-grid div { padding: 0 14px; border-left: 1px solid var(--line); }
.qq-stats-grid div:first-child { padding-left: 0; border-left: 0; }
.qq-stats-grid b { display: block; font-size: 24px; line-height: 1.1; letter-spacing: -.4px; }
.qq-stats-grid span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.qq-bot-foot { margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.5; }

.qq-server-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
}
.qq-server-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.qq-server-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.qq-server-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
.qq-server-meta { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.qq-bind-line {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
.qq-bind-line span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.qq-bind-line code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.qq-copy { flex: none; }
.qq-note { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: var(--muted); }
.qq-note code, .qq-access-actions code { font-size: 10.5px; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

.qq-group-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qq-group-card {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fcfbf7;
  padding: 13px 13px 12px;
  min-width: 0;
}
.qq-group-card.editing { border-color: var(--gold); background: #fffdf8; }
.qq-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qq-group-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qq-group-code { margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.qq-group-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.qq-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  white-space: nowrap;
}
.qq-pill.gold { background: var(--gold-soft); color: var(--gold); }
.qq-pill.warn { background: #fdecec; color: #b3261e; }
.qq-group-facts { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 10.5px; color: var(--ink-2); }
.qq-group-facts span { position: relative; padding-left: 8px; }
.qq-group-facts span::before { content: '·'; position: absolute; left: 0; color: var(--line-strong); }
.qq-group-time { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 10px; color: var(--muted); }
.qq-group-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.qq-group-actions .btn { flex: 1; white-space: nowrap; }
.qq-group-actions .btn.danger { flex: 0 0 auto; }
.qq-empty { padding: 18px 14px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.6; }
.qq-empty-servers { padding: 28px 16px; }
.qq-preview-empty { margin: 6px 0 10px; }
.qq-preview.empty .qq-chat { min-height: 0; }

.qq-group-editor {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}
.qq-editor-title { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .2px; }
.qq-subtabs { margin: 0 0 14px; }
.qq-subtabs .tab { background: rgba(255, 255, 255, .42); border-color: var(--line); }
.qq-subtabs .tab.active { background: var(--card); }
.qq-subtabs .badge { margin-left: 6px; vertical-align: 1px; }
.qq-section[hidden], .qq-card[hidden] { display: none !important; }
.qq-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; }
.qq-check { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.qq-check input { width: 14px; height: 14px; accent-color: var(--gold); flex: none; }
.qq-check.disabled { color: var(--muted); }
.qq-check.disabled input { opacity: .55; }
.qq-check-custom span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.qq-check-custom span em { font-style: normal; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qq-fixed {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1.4;
}
.qq-builtin-checks { margin-top: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qq-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; }
.qq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qq-field span { font-size: 10.5px; color: var(--muted); letter-spacing: .2px; }
.qq-field .input { width: 100%; }
.qq-input-line { display: flex; align-items: center; gap: 6px; }
.qq-input-line .input { flex: 1; min-width: 0; }
.qq-input-line .btn { flex: none; white-space: nowrap; }
.qq-field-wide { grid-column: 1 / -1; margin-top: 10px; }
.qq-field-switch { justify-content: flex-end; }
.qq-switch-line { min-height: 34px; display: flex; align-items: center; }
.qq-actions { display: flex; gap: 8px; margin-top: 12px; }
.qq-group-editor .qq-edit-grid { margin-top: 8px; }

.qq-calls .qq-section-head { margin-bottom: 4px; }
.qq-call-list { display: flex; flex-direction: column; margin-top: 2px; }
.qq-call-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.qq-call-row:first-child { border-top: 0; }
.qq-call-row.done { opacity: .62; }
.qq-call-main { flex: 1; min-width: 0; }
.qq-call-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.qq-call-title b { font-size: 12.5px; }
.qq-call-title span { font-size: 10.5px; color: var(--gold); }
.qq-call-title small { font-size: 10px; color: var(--muted); margin-left: auto; }
.qq-call-text { margin-top: 3px; font-size: 12px; color: var(--ink-2); line-height: 1.45; word-break: break-word; }
.qq-done-tag { font-size: 10.5px; color: var(--green); background: var(--green-soft); padding: 3px 8px; border-radius: 5px; white-space: nowrap; }

.qq-access { padding-bottom: 16px; }
.qq-access-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.qq-access-actions .qq-note { flex: 1; min-width: 240px; }

.qq-push-table { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.qq-push-head, .qq-push-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; align-items: center; }
.qq-push-head { font-size: 10.5px; color: var(--muted); padding: 0 2px; }
.qq-push-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.qq-inline-check { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.qq-inline-check input { width: 14px; height: 14px; accent-color: var(--gold); }
.qq-inline-checks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 9px; }
.qq-inline-checks .qq-inline-check { margin-top: 0; }

.qq-cmd-list { display: flex; flex-direction: column; gap: 9px; }
.qq-cmd-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fcfbf7;
}
.qq-cmd-row.off { opacity: .68; }
.qq-cmd-main { flex: 1; min-width: 0; }
.qq-cmd-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qq-cmd-title code { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.qq-cmd-help { margin-top: 3px; font-size: 11px; color: var(--muted); }
.qq-cmd-reply { margin-top: 4px; font-size: 11.5px; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.qq-cmd-actions { display: flex; gap: 5px; flex: none; }
.qq-cmd-editor {
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: #fffdf8;
}
.qq-cmd-editor .qq-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qq-var-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.qq-var-row > span { font-size: 10.5px; color: var(--muted); margin-right: 2px; }
.qq-var {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: var(--ink-2);
  font-family: "Cascadia Mono", Consolas, monospace;
}
.qq-var:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.qq-cmd-id { display: none; }

.qq-preview {
  position: sticky;
  top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.qq-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
}
.qq-preview-head > div { min-width: 0; flex: 1; }
.qq-preview-head b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qq-preview-head small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qq-chat {
  padding: 14px 12px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(245,243,238,.8)),
    repeating-linear-gradient(135deg, #f7f5ef 0 8px, #f4f2eb 8px 16px);
  min-height: 410px;
}
.qq-chat-name { text-align: center; font-size: 9.5px; color: var(--muted); margin-bottom: 10px; }
.qq-bubble {
  max-width: 92%;
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 11.5px;
  line-height: 1.55;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(30,27,20,.05);
}
.qq-bubble.bot { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.qq-bubble.bot.push { background: #fffdf8; border-color: #eadfc4; }
.qq-bubble.user { margin-left: auto; background: #dcecff; color: #173b66; max-width: 78%; }
.qq-bubble-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.qq-bubble-sub { margin-top: 6px; color: var(--muted); font-size: 10.5px; }
.qq-bubble-sign { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 10px; }
.qq-preview-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  background: #fbfaf6;
}

/* ---------------- 积分系统 ---------------- */

.points-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}
.pt-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pt-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pt-stat-grid > div { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pt-stat-grid span { display: block; font-size: 10.5px; color: var(--muted); }
.pt-stat-grid b { display: block; margin-top: 5px; font-size: 19px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; }
.pt-field-wide { grid-column: 1 / -1; }
.pt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pt-sortbar { display: flex; align-items: center; gap: 6px; flex: none; }
.pt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.pt-toolbar .input { width: 230px; padding: 7px 10px; font-size: 12px; }
.pt-table-wrap { overflow-x: auto; }
.pt-table { min-width: 640px; }
.pt-table th, .pt-table td { padding: 8px; vertical-align: middle; }
.pt-table tbody tr.pt-row:hover td { background: #fbfaf6; }
.pt-log-table { min-width: 560px; }
.pt-rank { width: 44px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.pt-sub { margin-top: 2px; font-size: 10.5px; color: var(--muted); word-break: break-all; }
.pt-balance { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-delta.up { color: var(--green); }
.pt-delta.down { color: #b3261e; }
.pt-time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pt-muted { font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.pt-row-actions { text-align: right; white-space: nowrap; }
.pt-row-actions .btn.sm { padding: 4px 7px; margin-left: 4px; }
.pt-del { color: #b3261e; }
.pt-del:hover { background: #fdecec; color: #b3261e; }
.pt-tabs { margin: 0 0 14px; }
.pt-pfilter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-p-table { min-width: 600px; }
.pt-p-table th { white-space: nowrap; }
.pt-name-row { display: flex; align-items: center; gap: 6px; }
.pt-row.selected td { background: #fdf5e4; }
.pt-detail-row td { padding: 0; border-bottom: 1px solid var(--line); }
.pt-inline { padding: 14px 16px 16px; background: #fffdf7; border-left: 3px solid var(--gold); }
.pt-inline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pt-inline-head h4 { margin: 0; font-size: 15px; line-height: 1.3; }
.pt-inline-head p { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.pt-inline-head .pt-actions { display: flex; gap: 8px; flex: none; }
.pt-inline-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-top: 12px; }
.pt-inline-grid .pt-pdetail-balance { margin-top: 0; }
.pt-inline .pt-pdetail-balance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-inline .pt-pdetail-balance > div:last-child { grid-column: 1 / -1; }
.pt-inline .pt-pdetail-balance b { font-size: 15px; white-space: nowrap; }
.pt-inline-logs h5 { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pt-pmore { display: flex; justify-content: center; padding: 12px 16px 4px; }
.pt-roster-warn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(185, 138, 47, .3); border-radius: 8px; background: #fff8e6; color: #8a6420; }
@media (max-width: 900px) { .pt-inline-grid { grid-template-columns: 1fr; } }
.pt-p-table .pt-row-actions .btn { white-space: nowrap; }
.pt-p-balance { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pt-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #f1eee5; color: var(--ink-2); font-size: 10.5px; white-space: nowrap; }
.pt-pill.on { background: #e8f5ec; color: #1c7a43; }
.pt-pill.muted { background: #f6f2f0; color: #9a6a4f; }
.pt-pdetail-balance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pt-pdetail-balance > div { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pt-pdetail-balance span { display: block; font-size: 10.5px; color: var(--muted); }
.pt-pdetail-balance b { display: block; margin-top: 4px; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pt-edit-row td { background: #fbfaf6; }
.pt-edit-row .pt-form { margin-top: 0; }
.pt-rule-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.pt-rule-list .qq-check { margin: 0; }
.pt-rule-note { margin-top: 12px; }
.pt-cmd { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 11.5px; }
.pt-cmd b { flex: none; font-family: Consolas, "Courier New", monospace; font-size: 11.5px; color: var(--ink); }
.pt-cmd span { color: var(--muted); line-height: 1.5; }

@media (max-width: 1420px) {
  .points-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
}
@media (max-width: 1180px) {
  .points-layout { grid-template-columns: 1fr; }
  .pt-side { order: 2; }
}
@media (max-width: 760px) {
  .pt-form { grid-template-columns: 1fr; }
  .pt-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-pdetail-balance { grid-template-columns: 1fr; }
  .pt-toolbar .input { width: 100%; }
}

@media (max-width: 1420px) {
  .qq-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
  .qq-group-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .qq-layout { grid-template-columns: 1fr; }
  .qq-preview { position: static; order: -1; }
  .qq-preview .qq-chat { min-height: 0; }
  .qq-push-head, .qq-push-row { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .qq-card, .qq-server-card { padding: 14px; }
  .qq-bot-name { font-size: 16px; }
  .qq-stats-grid b { font-size: 20px; }
  .qq-edit-grid, .qq-push-head, .qq-push-row { grid-template-columns: 1fr; }
  .qq-push-head { display: none; }
  .qq-checks { grid-template-columns: 1fr; }
  .qq-cmd-editor .qq-edit-grid { grid-template-columns: 1fr; }
  .qq-group-actions .btn { flex: 1 1 40%; }
}

/* ============ 日志：五页签 ============ */
.log-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.log-kpi { min-width: 0; padding: 13px 14px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.log-kpi-label { font-size: 11px; color: var(--muted); letter-spacing: .4px; }
.log-kpi-value { margin-top: 3px; font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-kpi-sub { margin-top: 3px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-kpi.red .log-kpi-value { color: var(--red); }
.log-kpi.gold .log-kpi-value { color: var(--gold); }

.log-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(268px, .78fr); gap: 13px; align-items: start; }
.log-main-card { min-width: 0; }
.log-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.log-side .card { min-width: 0; }

.log-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 14px 11px; border-bottom: 1px solid var(--line); }
.log-search { display: flex; align-items: center; gap: 6px; flex: 1 1 180px; min-width: 150px; height: 30px; padding: 0 9px; background: #f7f5ef; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.log-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.log-search span { font-size: 15px; line-height: 1; }
.log-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.log-chip { height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fbfaf6; color: var(--ink-2); font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.log-chip i { font-style: normal; font-size: 10px; color: var(--muted); background: var(--paper-2); padding: 1px 4px; border-radius: 4px; }
.log-chip.active { color: #fff; border-color: #2d322c; background: #2d322c; }
.log-chip.active i { color: #fff; background: rgba(255,255,255,.16); }

.log-feed { padding: 2px 10px 8px; max-height: 585px; overflow: auto; }
.log-event-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 100px; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid #f0ece2; }
.log-event-row:last-child { border-bottom: 0; }
.log-event-time { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.log-event-time b { font-size: 12px; color: var(--ink-2); font-family: "Cascadia Mono", Consolas, monospace; font-weight: 600; }
.log-event-time span { font-size: 9px; }
.log-event-main { min-width: 0; }
.log-event-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.log-event-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Cascadia Mono", Consolas, monospace; font-weight: 600; }
.log-kind { display: inline-flex; align-items: center; flex: 0 0 auto; height: 19px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .2px; background: #f0ede5; color: #575e57; white-space: nowrap; }
.log-kind.login { background: var(--blue-soft); color: var(--blue); }
.log-kind.config { background: var(--gold-soft); color: var(--gold); }
.log-kind.player { background: var(--green-soft); color: var(--green); }
.log-kind.admin { background: #ece9f5; color: #6250a0; }
.log-kind.fail { background: var(--red-soft); color: var(--red); }
.log-kind.api { background: #f0ede5; color: #69716b; }
.log-event-detail { margin-top: 2px; font-size: 10px; line-height: 1.35; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-event-side { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; font-size: 10px; color: var(--muted); }
.log-event-side .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60px; }
.log-result { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.log-result.ok { color: var(--green); background: var(--green-soft); }
.log-result.bad { color: var(--red); background: var(--red-soft); }

.log-empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }
.log-empty.small { padding: 14px 10px; }
.log-more { padding: 8px 14px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); }

.log-bars { padding: 6px 14px 12px; }
.log-bar-row { display: grid; grid-template-columns: minmax(64px, .8fr) minmax(40px, 1.4fr) 30px; align-items: center; gap: 8px; min-height: 25px; }
.log-bar-label { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; color: var(--ink-2); }
.log-bar-label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-bar-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--gold); }
.log-bar-dot.blue { background: var(--blue); }
.log-bar-dot.green { background: var(--green); }
.log-bar-dot.red { background: var(--red); }
.log-bar-track { height: 6px; border-radius: 4px; background: #eeeae0; overflow: hidden; }
.log-bar-fill { display: block; height: 100%; min-width: 3px; border-radius: 4px; background: var(--gold); }
.log-bar-fill.blue { background: var(--blue); }
.log-bar-fill.green { background: var(--green); }
.log-bar-fill.red { background: var(--red); }
.log-bar-count { text-align: right; font-size: 10px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.log-latest { padding: 10px 14px 13px; }
.log-latest strong { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; word-break: break-all; }
.log-latest-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; font-size: 10px; color: var(--muted); }
.log-note { padding: 10px 14px 14px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.log-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); margin: 0 10px 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.log-mini-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; background: #fff; }
.log-mini-stats b { font-size: 17px; }
.log-mini-stats span { font-size: 10px; color: var(--muted); }

.log-table { margin-top: 0; }
.log-audit-table td { vertical-align: middle; }
.log-request { font-size: 11px; color: var(--ink-2); word-break: break-all; line-height: 1.5; }
.log-request b { display: inline-block; margin-right: 4px; font-size: 9px; color: var(--muted); background: var(--paper-2); border-radius: 3px; padding: 1px 4px; }
.log-output { margin-top: 3px; font-size: 10px; color: var(--muted); word-break: break-all; line-height: 1.45; }
.log-ms { margin-top: 3px; font-size: 9px; color: var(--muted); }

.log-chart-card { margin-top: 4px; border-top: 1px solid var(--line); }
.log-timeline { padding: 12px 14px 9px; }
.log-timeline-bars { display: flex; align-items: flex-end; gap: 2px; height: 94px; padding: 0 0 2px; }
.log-timeline-col { position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 2px; }
.log-timeline-col i { display: block; width: 100%; border-radius: 2px 2px 0 0; min-height: 0; }
.log-timeline-col i.ok { background: var(--green); opacity: .72; }
.log-timeline-col i.fail { background: var(--red); opacity: .85; }
.log-timeline-col b { position: absolute; bottom: -13px; left: 0; font-size: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.log-timeline-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 10px; color: var(--muted); }
.log-timeline-foot i { display: inline-block; width: 6px; height: 6px; border-radius: 2px; margin: 0 3px 0 7px; vertical-align: 1px; }
.log-timeline-foot i.ok { background: var(--green); }
.log-timeline-foot i.fail { background: var(--red); }

.log-presence-type { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.log-presence-type.join { color: var(--green); background: var(--green-soft); }
.log-presence-type.leave { color: var(--red); background: var(--red-soft); }
.log-player-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.log-player-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-player-cell .mono { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.log-faction-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: #b7bcb5; }
.log-faction-dot.red { background: var(--red); }
.log-faction-dot.blue { background: var(--blue); }
.log-faction-dot.green { background: var(--green); }

.log-online-list { padding: 2px 12px 10px; max-height: 430px; overflow: auto; }
.log-online-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #f2eee5; }
.log-online-row:last-child { border-bottom: 0; }
.log-online-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.log-online-meta strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-online-meta span { font-size: 9px; color: var(--muted); }
.log-online-kd { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.log-online-kd b { font-size: 12px; line-height: 1; }
.log-online-kd span { font-size: 9px; color: var(--muted); }

.log-match-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.log-match-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 13px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: #fdfcf8; }
.log-match-art { position: relative; min-height: 132px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.log-match-art span { font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.log-match-art i { font-size: 10px; font-style: normal; opacity: .85; }
.log-match-art.small { min-height: 108px; border-radius: 8px; }
.log-match-body { min-width: 0; padding: 11px 13px 11px 0; display: flex; flex-direction: column; gap: 7px; }
.log-match-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.log-match-head strong { font-size: 13px; }
.log-match-head span { font-size: 10px; color: var(--muted); white-space: nowrap; }
.log-match-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--muted); }
.log-match-meta b { color: var(--ink); font-size: 12px; }
.log-match-winner { color: var(--gold); background: var(--gold-soft); border-radius: 4px; padding: 2px 6px; font-weight: 700; }
.log-score-bars { display: flex; flex-direction: column; gap: 4px; }
.log-score-row { display: grid; grid-template-columns: minmax(58px, 86px) minmax(30px, 1fr) 28px; align-items: center; gap: 7px; font-size: 10px; }
.log-score-name { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.log-win { font-style: normal; font-size: 8px; padding: 1px 3px; border-radius: 3px; color: var(--gold); background: var(--gold-soft); }
.log-score-track { height: 7px; border-radius: 4px; background: #eeeae0; overflow: hidden; }
.log-score-track i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.log-score-track i.red { background: var(--red); }
.log-score-track i.green { background: var(--green); }
.log-score-track i.blue { background: var(--blue); }
.log-score-row b { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.log-current-match { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 8px; }
.log-current-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); border-bottom: 1px solid #f2eee5; padding-bottom: 6px; }
.log-current-row:last-child { border-bottom: 0; padding-bottom: 0; }
.log-current-row b { color: var(--ink); font-size: 11px; text-align: right; }

@media (max-width: 1220px) {
  .log-layout { grid-template-columns: minmax(0, 1fr) 286px; }
  .log-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .log-layout { grid-template-columns: 1fr; }
  .log-event-row { grid-template-columns: 66px minmax(0, 1fr) 86px; }
}
@media (max-width: 760px) {
  .log-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .log-kpi { padding: 10px 11px; }
  .log-kpi-value { font-size: 19px; }
  .log-match-card { grid-template-columns: 112px minmax(0, 1fr); gap: 9px; }
  .log-match-body { padding-right: 9px; }
  .log-event-side .mono { display: none; }
  .log-toolbar { gap: 7px; }
}
.log-extra-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.log-extra-block { min-width: 0; padding: 13px 14px 15px; }
.log-extra-block + .log-extra-block { border-left: 1px solid var(--line); }
.log-extra-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.log-extra-head strong { font-size: 12px; }
.log-extra-head span { font-size: 10px; color: var(--muted); white-space: nowrap; }
.log-faction-scores { display: flex; flex-direction: column; gap: 7px; }
.log-faction-score { display: grid; grid-template-columns: 66px minmax(36px, 1fr) 28px 32px; align-items: center; gap: 7px; font-size: 10px; }
.log-faction-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.log-faction-track { height: 8px; border-radius: 4px; background: #eeeae0; overflow: hidden; }
.log-faction-track i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.log-faction-track i.red { background: var(--red); }
.log-faction-track i.green { background: var(--green); }
.log-faction-track i.blue { background: var(--blue); }
.log-faction-score b { text-align: right; font-size: 12px; }
.log-faction-score small { color: var(--muted); font-size: 9px; text-align: right; }
.log-top-kills { display: flex; flex-direction: column; gap: 1px; }
.log-top-kill-row { display: grid; grid-template-columns: 16px 7px minmax(0, 1fr) 28px 26px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f3efe6; font-size: 10px; }
.log-top-kill-row:last-child { border-bottom: 0; }
.log-top-kill-row > b { color: var(--muted); font-size: 9px; text-align: center; }
.log-top-kill-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.log-top-kill-row i { font-style: normal; font-weight: 700; text-align: right; font-size: 12px; }
.log-top-kill-row small { color: var(--muted); font-size: 9px; }
@media (max-width: 760px) {
  .log-extra-grid { grid-template-columns: 1fr; }
  .log-extra-block + .log-extra-block { border-left: 0; border-top: 1px solid var(--line); }
}
.log-chart-card { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--line); }
.log-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px 0; }
.log-chart-head h3 { margin: 0; font-size: 12px; }
.log-chart-head .hint { font-size: 10px; color: var(--muted); }
.log-scroll { max-height: 520px; overflow: auto; border-top: 1px solid var(--line); }
.log-scroll .table { margin-top: 0; }
.log-scroll .table thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
.log-scroll .log-empty { border-top: 0; }
.log-login-list { padding: 3px 14px 10px; }
.log-login-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 42px; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f2eee5; font-size: 10px; color: var(--muted); }
.log-login-row:last-child { border-bottom: 0; }
.log-login-row b { font-weight: 500; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-login-row .log-result { justify-self: end; }
.log-kind.kill { background: #fdecea; color: #b3261e; }
.log-sample-tag { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 3px; background: #f1ede4; color: #857b6b; font-size: 9px; font-weight: 500; }
.log-kill-row .log-event-side { justify-content: flex-end; }
.log-fail-tag { justify-self: end; font-style: normal; font-size: 9px; font-weight: 600; color: var(--red); background: #fdecea; border-radius: 3px; padding: 2px 5px; }
.log-main-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.log-main-col .log-main-card { flex: 0 0 auto; }
.log-faction-card { flex: 0 0 auto; }
.log-faction-table { padding: 4px 16px 12px; }
.log-faction-table-head, .log-faction-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 46px 48px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f2eee5; }
.log-faction-table-head { color: var(--muted); font-size: 9px; padding-top: 0; }
.log-faction-table-head span:not(:first-child), .log-faction-table-row b { text-align: right; }
.log-faction-table-row:last-child { border-bottom: 0; }
.log-faction-table-row span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; font-weight: 600; }
.log-faction-table-row b { font-size: 11px; font-weight: 600; }
@media (max-width: 980px) {
  .log-main-col { gap: 14px; }
}

/* ---------------- 登录页 ---------------- */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(1100px 560px at 8% 0%, rgba(201, 174, 113, .16), transparent 65%),
    radial-gradient(900px 520px at 98% 100%, rgba(70, 91, 75, .12), transparent 62%),
    var(--paper);
}
.auth-shell {
  width: min(1080px, 100%);
  min-height: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 28px 80px rgba(48, 41, 30, .16);
}
.auth-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 38px 40px 34px;
  color: #f8f4e8;
  background:
    linear-gradient(180deg, rgba(18, 22, 18, .18) 0%, rgba(18, 22, 18, .52) 52%, rgba(18, 22, 18, .86) 100%),
    linear-gradient(90deg, rgba(18, 22, 18, .52), rgba(18, 22, 18, .08)),
    url('/assets/maps/Kavkazi/DayLateGray-720.webp') center / cover no-repeat;
}
.auth-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}
.auth-art > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .mark {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--gold); color: #fff;
  font-family: var(--mono); font-size: 16px; font-weight: 800; letter-spacing: .06em;
}
.auth-brand .brand-copy { display: flex; flex-direction: column; gap: 2px; }
.auth-brand strong { font-size: 15px; letter-spacing: .08em; }
.auth-brand small { font-size: 10px; color: rgba(255,255,255,.62); letter-spacing: .12em; }
.auth-art-copy { max-width: 470px; margin-top: auto; }
.auth-art-copy .eyebrow { margin: 0 0 12px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.auth-art-copy h1 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.02em; }
.auth-art-copy p:last-child { margin: 16px 0 0; max-width: 410px; color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.8; }
.auth-features { display: flex; flex-direction: column; gap: 10px; }
.auth-feature { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.auth-feature:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.auth-feature .dotbox { width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: #e5c98c; }
.auth-feature b { display: block; font-size: 12px; font-weight: 600; }
.auth-feature span { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.55; color: rgba(255,255,255,.58); }
.auth-art-foot { display: flex; align-items: center; gap: 8px; font-size: 10px; color: rgba(255,255,255,.5); }
.auth-art-foot i { width: 6px; height: 6px; border-radius: 50%; background: #7aa27f; }
.auth-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 46px 42px; background: linear-gradient(180deg, #fefcf7, #fbf8f0); }
.auth-form-head .eyebrow { margin: 0 0 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep, #8a6620); }
.auth-form-head h2 { margin: 0; font-family: var(--serif); font-size: 28px; letter-spacing: -.01em; }
.auth-form-head p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-form { margin-top: 26px; display: flex; flex-direction: column; gap: 15px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field > span { font-size: 11.5px; color: var(--ink-2); }
.auth-field input {
  width: 100%; height: 44px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 0 13px; background: #fffdf9; color: var(--ink);
  font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.auth-pw { position: relative; display: flex; align-items: center; }
.auth-pw input { padding-right: 56px; }
.auth-pw button {
  position: absolute; right: 7px; height: 30px; padding: 0 9px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font-size: 11px; cursor: pointer;
}
.auth-pw button:hover { background: #f2eee3; color: var(--ink); }
.auth-caps { min-height: 14px; margin: -8px 0 0; font-size: 10.5px; color: var(--gold-deep, #8a6620); }
.auth-btn {
  width: 100%; height: 46px; margin-top: 2px;
  border: 1px solid #23271f; border-radius: 10px;
  background: #23271f; color: #f8f4e8;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, transform .15s;
}
.auth-btn:hover { background: #343a30; }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .6; cursor: wait; }
.auth-error { min-height: 17px; margin: 0; font-size: 11.5px; color: var(--red); line-height: 1.5; }
.auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10.5px; color: var(--muted); }
.auth-meta .lock { display: inline-flex; align-items: center; gap: 5px; }
.auth-foot-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 10.5px; line-height: 1.7; color: var(--muted); }
.auth-foot-note b { color: var(--ink-2); font-weight: 600; }
.auth-foot-security { margin: 6px 0 0; font-size: 10px; line-height: 1.6; color: #9b917f; }

/* ---------------- 个人账号页 ---------------- */
.account-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.account-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.account-kpi .k { font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.account-kpi .v { margin-top: 7px; font-size: 15px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-kpi .sub { margin-top: 4px; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 16px; align-items: start; }
.account-main, .account-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.account-main { container-type: inline-size; }
.account-main .card + .card, .account-side .card + .card { margin-top: 0; }
.account-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.account-form-card { display: flex; flex-direction: column; padding: 16px 18px 0; }
.account-form-card .card-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f3efe6; }
.account-form-card .account-form-grid { gap: 12px 14px; }
.account-form-card .account-form-grid textarea { min-height: 62px; resize: vertical; }
.account-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: auto -18px 0; padding: 12px 18px 14px; background: #fbfaf6; border-top: 1px solid #f3efe6; border-radius: 0 0 14px 14px; }
.account-form-actions .btn { margin-top: 0; }
.account-form-note { flex: 1; min-width: 150px; max-width: 62%; text-align: right; font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.account-password-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-password-grid .field.full { grid-column: 1 / -1; }
.account-strength { margin-top: 10px; }
.account-rules { margin: 10px 0 0; }
.account-profile-card { padding: 20px 22px; }
.account-profile-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.account-avatar {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #2d332b, #4b5446);
  color: #f6e7b5; font-family: var(--serif); font-size: 26px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(42, 48, 39, .18);
}
.account-profile-who { flex: 1; min-width: 200px; }
.account-profile-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.account-role-badge { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .05em; color: #7d6428; background: var(--gold-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; flex: 0 0 auto; }
.account-profile-sub { margin-top: 5px; font-size: 11.5px; color: var(--ink-2); }
.account-profile-meta { margin-top: 4px; font-size: 10px; color: var(--muted); }
.account-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.account-bio { margin-top: 16px; padding: 11px 13px; border-left: 2px solid var(--gold); background: #fbf7ec; border-radius: 0 8px 8px 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-2); }
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-form-grid .field.full { grid-column: 1 / -1; }
.account-form-grid .field.email-field { grid-column: 1 / -1; }
.account-form-grid textarea { min-height: 70px; }
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { padding-right: 52px; }
.pw-eye { position: absolute; right: 6px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10.5px; cursor: pointer; }
.pw-eye:hover { background: #f0ece1; color: var(--ink); }
.account-strength { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.account-strength-bars { display: flex; gap: 5px; flex: 0 0 132px; }
.account-strength-bars i { flex: 1; height: 5px; border-radius: 999px; background: #e7e1d3; transition: background .16s; }
.account-strength-bars i.on { background: var(--gold); }
.account-strength span { font-size: 10.5px; color: var(--muted); }
.account-rules { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.account-rules li { position: relative; padding-left: 13px; font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.account-rules li::before { content: '·'; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.account-side-list { display: flex; flex-direction: column; }
.account-side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3efe6; font-size: 10.5px; }
.account-side-row:last-child { border-bottom: 0; }
.account-side-row span { color: var(--muted); white-space: nowrap; }
.account-side-row b { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.account-perm-note { margin-top: 10px; padding: 9px 11px; border: 1px solid #d9e6dc; border-radius: 9px; background: #f3f8f4; font-size: 10px; line-height: 1.6; color: #2f5f45; }
.account-other-toggle { align-self: flex-start; margin-top: 9px; padding: 0 0 2px; border: 0; background: none; color: #7d6428; font-size: 10px; cursor: pointer; }
.account-other-toggle:hover { text-decoration: underline; }
.account-other { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.account-other-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.account-other-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3efe6; }
.account-other-row:last-child { border-bottom: 0; }
.account-other-row div { min-width: 0; }
.account-other-row b { display: block; font-size: 10.5px; font-weight: 600; }
.account-other-row small { display: block; margin-top: 2px; font-size: 9.5px; color: var(--muted); }
.account-other-row > span { flex: 0 0 auto; font-size: 9.5px; color: var(--muted); }
.account-empty { padding: 10px 0 4px; font-size: 10.5px; color: var(--muted); }
.account-deploy { font-size: 10.5px; line-height: 1.7; color: var(--muted); }
.account-deploy p { margin: 0 0 8px; color: var(--ink-2); }
.account-deploy ul { margin: 0; padding-left: 15px; }
.account-deploy li { margin-bottom: 4px; }
@container (min-width: 660px) {
  .account-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-form-grid .field.email-field { grid-column: span 2; }
  .account-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-password-grid .field.full { grid-column: auto; }
}
@container (max-width: 520px) {
  .account-form-grid, .account-password-grid { grid-template-columns: 1fr; }
  .account-form-grid .field.email-field, .account-password-grid .field.full { grid-column: auto; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .account-layout { grid-template-columns: minmax(0, 1fr) 286px; }
}

/* ---------------- 账号管理页 ---------------- */
.accounts-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.accounts-list-card { min-width: 0; }
.accounts-list-card .card-head { align-items: center; }
.accounts-list-card .card-head .btn { flex: 0 0 auto; }
.account-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.account-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 132px auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.account-row.selected { border-color: #cdb46f; box-shadow: 0 0 0 2px rgba(196, 164, 93, .12); }
.account-row-avatar {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, #2d332b, #4b5446); color: #f6e7b5;
  font-family: var(--serif); font-size: 16px; font-weight: 700;
}
.account-row-main { min-width: 0; }
.account-row-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.account-row-sub { margin-top: 3px; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role-badge.owner { color: #fff; background: #6a5a2d; }
.account-row-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 9.5px; color: var(--muted); }
.account-row-meta small { font-size: 9.5px; color: var(--muted); }
.account-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; }
.account-status.on { color: #2f7a4f; }
.account-status.off { color: #a4573f; }
.account-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.account-row-actions .btn { white-space: nowrap; }
.perm-chip-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.perm-chip-list.compact { margin-top: 5px; }
.perm-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: #f3efe6; color: #8b8170; font-size: 9px; line-height: 1.5; white-space: nowrap; }
.perm-chip.on { background: #f5edd7; color: #7d6428; }
.perm-chip.all { background: #302f29; color: #f6e7b5; }
.accounts-editor { padding: 18px 20px; min-width: 0; }
.accounts-editor .card-head { padding: 0 0 14px; }
.accounts-editor .form-section-title { margin: 18px 0 9px; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.accounts-editor .form-section-title span { margin-left: 7px; font-size: 9.5px; font-weight: 400; color: var(--muted); }
.account-editor-columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: start; }
.account-editor-pane { min-width: 0; }
.account-editor-pane > .form-section-title:first-child { margin-top: 0; }
.account-editor-perms .form-section-title { margin-top: 0; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perm-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.perm-item:has(input:checked) { border-color: #d8c38a; background: #fdfaf0; }
.perm-item input { margin-top: 2px; accent-color: #b08c3f; }
.perm-item span { min-width: 0; }
.perm-item b { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.4; }
.perm-item small { display: block; margin-top: 2px; font-size: 9px; line-height: 1.45; color: var(--muted); }
.account-editor-status { margin-top: 12px; padding: 9px 11px; border-radius: 8px; background: #f6f2e8; font-size: 10px; line-height: 1.6; color: var(--muted); }
.accounts-editor-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; text-align: center; color: var(--muted); }
.accounts-editor-empty h3 { margin: 0; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.accounts-editor-empty p { max-width: 260px; margin: 0; font-size: 10.5px; line-height: 1.7; }
.accounts-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 9.5px; line-height: 1.6; color: var(--muted); }
.accounts-kpis { margin-bottom: 14px; }

.user-line .user-avatar {
  border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif);
}
.user-line .user-avatar:hover { filter: brightness(1.08); }
.user-line .who .nm { font-size: 12px; font-weight: 600; line-height: 1.2; }

@media (max-width: 1180px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .account-side > .card:last-child { grid-column: 1 / -1; }
  .accounts-layout { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .account-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-side { grid-template-columns: 1fr; }
  .account-side > .card:last-child { grid-column: auto; }
  .account-editor-columns { grid-template-columns: 1fr; gap: 18px; }
  .account-editor-perms .form-section-title { margin-top: 18px; }
  .perm-grid { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .account-row-meta { grid-column: 2 / 3; flex-direction: row; flex-wrap: wrap; }
  .account-row-actions { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 820px) {
  .auth-body { display: block; padding: 0; }
  .auth-shell { min-height: 100vh; border-radius: 0; border: 0; grid-template-columns: 1fr; }
  .auth-art { min-height: 230px; padding: 24px 22px; gap: 18px; }
  .auth-art-copy h1 { font-size: 30px; }
  .auth-art-copy p:last-child, .auth-features, .auth-art-foot { display: none; }
  .auth-form-panel { padding: 32px 22px 26px; }
  .account-kpis { grid-template-columns: 1fr 1fr; }
  .account-profile-actions { width: 100%; }
  .account-profile-actions .btn { flex: 1; }
  .account-row { grid-template-columns: 34px minmax(0, 1fr); }
  .account-row-meta, .account-row-actions { grid-column: 2 / 3; }
  .account-row-actions { grid-row: auto; justify-content: flex-start; }
}

/* ---------------- 实时数据：服务器运行 / 比赛控制 ---------------- */
.ov-ops {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: stretch;
  gap: 16px;
}
.ov-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ov-k { font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.ov-code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f1e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.run-note {
  padding-top: 9px;
  border-top: 1px dashed #ece7da;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.match-clock { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.match-clock b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.match-now { min-width: 0; }
.match-now .nm { font-size: 12.5px; font-weight: 600; }
.match-now .sub { margin-top: 2px; font-size: 11px; color: var(--muted); }
.match-next { font-size: 11.5px; color: var(--muted); }
.match-next b { color: var(--ink); }
.match-ctl-row { display: flex; gap: 6px; align-items: center; }
.match-ctl-row .input.slim { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; font-size: 11.5px; }
.match-ctl-row .btn { flex: none; }
.match-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.match-btns .btn { flex: 0 0 auto; }
.btn.danger-ghost { border-color: rgba(211, 69, 58, .45); color: #a4573f; background: #fffaf8; }
.btn.danger-ghost:hover { border-color: var(--red); color: var(--red); }
.kv-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}
.kv-list > div { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #ece7da; }
.kv-list > div:last-child { border-bottom: 0; }
.kv-list span { flex: 0 0 76px; font-size: 11.5px; color: var(--muted); }
.kv-list b { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12px; font-weight: 600; word-break: break-word; }
.kv-list b i { font-style: normal; font-variant-numeric: tabular-nums; }
.kv-code { display: flex; align-items: center; gap: 12px; margin-top: 2px; padding-top: 9px; border-top: 1px solid #ece7da; }
.kv-code span.k { flex: 0 0 76px; font-size: 11.5px; color: var(--muted); }
.kv-code .row { flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; }
.kv-code .ov-code { flex: 1 1 0; }
@media (max-width: 1040px) {
  .kv-code { flex-direction: column; align-items: stretch; gap: 6px; }
  .kv-code span.k { flex: none; }
}
.detail-card { grid-column: auto; order: -1; }
.ov-ops > .card + .card { margin-top: 0; }
.fac-sum { display: flex; flex-direction: column; gap: 7px; padding-bottom: 10px; border-bottom: 1px dashed #ece7da; }
.fac-line { display: flex; flex-direction: column; gap: 5px; }
.fac-top { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; }
.fac-line .fac-dot { width: 8px; height: 8px; border-radius: 50%; }
.fac-line .nm { font-size: 12px; font-weight: 600; }
.fac-line .fac-track { display: block; height: 6px; border-radius: 4px; background: #eeece4; overflow: hidden; }
.fac-line .fac-track i { display: block; height: 100%; border-radius: 4px; }
.fac-line b { font-size: 13px; font-variant-numeric: tabular-nums; }
.fac-line b .cap { font-size: 10px; font-weight: 400; color: var(--muted); }
.fac-line .cnt { min-width: 40px; text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.emg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(185, 85, 63, .28);
  border-radius: 8px;
  background: #fff6f3;
}
.emg-row .meta .nm { font-size: 12.5px; font-weight: 700; color: #a4573f; }
.emg-row .meta .sub { margin-top: 2px; font-size: 11px; color: var(--muted); }
.emg-row .btn { margin-left: auto; flex: none; }
.emg-row .btn:disabled { background: #f6e7e3; border-color: #ecd6d1; color: #b79790; }
@media (max-width: 1040px) {
  .ov-ops { grid-template-columns: minmax(0, 1fr); }
}