/* 打靶图·AI 辩论台 — 视觉体系
   瑞士国际主义：黑白灰为底，细线分隔、克制圆角、等宽数字。
   颜色规则（与「打靶图」家族同规）：**UI 一律灰黑白，彩色只给数据**
   —— 靶图点 / 立场扇区 / 席位色 / 语义状态色可以用彩，按钮、导航、聚焦环一律灰。 */

:root {
  /* —— 家族设计令牌（来源：打靶图_正式版/assets/shell.js · 登录页定稿 2026-08-24 终版）
        实测值：主按钮实心 #666 / 高 31 / 12.5px / 600；次按钮槽位 rgba(85,85,85,.08) / 400；
        禁用 #f1f2f4 + #9aa3b2；输入框高 29 / 边 #dcdfe4；聚焦环 rgba(0,0,0,.08)。—— */
  --primary: #666666;
  --primary-hover: #333333;
  --brand-black: #1a1a1a;
  --slot: rgba(85, 85, 85, .08);
  --slot-hover: rgba(85, 85, 85, .10);
  --slot-on: rgba(85, 85, 85, .10);
  --focus-ring: rgba(0, 0, 0, .08);

  /* 旧变量名保留：全站引用点一个没动，只换值。右列是它现在代表的东西。 */
  --brand: #666666;                  /* 家族主按钮实心色（原：品牌蓝） */
  --brand-deep: #1a1a1a;             /* 品牌黑（原：深蓝） */
  --brand-hover: #333333;            /* 家族 hover（原：蓝 hover） */
  --brand-tint: #dcdfe4;             /* 家族线色，用作浅描边/浅底（原：浅蓝底） */
  --info-bg: rgba(85, 85, 85, .08);  /* 家族槽位（原：信息浅蓝底） */
  --m1: #6b7280;                     /* 家族次级文字（原：中蓝） */

  --ink: #1f2329;      /* 家族 --ui-text */
  --ink-2: #3d444d;
  --ink-3: #6b7280;
  --ink-4: #8a93a6;    /* 家族 --ui-text-3：11.5px 提示文字的对比度从 2.5 提到 3.4 */

  --line: #dcdfe4;     /* 家族 --ui-line */
  --line-2: #eef0f3;
  --bg: #f7f8fa;
  --panel: #ffffff;

  --ok: #2e7d32;      /* 家族语义绿 */
  --warn: #854f0b;    /* 家族语义黄 */
  --err: #b3261e;     /* 家族语义红 */

  --r: 10px;
  --r-sm: 6px;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 靶图引擎（target.js）内部约定使用的变量：它有几处不带回退值，
     不在这里定义，它的悬停浮层就会回退成默认色（描边变黑、圆角归零）。 */
  --ui-line: #dcdfe4;
  --ui-text: #1f2329;
  --ui-text-2: #6b7280;
  --ui-text-3: #8a93a6;
  --ui-radius: 8px;
  --primary: #666666;   /* 靶图引擎自己的兜底色就是 #666，与家族一致 */
}

* { box-sizing: border-box; }

/* ⚠ [hidden] 必须赢（2026-09-24 实测的一号 bug）：
   作者样式里的 display 会压过浏览器对 hidden 属性的默认处理，于是
   `.dialog-mask{display:flex}` 让 #dialog 从第一帧起就铺满全屏 ——
   整页被一层 rgba(17,20,24,.32) 蒙住、所有鼠标事件被它吞掉，
   表现就是用户说的"页面是灰色的""登录框里填不进任何信息"。
   这条兜底覆盖全站所有用 hidden 开关的元素（#dialog / #loginRoot / 各 view 段）。 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

.app {
  display: grid;
  grid-template-columns: 244px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ---------------- 侧栏 ---------------- */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--line-2);
}

.brand .mark { width: 26px; height: 26px; flex: none; }

.brand-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-txt strong { font-size: 13.5px; letter-spacing: .01em; }
.brand-txt span { font-size: 11px; color: var(--ink-4); line-height: 1.35; }

.nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: baseline;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-2);
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--slot); }
.nav-item .idx { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.nav-item .lbl { display: flex; flex-direction: column; gap: 1px; }
.nav-item .lbl b { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.nav-item .lbl i { font-style: normal; font-size: 11px; color: var(--ink-4); }
.nav-item.on { background: var(--slot-on); color: var(--ink); }
.nav-item.on .idx { color: var(--ink-3); }
.nav-item.on .lbl b { font-weight: 650; }
.nav-item.on .lbl i { color: var(--ink-3); }
.nav-item .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); margin-left: 6px; vertical-align: 1px;
}

.side-foot {
  margin-top: auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-2);
}
.side-foot p { margin: 0 0 3px; font-size: 10.5px; line-height: 1.5; }
.dim { color: var(--ink-4); }

/* ---------------- 主区 ---------------- */
.main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: 52px;
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}
.crumb { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.crumb b { color: var(--ink); font-weight: 620; font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 8px; }

.view-wrap { flex: 1; overflow-y: auto; min-height: 0; }
.view { max-width: 1000px; padding: 26px 32px 96px; }

.page-title { font-size: 19px; font-weight: 650; letter-spacing: .01em; margin: 0 0 6px; }
.page-sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 20px; line-height: 1.7; }
.sec-title {
  font-size: 12px; font-weight: 650; letter-spacing: .1em; color: var(--ink-3);
  text-transform: uppercase; margin: 26px 0 10px;
}
.sec-title:first-child { margin-top: 4px; }

/* ---------------- 通用件 ---------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.card + .card { margin-top: 12px; }

/* 按钮两级（家族规格：主 = 实心 #666；次 = 槽位软底、无描边） */
.btn {
  height: 31px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--slot);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover:not(:disabled) { background: var(--slot-hover); }
.btn:disabled { background: #f1f2f4; color: #9aa3b2; cursor: not-allowed; }
.btn-primary { background: var(--primary); border: 0; color: #fff; font-weight: 600; padding: 0 14px; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); color: #fff; }
.btn-primary:disabled { background: #f1f2f4; color: #9aa3b2; }
.btn-sm { height: 27px; padding: 0 10px; font-size: 12px; }
.btn-icon { padding: 0 9px; }
.btn-quiet { background: transparent; color: var(--ink-3); }
.btn-quiet:hover:not(:disabled) { background: var(--slot); color: var(--ink); }
.btn-danger { color: var(--err); }
.btn-danger:hover:not(:disabled) { background: #fdecea; color: var(--err); }

.close-pill {
  height: 27px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: #f3f4f6;
  color: var(--ink-2);
  font-size: 12.5px;
  cursor: pointer;
}
.close-pill:hover { background: #e9eaee; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.field .hint { font-size: 11.5px; color: var(--ink-4); line-height: 1.6; }

.input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 11px;
  height: 34px;
  font-size: 13px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea { padding: 9px 11px; height: auto; min-height: 84px; line-height: 1.65; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: #9aa3b2; }
.input.mono { font-family: var(--mono); font-size: 12.5px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.row-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  background: var(--info-bg);
  color: var(--brand-deep);
  white-space: nowrap;
}
.pill.plain { background: var(--slot); color: var(--ink-3); }
.pill.ok { background: #e8f5e9; color: var(--ok); }
.pill.warn { background: #faeeda; color: var(--warn); }
.pill.err { background: #fdecea; color: var(--err); }

.tag-mono { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.empty {
  border: 1px dashed #d6dbe1;
  border-radius: var(--r);
  padding: 26px 22px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.8;
  background: #fcfcfd;
}
.empty b { color: var(--ink); font-weight: 620; }

/* ---------------- 模型卡 ---------------- */
.model-card { display: flex; flex-direction: column; gap: 12px; }
.model-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.model-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.model-title b { font-size: 13.5px; font-weight: 620; }
.model-meta { font-size: 11.5px; color: var(--ink-4); font-family: var(--mono); word-break: break-all; line-height: 1.6; }

.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.prov {
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 10px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .12s ease, background .12s ease;
}
.prov:hover { background: var(--slot); }
.prov b { font-size: 12.5px; font-weight: 600; }
.prov i { font-style: normal; font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); }
.prov.sel { border-color: var(--brand); background: var(--slot-on); }

/* 数字步进器（② 辩题页：交锋轮数 / 每次发言字数）—— 自由圆桌的两个旋钮。
   家族规格：31px 高、槽位软底、无描边按钮，值可直接在中间框里改。 */
.stepper {
  display: inline-flex;
  align-items: stretch;
  height: 31px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.stepper button {
  width: 30px;
  border: 0;
  background: var(--slot);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.stepper button:hover { background: var(--slot-hover); color: var(--ink); }
.stepper input {
  width: 64px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  outline: none;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { background: #fbfbfc; }

/* 快捷值（发言长度三档：点一下把数字填进左边的步进器） */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  height: 31px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease;
}
.chip:hover { background: var(--slot); color: var(--ink); }
.chip.sel { background: var(--slot-on); color: var(--ink); font-weight: 600; }

/* 分段开关（③ 席位卡上「我」的参与方式：下场辩 / 场边观战）—— 家族灰黑白：选中项白底浮起 */
.seg { display: inline-flex; gap: 2px; background: var(--slot); border-radius: 8px; padding: 2px; }
.seg-btn {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

/* ---------------- 席位卡 ---------------- */
.seat-card { display: flex; gap: 14px; align-items: flex-start; }
.seat-bar { width: 3px; border-radius: 3px; align-self: stretch; flex: none; }
.seat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.seat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seat-head b { font-size: 13.5px; font-weight: 620; }
.seat-order { display: flex; gap: 4px; }

/* ---------------- 辩场 ---------------- */
.arena-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(247, 248, 250, .94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
  margin: -26px -32px 18px;
  padding: 14px 32px 12px;
}
.phase-track { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phase-chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.phase-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.phase-chip.done { color: var(--ink-4); background: var(--line-2); border-color: transparent; }

.speech {
  background: #fff;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: 13px 15px 14px;
  margin-bottom: 10px;
}
.speech.user { background: var(--bg); }
.speech-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.speech-name { font-size: 13px; font-weight: 650; }
.speech-meta { margin-left: auto; font-size: 11px; color: var(--ink-4); font-family: var(--mono); }
.speech-body { font-size: 14px; line-height: 1.78; color: #1f242b; white-space: pre-wrap; word-break: break-word; }
.speech.interject { border-style: dashed; }
.speech-error { font-size: 12.5px; color: var(--err); line-height: 1.7; margin-top: 6px; }
.caret { display: inline-block; width: 7px; height: 15px; background: var(--brand); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.turn-hint {
  border: 1px solid var(--brand-tint);
  background: var(--info-bg);
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--brand-deep);
  line-height: 1.7;
  margin-bottom: 12px;
}

.composer {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r);
  padding: 12px;
}
.composer.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.composer-foot .tip { font-size: 11.5px; color: var(--ink-4); }

/* ---------------- 复盘四区 ---------------- */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quad-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 14px 15px; }
.quad-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.quad-title b { font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.quad-title .n { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.quad-item { border-top: 1px solid var(--line-2); padding: 9px 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.quad-item:first-of-type { border-top: 0; padding-top: 2px; }
.quad-item b { color: var(--ink); font-weight: 620; }
.quad-item .sub { display: block; color: var(--ink-4); font-size: 11.5px; margin-top: 3px; }
.quad-item .who { font-family: var(--mono); font-size: 11px; color: var(--brand-deep); }
.quad-empty { font-size: 12px; color: var(--ink-4); padding: 4px 0 2px; }

/* ---------------- 对话 / 提示 ---------------- */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12.5px;
  max-width: 380px;
  line-height: 1.6;
  box-shadow: 0 6px 20px rgba(17, 20, 24, .08);
}
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }

.dialog-mask {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  padding: 20px;
}
.dialog { background: #fff; border-radius: 12px; width: min(560px, 100%); padding: 20px; box-shadow: 0 20px 60px rgba(17, 20, 24, .2); }
.dialog h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.dialog p { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.75; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; }

.stat { display: flex; flex-direction: column; gap: 3px; }
.stat b { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.stat span { font-size: 11px; color: var(--ink-4); }

.kbd-note { font-size: 11.5px; color: var(--ink-4); line-height: 1.75; }

/* ---------------- 装备招法 ---------------- */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 6px; }
.mod {
  text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 7px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  transition: border-color .12s ease, background .12s ease;
}
.mod:hover { background: var(--slot); }
.mod.on { border-color: var(--brand); background: var(--slot-on); }
.mod b { font-size: 12px; font-weight: 620; }
.mod i { font-style: normal; font-size: 10.5px; color: var(--ink-4); line-height: 1.45; }

/* ---------------- 招式条（赛后核验结果） ---------------- */
.move-bar {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.move-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 6px; background: #fdecea; color: var(--err); font-size: 11.5px;
}
.move-chip.ok { background: #e8f5e9; color: var(--ok); }
.move-chip b { font-size: 11px; }
.move-chip em { font-style: normal; color: var(--ink-4); font-size: 10.5px; }

/* ---------------- 每轮给药（本轮新信息） ---------------- */
.novel-bar {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); background: var(--slot);
  border-radius: var(--r); padding: 10px 13px; margin: 0 0 10px;
}
.novel-bar.none { background: #fafbfc; border-color: var(--line); }
.novel-bar b { font-size: 11.5px; color: var(--brand-deep); font-weight: 620; letter-spacing: .02em; }
.novel-bar.none b { color: var(--ink-3); }
.novel-item { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.novel-item em { font-style: normal; font-weight: 620; color: var(--ink); margin-right: 6px; }

/* ---------------- ⑦ 擂台（1v1） ---------------- */

.duel-cta {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  line-height: 1.9;
  font-size: 13px;
}
.duel-cta code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 2px;
}

.room-code {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .22em;
  color: var(--brand-deep);
  background: var(--info-bg);
  border-radius: 6px;
  padding: 3px 10px 3px 12px;
  margin: 0 4px;
}

.duel-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.duel-seat {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 13px; background: #fff; min-width: 0;
}
.duel-seat.empty-seat { border-style: dashed; background: var(--bg); }
.duel-seat > div { min-width: 0; }
.duel-seat b { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.duel-seat span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; word-break: break-word; }
.duel-tag {
  flex: none; color: #fff; font-size: 11.5px; line-height: 1;
  padding: 5px 8px; border-radius: 5px; letter-spacing: .04em;
}

.duel-topic { margin-top: 4px; }
.duel-topic > b { display: block; font-size: 17px; line-height: 1.55; margin: 8px 0 0; }
.duel-stances { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.duel-stances span {
  border-left: 3px solid var(--line); padding: 6px 11px; background: var(--bg);
  border-radius: 0 6px 6px 0; font-size: 13px; min-width: 0;
}

.duel-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.duel-q { font-size: 15.5px; line-height: 1.5; min-width: 0; }

.duel-stream { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.duel-msg {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px;
}
.duel-msg.live { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.duel-msg-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.duel-msg-h b { font-size: 13.5px; }
.duel-msg-h .tag {
  font-size: 11.5px; color: var(--ink-3); background: var(--bg);
  border-radius: 20px; padding: 1px 9px;
}
.duel-msg-h .tag.me { background: var(--brand-tint); color: var(--brand-deep); }
.duel-msg p { margin: 0; font-size: 14.5px; line-height: 1.82; white-space: pre-wrap; }

.duel-turn { margin-top: 12px; }
.duel-turn > b { font-size: 14px; }
.duel-turn > .hint { display: inline-block; margin-left: 8px; }

.duel-verdict { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.duel-verdict > b { font-size: 18px; }
.duel-verdict > .hint { display: block; margin-top: 6px; }

.duel-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.judge-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px; min-width: 0;
}
.judge-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.judge-h b { font-size: 13.5px; }
.judge-h .hint { margin: 0; }
.judge-dim { border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 10px; }
.judge-dim:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.jd-h { font-size: 12.5px; color: var(--ink-3); margin-bottom: 7px; letter-spacing: .02em; }
.jd-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; }
.jd-row.bad { opacity: .72; }
.jd-score { font-family: var(--mono); font-size: 15px; }
.jd-why { font-size: 13px; color: var(--ink-2); flex: 1; min-width: 120px; }
.jd-quote {
  width: 100%; font-size: 12px; line-height: 1.7; color: var(--ink-3);
  background: var(--bg); border-radius: 6px; padding: 6px 9px; word-break: break-word;
}
.jd-row.bad .jd-quote { background: #fdecea; color: var(--err); }
.jd-row:not(.bad) .jd-quote { background: #eef7f2; color: var(--ok); }

/* ---------------- ⑦ 擂台 · 选手卡与战绩 ---------------- */

.duel-me { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.duel-me > div { min-width: 0; flex: 1; }
.duel-me b { font-size: 15px; margin-right: 7px; }
.duel-face {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--info-bg); color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 500;
}
.duel-count { flex: none; text-align: right; }
.duel-count b { font-size: 22px; font-family: var(--mono); }
.duel-count span { font-size: 12px; color: var(--ink-3); margin-left: 3px; }

.duel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.duel-stat {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; min-width: 0;
}
.duel-stat > span { display: block; font-size: 12px; color: var(--ink-3); }
.duel-stat > b { display: block; font-size: 15px; margin-top: 4px; }
.duel-stat > i {
  display: inline-block; font-style: normal; font-family: var(--mono);
  font-size: 12px; color: var(--brand-deep); margin-top: 4px;
}
.duel-stat > em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }

.duel-recent { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.duel-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--line-2);
}
.duel-line:first-of-type { border-top: 0; }
.duel-line > i {
  font-style: normal; flex: none; width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 4px; font-size: 11px;
  background: var(--bg); color: var(--ink-3);
}
.duel-line > i.win { background: #fdecea; color: var(--err); }
.duel-line > i.lose { background: #eef7f2; color: var(--ok); }
.duel-line .mono { font-family: var(--mono); }
.duel-line > b { font-family: var(--mono); }
.duel-line > i + span { flex: 1; min-width: 90px; }

.duel-migrate {
  margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 12px;
}
.duel-migrate > b { font-size: 13px; margin-right: 8px; }
.duel-migrate .textarea { margin-top: 8px; }

.duel-card {
  border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-sm); padding: 12px 13px; margin-top: 8px;
}
.duel-seat.clickable { cursor: pointer; }
.duel-seat.clickable:hover { border-color: var(--brand); background: var(--slot); }
.duel-more { flex: none; font-size: 11.5px; color: var(--brand); align-self: center; }

@media (max-width: 900px) {
  .duel-seats, .duel-scores { grid-template-columns: 1fr; }
  .duel-stats { grid-template-columns: 1fr; }
}

/* ---------------- 评选 ---------------- */

.award-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.award-row:first-child { border-top: 0; padding-top: 2px; }
.award-name { width: 178px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.award-name b { font-size: 13px; font-weight: 620; }
.award-name span { font-size: 11px; color: var(--ink-4); }
.winner {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2);
}
.winner b { font-size: 14px; font-weight: 650; }
.winner span { color: var(--ink-4); font-size: 11.5px; }

/* ---------------- 招法执行报告 ---------------- */
.rep-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-table th {
  text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11.5px;
  padding: 0 8px 8px 0; border-bottom: 1px solid var(--line);
}
.rep-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-2); }
.rep-table tr:last-child td { border-bottom: 0; }
.rep-table td.num { font-family: var(--mono); }

/* ---------------- 决策地图 ---------------- */
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 12px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.map-legend i.dot-ring { background: none; border: 1.5px solid var(--m1); }
.map-legend i.ghost { background: none; border: 1.5px dashed var(--ink-4); }

.map-ctl {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r);
  padding: 10px 13px; margin-bottom: 14px;
}
.map-ctl .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: 1px; }

.map-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.map-host { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 10px; min-width: 0; }
.map-host svg { touch-action: none; }
.map-side { display: flex; flex-direction: column; gap: 12px; }

.map-stats { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 12px 13px; }
.map-stat { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.map-stat:last-of-type { border-bottom: 0; }
.map-stat b { font-family: var(--mono); font-size: 14px; }

.map-pick { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 13px 14px; }
.map-pick.empty-pick { display: flex; flex-direction: column; gap: 6px; border-style: dashed; border-color: var(--line); background: #fcfcfd; }
.map-pick.empty-pick b { font-size: 13px; }
.map-pick.empty-pick span { font-size: 12px; color: var(--ink-3); line-height: 1.75; }
.pick-quote { font-size: 13.5px; line-height: 1.8; color: var(--ink); margin: 9px 0 10px; }
.pick-meta { font-size: 11.5px; color: var(--ink-4); line-height: 1.8; }
.pick-meta b { color: var(--ink-2); }
.pick-judge { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin: 10px 0 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }

.speech.flash { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }

@media (max-width: 900px) {
  .map-stage { grid-template-columns: 1fr; }
  .map-ctl { gap: 8px 14px; }
  .map-host { padding: 4px; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 12px 14px; }
  .nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; }
  .nav-item { grid-template-columns: 1fr; padding: 7px 10px; }
  .nav-item .idx { display: none; }
  .nav-item .lbl i { display: none; }
  .side-foot { display: none; }
  .view { padding: 18px 16px 72px; }
  .arena-head { margin: -18px -16px 16px; padding: 12px 16px; }
  .grid-2, .grid-3, .quad { grid-template-columns: 1fr; }
  .award-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .award-name { width: auto; }
  .rep-table { display: block; overflow-x: auto; }
  .rep-table th, .rep-table td { white-space: nowrap; }
  .mod-grid { grid-template-columns: 1fr 1fr; }
  .main { overflow: visible; }
  .view-wrap { overflow: visible; }
}

/* ---------------- 登录 / 注册页（与「打靶图」家族同一套设计逻辑） ----------------
   规格来源：打靶图_正式版/assets/shell.js（登录页定稿 2026-08-24 终版）——
   左叙事 + 右表单 380px 卡片 / gap 40 / ≤920px 折叠左栏 / tabs 总高≈43px /
   表单行等高 --field-h / 激活词闸门 + 靶心射入动画。
   配色与家族**完全一致**（灰黑白；彩色只给数据）——不再用本产品自己的品牌蓝。 */
:root { --field-h: 29px; }

/* 切 tab 时内容高低变化会带出滚动条、把居中的整块内容挤向一侧；
   登录页可见时恒定预留滚动条槽位 → 零位移。 */
html:has(#loginRoot:not([hidden])) { scrollbar-gutter: stable; }

#loginRoot { min-height: 100vh; background: #f5f6f8; }
.lg-shell {
  min-height: 100vh; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 660px) 380px;
  align-items: start; align-content: start; justify-content: center;
  gap: 40px; max-width: 1280px; width: 100%; margin: 0 auto; padding: 40px 16px 28px;
}
.lg-stage { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.lg-target { display: block; }
.lg-credit { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink-4); line-height: 1.5; max-width: 480px; margin-top: 14px; letter-spacing: .3px; }
.lc-tmt { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: .8px; }
.lc-en { font-size: 12.5px; letter-spacing: .3px; }
.lc-by { font-size: 12.5px; opacity: .7; letter-spacing: 2px; }

.lg-card { min-height: 392px; background: var(--panel); border: 1px solid rgba(16,24,40,.08); border-radius: 12px; padding: 28px 26px; box-shadow: 0 1px 3px rgba(16,24,40,.09); }
.lg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lg-brand h1 { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.lg-brand small { display: block; font-size: 11.5px; color: var(--ink-4); font-weight: 400; line-height: 1.4; }

.lg-tabs { display: flex; gap: 4px; background: rgba(85,85,85,.08); padding: 4px; border-radius: 10px; margin-bottom: 14px; }
.lg-tab { flex: 1; border: 0; background: transparent; padding: 8px 16px; border-radius: 8px; font-size: 13px; color: var(--ink-3); cursor: pointer; font-family: inherit; line-height: 1.4; transition: background .12s, color .12s, box-shadow .12s; }
.lg-tab.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.10); }
.lg-tabs.sub { margin: 12px 0 2px; }

.lg-card label:not(.lg-chk) { display: block; font-size: 12px; color: var(--ink-3); margin: 10px 0 5px; }
.lg-card input:not([type="checkbox"]) { width: 100%; height: var(--field-h); padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; color: var(--ink); background: #fff; }
.lg-card input:not([type="checkbox"]):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.lg-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.lg-row input { width: 100%; }
.lg-btn { width: 100%; margin-top: 14px; padding: 7px 14px; border: none; border-radius: 8px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s; }
.lg-btn:hover:not(:disabled) { background: var(--brand-hover); }
.lg-btn:disabled { background: #f1f2f4; color: #9aa3b2; cursor: not-allowed; }
.lg-btn2 { height: var(--field-h); padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: var(--slot); color: var(--ink); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.lg-btn2:hover:not(:disabled) { background: var(--slot-hover); }
.lg-linkrow { margin-top: 10px; text-align: right; }
.lg-link { font-size: 11.5px; color: var(--brand); cursor: pointer; }
.lg-msg { margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; display: none; }
.lg-msg.ok { display: block; background: #e8f5e9; color: #2e7d32; }
.lg-msg.err { display: block; background: #fdecea; color: #b3261e; }

/* 激活码闸门 —— 灰(未就绪) → 深(可点) → 描边(已激活)，靶心射入动画由 JS 驱动 */
.lg-actbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: var(--field-h); border: 0; border-radius: 8px; padding: 0 16px; background: #c8ccd4; color: #fff; font-size: 12.5px; cursor: not-allowed; transition: background .15s, color .15s; white-space: nowrap; }
.lg-actbtn.ready { background: #666; cursor: pointer; }
.lg-actbtn.ready:hover { background: #333; }
.lg-actbtn.activated { outline: 2px solid rgba(26,26,26,.15); }
.lg-acttgt { display: inline-flex; color: #fff; }
.lg-actfly { position: fixed; z-index: 9999; pointer-events: none; color: var(--brand); }
.lg-actfade { opacity: 0; transition: opacity .45s ease; }
.lg-actok { display: none; align-items: center; gap: 8px; height: var(--field-h); padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12.5px; color: var(--ink); }
.lg-actok.show { display: flex; }
.lg-actstate { font-size: 11px; color: var(--ink-4); margin-top: 5px; min-height: 14px; }
.lg-muted { font-weight: 400; color: var(--ink-4); }

/* 协议同意层（只在注册页；默认不勾选） */
.lg-consent { margin: 14px 0 4px; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fafbfe; }
.lg-chk { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; margin: 7px 0; color: var(--ink); cursor: pointer; }
.lg-chk a { color: var(--brand); text-decoration: none; }
.lg-chk a:hover { text-decoration: underline; }
.lg-chk input { width: 14px; height: 14px; min-width: 14px; padding: 0; margin: 3px 0 0; flex: none; accent-color: var(--brand); }
.lg-chk span { flex: 1; min-width: 0; }
.lg-chk.emph { font-weight: 600; }

@media (max-width: 920px) {
  .lg-shell { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .lg-stage { display: none; }         /* 窄屏优先保证表单可用 */
  .lg-card { width: 100%; }
}
/* 赛制核验条（禁新论点等程序核验结果） */
.flag-bar { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; }
.flag { font-size: 12px; line-height: 1.6; padding: 6px 9px; border-radius: 6px; background: var(--slot); color: var(--ink-2); }
.flag b { font-family: var(--mono); margin-right: 6px; }
.flag.ok { background: #e8f5e9; color: var(--ok); }
.flag.warn { background: #faeeda; color: var(--warn); }
.flag em { display: block; font-style: normal; margin-top: 3px; opacity: .85; }

/* 判决（三轮投票制） */
.ballot { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ballot-row { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; background: #fff; }
.ballot-row.bad { border-color: var(--err); background: #fdecea; }
.ballot-row > b { min-width: 44px; }
.ballot-reason { color: var(--ink-2); flex: 1; min-width: 180px; }
.ballot-quote { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); flex-basis: 100%; }
.ballot-sum { font-size: 13px; font-weight: 600; padding: 8px 11px; background: var(--slot); border-radius: 8px; }