/* ============================================================
   右手杯 · 信息工作台视觉系统(2026-08 重做)
   语言:Things 风——浅冷灰/白底 + 标志性蓝单一强调,系统字体 +
   tabular 数字,8/12/16px 圆角,克制的冷灰 tinted 阴影。
   双主题:浅色为冷灰白,深色为深灰蓝;令牌双写不做,直接 hex。
   ============================================================ */

:root {
  /* 表面(Things 风:浅冷灰底 + 纯白面板) */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #edeff2;
  --surface-3: #e2e5ea;
  --surface-float: rgba(255, 255, 255, 0.94);
  /* 画布玻璃卡族:透明度/模糊可由编辑工具栏内联调节 */
  --card-glass-base: 255 255 255;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-glass-hover: rgba(255, 255, 255, 0.86);
  /* 遮罩 */
  --overlay: rgba(28, 32, 38, 0.45);
  --scrim: rgba(28, 32, 38, 0.82);
  --scrim-strong: rgba(28, 32, 38, 0.94);
  --scrim-heavy: rgba(16, 18, 22, 0.9);
  /* 文字与线条 */
  --text: #24292e;
  --text-muted: #6c727a;
  --border: #e2e5ea;
  --border-soft: rgba(36, 41, 46, 0.1);
  /* 强调:Things 蓝(加深一档保证白底文字/按钮对比) */
  --accent: #2f6be3;
  --accent-strong: #2657bc;
  --accent-soft: #e8effc;
  --accent-stripe: #d9e5f9;
  /* 语义色 */
  --danger: #cc3a2b;
  --danger-strong: #a82d20;
  --danger-soft: #f9e2de;
  --success: #3b7e3e;
  --success-strong: #2f6632;
  --success-soft: #e2efdf;
  --warning: #c97a1b;
  --warning-soft: #f7ebdb;
  /* 稀有度(卡组构成分析:卡名着色,铜/银/金;彩=固定六色渐变不走变量) */
  --rar-1: #6b4423;
  --rar-2: #6f7680;
  --rar-3: #d9970d;
  /* 分布四色段(Tableau 10 式低饱和均衡明度,兼作百分比小字,对白底≥3:1) */
  --dist-3: #d4685f;
  --dist-2: #c8a431;
  --dist-1: #58a05f;
  --dist-0: #6390cf;
  /* 职业色(7 职业,下标 1-7 与 CLASS_LIST 对齐):
   * 取自《影之诗WB》官网的职业标识色 —— 牌组编辑器/卡组弹窗用来给职业名与图标着色,
   * 是"这个界面属于哪个职业"最快的一眼信息。浅色下直接用(对白底对比足够),
   * 暗色下在下面单独提亮,并允许加发光。 */
  --cls-1: #3f9e5c; /* 精灵 */
  --cls-2: #b8860b; /* 皇家 */
  --cls-3: #3a5bd9; /* 法师 */
  --cls-4: #d4761a; /* 龙族 */
  --cls-5: #d63a72; /* 梦魇 */
  --cls-6: #8a7f5c; /* 主教 */
  --cls-7: #2f9db5; /* 复仇者 */
  /* 形式色:官网四形式各有标识色,牌组面板的形式行沿用 */
  --fmt-1: #0b93c4; /* 指定系列 */
  --fmt-2: #c0552c; /* 无限制 */
  --fmt-3: #a8862a; /* 无禁止 */
  --fmt-4: #12907a; /* 基础系列 */
  /* 类型色:官网牌组面板的随从/法术/护符三色 */
  --type-follower: #c2506a;
  --type-spell: #8b5fd0;
  --type-amulet: #3f8f76;
  /* 卡图上的信息叠加层:卡图明暗不可控,必须自带压暗底才保证白字可读 */
  --on-art: #ffffff;
  --on-art-dim: rgba(255, 255, 255, 0.78);
  /* 深底版稀有度色:浅色主题的 --rar-* 是给白底"压深"用的,压在卡图/纯黑行上会看不清,
   * 所以另给一组深底用的亮色(与暗色主题同值)。用它的地方:牌组行的铜/银/金/虹字样。 */
  --rar-on-dark-1: #a9743f;
  --rar-on-dark-2: #b9bfc7;
  --rar-on-dark-3: #f5bb42;
  /* 圆角系统:控件 8 / 卡片 12 / 大容器 16 / chip 胶囊 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* 阴影:冷灰 tint */
  --shadow-sm: 0 1px 2px rgb(36 41 46 / 0.06);
  --shadow: 0 1px 2px rgb(36 41 46 / 0.05), 0 10px 28px rgb(36 41 46 / 0.08);
  --shadow-lg: 0 24px 80px rgb(28 32 38 / 0.24);
  --focus-ring: 0 0 0 3px rgb(59 122 235 / 0.4);
  /* 字体:系统栈;数字一律 tabular(见各数字类) */
  --font:
    system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-display: var(--font);
  /* type scale(01-tokens §5,2026-10-10 落地为变量):新代码优先用这 6 档;
   * 存量同值 font-size 已改为引用;0.72/0.78rem → xs、0.85rem → sm 的中间值于 2026-10-11
   * 经拍板全部归并(±0.5px 内,对比图见 BOT_HANDOFF/font-compare,01-tokens §8) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  /* 缓动与时长:UI 不超过 320ms;长曲线只给呼吸/脉冲 */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur-ui: 200ms;
  --dur-slow: 300ms;
  --dur-pulse: 1.2s;
  --dur-breathe: 1.6s;
  --header-height: 3rem;
  --sidebar-w: 3.25rem;
}

body.side-expanded {
  --sidebar-w: 10.5rem;
}

/* ---------- 暗色主题(Things dark:深灰蓝底 + 亮蓝强调)---------- */

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1b1f24;
  --surface: #242930;
  --surface-2: #2e343c;
  --surface-3: #3a414a;
  --surface-float: rgba(36, 41, 48, 0.94);
  --card-glass-base: 36 41 48;
  --surface-glass: rgba(36, 41, 48, 0.72);
  --surface-glass-hover: rgba(46, 52, 60, 0.86);
  --overlay: rgba(0, 0, 0 / 0.6);
  --scrim: rgba(0, 0, 0 / 0.82);
  --scrim-strong: rgba(0, 0, 0 / 0.94);
  --scrim-heavy: rgba(0, 0, 0 / 0.9);
  --text: #e9ebee;
  --text-muted: #9ba1a9;
  --border: #3b4149;
  --border-soft: rgba(233, 235, 238, 0.1);
  /* 强调:Things 亮蓝 */
  --accent: #5e97f7;
  --accent-strong: #7fb0ff;
  --accent-soft: #26344d;
  --accent-stripe: #2d3f60;
  --danger: #f26d5f;
  --danger-strong: #f58376;
  --danger-soft: #432b28;
  --success: #6bc26e;
  --success-strong: #8ad38c;
  --success-soft: #243524;
  --warning: #f0a75a;
  --warning-soft: #3e2f1e;
  --rar-1: #a9743f;
  --rar-2: #b9bfc7;
  --rar-3: #f5bb42;
  --dist-3: #e3907f;
  --dist-2: #d9bc6a;
  --dist-1: #82c289;
  --dist-0: #8fb1ea;
  /* 职业色暗色版:官网原色(更亮更饱和)+ 允许发光,深底上才像"霓虹职业色" */
  --cls-1: #56d67a;
  --cls-2: #ecad15;
  --cls-3: #546eff;
  --cls-4: #ff9120;
  --cls-5: #f8467e;
  --cls-6: #b0a98d;
  --cls-7: #5bcce3;
  --fmt-1: #00cdff;
  --fmt-2: #df6436;
  --fmt-3: #ceae35;
  --fmt-4: #17bb9d;
  --type-follower: #e9899b;
  --type-spell: #b889e9;
  --type-amulet: #78c7a7;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 24px 80px rgb(0 0 0 / 0.6);
  --focus-ring: 0 0 0 3px rgb(94 151 247 / 0.45);
}

/* ---------- 图标(S6 方案 A) ----------
 * UI 单色图标: span.icon + CSS mask + currentColor,随文字色,不再全局 invert。
 * 职业 svg / 费用 webp: 继续用 img.icon,永不 invert。
 */
span.icon,
.icon[style*="--icon"] {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

img.icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  object-fit: contain;
}

/* 职业/费用彩色资产:显式禁止任何滤镜(防误伤) */
.class-slot .icon,
.class-bar .icon,
.list-class .icon,
.md-deck-row .icon,
.bl-cls-tab .icon,
.banlist-cls-tab .icon,
.bet-h2h .icon,
.icon.cost-ic {
  filter: none;
  background: none;
  -webkit-mask: none;
  mask: none;
}

::selection {
  background: var(--accent);
  color: #fff;
}

[data-theme='dark'] ::selection {
  color: #1b1f24;
}

/* ---------- 基础 ---------- */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.55;
  min-height: 100vh;
}

/* 背景层:暖色微光,赛事背景图(runtime 内联)覆盖其上 */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 8%, rgb(94 151 247 / 0.07), transparent 40%),
    radial-gradient(circle at 88% 92%, rgb(94 151 247 / 0.05), transparent 44%),
    var(--bg);
  background-position: center;
  background-size: cover;
}

[data-theme='dark'] #bg-layer {
  background-image:
    radial-gradient(circle at 12% 8%, rgb(94 151 247 / 0.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgb(94 151 247 / 0.04), transparent 44%);
  background-color: var(--bg);
}

[hidden] {
  display: none !important;
}

/* 工具类硬藏:!important 防被更高优先级的宽度规则(如 .me-panel .form-field input
 * 的 inline-size:100%)覆盖成实体盒,把布局视口撑宽(me#profile 409px 事故根因) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0.75rem;
  transform: translateY(-150%);
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 0.625rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  transform: translateY(0);
}

[data-theme='dark'] .skip-link {
  color: #1b1f24;
}

.init-error {
  position: relative;
  z-index: 60;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--danger);
}

/* 云端不可用阻断页(2026-09 云降级修复):盖住整页,不给任何赛事界面,
 * 只留原因与重试——本机模式在本地数据上可编辑,那才是最危险的假象 */
.cloud-down-active {
  overflow: hidden;
}

.cloud-down {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bg);
}

.cloud-down-box {
  max-inline-size: 34rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  text-align: center;
  box-shadow: 0 12px 32px rgba(28, 32, 38, 0.12);
}

.cloud-down-box h1 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: var(--danger);
}

.cloud-down-reason {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--text);
}

.cloud-down-note {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

main {
  min-inline-size: 0;
}

main > h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- 通用按钮 ----------
 * 形态:8px 圆角(工具感),按压 scale 反馈,悬停位移仅限精细指针 */

a.btn {
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  min-block-size: 2.5rem;
  transition:
    background var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 1;
  color: var(--text-muted);
  background: var(--surface-2);
  border-color: var(--border);
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

[data-theme='dark'] .btn-primary {
  color: #1b1f24;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--surface-2);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.btn-danger:hover {
  background: rgb(204 58 43 / 0.16);
}

/* 主色按钮内图标:随按钮 color(currentColor/mask),无需 invert */

.btn-sm {
  min-block-size: 2rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.82rem;
}

.hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* 尺寸兜底(span.icon / img.icon 已在上方定义;此处兼容旧选择器) */
.icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- 赛事状态徽章 ---------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.65rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.status-upcoming {
  background: var(--surface-2);
  color: var(--text-muted);
}

.status-badge.status-ongoing {
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.status-badge.status-finished {
  background: var(--success-soft);
  color: var(--success-strong);
}

.status-badge.status-ongoing .status-dot {
  animation: live-pulse var(--dur-pulse) var(--ease-in-out) infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* ---------- 顶栏 ---------- */

#app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding-left: var(--sidebar-w);
  transition: padding-left 0.18s var(--ease-out);
}

.header-inner {
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: 0.75rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.header-title {
  margin: 0;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: auto;
}

/* 「只看我的场次」开关:按下态用强调色填充,与一次性按钮(查找/名单)区分开 */
#my-matches-btn[aria-pressed='true'] {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.header-select {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 1.6rem 0.3rem 0.7rem;
  min-block-size: 2.1rem;
  max-inline-size: 12rem;
  cursor: pointer;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding-inline: 0.6rem;
  min-block-size: 2.1rem;
  color: var(--text-muted);
}

.header-search input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  min-inline-size: 9rem;
  max-inline-size: 13rem;
}

.header-search input::placeholder {
  color: var(--text-muted);
}

.header-search input:focus-visible {
  box-shadow: none;
}

.header-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.header-search .search-count {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* 顶栏按钮:压缩尺寸,但保留 primary / secondary / ghost 三级层次(S2) */
#app-header .btn {
  font-size: 0.8rem;
  min-block-size: 2.1rem;
  padding: 0.3rem 0.65rem;
  box-shadow: none;
}

#app-header .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

#app-header .btn.btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

#app-header .btn.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

#app-header .btn.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

#app-header .btn.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

#app-header .btn.btn-primary:hover {
  background: var(--accent-strong);
  color: #fff;
}

[data-theme='dark'] #app-header .btn.btn-primary {
  color: #1b1f24;
}

/* header 主按钮图标随 color,无需额外 filter */

/* ---------- 左侧栏 ----------
 * icon rail,可展开;当前页 = 左侧金色指示条 + 柔金底(非实心块) */

.app-sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  box-shadow: inset -1px 0 var(--border);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-block: 0.5rem;
  transition: width 0.18s var(--ease-out);
  overflow: hidden;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  align-items: stretch;
}

.side-link {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition:
    background var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}

/* 当前页指示条:左侧 3px 圆角金条,弹性展开 */
.side-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22%;
  bottom: 22%;
  inline-size: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.side-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.side-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.side-link.is-active::before {
  transform: scaleY(1);
}

.side-icon {
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.side-icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.side-label {
  display: none;
  font-size: var(--text-xs);
  line-height: 1.15rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.side-expanded .side-link .side-label,
body.side-expanded .side-action .side-label {
  display: block;
}

/* 侧栏底部功能组(登录/主题/管理),沉底 */
.side-actions {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}

.side-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 1.05rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  transition:
    background var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}

.side-action:hover {
  background: var(--surface-2);
  color: var(--accent);
}

.side-action .icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* S2:桌面侧栏底常驻 账号·主题·更多;更多弹出层收纳管理/举报/后台/文档 */
#side-more-btn {
  display: flex;
}

.side-actions {
  position: relative;
}

.side-more-menu {
  display: none;
  position: absolute;
  z-index: 70;
  inset-inline-start: calc(100% + 0.35rem);
  inset-block-end: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  min-inline-size: 9.5rem;
  padding: 0.35rem;
  background: var(--surface-float, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg, var(--shadow));
}

body.side-more-open .side-more-menu {
  display: flex;
}

/* 打开「更多」时放开侧栏裁切:桌面浮层整块在栏右侧外(absolute + inset-inline-start:100%+),
 * 默认 overflow:hidden 会裁掉菜单(窄屏媒体查询里已有同类注释与 overflow:visible)。
 * 仅打开时放开,避免平时侧栏标签/阴影被撑破布局 */
body.side-more-open .app-sidebar {
  overflow: visible;
}

.side-more-menu .side-action,
.side-more-menu .side-link {
  width: 100%;
  min-block-size: 2.5rem;
}

.side-more-menu .side-link .side-label,
.side-more-menu .side-action .side-label {
  display: block;
}

.side-toggle {
  margin-block-end: 0.25rem;
}

.side-toggle .icon {
  width: 1rem;
  height: 1rem;
}

/* 主页无页头 */
body[data-page="home"] {
  --header-height: 0px;
}

/* ---------- 整体布局 ---------- */

.layout-body {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--header-height, 3rem));
  padding: 0;
  transition: margin-left 0.18s var(--ease-out);
}

.layout-body > main {
  height: calc(100vh - var(--header-height, 3rem));
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 2rem;
  box-sizing: border-box;
}

.layout-body-canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: calc(100vh - var(--header-height, 3rem));
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
}

.layout-body-canvas.has-toolbar {
  grid-template-columns: minmax(0, 1fr) 3.25rem;
}

.layout-body-canvas > main {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

/* ---------- 弹窗 ---------- */

dialog {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  inline-size: min(92vw, 40rem);
  max-block-size: min(85vh, 46rem);
  overflow: auto;
}

dialog[open] {
  animation: dialog-in var(--dur-slow) var(--ease-out);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

dialog::backdrop {
  background: var(--overlay);
  animation: backdrop-in var(--dur-ui) var(--ease-out);
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.75rem;
}

/* 比分弹窗局数一多就会滚。标题栏钉住,手机上关窗不用先滑回顶。 */
#score-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

.dialog-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.dialog-body {
  padding: 0.75rem 1.25rem 1.25rem;
  display: grid;
  gap: 1rem;
}

.form-field {
  display: grid;
  gap: 0.375rem;
}

.form-field label {
  font-weight: 600;
  font-size: 0.9rem;
}

.form-field input[type="text"],
.form-field input[type="password"],
.form-field textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  inline-size: 100%;
}

.form-field textarea {
  min-block-size: 9rem;
  resize: vertical;
}

/* 弹窗内全部输入控件 */
.dialog-body input,
.dialog-body textarea,
.dialog-body select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  inline-size: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.dialog-body select {
  min-block-size: 2.6rem;
}

.dialog-body textarea {
  min-block-size: 9rem;
  resize: vertical;
}

.dialog-body input:focus,
.dialog-body textarea:focus,
.dialog-body select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.dialog-body input:disabled,
.dialog-body textarea:disabled,
.dialog-body select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.form-error {
  margin: 0.35rem 0 0;
  color: var(--danger-strong);
  background: var(--danger-soft);
  border: 1px solid rgb(204 58 43 / 0.35);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* 管理弹窗与设置弹窗内部件 */
.bg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bg-preview {
  inline-size: 9rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--surface-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.manage-list {
  display: grid;
  gap: 0.5rem;
}

.manage-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.manage-item.is-active {
  border-color: rgb(47 107 227 / 0.55);
  background: var(--accent-soft);
}

.manage-item-name {
  flex: 1 1 auto;
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  min-inline-size: 0;
}

.manage-item-name:hover {
  border-color: var(--border);
}

.manage-item-name:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.active-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
}

.manage-subsection {
  margin-block-start: 1rem;
  padding-block-start: 0.75rem;
  border-top: 1px solid var(--border);
}

.manage-subsection h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

#create-tournament-form input[type="text"] {
  flex: 1 1 auto;
  min-inline-size: 10rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
}

.deck-window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deck-window-controls input[type='time'] {
  width: 7.5rem;
}

/* 禁卡表编辑(届设置弹窗) */
.banlists-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-banlists { display: grid; gap: 10px; }
.bl-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: grid; gap: 8px; }
.bl-head { display: flex; gap: 8px; }
.bl-head .bl-name { flex: 1; }
.bl-cards { display: grid; gap: 2px; }
.bl-row { display: flex; align-items: center; gap: 6px; }
.bl-row .bl-limit { width: auto; }
.bl-add { display: grid; gap: 6px; }
.bl-results { display: grid; gap: 2px; }
.bl-hit { display: flex; align-items: center; gap: 6px; text-align: left; background: none; border: none;
  padding: 2px 4px; border-radius: 6px; cursor: pointer; color: inherit; }
.bl-hit:hover { background: var(--bg-hover, rgba(127, 127, 127, 0.12)); }
.bl-paste { display: flex; gap: 6px; }
.bl-paste .bl-paste-input { flex: 1; }
/* 8 职业 tab(下标=class id,默认中立);active 仅边框+浅底高亮 */
.bl-cls-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.bl-cls-tab { padding: 2px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; line-height: 0; }
.bl-cls-tab .icon { width: 18px; height: 18px; object-fit: contain; }
.bl-cls-tab.active { border-color: var(--accent, #3b82f6); background: rgba(59, 130, 246, 0.12); }
.bl-row .bl-reclass { width: auto; }

/* ---------- toast ---------- */

.toast-region {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline: 1.25rem;
  display: grid;
  justify-content: center;
  gap: 0.5rem;
  z-index: 300;
  pointer-events: none;
}

.toast {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  animation: toast-in var(--dur-slow) var(--ease-out);
}

.toast-danger {
  background: var(--danger-strong);
  color: #fff;
}

.toast-out {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm-text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- 灯箱 ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--scrim-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox:not([hidden]) {
  animation: lightbox-in var(--dur-ui) var(--ease-out);
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox:not([hidden]) .lightbox-img {
  animation: lightbox-img-in 240ms var(--ease-out);
}

@keyframes lightbox-img-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-img {
  max-inline-size: min(94vw, 110rem);
  max-block-size: 88vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 80px rgb(0 0 0 / 0.5);
  object-fit: contain;
}

.lightbox-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  block-size: 2.75rem;
  inline-size: 2.75rem;
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-out);
}

.lightbox-btn:hover {
  background: rgb(255 255 255 / 0.24);
}

.lightbox-btn .icon {
  width: 1.35rem;
  height: 1.35rem;
  /* color 已是 #fff,mask 图标自动白色 */
}

.lightbox-close {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

.lightbox-prev {
  inset-block-start: 50%;
  inset-inline-start: 1rem;
  transform: translateY(-50%);
}

.lightbox-next {
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  transform: translateY(-50%);
}

/* ---------- 头像 ---------- */

.avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--surface-3);
}

.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.avatar-lg {
  inline-size: 3rem;
  block-size: 3rem;
  font-size: var(--text-lg);
}

.avatar-sm {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  font-size: var(--text-xs);
}

#header-login-btn .avatar-side {
  width: 22px;
  height: 22px;
  min-width: 22px;
  font-size: 12px;
  line-height: 22px;
}

#header-login-btn .side-label {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 玻璃卡与对局卡(画布核心资产) ---------- */

.match-card,
.marquee-item {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--card-blur, 8px));
  backdrop-filter: blur(var(--card-blur, 8px));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.match-card {
  border-radius: var(--radius);
  padding: 0.55rem;
  background: rgb(var(--card-glass-base) / var(--card-glass, 0.72));
  transition:
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    background var(--dur-ui) var(--ease-out);
}

.match-card:hover {
  background: rgb(var(--card-glass-base) / var(--card-glass, 0.72));
  filter: brightness(1.03);
}

.match-card[data-tint] {
  background: color-mix(in srgb, var(--card-tint) 35%, rgb(var(--card-glass-base) / var(--card-glass, 0.72)));
  border-color: color-mix(in srgb, var(--card-tint) 55%, var(--border));
}

.match-card[data-tint]:hover {
  filter: brightness(1.05);
}

/* 已结束:金色描边沉淀感 */
.match-card.played {
  border-color: rgb(47 107 227 / 0.4);
  box-shadow: var(--shadow);
}

[data-theme='dark'] .match-card.played {
  border-color: rgb(94 151 247 / 0.35);
}

/* 进行中:红呼吸描边 + LIVE 章 */
.match-card.match-live {
  border-color: var(--danger-strong);
  outline: 2px solid var(--danger-strong);
  outline-offset: 1px;
  animation: match-live-breathe var(--dur-breathe) var(--ease-in-out) infinite;
}

.match-card.cycle {
  border-color: var(--danger-strong);
  outline: 2px dashed var(--danger-strong);
  outline-offset: 2px;
}

@keyframes match-live-breathe {
  0%, 100% { outline-color: var(--danger-strong); }
  50% { outline-color: rgb(204 58 43 / 0.25); }
}

.match-card,
.champion-banner {
  /* 画布卡片只淡入不位移:rise 的 translateY 会在 300ms 动画窗内让卡片
   * 相对连线(SVG 层,不参与该动画)下沉 6px,拖拽/重渲染重建时线卡瞬移错位 */
  animation: fade-in var(--dur-slow) var(--ease-out) both;
}

.champion-banner {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.match-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.35rem;
  min-inline-size: 0;
}

.match-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-state {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
}

.match-format {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem;
}

.match-state.done {
  color: var(--success-strong);
  background: var(--success-soft);
}

.match-state.live {
  color: #fff;
  background: var(--danger-strong);
}

.match-state.cycle {
  color: var(--danger-strong);
  background: var(--danger-soft);
}

.match-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  background: var(--surface-2);
}

.match-player + .match-player {
  margin-block-start: 0.3rem;
}

.match-player.tbd {
  color: var(--text-muted);
  font-style: italic;
}

.match-player.winner {
  background: var(--accent-soft);
  border-color: rgb(47 107 227 / 0.4);
  font-weight: 700;
}

[data-theme='dark'] .match-player.winner {
  border-color: rgb(94 151 247 / 0.4);
}

.match-player.loser {
  color: var(--text-muted);
}

.match-player.draw {
  background: var(--warning-soft);
}

.match-player.invalid {
  background: var(--danger-soft);
  opacity: 0.75;
}

.player-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-score {
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-inline-size: 1.5rem;
  text-align: center;
}

.score-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 0.45rem;
}

.match-phase {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: -0.25rem 0 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 职业卡组行 */
.deck-class-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

/* 画布卡固定 196 高:卡组行封顶单行,超长横向滚动,几何永不被打破 */
.canvas-card .deck-class-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  min-inline-size: 0;
}

.class-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
}

.class-slot .icon {
  inline-size: 1.42rem;
  block-size: 1.42rem;
}

.class-slot:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.class-slot.empty {
  border: 1px dashed var(--border);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.vs-sep {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.cl-locked {
  font-size: 12px;
  opacity: 0.65;
  cursor: help;
}

.roster-signed-only {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.45rem;
  margin-inline-start: auto;
}

/* 报名顺序编号(名单下拉里,池内选手按先后编号;.reserve=超出取前 N 的候补) */
.roster-sign-num {
  font-style: normal;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 1.3rem;
  text-align: center;
}

.roster-sign-num.reserve {
  opacity: 0.45;
}

/* 卡片编辑弹窗:职业链接行 */
.cl-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cl-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
}

.cl-row select,
.cl-row input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  min-inline-size: 0;
}

/* 比分预设按钮 */
.score-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.score-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.score-btn:active {
  transform: scale(0.97);
}

.score-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-theme='dark'] .score-btn.active {
  color: #1b1f24;
}

.score-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#score-dialog .score-btn {
  min-height: 2.75rem;
  min-width: 3.25rem;
}

.score-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block: 0.65rem 0.25rem;
}

.score-presets[hidden] {
  display: none;
}

.score-bo-line {
  margin: 0.35rem 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

/* 每一局一行:选手A 胜 | 职业 | vs | 职业 | 选手B 胜。窄屏也保持一行,字号收一点。 */
#score-dialog {
  inline-size: min(96vw, 44rem);
  max-inline-size: calc(100vw - 16px);
}

.score-games {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block: 0.35rem 0.15rem;
}

.score-games[hidden] {
  display: none;
}

.score-game {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) auto minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 0.3rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem;
  background: var(--surface);
}

.score-game .score-win {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.15;
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.25rem 0.3rem;
  border: 1px solid var(--border);
  flex-wrap: nowrap;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.score-win-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-win-mark {
  flex: none;
}

.score-game .score-win[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-theme="dark"] .score-game .score-win[aria-pressed="true"] {
  color: #1b1f24;
}

.score-game-vs {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
}

.score-game-cls {
  display: block;
  margin: 0;
  min-width: 0;
}

.score-game-cls select {
  min-height: 2.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.3rem;
}

@media (max-width: 24rem) {
  #score-dialog .dialog-body {
    padding-inline: 0.55rem;
  }

  .score-game {
    gap: 0.15rem;
    padding: 0.2rem;
  }

  .score-game .score-win,
  .score-game-cls select {
    font-size: 0.72rem;
    min-height: 2.5rem;
    padding-inline: 0.15rem;
  }
}

/* 观赛按局战绩。固定在视口上,压过卡片、顶栏和缩放条,不压原生对话框。 */
.games-pop {
  position: fixed;
  z-index: 4000;
  margin: 0;
  padding: 0.4rem 0.45rem;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  background: var(--surface-float, var(--surface));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.28);
  pointer-events: none;
}

.games-pop[hidden] {
  display: none !important;
}

.games-pop ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.games-pop-row {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 0.35rem;
  align-items: center;
}

.games-pop .avatar {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.75rem;
}

.games-pop-cls {
  width: 1.35rem;
  height: 1.35rem;
}

.games-pop-cls-empty {
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.games-pop-marks {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 2.4rem;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.games-pop-marks em {
  font-style: normal;
}

.games-pop-marks .is-win {
  color: var(--success-strong);
}

.games-pop-marks .is-loss {
  color: var(--text-muted);
}

.score-forfeit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.score-forfeit .btn {
  min-height: 2.75rem;
}

.score-forfeit .btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.bo-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bo-prefix {
  font-weight: 800;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.bo-input input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* 比分弹窗表单 */
.score-form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: end;
  margin-block: 0.5rem 0.25rem;
}

.score-form label {
  display: grid;
  gap: 0.25rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.score-form input {
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.score-form input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgb(204 58 43 / 0.18);
}

.score-colon {
  font-size: 1.2rem;
  font-weight: 700;
  padding-bottom: 0.45rem;
}

/* ---------- 冠军横幅 ---------- */

.champion-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(120deg, rgb(47 107 227 / 0.1), rgb(47 107 227 / 0.04));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(47 107 227 / 0.35);
  border-radius: var(--radius);
  padding: 0.875rem 1.25rem;
  margin-block-end: 1.25rem;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

[data-theme='dark'] .champion-banner {
  background: linear-gradient(120deg, rgb(94 151 247 / 0.12), rgb(94 151 247 / 0.05));
  border-color: rgb(94 151 247 / 0.35);
}

.champion-banner[hidden] {
  display: none;
}

.champion-banner .medal {
  font-size: var(--text-xl);
}

.layout-body-canvas .champion-banner {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  margin: 0;
  max-width: min(90%, 40rem);
  pointer-events: none;
}

/* 奖牌色 */
.medal-gold {
  background: rgb(217 166 46 / 0.14);
  border-color: rgb(217 166 46 / 0.65);
}
.medal-silver {
  background: rgb(148 152 158 / 0.1);
  border-color: rgb(158 162 168 / 0.6);
}
.medal-bronze {
  background: rgb(189 108 52 / 0.12);
  border-color: rgb(189 108 52 / 0.6);
}

.medal-badge {
  display: grid;
  place-items: center;
  line-height: 1;
  flex-shrink: 0;
}

.medal-badge .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- 画布 ---------- */

.canvas-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.5rem;
}

.canvas-board {
  position: relative;
  min-width: 600px;
  min-height: 400px;
  will-change: transform;
  contain: layout style;
  transition: background-color 0.2s ease;
}

/* 编辑态点阵铺在视口级 scroll 层:跟随相机平移/缩放(JS 同步 size/position),
 * 不受 board 边界截断,实现无限绘制;board 只留内容。
 * 用 id 选择器:后面的 .layout-body-canvas .canvas-scroll { background: transparent }
 * 是简写且与类选择器同特异性,会把这里的 image 重置掉 */
#canvas-scroll.editing {
  background-color: rgb(128 120 96 / 0.05);
  background-image: radial-gradient(circle, var(--dot-ink, rgb(128 120 96 / 0.35)) 1.2px, transparent 1.2px);
}

[data-theme='dark'] #canvas-scroll.editing {
  background-color: rgb(196 184 152 / 0.05);
  --dot-ink: rgb(196 184 152 / 0.28);
}

/* 编辑模式隐藏赛事背景图,只留底色与点阵(背景图为 runtime 内联样式,需 !important) */
body.canvas-editing #bg-layer {
  background-image: none !important;
}

.canvas-cards {
  position: relative;
  width: 100%;
  height: 100%;
}

.canvas-card {
  position: absolute;
  width: 280px;
  height: 196px;
  box-sizing: border-box;
  z-index: 2;
  cursor: default;
}

.canvas-card.search-hit {
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.canvas-card.search-current {
  outline: 3px solid var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
  z-index: 3;
  animation: search-current-pulse 1.2s var(--ease-in-out) infinite;
}

@keyframes search-current-pulse {
  0%, 100% { box-shadow: 0 0 0 6px var(--accent-soft); }
  50% { box-shadow: 0 0 0 9px var(--accent-soft); }
}

.canvas-board.searching:not(.editing) .canvas-card:not(.search-hit) {
  opacity: 0.28;
}

.canvas-board.editing .canvas-card {
  cursor: move;
  box-shadow: 0 4px 18px rgb(56 45 22 / 0.1);
  touch-action: none;
}

.canvas-board.editing .canvas-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.canvas-edge {
  fill: none;
  stroke: var(--border, #99a1b3);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 1;
  pointer-events: none;
}

.canvas-edge.temp {
  stroke: var(--accent);
  stroke-dasharray: 6 4;
  opacity: 0.9;
}

.canvas-edge.winner {
  stroke: #16a34a;
}

.canvas-edge.loser {
  stroke: #dc2626;
}

[data-theme='dark'] .canvas-edge.winner { stroke: #6bc26e; }
[data-theme='dark'] .canvas-edge.loser { stroke: #f26d5f; }

.canvas-edge.temp.winner { stroke: #16a34a; }
.canvas-edge.temp.loser { stroke: #dc2626; }

.canvas-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 卡片层之上、编辑端口之下;勿用 scale/transform——SVG 尺寸=board 全域,
   * 围绕中心放大会让线条相对卡片恒定漂移(曾误写 scale:1.25 致错位) */
  z-index: 1;
  /* 深色双段投影(紧贴核+柔散):花背景图上制造亮度分离,不用白描边也显眼;
   * 对整组一次合成,代价可忽略 */
  filter: drop-shadow(0 1.5px 2.5px rgb(0 0 0 / 0.5)) drop-shadow(0 0 6px rgb(0 0 0 / 0.35));
}

.canvas-temp-line {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 1.5px 2.5px rgb(0 0 0 / 0.5)) drop-shadow(0 0 6px rgb(0 0 0 / 0.35));
}

.marquee-rect {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border: 1px dashed var(--accent);
  background: rgb(47 107 227 / 0.08);
}

.canvas-board.editing.tool-select {
  cursor: crosshair;
}

.canvas-board.tool-delete .canvas-card {
  cursor: pointer;
}

.canvas-board.tool-delete .canvas-card.selected {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* 编辑模式连线端口:inset -1px 把定位基准对齐到边框盒(卡有 1px 边框,默认内缩 1px),
 * 与 canvas-model portOffset 的卡左上角原点(border-box)严格一致 */
.card-ports {
  position: absolute;
  inset: -1px;
  pointer-events: none;
}

.card-ports .port {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
  pointer-events: all;
  cursor: crosshair;
  z-index: 5;
}

.card-ports .port::after {
  content: "";
  position: absolute;
  inline-size: 24px;
  block-size: 24px;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

/* 编辑模式八连接点(白板式):上排四点 = 胜者出 / A 位入,下排四点 = 败者出 / B 位入;
 * 四侧各一对居中,对间距 38(PORT_SPAN),与 canvas-model portOffset 严格一致 */
.card-ports .port-node[data-port='topLeft']     { left: calc(50% - 19px); top: 0;    translate: -50% -50%; }
.card-ports .port-node[data-port='topRight']    { left: calc(50% + 19px); top: 0;    translate: -50% -50%; }
.card-ports .port-node[data-port='bottomLeft']  { left: calc(50% - 19px); bottom: 0; translate: -50% 50%; }
.card-ports .port-node[data-port='bottomRight'] { left: calc(50% + 19px); bottom: 0; translate: -50% 50%; }
.card-ports .port-node[data-port='leftTop']     { left: 0; top: calc(50% - 19px);  translate: -50% -50%; }
.card-ports .port-node[data-port='leftBottom']  { left: 0; top: calc(50% + 19px);  translate: -50% -50%; }
.card-ports .port-node[data-port='rightTop']    { left: 100%; top: calc(50% - 19px);  translate: -50% -50%; }
.card-ports .port-node[data-port='rightBottom'] { left: 100%; top: calc(50% + 19px);  translate: -50% -50%; }

.card-ports .port-node[data-band='upper'] { border-color: #3b7e3e; }
.card-ports .port-node[data-band='lower'] { border-color: #cc3a2b; }

[data-theme='dark'] .card-ports .port-node[data-band='upper'] { border-color: #6bc26e; }
[data-theme='dark'] .card-ports .port-node[data-band='lower'] { border-color: #f26d5f; }

.card-ports .port-node:hover {
  scale: 1.25;
}

/* 连线箭头 marker:与 winner/loser 线色一致 */
.edge-arrow.winner path { fill: #16a34a; }
.edge-arrow.loser path { fill: #dc2626; }
[data-theme='dark'] .edge-arrow.winner path { fill: #6bc26e; }
[data-theme='dark'] .edge-arrow.loser path { fill: #f26d5f; }

/* 弹窗内连线出口切换(仅该位为连线时显示) */
.form-field select.flow-outcome {
  width: auto;
  margin-left: 0.5rem;
}

/* 整页画布 */
.canvas-wrap-full {
  position: relative;
  height: 100%;
  min-height: 0;
}

.canvas-scroll-full {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.canvas-scroll-full.panning {
  cursor: grabbing;
}

.canvas-stage {
  position: relative;
  width: 600px;
  height: 400px;
}

.layout-body-canvas .canvas-scroll,
.layout-body-canvas .canvas-wrap-full {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.canvas-meta {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 20;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--text);
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

.canvas-meta[hidden] {
  display: none;
}

/* 右下角缩放控件 */
.zoom-dock {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.zoom-dock[hidden] {
  display: none;
}

.zoom-btn {
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.zoom-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.zoom-level {
  min-inline-size: 3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---------- 编辑工具栏与样式抽屉 ---------- */

.edit-toolbar {
  width: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.2rem;
  background: var(--surface-float);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  /* 抬到卡片设置抽屉(z 25)之上:抽屉开/收的右向滑行从工具栏底下穿过,读作收进右轨 */
  position: relative;
  z-index: 26;
}

.edit-toolbar[hidden] {
  display: none;
}

/* 列表编辑:画布专属工具不适用,隐藏留撤销/重做/删除选中/外观/保存 */
.edit-toolbar.list-mode .tool-btn[data-tool='select'],
.edit-toolbar.list-mode .tool-btn[data-tool='add'],
.edit-toolbar.list-mode .tool-btn[data-tool='link'],
.edit-toolbar.list-mode #edit-add-pool-btn {
  display: none;
}

.tool-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.tool-group + .tool-group {
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.tool-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.tool-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* 激活工具:柔金底 + 金字(与侧栏 active 同语言) */
.tool-btn.is-active {
  background: var(--accent-soft);
  border-color: rgb(47 107 227 / 0.4);
  color: var(--accent);
}

[data-theme='dark'] .tool-btn.is-active {
  border-color: rgb(94 151 247 / 0.4);
}

.tool-btn.danger {
  color: var(--danger);
}

.tool-btn.danger:hover {
  background: var(--danger-soft);
}

.tool-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.tool-btn:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.style-drawer {
  position: absolute;
  top: 1rem;
  right: calc(3.25rem + 0.75rem);
  z-index: 30;
  width: 15rem;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.style-drawer[hidden] {
  display: none;
}

.style-drawer-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tool-field > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tool-field output {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tool-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.tint-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.tint-row input[type="color"] {
  inline-size: 2.4rem;
  block-size: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

/* 选手资料「海报颜色」色块(同 tint-row 先例,避免裸 input 细线观感) */
#profile-color {
  inline-size: 3rem;
  block-size: 2.35rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.tint-row .btn {
  flex: 1;
}

/* ---------- 卡片设置抽屉(选中单卡滑出,与工具栏同面无接缝) ---------- */
.card-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; /* main 右缘即工具栏左缘 */
  z-index: 25;
  width: min(19rem, 78vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* 无缝三处:顶部不设边框(页头自带底边框,叠线即缝)、顶角不圆(圆角对页头底边是缺口)、
   * 右缘不设边框(与工具栏贴合);轮廓由左/底边框 + 左下圆角勾勒 */
  border: 0 solid var(--border);
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-radius: 0 0 0 var(--radius);
  /* 无 box-shadow:阴影向四周晕染会把面板与工具栏读作两个分离浮层 */
  animation: card-panel-in var(--dur-ui) var(--ease-out) both;
}

/* 收回:向右滑入工具栏背后(工具栏 z 26 抬高一层,开/收两向滑行都从其底下穿过) */
.card-panel.closing {
  animation: card-panel-out var(--dur-ui) ease-in both;
}

@keyframes card-panel-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes card-panel-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .card-panel,
  .card-panel.closing {
    animation: none;
  }
}

/* 面板开着时工具栏左边框(恰在接缝线上)隐去,并补齐与面板相同的背景模糊——
 * 两侧同为半透明浮面,合成底色一致才不会在接缝处读出色差分界 */
body.card-panel-open .edit-toolbar {
  border-left-color: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.card-panel[hidden] {
  display: none;
}

.card-panel-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem 0.45rem;
  border-block-end: 1px solid var(--border);
}

.card-panel-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.card-panel-card {
  font-size: var(--text-xs);
  font-weight: 700;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
}

/* ---------- 卡片设置分区与紧凑控件主题(面板=工具密度;弹窗沿用舒展密度) ---------- */
.cf-section + .cf-section {
  margin-block-start: 0.75rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--border);
}

.cf-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-block-end: 0.55rem;
}

/* 短字段两列:标题/卡组数、胜者/败者名次;面板与弹窗同构 */
.cf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.55rem;
}

.cf-grid .span-2 {
  grid-column: 1 / -1;
}

/* 面板密度:小号标签 + 统一 2rem 紧凑控件(替代弹窗的舒展行高);
 * number/select 不在全局 .form-field input[type=text] 之列,此处统一收编 */
.card-panel .form-field {
  gap: 0.25rem;
}

.card-panel .form-field label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.card-panel .form-field input,
.card-panel .form-field select,
.card-panel .cl-row select,
.card-panel .cl-row input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  inline-size: 100%;
  box-sizing: border-box;
  min-block-size: 2rem;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.card-panel .form-field input:focus,
.card-panel .form-field select:focus,
.card-panel .cl-row select:focus,
.card-panel .cl-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* 连线出口切换:不占满行(与弹窗 .form-field select.flow-outcome 同语义) */
.card-panel .form-field select.flow-outcome {
  inline-size: auto;
  justify-self: start;
}

/* select 原生箭头与紧凑高度不搭:换统一 muted 箭头 */
.card-panel .form-field select,
.card-panel .cl-row select {
  appearance: none;
  padding-inline-end: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a93a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}

/* 面板内职业行(窄列):职业+链接一行,悬停文字独占次行,删除钮跨两行居中。
 * 四个子元素全部显式定位——混合隐式自动放置会把删除钮塞进第一列、中列塌缩 */
.card-panel .cl-row {
  display: grid;
  grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr) auto;
  gap: 0.3rem;
  align-items: center;
}

.card-panel .cl-row .cl-cls { grid-area: 1 / 1; }
.card-panel .cl-row .cl-url { grid-area: 1 / 2; }
.card-panel .cl-row .cl-del { grid-area: 1 / 3 / 3 / 4; }
.card-panel .cl-row .cl-text { grid-area: 2 / 1 / 3 / 3; }

/* 面板开着时缩放控件与样式抽屉整体左移让位
 * (让位量与面板实际宽度一致:窄视口面板收窄到 min(19rem, 78vw),两抽屉同口径跟随) */
body.card-panel-open .zoom-dock { inset-inline-end: calc(min(19rem, 78vw) + 1rem); }
body.card-panel-open .style-drawer { right: calc(min(19rem, 78vw) + 0.5rem); }

/* ---------- 选手下拉 / 赛制规则 ---------- */

.roster-dropdown,
.rules-dropdown {
  position: fixed;
  z-index: 80;
  max-height: 70vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.roster-dropdown {
  width: 18rem;
}

.rules-dropdown {
  width: 22rem;
  max-width: calc(100vw - 2rem);
}

.roster-dropdown-head,
.rules-dropdown-head {
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.roster-dropdown-list {
  display: grid;
}

.roster-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.roster-dropdown-item:last-child {
  border-bottom: 0;
}

.rules-dropdown-body {
  padding: 0.9rem 1rem;
  white-space: pre-wrap;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* 禁卡表下拉(复用 rules-dropdown 基座,加宽+列布局)
 * 2026-09-18 移动端「表里卡多就得左右滑、且没有任何提示」根因修复:
 * 旧 .banlist-cols = columns + max-height + overflow-y:auto——多列容器一旦带确定高度,
 * 装不下的行不再向下排,而是生成「溢出列」摊到容器右侧(列轴即横向,无滚动条无提示)。
 * 实测 390 宽单职业 40 张 → 容器 scrollWidth 706(第二列起点 x=377,几乎全在屏外),
 * 200 张 → 3506(10 列,要滑 3150px);桌面 1280 单职业 200 张 → 2250(只看得见 3 列)。
 * 现去掉容器自身高度上限:列平衡后整块交给父级 .banlist-dropdown 纵向滚动
 * (父级 max-height + overflow-y:auto 已具备),密度不变(桌面 2/3 列),
 * 任何视口都只剩纵向滚动,不再有看不见的横向内容。 */
.banlist-dropdown {
  width: min(620px, calc(100vw - 2rem)); /* 右对齐,加宽即向左扩展,多展示文字 */
  max-height: calc(100dvh - 110px); /* 顶栏下 6px 起,底部留呼吸 */
  overflow-y: auto;
  overscroll-behavior: contain; /* 移动端:滚到底不把滚动传导给身后的画布/页面 */
}
.banlist-block + .banlist-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* 表头:表名左、8 职业 tab 右(默认中立);tab 样式同编辑器 .bl-cls-tab。
 * 吸顶:长表滚动中表名与职业 tab 常驻(否则滚下去只剩卡名,想换职业得一路滚回顶部) */
.banlist-dropdown .rules-dropdown-head { position: sticky; top: 0; z-index: 1; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.banlist-head-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banlist-cls-tabs { display: flex; gap: 2px; flex: none; }
.banlist-cls-tab { display: inline-flex; align-items: center; padding: 2px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; line-height: 0; }
.banlist-cls-tab .icon { width: 18px; height: 18px; object-fit: contain; }
.banlist-cls-tab.active { border-color: var(--accent, #3b82f6); background: rgba(59, 130, 246, 0.12); }
/* 职业 tab 卡数角标:一眼看出哪几个职业有卡(0 张不显,点开另有「X 暂无禁卡」兜底) */
.banlist-tab-n { margin-left: 1px; font-size: 10px; font-style: normal; line-height: 1; opacity: 0.65; font-variant-numeric: tabular-nums; }
.banlist-cls-tab.active .banlist-tab-n { opacity: 1; }
.banlist-cols { columns: 2; column-gap: 14px; padding: 4px 10px; }
.banlist-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; break-inside: avoid; }
.banlist-row .icon { flex: none; }
.banlist-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banlist-mark { flex: none; font-style: normal; font-size: 12px; }
.banlist-mark.ban .icon { width: 14px; height: 14px; opacity: 0.9; }
.banlist-mark.ban { color: var(--danger, #dc3545); display: inline-flex; align-items: center; }
@media (min-width: 1100px) { .banlist-cols { columns: 3; } }
@media (max-width: 640px) {
  .banlist-cols { columns: 1; } /* 窄屏单列竖排:卡名长,分列只会截断;纵向滑是移动端天生动作 */
  /* 表头两行:表名独占一行(不再被 8 个 chip 挤成省略号),chip 行可换行不横溢 */
  .banlist-dropdown .rules-dropdown-head { flex-wrap: wrap; }
  .banlist-cls-tabs { flex: 1 1 100%; flex-wrap: wrap; }
}

/* 画布禁卡违规徽标与弹层 */
.class-slot.ban-violated { border-color: var(--danger, #dc3545); background: rgba(220, 53, 69, 0.12); position: relative; }
.class-slot.ban-violated .icon { width: 16px; height: 16px; }
.ban-count { position: absolute; top: -6px; right: -6px; min-width: 14px; height: 14px; line-height: 14px;
  font-size: 10px; font-style: normal; text-align: center; border-radius: 7px;
  background: var(--danger, #dc3545); color: #fff; padding: 0 3px; }
.ban-popover { position: fixed; z-index: 1200; background: var(--surface, #fff); color: inherit;
  border: 1px solid var(--border, #ccc); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 10px 12px; min-width: 240px; max-width: min(360px, calc(100vw - 16px));
  max-height: 50vh; overflow-y: auto; }
.ban-pop-title { font-weight: 600; margin-bottom: 6px; }
.ban-pop-list + .ban-pop-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border, #ccc); }
.ban-pop-listname { font-size: 12px; opacity: 0.8; margin-bottom: 2px; }
.ban-pop-meta { font-style: normal; font-size: 12px; opacity: 0.85; flex: none; }

/* ---------- 海报页头控制 ---------- */

.header-poster-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.poster-picker {
  position: relative;
}

.poster-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  min-block-size: 2.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.poster-theme-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.poster-theme-dot {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d2d 50%, #1e6bff 50%);
  border: 1px solid rgb(255 255 255 / 0.35);
  flex: 0 0 auto;
}

.poster-theme-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: 30;
  min-inline-size: 12rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-float);
  box-shadow: var(--shadow-sm);
}

.poster-theme-menu[hidden] {
  display: none;
}

.poster-theme-menu [role="option"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}

.poster-theme-menu [role="option"]:hover,
.poster-theme-menu [role="option"][aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.poster-theme-menu .theme-menu__dot {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.poster-resolution {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.poster-resolution .field__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.poster-resolution .field__control {
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem;
  min-block-size: 2.1rem;
}


/* 选手库页头新增表单(仅管理员可见):与搜索框同风格的紧凑行 */
.header-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-add input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  min-block-size: 2.1rem;
  min-inline-size: 8.5rem;
  max-inline-size: 12rem;
}

.header-add input::placeholder {
  color: var(--text-muted);
}

.header-add input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.header-add input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- 选手库(表格无外盒,结构靠表头底色与行分隔) ---------- */

body[data-page="home"] #bg-layer,
body[data-page="players"] #bg-layer,
body[data-page="stats"] #bg-layer,
body[data-page="docs"] #bg-layer,
body[data-page="me"] #bg-layer {
  display: none;
}

.lock-banner {
  margin-block-end: 1rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgb(47 107 227 / 0.35);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.lock-banner[hidden] {
  display: none;
}

.players-table-wrap {
  overflow-x: auto;
}

.players-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.players-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}

.players-table td {
  padding: 0.3rem 0.6rem;
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: nowrap;
}

.players-table tbody tr:hover {
  background: var(--surface-2);
}

.avatar-td {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: 0.8rem;
}

.avatar-btn {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border: 1px dashed transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.avatar-btn:hover,
.avatar-btn:focus-visible {
  border-color: var(--accent);
}

.avatar-btn .avatar-edit {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 0.8rem;
  height: 0.8rem;
  padding: 2px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-sizing: content-box;
}

.player-name-input {
  font: inherit;
  width: 100%;
  min-width: 5.5rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}

.player-name-input:hover:not(:disabled) {
  border-color: var(--border);
}

.player-name-input:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}

.td-empty {
  color: var(--text-muted);
}

.tag-img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  vertical-align: -0.15em;
  margin-right: 0.3rem;
  border-radius: 2px;
}

.color-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.row-del {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--danger);
  opacity: 0.7;
  cursor: pointer;
}

.row-del:hover,
.row-del:focus-visible {
  opacity: 1;
  background: var(--danger-soft);
}

@media (max-width: 48rem) {
  .players-table .col-title,
  .players-table .col-color,
  .players-table .col-joined {
    display: none;
  }
}

@media (max-width: 30rem) {
  .players-table .col-tag {
    display: none;
  }
}

/* ---------- 卡面组件(.db-card):牌组编辑器卡池 × 统计页卡组构成 共用 ----------
   按用户口径:**无边框、无圆角**,卡图铺满整卡宽;横幅 800×160 的左半本身全透明,
   正好露出卡片黑底,费用圆 + 卡名就压在这半边上(不靠渐变伪造)。
   原本长在 deck-builder.css(只服务牌组编辑器卡池),统计页的卡组构成也要用同一张
   脸,于是上提到这里 —— 与 .opt-btn 同一手法,组件只吃 var(--*) 令牌。 */

.db-card {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  text-align: left;
  /* 左侧恒黑:费用/卡名/计数压黑底,横幅图只占右侧且不做任何压暗 */
  background: #000;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.db-card:hover .db-card-img {
  filter: brightness(1.12);
}

.db-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.db-card.is-illegal {
  cursor: not-allowed;
  filter: grayscale(0.85) brightness(0.82);
}

/* 稀有度:左缘一道色条(铜/银/金/虹),不占布局位置 */
.db-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  z-index: 2;
  background: var(--border);
}

.db-card[data-rarity='1']::before { background: var(--rar-1); }
.db-card[data-rarity='2']::before { background: var(--rar-2); }
.db-card[data-rarity='3']::before { background: var(--rar-3); }
.db-card[data-rarity='4']::before {
  background: linear-gradient(180deg, #d4685f, #c8a431, #58a05f, #6390cf);
}

/* 横幅铺满整张卡宽:图本身 800×160 里 **左半(x0-396)是全透明的**,有效卡图只在右半 403px。
 * 所以「图元素占 100% 宽」才等于「可见卡图占卡片右半」,而且高度随之翻倍(卡更耐看)。
 * 透明的左半正好露出卡片黑底 —— 左侧恒黑不需要再靠渐变伪造。 */
.db-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 160;
  height: auto;
  transition: filter var(--dur-fast) var(--ease);
}

/* 信息压在透明的那一半上(即卡片左半的纯黑区) */
.db-card-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.55rem;
  color: var(--on-art);
}

/* 费用圆:纯色深底 + 白字,任何卡图上都稳(不带描边,免得又是一圈白边) */
.db-cost {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-art);
  background: rgb(0 0 0 / 0.62);
  border-radius: 50%;
}

.db-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
}

/* 卡池卡的信息区是"左半 × 整卡高",高度够放两行 ——
 * 字号调大后单行放不下长卡名,这里放开到两行,兼顾字号与可读性(超出才省略)。 */
.db-card-overlay .db-card-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.db-card-count {
  flex: none;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-art);
  background: rgb(0 0 0 / 0.5);
  border-radius: var(--radius-pill);
}

.db-card-count.is-full {
  color: #10240f;
  background: var(--success-strong);
}

/* ---------- 数据统计 ---------- */

/* S5: 桌面左范围 / 右结果;窄屏先范围后结果 */
.stats-layout {
  display: grid;
  /* 大碗小碗要并排,范围栏至少放下两列;再窄就整栏落到结果上面 */
  grid-template-columns: minmax(36rem, 42rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.stats-rail {
  position: sticky;
  inset-block-start: calc(var(--header-height, 3rem) + 0.75rem);
  max-block-size: calc(100dvh - var(--header-height, 3rem) - 1.5rem);
  overflow: auto;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft, var(--shadow));
}

.stats-scope {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-end: 0;
}

.stats-scope-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stats-scope-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.stats-scope-ops {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-export {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-block-start: 0.35rem;
  border-block-start: 1px solid var(--border-soft);
}

.stats-results {
  min-inline-size: 0;
}

.stats-empty-banner {
  margin-block-end: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.stats-results.is-empty .stats-section,
.stats-results.is-empty .champion-banner {
  opacity: 0.55;
}

@media (max-width: 64rem) {
  .stats-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-rail {
    position: static;
    max-block-size: none;
  }
}

/* ---------- 选项组:全站统一的"按钮式多选" ----------
 * 用法:一组 .opt-btn 放在 .opt-group 里,选中态 = aria-pressed="true" = 变色,不用打勾方框。
 * 这套组件原本长在 deck-builder.css(只服务牌组编辑器的筛选面板),统计页的"统计范围"也
 * 多选按钮化之后上提到这里 —— 放在共享样式表里,所有页面才用得到。
 * 两个必须一起写的细节:
 *   1. 选中态要连 :hover 一起覆盖,否则悬停会被 hover 规则抢回"强调色文字";
 *   2. 组件只吃 var(--*) 令牌,不依赖任何页面的局部样式表。 */

.opt-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.opt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.opt-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 选中:实心强调色。悬停规则一并覆盖,否则选中后悬停会被上面的 hover 抢回强调色文字 */
.opt-btn[aria-pressed='true'],
.opt-btn[aria-pressed='true']:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.opt-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.opt-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.opt-btn:disabled:hover {
  color: var(--text);
  border-color: var(--border);
}

/* 费用:圆形数字(同一组件的视觉变体,官网是绿色圆片) */
.opt-btn-round {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 按钮内的附注(禁卡表张数) */
.opt-btn-note {
  font-size: var(--text-xs);
  opacity: 0.75;
}

.opt-btn[aria-pressed='true'] .opt-btn-note {
  opacity: 0.9;
}

/* ---------- 可搜索多选:大碗放小碗 ----------
 * 左大碗是全部选项(搜索 + 筛选 + 已选标记),右小碗只放已选,点取消就消失。
 * 容器窄于 32rem 时上下排,手机不用硬挤两列。卡包另有翻页栏,不用左右滑。
 * 只吃令牌。弹窗里的 input/select 会把宽度拉满,这里把工具行拉回来。 */
.sms {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-inline-size: 0;
  container-type: inline-size;
}

.sms-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.sms-facet,
.sms-search {
  box-sizing: border-box;
  /* 16px:手机上小于这个会在聚焦时把页面放大 */
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.65rem;
  min-block-size: 2.75rem;
}

.sms-facet {
  flex: 1 1 8.5rem;
  min-inline-size: 0;
  max-inline-size: 12rem;
}

.sms-search {
  flex: 2 1 12rem;
  min-inline-size: 0;
}

.sms-search:focus,
.sms-facet:focus {
  outline: none;
  border-color: var(--accent);
}

.sms-search:focus-visible,
.sms-facet:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dialog-body .sms-search,
.dialog-body .sms-facet {
  inline-size: auto;
  width: auto;
  /* .dialog-body input/select 特异性更高,会把 16px / 44px 盖成继承字号和 2.6rem。
   * 手机上输入框小于 16px 会在聚焦时放大整页。 */
  font-size: 1rem;
  min-block-size: 2.75rem;
}

.sms-bowls {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(11rem, 0.9fr);
  gap: 0.55rem;
  align-items: start;
}

@container (max-width: 32rem) {
  .sms-bowls {
    grid-template-columns: minmax(0, 1fr);
  }

  .sms-facet {
    max-inline-size: none;
    flex-basis: 100%;
  }
}

.sms-bowl {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.sms-bowl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: var(--surface-2);
  border-block-end: 1px solid var(--border-soft);
}

.sms-bowl-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.sms-bowl-meta {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.sms-list,
.sms-picked {
  max-block-size: min(42vh, 18rem);
  overflow: auto;
  padding: 0.15rem;
}

.sms-bowl-all.is-paged .sms-list {
  max-block-size: none;
  overflow: visible;
}

.sms-empty,
.sms-picked-empty {
  margin: 0;
  padding: 0.7rem 0.55rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sms-opt,
.sms-pick {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}

.sms-opt + .sms-opt,
.sms-pick + .sms-pick {
  box-shadow: inset 0 1px 0 var(--border-soft);
}

.sms-opt-label {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.sms-opt-note,
.sms-opt-flag,
.sms-pick-x {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
}

.sms-opt-note {
  color: var(--text-muted);
  font-weight: 600;
}

.sms-opt-flag,
.sms-pick-x {
  color: var(--accent-strong);
}

.sms-opt:hover,
.sms-opt:focus-visible,
.sms-pick:hover,
.sms-pick:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.sms-opt.is-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sms-opt[aria-pressed='true'] {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}

.sms-opt + .sms-opt[aria-pressed='true'] {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--border-soft);
}

.sms-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface-2);
}

.sms-page {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0.2rem 0.7rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sms-page:hover,
.sms-page:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.sms-page[aria-current='page'] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.sms-page:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sms-page:disabled:hover {
  color: var(--text);
  border-color: var(--border);
}

.sms-page-status {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding-inline: 0.2rem;
}

.sms-page-gap {
  color: var(--text-muted);
  font-weight: 700;
}

.stats-section {
  margin-block-start: 1.75rem;
}

.stats-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.stats-class-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-inline-size: 30rem;
}

.class-bar {
  display: grid;
  grid-template-columns: 1.65rem 1fr 2.5rem;
  gap: 0.55rem;
  align-items: center;
}

.class-bar .icon {
  inline-size: 1.42rem;
  block-size: 1.42rem;
}

.class-bar-track {
  block-size: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.class-bar-fill {
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  min-inline-size: 2px;
  transition: inline-size 0.3s var(--ease-out);
}

.class-bar.empty .class-bar-fill {
  min-inline-size: 0;
  background: transparent;
}

.class-bar-count {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.stats-table-wrap {
  overflow-x: auto;
}

.stats-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.stats-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.45rem 0.6rem;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}

.stats-table th:not(:first-child) {
  text-align: right;
}

.stats-table td {
  padding: 0.5rem 0.6rem;
  border-block-end: 1px solid var(--border-soft);
}

.stats-table tbody tr:hover {
  background: var(--surface-2);
}

.stats-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-table tr.pending td {
  color: var(--text-muted);
}

.stats-player-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.stats-empty {
  text-align: center;
  color: var(--text-muted);
  padding-block: 1.25rem !important;
}

/* ---------- 卡组构成分析(统计页第三区) ----------
   卡片式(用户口径 2026-09-21):用与牌组编辑器卡池同款的 .db-card 卡面,主区比编辑器
   卡池宽 → 卡片自然放大;一行三个,窄屏逐级降到 2/1 列。数量分布写在卡名下方
   (原来的红黄绿蓝堆叠色条已删 —— 直接写"N张 X%",不再需要图例)。 */

.dc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  align-content: start;
}

/* 空态文字横跨整行,不然会缩在第一个格子里 */
.dc-grid > .stats-empty {
  grid-column: 1 / -1;
}

/* 主区窄到三列放不下卡名 + 分布时降列,别把卡压成一条缝 */
@media (max-width: 1000px) {
  .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 卡面在上、分布带在下:编辑器卡是单行 flex(图 + 计数),这里改成竖叠 */
.dc-card {
  display: block;
  width: 100%;
}

/* 卡名已统一白字,稀有度只靠左缘色条表达,所以比编辑器卡池(3px)加宽一倍。
 * 信息层左内距 0.55rem(8.8px),6px 不会压到费用圆与卡名 */
.dc-card::before {
  width: 6px;
}

.dc-face {
  position: relative;
  display: block;
}

/* 分布带与卡面同为纯黑,数字沿用 .dist-pt 的四色(红3/黄2/绿1/蓝0) */
.dc-dist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.7rem;
  padding: 0.32rem 0.55rem 0.4rem;
  background: #000;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* 被选中的卡(按它筛上方「本届卡组」):整卡描边,与页签同一套选中反馈 */
.dc-card.is-card-filter {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 页头控件行:标题在 h2,职业分段+回填按钮跟随其右侧,紧凑无盒 */
.deck-comp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-block: 0.35rem 0.5rem;
}

.deck-comp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0;
  border: none;
}

.deck-comp-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.deck-comp-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.deck-comp-tab[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.deck-comp-tab:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--border);
  color: var(--text-muted);
}

.deck-comp-tab .num {
  margin-inline-start: 0.25rem;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.deck-comp-foot {
  margin-block-start: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 卡名稀有度着色:铜/银/金用变量;彩=紫-红-橙-黄-绿-蓝 六色横向渐变文字;统一加粗突出颜色 */
.deck-name-r1, .deck-name-r2, .deck-name-r3, .deck-name-r4 { font-weight: 600; }

.deck-name-r1 { color: var(--rar-1); }
.deck-name-r2 { color: var(--rar-2); }
.deck-name-r3 { color: var(--rar-3); }

.deck-name-r4 {
  background: linear-gradient(90deg, #8b5cf6, #ff4b4b, #ff9d45, #ffd94a, #4cc26e, #3d8bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 卡组可视化(独立一节,在构成卡面之上):点卡片筛、点筹码开完整卡组弹窗 ---------- */

/* 只补布局:字号/字重/下边距交给 .stats-section-title,与其它区标题同款 */
.deck-list-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.deck-list-hint {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.deck-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 18rem;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.deck-chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.deck-chip-icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

.deck-chip-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.deck-chip-player {
  flex: none;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* 数量分布文字着色:非 0 张用对应色(红3/黄2/绿1/蓝0),0 张保持弱化灰 */
.dist-pt { font-weight: 600; }
.dist-pt.p3 { color: var(--dist-3); }
.dist-pt.p2 { color: var(--dist-2); }
.dist-pt.p1 { color: var(--dist-1); }
.dist-pt.p0 { color: var(--dist-0); }

.stats-player-row {
  cursor: pointer;
}

.stats-player-row.selected {
  background: var(--accent-soft);
}

.stats-player-row.selected td {
  border-block-end-color: transparent;
}

.stats-podium {
  margin-block-end: 1.25rem;
}


/* ---------- 比赛页:列表视图 ----------
 * 扁平紧凑:无卡片边框/底色,行间发丝线分隔;全部信息(场次/对阵/状态/卡组/比分)
 * 直出无折叠;赛事背景图在列表视图下隐藏,只留纯色底 */

/* 画布与缩放控件在列表视图恒隐藏;设置抽屉/样式抽屉只在非编辑态隐藏(列表编辑要用) */
body[data-view='list'] .canvas-wrap-full,
body[data-view='list'] .zoom-dock,
body[data-view='list']:not(.list-editing) .style-drawer,
body[data-view='list']:not(.list-editing) .card-panel {
  display: none;
}

/* 列表编辑:main 是滚动容器,绝对定位面板会随内容滚走 → 改视口固定,
 * 右侧让位工具栏(3.25rem),顶起于页头之下(--header-height 由 common.js 实测设置) */
body.list-editing .card-panel {
  position: fixed;
  top: var(--header-height, 3rem);
  bottom: 0;
  right: 3.25rem;
}

body.list-editing .style-drawer {
  position: fixed;
  top: calc(var(--header-height, 3rem) + 1rem);
  right: calc(3.25rem + 0.75rem);
}

/* 玻璃是不透明度/模糊是画布概念,列表编辑只留染色 */
body.list-editing .tool-field--glass {
  display: none;
}

/* 列表编辑选中行 */
body.list-editing .list-row.selected {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--accent);
}

body[data-view='list'] #bg-layer {
  display: none;
}

body[data-view='canvas'] .list-view {
  display: none;
}

.list-view {
  max-inline-size: 50rem;
  margin-inline: auto;
  padding: 0.5rem 1rem 2rem;
  animation: rise var(--dur-slow) var(--ease-out);
}

.list-group {
  margin-block-end: 1.25rem;
}

/* 「只看我的场次」过滤后本届无本人场次时的空态 */
.list-empty {
  margin: 1.5rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.list-group h2 {
  margin: 0 0 0.15rem;
  padding-inline: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.list-row {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) minmax(10rem, 1.6fr) auto auto;
  grid-template-areas: "format title vs status decks";
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
}

body.list-editing .list-row {
  grid-template-columns: 1.6rem auto minmax(6rem, 1fr) minmax(9rem, 1.6fr) auto auto;
  grid-template-areas: "handle format title vs status decks";
}

.list-row + .list-row {
  border-block-start: 1px solid var(--border);
}

.list-row:hover {
  background: var(--surface-2);
}

.list-format {
  grid-area: format;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.list-title {
  grid-area: title;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-vs {
  grid-area: vs;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.vs-name.lost {
  opacity: 0.6;
}

.vs-name.won {
  font-weight: 800;
}

.vs-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}

.list-row.played .vs-score {
  color: var(--text-muted);
}

.vs-vs {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.list-status {
  grid-area: status;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.list-status.is-live {
  color: var(--accent);
  font-weight: 700;
}

.list-status.is-invalid {
  color: var(--danger-strong);
  font-weight: 700;
}

.list-row .deck-class-row {
  grid-area: decks;
  justify-self: end;
}

.list-row .deck-class-row:empty {
  display: none;
}

.list-class {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: var(--radius-sm);
}

.list-class .icon {
  inline-size: 1.42rem;
  block-size: 1.42rem;
}

/* 染色(与画布 card.color 同源):行首色条 + 标题文字着色 */
.list-row[data-tint] {
  position: relative;
}

.list-row[data-tint]::before {
  content: '';
  position: absolute;
  left: 0;
  block-size: calc(100% - 0.5rem);
  inline-size: 3px;
  border-radius: 2px;
  background: var(--list-tint, var(--accent));
}

body.list-editing .list-row[data-tint]::before {
  left: 1.7rem; /* 让位手柄列 */
}

.list-row[data-tint] .list-title {
  color: var(--list-tint, var(--accent));
}

/* 编辑态行/手柄基础(list-editor.js 置 body.list-editing) */
body.list-editing .list-row {
  cursor: grab;
}

/* 拖拽交互防干扰:禁划选、禁 img 原生拖拽(否则按手柄图标拖动触发浏览器
 * 原生图片拖拽,pointercancel 掐断指针流,拖拽完全失效) */
body.list-editing #list-body {
  user-select: none;
  -webkit-user-select: none;
}

body.list-editing #list-body img {
  -webkit-user-drag: none;
}

body.list-editing .list-group h2 {
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.list-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.55;
  touch-action: none; /* 触屏拖拽主通道:手柄不与页面滚动打架 */
}

.list-handle .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

body.list-editing .list-row:hover .list-handle,
body.list-editing .list-group h2:hover .list-handle {
  opacity: 1;
}

/* 窄屏:首行元信息(赛制+标题+状态),次行对阵纵跨 + 卡组靠右 */
@media (max-width: 40rem) {
  .list-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "format title status"
      "vs vs decks";
    row-gap: 0.2rem;
  }

  body.list-editing .list-row {
    grid-template-columns: 1.6rem auto 1fr auto;
    grid-template-areas:
      "handle format title status"
      "handle vs vs decks";
  }

  .list-row .deck-class-row {
    justify-self: start;
  }

  .list-status {
    justify-self: end;
  }
}

/* ---------- 列表编辑:拖拽排序(FLIP 让位 + 幽灵跟随) ---------- */

.list-row.dragging-origin,
.list-group.dragging-origin {
  display: none; /* 原位让空,由落点间隙条占位 */
}

.list-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  scale: 1.02;
  opacity: 0.96;
  background: var(--surface-float);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  will-change: translate;
}

.list-ghost .list-row {
  background: transparent;
}

.list-ghost-chip {
  padding: 0.45rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

.list-drop-gap {
  margin-block: 0.15rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.list-drop-gap.row {
  block-size: 2.3rem;
}

.list-drop-gap.block {
  block-size: 2rem;
}

/* 让位/归位的位移过渡:拖拽中与落定 settle 两态都开着 */
body.list-dragging .list-row,
body.list-dragging .list-group,
body.list-settling .list-row,
body.list-settling .list-group {
  transition: transform 170ms var(--ease-out);
}

/* 单场跨阶段:目标组头高亮示意可入 */
body.list-dragging .list-group.drop-target > h2 {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  body.list-dragging .list-row,
  body.list-dragging .list-group,
  body.list-settling .list-row,
  body.list-settling .list-group {
    transition: none;
  }

  .list-ghost {
    scale: none;
  }
}

/* ---------- 选手中心 ---------- */

.me-tabs {
  display: flex;
  gap: 0.2rem;
  border-block-end: 1px solid var(--border);
  margin-block-end: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.me-tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.6rem 0.95rem;
  cursor: pointer;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}

.me-tab:hover {
  color: var(--text);
}

.me-tab.is-active {
  color: var(--accent);
  border-block-end-color: var(--accent);
}

.me-panel[hidden] {
  display: none;
}

.me-panel:not([hidden]) {
  animation: rise var(--dur-ui) var(--ease-out);
}

/* S4:交卡组三步指引 */
.me-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.me-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.me-steps__n {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 16%, transparent));
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.me-panel-lead {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  max-inline-size: 36rem;
}


/* 我的对局工具条:扁平行,底部分隔线(无卡片盒) */
.my-decks-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-block-end: 1.25rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border);
}

.my-decks-toolbar select {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  min-block-size: 2rem;
  cursor: pointer;
}

.my-decks-window-chip {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.18rem 0.7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.md-chip {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.12rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* 我的战绩:顶部总览条 + 每届一行 */
.rec-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-block-end: 1rem;
  margin-block-end: 0.25rem;
  border-block-end: 1px solid var(--border);
}

.rec-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rec-stat-key {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.rec-stat-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.rec-line {
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.md-chip-open,
.my-decks-window-chip.md-chip-open {
  color: var(--success-strong);
  background: var(--success-soft);
}

.md-chip-wait,
.my-decks-window-chip.md-chip-wait {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
}

.md-chip-locked {
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
}

.my-decks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 场次条目:分组列表行,细分隔线(卡片视图仅限比赛页) */
.md-card {
  padding: 0.9rem 0;
  border-block-start: 1px solid var(--border-soft);
}

.my-decks-list > .md-card:first-child,
.my-decks-list > .md-group-title:first-child {
  border-block-start: 0;
}

.md-card-started {
  opacity: 0.68;
}

.md-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-block-end: 0.6rem;
  font-size: 0.92rem;
}

.md-card-label {
  font-weight: 700;
}

.md-card-opp {
  color: var(--text-muted);
}

.md-deck-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.3rem 0;
}

.md-deck-row.readonly {
  font-size: 0.9rem;
}

.md-deck-row.readonly .md-deck-name {
  min-inline-size: 8em;
}

.md-deck-row.readonly a {
  color: var(--accent);
  text-decoration: none;
}

.md-deck-row.readonly a:hover {
  text-decoration: underline;
}

.md-form .md-cls,
.md-form .md-text,
.md-form .md-url {
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.38rem 0.7rem;
  min-block-size: 2rem;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.md-form .md-cls:focus,
.md-form .md-text:focus,
.md-form .md-url:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.md-form .md-cls {
  inline-size: 6.5em;
  cursor: pointer;
}

.md-form .md-text {
  flex: 1 1 9em;
}

.md-form .md-url {
  flex: 2 1 15em;
}

.md-form-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 0.6rem;
}

/* 分组标题(已开始的场次/开放报名等):eyebrow 式小标题+顶部分隔 */
.md-group-title {
  margin-block: 0.9rem 0;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.md-inherited {
  font-style: italic;
  color: var(--text-muted);
}

.mt-card .mt-rules,
.mt-card .mt-roster {
  margin-block: 0.25rem;
}

/* ---------- 个人中心 ---------- */

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-tagimg-preview {
  max-height: 48px;
  max-width: 160px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.profile-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.profile-range-row input[type='range'] {
  flex: 1;
  max-width: 220px;
  accent-color: var(--accent);
}

/* ---------- 主页:总览工作台 ---------- */

.home-main {
  padding: 1.25rem 1.5rem 2.5rem;
  max-inline-size: 72rem;
  margin-inline: auto;
}

/* —— 通知横幅:多条叠放同位淡换,级别配色(普通=蓝 / 重要=琥珀) —— */
.notice-banner {
  margin-block-end: 1.1rem;
}

.notice-track {
  display: grid;
}

.notice-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.notice-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.notice-slide.level-important {
  border-inline-start-color: var(--warning);
  background: var(--warning-soft);
}

.notice-slide.level-important .notice-action {
  color: var(--warning);
}

.notice-slide.notice-has-qr {
  cursor: pointer;
}

.notice-text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.notice-action {
  flex: none;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice-action:hover,
.notice-action:focus-visible {
  opacity: 0.8;
}

.notice-close {
  flex: none;
  margin-inline-start: auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.notice-close:hover,
.notice-close:focus-visible {
  color: var(--text);
  background: var(--border-soft);
}

.notice-dots {
  display: flex;
  gap: 0.4rem;
  margin-block-start: 0.45rem;
  padding-inline-start: 0.15rem;
}

.notice-dot {
  inline-size: 8px;
  block-size: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
}

.notice-dot.is-active {
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .notice-slide {
    transition: none;
  }
}

.ov-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border);
  margin-block-end: 1.25rem;
}

.ov-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.ov-title {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  min-inline-size: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-head-meta {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.ov-head-actions {
  display: flex;
  gap: 0.5rem;
}

/* 不对称网格:当前对阵居左跨两行,战报/接下来叠右;无卡片盒,
 * 分区靠竖/横细分隔线(工具规格:卡片视图仅限比赛页) */
.ov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.9rem 1.5rem;
}

.ov-card {
  min-inline-size: 0;
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--ov-i, 0) * 70ms);
}

/* 右列:与左列竖线分隔;两块之间横向分隔 */
.ov-grid > .ov-card:nth-child(2),
.ov-grid > .ov-card:nth-child(3) {
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--border);
}

.ov-grid > .ov-card:nth-child(3) {
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--border);
}

.ov-card h2 {
  margin: 0 0 0.75rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.ov-now {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

/* 当前对阵:双方对峙布局 */
.ov-duel {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem;
}

.ov-side {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  min-inline-size: 0;
}

.ov-side .avatar {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  font-size: 1.6rem;
}

.ov-side-name {
  font-size: 1.2rem;
  font-weight: 800;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-side.is-winner .ov-side-name {
  color: var(--accent);
}

.ov-mid {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
}

.ov-score {
  font-size: 2.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.ov-vs {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.2em;
}

.ov-duel-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
}

/* 战报/接下来:紧凑行 */
.ov-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-block-end: 1px solid var(--border-soft);
  font-size: 0.88rem;
}

.ov-item:last-child {
  border-block-end: 0;
}

.ov-item-label {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text-muted);
  min-inline-size: 3.5em;
}

.ov-item-players {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-item-players .win {
  font-weight: 800;
  color: var(--accent);
}

.ov-item-score {
  flex-shrink: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ov-empty {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding-block: 0.5rem;
}

/* 总览空态(无赛事数据) */
.ov-blank {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
  padding-block: 3rem;
  color: var(--text-muted);
}

.ov-blank .btn {
  margin-block-start: 0.5rem;
}

/* 比赛总览:全部届的行式列表(无卡片,分隔线行) */
.ov-tournaments {
  margin-block-start: 1.75rem;
}

.ov-tournaments h2 {
  margin: 0 0 0.35rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.ov-t-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  text-align: start;
  background: none;
  border: 0;
  border-block-start: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 0.55rem 0.5rem;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.ov-t-row:first-of-type {
  border-block-start: 0;
}

.ov-t-row:hover {
  background: var(--accent-soft);
}

/* 当前届:左侧金色指示条(与侧栏 active 同语言),不再可点 */
.ov-t-row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22%;
  bottom: 22%;
  inline-size: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--dur-slow) var(--ease-out);
}

.ov-t-row.is-current {
  cursor: default;
}

.ov-t-row.is-current::before {
  transform: scaleY(1);
}

.ov-t-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-t-row.is-current .ov-t-name {
  color: var(--accent);
}

.ov-t-meta {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .ov-t-meta {
    display: none;
  }
}

/* 比赛总览系列分组小节:系列名小标题+届数计数;仅主页使用 */
.ov-t-group {
  margin-block-start: 0.9rem;
}

.ov-t-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.6rem 0 0.1rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text);
}

.ov-t-group-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 主页系列编辑模式(series-editor.js,2026-09-09) ---------- */

.ov-t-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ov-t-head h2 {
  margin: 0;
}

.ov-t-head .btn {
  margin-left: auto;
}

body.series-editing #ov-tournaments .ov-t-row {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

body.series-editing #ov-tournaments img {
  -webkit-user-drag: none;
}

body.series-editing #ov-tournaments .ov-t-row:not(.is-movable) {
  cursor: default;
  opacity: 0.72;
}

body.series-editing #ov-tournaments .ov-t-row.is-movable:hover {
  background: var(--accent-soft);
}

.ov-t-row .status-badge {
  flex-shrink: 0;
}

.ov-t-name-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: inherit;
  cursor: text;
}

.ov-t-name-btn:hover {
  text-decoration: underline dotted;
}

.ov-t-name-label {
  font-weight: 800;
}

.ov-t-name-input {
  inline-size: min(16rem, 60%);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.ov-t-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  inline-size: 100%;
  margin-block-start: 0.8rem;
  padding: 0.5rem;
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.ov-t-add:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* 组尾「+ 新建比赛」chip:比新建系列矮一档,行级虚线 */
.ov-t-add-t {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  inline-size: 100%;
  margin-block-start: 0.25rem;
  padding: 0.3rem 0.5rem;
  border: 1px dashed var(--border-soft);
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.ov-t-add-t:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* 行删除钮:指针设备 hover 行才现身,触屏恒显(无 hover) */
.ov-t-row-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.15rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ov-t-row-del .icon {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

.ov-t-row-del:hover {
  background: var(--accent-soft);
  color: var(--danger);
}

@media (hover: hover) {
  body.series-editing .ov-t-row .ov-t-row-del {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  body.series-editing .ov-t-row:hover .ov-t-row-del,
  body.series-editing .ov-t-row-del:focus-visible {
    opacity: 1;
  }
}

.ov-t-group-ungrouped .ov-t-group-title {
  color: var(--text-muted);
}

/* 拖拽:复用 list-* 契约类名,扩展 ov-t 行/组为目标(与 schedule 页规则同语言) */
.ov-t-row.dragging-origin,
.ov-t-group.dragging-origin {
  display: none;
}

.list-ghost .ov-t-row {
  background: transparent; /* 幽灵容器自带 surface-float 底与投影(镜像 .list-ghost .list-row 契约) */
}

body.list-dragging .ov-t-row,
body.list-dragging .ov-t-group,
body.list-settling .ov-t-row,
body.list-settling .ov-t-group {
  transition: transform 170ms var(--ease-out);
}

body.list-dragging .ov-t-group.drop-target > h3 {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  body.list-dragging .ov-t-row,
  body.list-dragging .ov-t-group,
  body.list-settling .ov-t-row,
  body.list-settling .ov-t-group {
    transition: none;
  }
}

/* 快捷入口:内联文字链接,无卡片盒 */
.ov-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--border);
}

.ov-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: color var(--dur-ui) var(--ease-out);
}

.ov-links a:hover {
  color: var(--accent);
}

.ov-links .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- 空态契约(S2):发生了什么 + 可选说明 + 一个主按钮 ---------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--text-muted);
}

.empty-state__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.empty-state__desc {
  margin: 0;
  max-inline-size: 22rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.empty-state .btn {
  margin-block-start: 0.5rem;
}

/* 主页快捷入口与侧栏五项重复,S2 默认隐藏减噪(保留类名以免旧缓存脚本报错) */
.ov-links {
  display: none;
}


@media (max-width: 48rem) {
  .ov-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ov-now {
    grid-row: auto;
  }

  /* 窄屏单列:竖线改横向分隔 */
  .ov-grid > .ov-card:nth-child(2),
  .ov-grid > .ov-card:nth-child(3) {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--border);
  }

  .ov-grid > .ov-card:nth-child(2) {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .ov-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- 跨文档 View Transitions ---------- */

::view-transition-old(root) {
  animation: vt-leave 200ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: vt-enter 280ms var(--ease-out) both;
}

@keyframes vt-leave {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---------- 动效无障碍降级 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border: #6b6350;
    --text-muted: #4c4738;
  }
}

/* ---------- 移动端:顶栏压缩(控件多页挤爆换行的修复) ---------- */

@media (max-width: 48rem) {
  #app-header .header-inner {
    padding-block: 0.3rem;
    gap: 0.35rem;
  }

  /* 搜索框弹性占满剩余宽,不再被 min-width 顶出去 */
  .header-search {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .header-search input {
    min-inline-size: 0;
    inline-size: 100%;
  }

  .header-select {
    max-inline-size: 8.5rem;
  }

  /* 低频入口窄屏隐藏(桌面不变):赛程页的规则/名单弹层 */
  #header-rules-btn,
  #header-roster-btn {
    display: none;
  }

  #app-header .btn {
    min-block-size: 2.35rem;
    padding-inline: 0.5rem;
  }

  /* 选手库新增表单同排弹性 */
  .header-add {
    flex: 1 1 100%;
  }

  .header-add input {
    flex: 1 1 auto;
    min-inline-size: 0;
    max-inline-size: none;
  }

  /* 海报页头:分辨率文字标签隐藏,只留选择器 */
  .poster-resolution .field__label {
    display: none;
  }
}

/* ---------- 移动端:侧栏变底部 tab 栏 ---------- */

@media (max-width: 48rem) {
  body,
  body.side-expanded {
    --sidebar-w: 0rem;
    --tabbar-h: 3.6rem;
  }

  .app-sidebar {
    position: fixed;
    inset-block: auto 0;
    inset-inline: 0;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: stretch;
    padding: 0.2rem 0.35rem calc(0.2rem + env(safe-area-inset-bottom, 0px));
    box-shadow: inset 0 1px 0 var(--border);
    /* 覆盖桌面 overflow:hidden:底栏本体的裁切会剪掉「更多」向上弹出的浮层
     * (浮层整块在栏外,曾致点更多无任何视觉反馈);导航自适应收缩后无需裁切,
     * 溢出由 e2e(scrollWidth ≤ 视口)兜底拦截 */
    overflow: visible;
  }

  #side-toggle {
    display: none;
  }

  .side-nav {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: auto;
  }

  .side-link {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    width: auto;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0.25rem 0.2rem;
  }

  /* 底栏形态:指示条移到顶部 */
  /* 底栏形态:指示条移到项顶部,横条,避开图标区 */
  .side-link::before {
    inset-inline: 20%;
    inset-block-start: 0;
    inset-block-end: auto;
    top: 0;
    bottom: auto;
    inline-size: auto;
    block-size: 3px;
    border-radius: 0 0 3px 3px;
  }

  .side-link .side-label {
    display: block;
    font-size: 0.625rem;
    line-height: 1.15;
    text-overflow: ellipsis;
  }

  /* 窄屏:JS 把账号/主题搬进更多;底栏功能区只留「更多」,不溢出 */
  .side-actions {
    position: relative;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin-block-start: 0;
    margin-inline-start: auto;
    padding-inline-start: 0.35rem;
    border-inline-start: 1px solid var(--border);
  }

  .side-more-menu {
    display: none;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inset-block-end: calc(100% + 0.5rem);
    z-index: 40;
    min-inline-size: 8.5rem;
  }

  #side-more-btn {
    display: flex;
  }

  body.side-more-open .side-more-menu {
    display: flex;
  }

  body.side-more-open .side-more-menu .side-action,
  body.side-more-open .side-more-menu .side-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    width: auto;
    min-inline-size: 7rem;
    min-block-size: 2.75rem;
    padding: 0.25rem 0.6rem;
  }

  body.side-more-open .side-more-menu .side-action .side-label,
  body.side-more-open .side-more-menu .side-link .side-label {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.15;
  }

  .side-action {
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
  }

  .side-action .side-label {
    display: block;
    font-size: 0.625rem;
    line-height: 1.15;
  }

  .layout-body:not(.layout-body-canvas) > main {
    height: calc(100vh - var(--header-height, 3rem) - var(--tabbar-h, 3.6rem) - env(safe-area-inset-bottom, 0px));
  }

  .layout-body-canvas {
    height: calc(100vh - var(--header-height, 3rem) - var(--tabbar-h, 3.6rem) - env(safe-area-inset-bottom, 0px));
  }

  .toast-region {
    inset-block-end: calc(var(--tabbar-h, 3.6rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .zoom-btn {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  .players-table td {
    padding-block: 0.5rem;
  }

  .canvas-scroll {
    touch-action: none;
  }

  /* ---------- 触控目标(对齐移动端顶栏 .btn 2.35rem 先例,核心行内操作 44px) ---------- */

  .btn-sm {
    min-block-size: 2.35rem;
  }

  .header-select {
    min-block-size: 2.35rem;
  }

  .header-search input,
  .header-add input {
    min-block-size: 2.35rem;
  }

  .row-del {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  .avatar-btn {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
  }

  .list-class {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0.35rem;
    justify-content: center;
  }

  .deck-comp-tab {
    min-block-size: 2.35rem;
  }

  #profile-color {
    block-size: 2.75rem;
  }
}

/* ---------- OBS 比分舞台(16:9 全屏,黑底大字,独立视觉不随主题) ---------- */

.score-stage {
  min-block-size: 100vh;
  margin: 0;
  padding: 4vh 6vw;
  box-sizing: border-box;
  background: #12161c;
  color: #e8ecf0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 3vh;
}

.ss-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ss-head h1 {
  margin: 0;
  font-size: 3.2vh;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #e8ecf0;
}

.ss-state {
  display: inline-flex;
  align-items: center;
  font-size: 1.6vh;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.08em;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: #c44b3f;
}
.ss-state:empty { display: none; }
.ss-state.is-ended {
  background: #3a424c;
  color: #c5ccd4;
}

.ss-now {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4vw;
}

.ss-player {
  text-align: center;
}

.ss-name {
  font-size: 9vh;
  font-weight: 900;
  line-height: 1.15;
  word-break: break-all;
}

.ss-mid {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.ss-score {
  font-size: 11vh;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #6ba0ff;
  line-height: 1;
}

.ss-bo {
  font-size: 2.4vh;
  font-weight: 700;
  color: #9ba1a9;
  letter-spacing: 0.15em;
}

.ss-next {
  border-top: 1px solid rgba(110, 160, 255, 0.22);
  padding-top: 2vh;
}

.ss-next h2 {
  margin: 0 0 1vh;
  font-size: 2vh;
  font-weight: 700;
  color: #9ba1a9;
  letter-spacing: 0.04em;
}

.ss-next ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 3vw;
}

.ss-next li {
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
}

.ss-next-label {
  font-size: 1.8vh;
  color: #6ba0ff;
  font-weight: 700;
}

.ss-next-vs {
  font-size: 2.4vh;
  font-weight: 700;
}

.ss-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  font-size: 3.2vh;
  font-weight: 700;
  color: #9ba1a9;
  text-align: center;
}
.ss-empty-sub {
  font-size: 2vh;
  font-weight: 500;
  color: #6b7280;
  max-inline-size: 28rem;
}

/* ---------- 登录页(居中窄栏,不引 common.js) ---------- */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: 1.5rem 1rem;
}

.login-shell {
  inline-size: 100%;
  max-inline-size: 24rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem 1.5rem;
}

.login-title {
  margin: 0 0 1.25rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
}

/* tab:下划线式,同 .me-tab 写法。
 * 容器名用 login-mode-tabs:历史上与旧登录弹窗的 .login-tabs 撞名而改名,
 * 旧弹窗样式已随口令体系一并拆除(Task 9),容器名保留不动。 */
.login-mode-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  border-block-end: 1px solid var(--border);
  margin-block-end: 1.25rem;
}

.login-tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 0.65rem 0.55rem;
  cursor: pointer;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}

.login-tab:hover {
  color: var(--text);
}

.login-tab.is-active {
  color: var(--accent);
  border-block-end-color: var(--accent);
}

/* S5: 账号密码 Tab 视觉降权 — 短信为主路径 */
.login-tab--secondary {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-muted);
  opacity: 0.78;
  padding: 0.55rem 0.7rem;
  margin-inline-start: auto;
}

.login-tab--secondary:hover {
  opacity: 1;
  color: var(--text-muted);
}

.login-tab--secondary.is-active {
  color: var(--text);
  border-block-end-color: var(--border);
  opacity: 1;
}

.login-lead {
  margin: -0.35rem 0 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* 官方 QQ 登录图自带蓝底和「QQ登录」文字，这里只负责摆正，不改图。 */
.login-qq {
  display: flex;
  justify-content: center;
  margin: 0 0 1.1rem;
}

.qq-login-btn {
  display: inline-flex;
  line-height: 0;
  border-radius: 2px;
}

.qq-login-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.qq-login-btn img {
  display: block;
  width: 170px;
  height: 32px;
}

.login-panel {
  display: grid;
  gap: 1rem;
}

.login-panel[hidden] {
  display: none;
}

/* 登录页字段组织为 label.form-field > span.form-label(弹窗内是 .form-field label) */
.login-panel .form-label {
  font-weight: 600;
  font-size: 0.9rem;
}

/* tel 类型不在既有 .form-field input 选择器内,登录面板统一补齐 */
.login-panel .form-field input {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  inline-size: 100%;
}

.login-panel .form-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.login-code-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.login-code-row input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.login-code-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.login-submit {
  inline-size: 100%;
}

.login-status {
  margin: 0.75rem 0 0;
  min-block-size: 1.4rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.login-status.is-danger {
  color: var(--danger);
}

.login-subhead {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
}

.login-alt-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

.login-text-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- 选手中心:升级与绑定 / 发码中心(Task 10)---------- */

.me-subsection {
  margin-block-end: 1.75rem;
}

.subsection-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.redeem-form,
.phone-bind,
.codes-gen {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.redeem-form .form-field,
.phone-bind .form-field,
.codes-gen .form-field {
  flex: 0 1 auto;
  min-inline-size: 12rem;
}

.redeem-form .hint {
  align-self: center;
}

/* tel 类型不在既有 .form-field input 选择器内,me 页字段统一补齐(同登录页做法) */
.me-panel .form-field input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  inline-size: 100%;
  box-sizing: border-box;
}

.me-panel .form-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.bind-code-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.bind-code-row input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.bind-code-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#redeem-status.is-danger,
#bind-status.is-danger {
  color: var(--danger-strong);
  font-weight: 600;
}

.bind-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-block-end: 0.75rem;
}

.bind-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bind-card-label {
  font-weight: 700;
}

.bind-card-value {
  font-size: 0.92rem;
  opacity: 0.85;
}

.bind-card-actions,
.bind-proof-vias {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bind-form {
  margin-block-start: 0.75rem;
  max-inline-size: 28rem;
}

.bind-proof-vias {
  margin-block-end: 0.75rem;
}

.codes-gen-out {
  align-self: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  min-block-size: 1.2rem;
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}

.data-table td {
  padding: 0.3rem 0.6rem;
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.code-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

/* ---------- 超管后台(admin.html 独立轻量页,不引 common.js)---------- */

/* 独立页头:无侧栏,复用主站顶栏的浮层质感;标题只在页头出现一次 */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.admin-header-inner {
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: 0.75rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: auto;
}

/* 无侧栏:清掉 .layout-body 的侧栏让位 */
.admin-body .layout-body {
  margin-left: 0;
}

/* S7:后台空态走全站 empty-state 契约;主区可读性 */
#admin-empty.empty-state {
  margin-block: 4rem auto;
  max-inline-size: 28rem;
}

.admin-lead {
  margin: 0 0 0.85rem;
  max-inline-size: 40rem;
}

.admin-body #main-content {
  max-width: 84rem;
  margin-inline: auto;
  padding: 1rem 0.75rem 2.5rem;
}

.admin-body .me-tabs {
  margin-block-end: 1rem;
  flex-wrap: wrap;
}

.admin-body .data-table th,
.admin-body .data-table td,
.admin-body .players-table th,
.admin-body .players-table td {
  font-size: 0.86rem;
}

.admin-body .me-subsection {
  margin-block-end: 1.5rem;
}

.admin-body .hint {
  line-height: 1.55;
  max-inline-size: 48rem;
}

/* 工具条:扁平行 + 底部分隔线(与 my-decks-toolbar 同气质) */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-block-end: 0.9rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border);
}

.admin-toolbar input[type='search'] {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  min-inline-size: 12rem;
}

.admin-toolbar input[type='search']:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* 状态行:操作回执 / 错误提示(与表格之间的扁平行) */
.admin-status {
  min-block-size: 1.2rem;
  margin-block: 0.4rem 0.75rem;
}

.admin-status.is-danger {
  color: var(--danger-strong);
  font-weight: 600;
}

/* 详情列允许换行(审计 detail / 窗口概要较长,其余列保持 nowrap) */
.admin-detail-cell {
  white-space: normal;
  min-inline-size: 14rem;
}

/* 行内操作按钮组 */
.admin-row-actions {
  display: inline-flex;
  gap: 0.4rem;
}

/* 状态小圆签:账号正常/封禁、报名开/关、卡组窗口开/关、码使用态 */
.admin-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.12rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.admin-chip-ok {
  color: var(--success-strong);
  background: var(--success-soft);
}

.admin-chip-danger {
  color: var(--danger-strong);
  background: var(--danger-soft);
}

.admin-chip-muted {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
}

.admin-chip-accent {
  color: var(--accent);
  background: var(--accent-soft);
}

/* —— 超管后台·通知表单(nf-*) —— */
.admin-notice-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1rem;
  margin-block-end: 0.9rem;
  border-block: 1px solid var(--border);
}

.admin-notice-form .form-field textarea {
  min-block-size: auto;
}

.admin-notice-form .form-field input[type='url'],
.admin-notice-form .form-field input[type='number'],
.admin-notice-form .form-field input[type='datetime-local'],
.admin-notice-form .form-field input[type='file'] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.65rem;
}

.nf-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.nf-row .form-field {
  margin: 0;
}

.nf-grow {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.nf-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.55rem;
  font-weight: 500;
}

.nf-qr-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.35rem;
}

.nf-qr-box img {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* 健康指标行:扁平均布,无卡片盒 */
.admin-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0 0 1rem;
}

.admin-kv-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding-block: 0.35rem;
}

.admin-kv-item dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.admin-kv-item dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-kv-item dd.is-danger {
  color: var(--danger-strong);
}

/* 恢复表单:扁平行(输入框 + 危险按钮) */
.admin-restore {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-restore .form-field {
  flex: 1 1 18rem;
}

.admin-restore input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  inline-size: 100%;
  box-sizing: border-box;
}

.admin-restore input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}


/* —— 备案页脚(工信部 ICP + 公安联网备案,法规要求悬挂于主页底部,随内容滚动)—— */
.site-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.site-filing {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 1rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.site-filing a {
  color: inherit;
  text-decoration: none;
}

.site-filing a:hover {
  color: var(--text);
  text-decoration: underline;
}

.ga-filing {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ga-filing img {
  width: 0.875rem;
  height: 0.875rem;
}

/* ---------- 官方文档页(列表条目 + md 渲染正文) ---------- */
.doc-item {
  display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.doc-item:last-child { border-bottom: 0; }
.doc-item:hover { background: var(--surface-2); }
.doc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.doc-item-title { font-weight: 600; }
.doc-item-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.doc-view-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.doc-view-meta { color: var(--text-muted); font-size: 13px; }
.md-body { line-height: 1.75; word-break: break-word; }
.md-body img { max-width: 100%; }
.md-body pre { overflow-x: auto; padding: 12px; border-radius: 8px; background: var(--surface-2); }
.md-body pre code { background: none; padding: 0; }
.md-body code { font-size: 0.92em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.md-body table { border-collapse: collapse; margin: 8px 0; }
.md-body th, .md-body td { border: 1px solid var(--border); padding: 4px 10px; }
.md-body th { background: var(--surface-2); }
.md-body blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--accent-stripe); color: var(--text-muted); }
.md-body hr { border: 0; border-top: 1px solid var(--border); }
.md-body a { color: var(--accent); }

/* 官方文档后台编辑器:源码/预览双栏,窄屏折行 */
.df-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.df-editor textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
.df-preview-wrap { display: flex; flex-direction: column; gap: 6px; overflow: auto; max-height: 460px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.df-preview { font-size: 14px; }
@media (max-width: 760px) { .df-editor { grid-template-columns: 1fr; } }

/* ---------- 隐私政策页(独立静态页,不引 common.js) ---------- */
.legal-body { min-block-size: 100vh; min-block-size: 100dvh; padding: 2rem 1rem 3rem; }
.legal-page { max-inline-size: 46rem; margin: 0 auto; }
.legal-back { margin: 0 0 1rem; }
.legal-title { margin: 0 0 0.25rem; font-size: var(--text-xl); }
.legal-meta { margin: 0 0 1.5rem; color: var(--text-muted); font-size: var(--text-sm); }
.legal-page .md-body h2 { margin: 1.75rem 0 0.5rem; font-size: 1.1rem; }
.legal-page .md-body p { margin: 0.5rem 0; }
.legal-page .md-body ul { margin: 0.5rem 0; padding-left: 1.25rem; }
.legal-page .md-body li { margin: 0.35rem 0; }
.login-legal { margin-top: 0.75rem; text-align: center; }
.login-legal a { color: var(--accent); }

/* 禁卡表「表名 = 绑定开关」按钮(2026-09-25;卡片设置与批量编辑共用):
 * 表名是主控件(按下 = 本卡/本批生效),卡数作元数据靠右同行 —— 不再用原生大复选框 */
.bl-name-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.bl-name-btn:hover { border-color: var(--accent); color: var(--accent); }
.bl-name-btn[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.bl-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-name-count { margin-inline-start: auto; flex: none; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.bl-name-btn[aria-pressed='true'] .bl-name-count { color: var(--accent); }

/* CardForm 禁卡表绑定区:列表式(行间一条细线)而不是卡片盒子 —— 一届挂 9 张表时也该是一行一行的高度;
 * 已绑定的行才长出次级控件「生效职业 · 摘要」,展开出 8 个职业按钮(.opt-btn,不选 = 全部职业) */
.cf-banlists { display: grid; }
.cf-bl-row { padding: 6px 0; border-top: 1px solid var(--border); }
.cf-bl-row:first-child { border-top: none; }
/* 次级控件缩进到表名内缘,与主控件拉开一级 */
.cf-bl-scope-line { margin: 5px 0 0 10px; }
.cf-bl-scope-btn { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 10px);
  padding: 2px 9px; font: inherit; font-size: 12px; color: var(--text); background: none;
  border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; }
.cf-bl-scope-btn:hover { border-color: var(--accent); }
.cf-bl-scope-label { flex: none; color: var(--text-muted); }
.cf-bl-scope-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-bl-scope-btn[aria-expanded='true'] { border-color: var(--accent); }
.cf-bl-scope-btn[aria-expanded='true'] .cf-bl-scope-label,
.cf-bl-scope-btn[aria-expanded='true'] .cf-bl-scope-sum { color: var(--accent); }
.cf-bl-scope-btn[aria-expanded='true'] .cf-bl-scope-sum { font-weight: 600; }
.cf-bl-scope { margin: 6px 0 2px 10px; display: grid; gap: 4px; }
.cf-bl-cls { padding: 0.18rem 0.5rem; font-size: 0.76rem; }

/* 禁卡表 JSON 导入/导出面板(届设置弹窗) */
.banlists-io-btns { display: flex; gap: 6px; align-items: center; }
.bl-io { display: grid; gap: 6px; }
.bl-io-text { width: 100%; min-height: 120px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; resize: vertical; }
.bl-io-actions { display: flex; gap: 6px; }

/* 届设置分节签(P1):容器 data-active-sec 控显隐,字段 DOM 恒在不丢输入态 */
.settings-sections { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.settings-sec { border: 1px solid transparent; background: none; border-radius: 8px; padding: 4px 12px;
  cursor: pointer; color: inherit; font-size: 13px; }
.settings-sec:hover { background: rgba(127, 127, 127, 0.1); }
.settings-sec.active { border-color: var(--accent, #2f6be3); background: rgba(47, 107, 227, 0.1); color: var(--accent, #2f6be3); font-weight: 600; }
.dialog-body:not([data-active-sec="basic"]) .form-field[data-sec="basic"],
.dialog-body:not([data-active-sec="signup"]) .form-field[data-sec="signup"],
.dialog-body:not([data-active-sec="banlists"]) .form-field[data-sec="banlists"],
.dialog-body:not([data-active-sec="betting"]) .form-field[data-sec="betting"] { display: none; }

/* 禁卡表手风琴(P2):收起一行,展开唯一 */
.bl-block.bl-collapsed { border-style: dashed; }
.bl-collapsed-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
  padding: 6px 8px; cursor: pointer; color: inherit; text-align: left; border-radius: 6px; }
.bl-collapsed-head:hover { background: rgba(127, 127, 127, 0.08); }
.bl-collapsed-head .icon { width: 14px; height: 14px; flex: none; opacity: 0.6; }
.bl-collapsed-head .bl-chevron-open { transform: rotate(90deg); }
.bl-collapsed-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-collapsed-head em { font-style: normal; font-size: 12px; opacity: 0.65; flex: none; margin-left: auto; }
.bl-block > .bl-collapsed-head { margin: -4px -6px 6px; }

/* 宽屏下届设置弹窗再放大(有背景模糊,多利用空间;禁卡表行含双下拉更舒展) */
@media (min-width: 1280px) {
  #settings-dialog { inline-size: min(72vw, 46rem); }
}

/* P3:禁卡表行内改职业收次级 + 加卡入口折叠 */
.bl-row .bl-reclass { display: none; width: auto; }
.bl-row.show-reclass .bl-reclass { display: inline-block; }
.bl-row .bl-reclass-btn { flex: none; padding: 2px 4px; }
.bl-add-toggle { justify-self: start; }

/* P4:CardForm 分区折叠(标题行点按,内容 DOM 恒在) */
.cf-section-title { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.cf-section-title .cf-chevron { width: 14px; height: 14px; opacity: 0.55; transition: transform 0.15s; transform: rotate(90deg); }
.cf-section[data-open="0"] .cf-section-title .cf-chevron { transform: none; }
.cf-section[data-open="0"] .cf-section-body { display: none; }

/* 设置弹窗头部操作组:保存(primary)在关闭(ghost)左,风格同顶栏按钮 */
.dialog-head-actions { display: flex; gap: 6px; align-items: center; }

/* ---------- roll 池卡片(卡片本体玻璃样式/尺寸复用 .match-card + inline,此处只补池位行/口节点/表单) ---------- */
/* 左边条 accent 区分卡型;暗色下 var(--accent) 自动换亮蓝,无需豁免。
 * 口节点定位基准是卡 padding-box,左边框加粗会整体内缩——下方 .card-ports 补偿对齐 */
.pool-card { border-left: 3px solid var(--accent, #3563e9); }
.pool-card > .card-ports { inset-inline-start: -3px; }

/* 池位行纵向堆叠;宽卡(w≥14,pool-wide)横向 wrap 省高 */
.pool-rows { display: flex; flex-direction: column; gap: 2px; }
.pool-card.pool-wide .pool-rows { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }

/* 单行 = 头像 + 名字 + 职业图标行:长名 ellipsis 由名字吸收,图标行不收缩不被挤爆 */
.pool-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pool-row.tbd { opacity: 0.55; }
.pool-row .player-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-cl { display: inline-flex; gap: 2px; flex: none; }

/* 未分配遗留提示条(仅有人没落位时渲染) */
.pool-unassigned { opacity: 0.7; font-size: var(--text-xs); padding: 2px 4px; }

/* roll 池出口节点:位置由 JS inline 现算(几何随口数变),CSS 只钉基础态;
 * 12px 圆点/表面底/crosshair/命中扩区由 .card-ports .port 公共规则复用 */
.card-ports .port-node.port-pool { position: absolute; translate: -50% -50%; border-color: var(--accent, #3563e9); }

/* 头部 Roll 按钮不参与收缩(窄卡标题挤压时保形) */
.pool-card .roll-open { flex: none; }

/* 表单池位行:选手下拉占满(可缩,长名不把删钮挤出行)+ 删钮固定宽 */
.cf-pool-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.cf-pool-row select { flex: 1; min-width: 0; }
.cf-pool-row .cf-pool-del { flex: none; }

/* 面板内池位下拉不在 .form-field/.cl-row 之列,收编同款紧凑控件主题(弹窗侧 .dialog-body select 已覆盖) */
.card-panel .cf-pool-row select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  min-block-size: 2rem;
  box-sizing: border-box;
}

.card-panel .cf-pool-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ---------- 批量编辑(多选抽屉批量表单 bf-* / 列表组头「编辑本组」) ---------- */
/* 四区块以细分隔线隔开(口径同 .cf-section + .cf-section);「应用」勾选行 = 区块开关,未勾不动该字段 */
.bf-section { padding: 10px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.bf-apply { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.bf-actions { padding: 12px 0 4px; }
.bf-actions .bf-apply-btn { width: 100%; }
.bf-title-preview { min-height: 1.2em; }
/* 批量编辑的禁卡表列表:复用 .bl-name-btn(单列,表名长且要能读全) */
.bf-banlists { display: grid; gap: 6px; }

/* 组头「编辑本组」按钮右对齐:编辑态组头 h2 已是 flex(body.list-editing .list-group h2),
 * auto margin 推至行尾不挤组名;flex:none 防超长组名把按钮压扁换行 */
.list-group-edit { margin-inline-start: auto; flex: none; }

/* ---------- 卡片模板(template.js):右轨抽屉 / 缩略示意 / 幽灵放置 / 保存弹窗 ---------- */

/* 模板抽屉:与 card-panel 同轨同几何(右缘贴工具栏左缘、开收两向滑行穿其底下) */
.tpl-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 25;
  width: min(19rem, 78vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0 solid var(--border);
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-radius: 0 0 0 var(--radius);
  animation: card-panel-in var(--dur-ui) var(--ease-out) both;
}

.tpl-drawer.closing {
  animation: card-panel-out var(--dur-ui) ease-in both;
}

.tpl-drawer[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tpl-drawer,
  .tpl-drawer.closing {
    animation: none;
  }
}

/* 让位与接缝收口同 body.card-panel-open 口径(工具栏左边框隐去 + 缩放/样式抽屉左移) */
body.tpl-drawer-open .edit-toolbar {
  border-left-color: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.tpl-drawer-open .zoom-dock { inset-inline-end: calc(min(19rem, 78vw) + 1rem); }
body.tpl-drawer-open .style-drawer { right: calc(min(19rem, 78vw) + 0.5rem); }

.tpl-drawer-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.55rem 0.55rem 0.7rem;
  border-block-end: 1px solid var(--border);
}

.tpl-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.25rem;
}

.tpl-tab {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.tpl-tab:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tpl-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.tpl-close {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.tpl-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tpl-close .icon {
  width: 1rem;
  height: 1rem;
}

.tpl-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.7rem 0.75rem;
}

/* 模板卡:缩略示意 + 名称行 + 按钮组,单列铺满(抽屉窄列) */
.tpl-list {
  display: grid;
  gap: 0.7rem;
}

.tpl-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.tpl-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3.2rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}

.tpl-card-info {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.tpl-name {
  font-size: 0.82rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.tpl-actions .btn {
  flex: 1;
  min-width: 0;
  padding-inline: 0.4rem;
}

.tpl-empty {
  padding: 1.4rem 0.5rem;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-muted);
  text-align: center;
}

/* 缩略示意:色块卡 + 静态连线(卡中心到卡中心),无交互 */
.tpl-canvas {
  position: relative;
}

.tpl-node {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.tpl-node > span {
  max-width: 100%;
  padding: 2px 4px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* roll 池卡:虚线框示意(与实卡池卡形态区分) */
.tpl-node-pool {
  border-style: dashed;
}

.tpl-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tpl-edges line {
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.8;
}

.tpl-edges line.loser {
  stroke: var(--danger);
}

/* 幽灵:#canvas-board 内真实卡预览层(子容器)——天然继承板相机 translate+scale,
 * 随缩放/平移联动;内含真卡 DOM(.match-card)不再另设样式。
 * z-index 高于卡层(.canvas-card=2)低于查找高亮外的画布内全部层级;工具栏在
 * board 之外的独立层叠上下文,天然压过幽灵。尺寸/位移由 template.js 内联写入 */
.tpl-ghost {
  position: absolute;
  z-index: 5;
  opacity: 0.55;
  pointer-events: none;
}

/* 放置态:画布区十字光标(手势短路由 template.js 捕获层 stopPropagation 完成) */
body.tpl-placing #canvas-scroll {
  cursor: crosshair;
}

/* 保存弹窗:复用全局 dialog 骨架,收窄到单字段幅面 */
.tpl-prompt {
  inline-size: min(92vw, 22rem);
}

/* —— 举报弹窗(common.js 登录态侧边栏入口,内容审查·方案甲) —— */
.report-kind-field {
  border: none;
  padding: 0;
  margin: 0;
}

.report-kind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-block-start: 0.35rem;
}

.report-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.report-kind input[type='radio'] {
  accent-color: var(--accent);
  margin: 0;
}

/* —— 超管后台·审查标签(举报处置 + 违禁词库) —— */

/* 举报表行内「选手 ID」输入(处置需选手 ID,v1 手填) */
.admin-report-edit {
  margin-block-end: 0.35rem;
}

.admin-report-edit input,
#admin-words-input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  inline-size: 13rem;
}

.admin-report-edit input:focus,
#admin-words-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* 词库标签列:软糖块 + 行内删除 */
.admin-words-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block: 0.5rem;
}

.admin-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem 0.15rem 0.65rem;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.admin-word-del {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.admin-word-del:hover {
  color: var(--danger-strong);
  background: var(--danger-soft);
}

/* ---------- 表情贴纸(2026-09-16) ---------- */

/* 画布渲染层:连线之上(z1 同层、DOM 后到)、卡片(z2)之下;
 * 观众整层零交互,可交互的贴纸单独开门 */
.sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.canvas-sticker {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.canvas-sticker.interactive {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.canvas-sticker.interactive:active {
  cursor: grabbing;
}

.canvas-sticker.selected {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 卡组编辑态:贴纸层让位(拖卡/框选优先,贴纸暂不可点) */
body.canvas-editing .sticker-layer,
body.canvas-editing .sticker-handles {
  pointer-events: none;
}

/* 跟随粘贴 ghost:指针锚中心,不接事件 */
.sticker-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 112px;
  z-index: 90;
  pointer-events: none;
  opacity: 0.85;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35));
}

body.sticker-following #canvas-scroll {
  cursor: crosshair;
}

/* 选中手柄 overlay:canvas-wrap 内绝对定位,随贴纸旋转;
 * 角点=缩放、顶点=旋转、右上 ×=删除(触控目标 ≥1.15rem) */
.sticker-handles {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  border: 1.5px dashed var(--accent);
  border-radius: 4px;
}

.sticker-handles[hidden] {
  display: none;
}

.sticker-handle {
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  padding: 0;
  pointer-events: auto;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--surface-float);
  color: var(--text);
  cursor: pointer;
  touch-action: none;
}

.sticker-handle .icon {
  width: 0.85rem;
  height: 0.85rem;
}

.sticker-handle-del {
  top: -0.7rem;
  right: -0.7rem;
  border-color: var(--danger-strong);
  color: var(--danger-strong);
}

.sticker-handle-del:hover {
  background: var(--danger-soft);
}

.sticker-handle-rotate {
  top: -2.1rem;
  left: 50%;
  translate: -50% 0;
  cursor: grab;
}

.sticker-handle-scale {
  right: -0.7rem;
  bottom: -0.7rem;
  cursor: nwse-resize;
}

/* 表情抽屉(20260917 改版):card-panel 同款无缝右轨——顶贴页头底边、右贴
 * main 边缘(编辑工具栏在场时自动随列让位),仅左/下边框+左下圆角,无阴影 */
.sticker-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 30;
  width: min(36rem, 78vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0 solid var(--border);
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-radius: 0 0 0 var(--radius);
  animation: card-panel-in var(--dur-ui) var(--ease-out) both;
}

.sticker-drawer[hidden] {
  display: none;
}

/* 开抽屉时右下缩放坞让位(全高右轨会压住它) */
body.sticker-drawer-open .zoom-dock {
  inset-inline-end: calc(min(36rem, 78vw) + 1rem);
}

/* 头部:card-panel-head 同款(底边框分割,标题小字距) */
.sticker-drawer-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem 0.5rem;
  border-block-end: 1px solid var(--border);
}

.sticker-drawer-head .sticker-drawer-title {
  flex: 1;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sticker-drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 网格滚动区:tab 行固定,grid 自滚 */
.sticker-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.85rem;
  display: grid;
  align-content: start;
}

/* PC 端恒 5 列(抽屉 36rem,格 ≈6.5rem;移动端 78vw 自适应约 3 列) */
.sticker-grid {
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.55rem;
}

@media (min-width: 48rem) {
  .sticker-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 分类 tab:禁卡表式图标 chip(全部/未分类为文字 chip) */
.sticker-tabs {
  display: flex;
  gap: 2px;
  flex: none;
  flex-wrap: wrap;
  padding: 0.45rem 0.85rem 0;
}

.sticker-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  line-height: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.sticker-tab img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
}

.sticker-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

/* 管理模式:归属分类角标(左下) */
.sticker-tile-cat {
  position: absolute;
  left: 0.15rem;
  bottom: 0.15rem;
  max-width: calc(100% - 1.6rem);
  padding: 0.05rem 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--surface-float);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.sticker-tile-cat:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* 归类 popover:绝对定位于抽屉内 */
.sticker-cat-pop {
  position: absolute;
  z-index: 5;
  min-width: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.25rem;
  background: var(--surface-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.sticker-cat-opt {
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  cursor: pointer;
  color: var(--text);
}

.sticker-cat-opt:hover {
  background: var(--surface-2);
}

.sticker-cat-opt.active {
  background: var(--accent-soft);
  font-weight: 700;
}

/* 抽屉内文本输入:对齐 .form-field input 基线(设置页改名/新建分类) */
.sticker-drawer input[type="text"] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  min-width: 0;
}

.sticker-drawer input[type="text"]:focus {
  border-color: var(--accent);
  outline: none;
}

/* 设置页:分类管理 */
.sticker-settings-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sticker-settings-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sticker-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sticker-cat-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sticker-cat-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.7rem;
  flex: none;
  overflow: hidden;
}

.sticker-cat-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sticker-cat-name {
  flex: 1;
  min-width: 0;
}

.sticker-cat-new {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sticker-cat-new-name {
  flex: 1;
  min-width: 0;
}

.sticker-cat-new-icon-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* 设置弹窗:上限双输入行 */
.sticker-caps-row {
  display: flex;
  gap: 0.5rem;
}

.sticker-caps-row input {
  width: 6rem;
}

/* 格子高度不用 aspect-ratio:Chrome 的 grid 自动行不理会 stretch 项的
 * ratio 高度贡献,懒加载未解码图片(高 0)会把行压塌、格子逐行叠压(40+ 张
 * 实锤)。改为行高直接由图片自然高度撑起(铺宽 contain,eager 加载),
 * 混合长宽比时该行取最高者,其余居中 contain——不依赖任何 ratio 行为 */
.sticker-tile {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  overflow: hidden;
}

.sticker-tile:hover {
  border-color: var(--accent);
}

.sticker-tile img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 9rem;
  object-fit: contain;
  pointer-events: none;
}

.sticker-tile-add {
  min-height: 5.5rem;
  border-style: dashed;
  color: var(--text-muted);
  font-size: var(--text-xs);
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.sticker-tile-add .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.sticker-tile-del {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: none;
  background: var(--surface-float);
  color: var(--danger-strong);
  cursor: pointer;
}

.sticker-tile-del:hover {
  background: var(--danger-soft);
}

.sticker-empty {
  margin: 0;
  padding: 0.8rem 0.2rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

.sticker-drawer .sticker-empty {
  padding: 0.8rem 0.85rem;
}

.sticker-hint {
  margin: 0;
  padding: 0 0.85rem 0.6rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}


/* ========== S3 比赛页三模式（观赛|编辑|竞猜） ========== */
.mode-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2, var(--surface));
}
.mode-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  border-radius: calc(var(--radius-sm, 8px) - 2px);
  cursor: pointer;
  min-block-size: 2rem;
}
.mode-seg-btn:hover { color: var(--text); background: rgb(127 127 127 / 0.1); }
.mode-seg-btn.is-active {
  background: var(--surface-float, var(--surface));
  color: var(--accent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.mode-seg-btn[hidden] { display: none !important; }

/* 只看我的:图标+短文案芯片 */
.my-matches-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-inline: 0.45rem;
  min-inline-size: auto;
}
.my-matches-chip .my-matches-label {
  font-size: var(--text-xs);
  font-weight: 600;
}
.my-matches-chip.chip-on,
.my-matches-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgb(47 107 227 / 0.35);
}
@media (max-width: 48rem) {
  .my-matches-chip .my-matches-label { display: none; }
}

/* 外观子菜单 */
.tool-group--appearance { position: relative; }
.appearance-menu {
  position: absolute;
  right: calc(100% + 0.4rem);
  top: 0;
  min-width: 7.5rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-float, var(--surface));
  box-shadow: var(--shadow-float, 0 8px 24px rgb(0 0 0 / 0.12));
  z-index: 30;
  display: grid;
  gap: 2px;
}
.appearance-menu[hidden] { display: none !important; }
.appearance-item {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: start;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.appearance-item:hover { background: var(--surface-2); }

.tool-btn.is-dirty {
  color: var(--accent);
  border-color: rgb(47 107 227 / 0.45);
}


/* 连线工具:端口更醒目 */
.canvas-board.tool-link .port-node {
  opacity: 1;
  transform: scale(1.15);
}

@media (max-width: 48rem) {
  .mode-seg-btn { padding: 0.4rem 0.55rem; font-size: var(--text-xs); }
  .header-actions .mode-seg { order: 20; }
}

/* ========== 多游戏 SVE P0(2026-10-11) ==========
 * SVE 届:卡组只收文字/链接,无职业维度;WB 届零视觉变化(以下选择器只命中 SVE 专属类名/属性)。 */

/* 卡组槽通用图标(link/article 单色 mask,跟随文字色) */
.icon.deck-generic-icon {
  display: inline-block;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  color: var(--text-muted);
}

/* 卡片设置:SVE 行 = 链接 + 删除 / 文字(多行)独占次行 */
.cl-row.cl-row-sve {
  grid-template-columns: minmax(0, 1fr) auto;
}
.cl-row.cl-row-sve .cl-url { grid-area: 1 / 1; }
.cl-row.cl-row-sve .cl-del { grid-area: 1 / 2 / 3 / 3; }
.cl-row.cl-row-sve .cl-text { grid-area: 2 / 1 / 3 / 2; }
.card-panel .cl-row.cl-row-sve { grid-template-columns: minmax(0, 1fr) auto; }
.card-panel .cl-row.cl-row-sve .cl-url { grid-area: 1 / 1; }
.card-panel .cl-row.cl-row-sve .cl-del { grid-area: 1 / 2 / 3 / 3; }
.card-panel .cl-row.cl-row-sve .cl-text { grid-area: 2 / 1 / 3 / 2; }
.cl-row textarea.cl-text,
.md-deck-row-sve textarea.md-text {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  inline-size: 100%;
  box-sizing: border-box;
  min-inline-size: 0;
  resize: vertical;
  word-break: break-all;
}
.cl-row [aria-invalid="true"],
.md-deck-row-sve [aria-invalid="true"] {
  border-color: var(--danger);
}

/* 我的对局:SVE 提交行(文字多行占满,链接一行) */
.md-deck-row.md-deck-row-sve:not(.readonly) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
}
.md-deck-row-sve .md-url { inline-size: 100%; box-sizing: border-box; }
.md-sve-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.md-sve-tools .md-kind { justify-self: auto; }
.md-kind {
  justify-self: start;
  font-size: var(--text-xs);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.5rem;
}

/* 主页总览:按游戏分块(只有一种游戏时不出现) */
.ov-game-block + .ov-game-block { margin-block-start: 1rem; }
.ov-game-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-md);
  margin: 0.5rem 0 0.25rem;
}

/* 系列编辑器:系列游戏下拉 / 只读标签 */
.ov-t-game {
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.3rem;
}
.ov-t-game-tag {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* 新建系列 / 系列设置里的「属于哪个游戏」:标题行字重很重,标签单独降下来。
 * 系列名最长 32 字,组头又是一行 flex。名字按钮按内容撑开时,字会画到下拉上面,
 * 窄屏点不到游戏。名字允许缩到容器内并省略;游戏、届数、删除不跟着缩。 */
.ov-t-game-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

body.series-editing .ov-t-group-title {
  flex-wrap: wrap;
  align-items: center;
}

body.series-editing .ov-t-group-title .ov-t-name-btn,
body.series-editing .ov-t-group-title .ov-t-name-label {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.series-editing .ov-t-group-title .ov-t-handle,
body.series-editing .ov-t-group-title .ov-t-group-count,
body.series-editing .ov-t-group-title .ov-t-del,
body.series-editing .ov-t-group-title .ov-t-game-label {
  flex-shrink: 0;
}

.ov-t-create {
  cursor: default;
  flex-wrap: wrap;
}

.ov-t-create .ov-t-name-input {
  flex: 1 1 8rem;
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.ov-t-create .ov-t-game-label {
  margin-inline-start: auto;
}

/* 统计页:游戏切换;SVE 职业登场按主战者派生职业统计(Phase 2),卡组构成/本届卡组仍依赖 WB 卡表不出 */
.stats-game-switch { margin-inline-end: 0.5rem; }
body[data-stats-game="sve"] .stats-section[aria-label="卡组构成分析"],
body[data-stats-game="sve"] #deck-list-block {
  display: none !important;
}

/* ===== 进化对决 Phase 2(2026-10-12):职业自动派生、禁限卡提示、WB 专属入口收起 ===== */
/* SVE 届语境:WB 专属入口(侧栏牌组编辑器等)收起 */
/* 站点游戏模式(<html data-mode>,theme-init.js 首帧前写入):侧栏「牌组」按模式指向 WB / SVE 组牌器 */
html[data-mode="sve"] .wb-only { display: none !important; }
html:not([data-mode="sve"]) .sve-only { display: none !important; }

/* 「更多」菜单顶部的游戏模式切换 */
.side-mode { display: flex; flex-direction: column; min-inline-size: 11rem; gap: 0.35rem; padding: 0.45rem 0.6rem 0.55rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.side-mode-title { font-size: var(--text-xs); color: var(--text-muted); }
.side-mode-seg { display: flex; gap: 0.25rem; }
.side-mode-btn {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.side-mode-btn[aria-checked="true"] { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.side-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 当前届 / 页面属于另一游戏时的顶部横幅 */
.game-mode-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.game-mode-banner-text { flex: 1 1 14rem; }
/* 职业图标(复用 WB 职业图标;复合职业两枚并排;未知 = 灰色问号卡框) */
.sve-cls-wrap { display: inline-flex; align-items: center; gap: 0.25rem; vertical-align: middle; }
.sve-cls-wrap .icon.sve-cls { inline-size: 1.1rem; block-size: 1.1rem; object-fit: contain; }
.sve-cls-name { font-weight: 600; }
.sve-deck-class { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; }
.sve-card-name { margin-inline-start: 0.4rem; color: var(--text-muted); font-size: var(--text-xs); }
/* 禁限卡提示:只提示不拦截,警示色但不做成错误 */
.sve-ban-hint {
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 45%, transparent);
  background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
}
.sve-ban-hint .sve-ban-title { margin: 0 0 0.25rem; font-weight: 600; }
.sve-ban-hint ul { margin: 0; padding-inline-start: 1.1rem; }
/* 统计页 SVE 职业条:多一列职业名(复合职业/未知没有通用图标认知) */
body[data-stats-game="sve"] .class-bar { grid-template-columns: 1.65rem 4.5rem 1fr 2.5rem; }
.class-bar-name { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 后台禁限卡表编辑 */
.sve-ban-table input[type="text"] { inline-size: 100%; min-inline-size: 8rem; }

/* ===== 进化对决卡图(2026-10-12):官网卡图原样(PNG 459×641)转存本站 OSS,尺寸只靠 CSS;超管可一键关 ===== */
.sve-card-art {
  display: block;
  inline-size: 2.75rem;
  aspect-ratio: 459 / 641;
  block-size: auto;
  object-fit: contain;
  border-radius: 3px;
  background: var(--surface-2, rgba(127, 127, 127, 0.12));
  flex: none;
}
.sve-card-art-missing { display: none !important; }
.sve-ban-art .sve-card-art { inline-size: 2.5rem; }

/* 卡组视图 = 卡图网格(看牌弹窗 / 交卡组预览共用):桌面 5 列,容器变窄依次 4/3/2 列,卡不会被挤得太小 */
.sve-deck-grid { container-type: inline-size; }
.sve-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
@container (max-width: 40rem) { .sve-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 30rem) { .sve-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 19rem) { .sve-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sve-tile { position: relative; min-inline-size: 0; }
.sve-tile-face {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  aspect-ratio: 459 / 641;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2, rgba(127, 127, 127, 0.1));
  color: inherit;
  font: inherit;
  text-align: center;
}
button.sve-tile-face { cursor: zoom-in; }
button.sve-tile-face:disabled { cursor: default; }
button.sve-tile-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sve-tile .sve-card-art { inline-size: 100%; block-size: 100%; border-radius: 0; object-fit: cover; background: transparent; }
/* 占位格:开关关着 / 图片失败时出现,卡号 + 中文名,绝不留白 */
.sve-tile-ph {
  display: none;
  box-sizing: border-box;
  block-size: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem 0.35rem 1.6rem;
}
.sve-tile-noart .sve-tile-ph { display: flex; }
.sve-tile-ph .sve-card-no { font-size: var(--text-xs); word-break: break-all; }
.sve-tile-name {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* 张数角标(右下)与禁限角标(左上) */
.sve-tile-x {
  position: absolute;
  inset-inline-end: 0.3rem;
  inset-block-end: 0.3rem;
  min-inline-size: 1.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.sve-tile-ban {
  position: absolute;
  inset-inline-start: 0.3rem;
  inset-block-start: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
}
.sve-tile-banned .sve-tile-face { border-color: var(--danger, #dc2626); box-shadow: 0 0 0 1px var(--danger, #dc2626); }

/* 大图查看器:原图天然 459px 宽封顶不放大,视口更小才等比缩小 */
.sve-lightbox {
  padding: 0.75rem;
  border: 0;
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  max-inline-size: 96vw;
  max-block-size: 96vh;
  overflow: auto;
}
.sve-lightbox::backdrop { background: rgba(0, 0, 0, 0.72); }
.sve-lightbox-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
/* 宽度取 width="459" 属性 = 原图天然宽(不放大),高按 459:641 比例;视口窄时 max-inline-size 等比缩小 */
.sve-lightbox-img {
  display: block;
  block-size: auto;
  max-inline-size: min(459px, calc(96vw - 1.5rem));
  max-block-size: calc(96vh - 5.5rem);
  aspect-ratio: 459 / 641;
  object-fit: contain;
}
.sve-lightbox-cap { font-size: var(--text-xs); color: var(--text-muted); text-align: center; max-inline-size: 459px; margin: 0; }
.sve-lightbox-close { display: block; margin: 0.4rem auto 0; }
.sve-cfg-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); }

/* 超管后台：标签页下拉(手机)、表格卡片式(手机) */
.admin-tab-select { display: none; margin: 0 0 12px; width: 100%; }
@media (max-width: 640px) {
  #admin-shell .me-tabs { display: none; }
  #admin-shell .admin-tab-select { display: block; }
  #admin-shell .admin-toolbar { flex-wrap: wrap; }
  #admin-shell .admin-toolbar input,
  #admin-shell .admin-toolbar select { flex: 1 1 100%; min-width: 0; }
  #admin-shell .data-table thead { display: none; }
  #admin-shell .data-table,
  #admin-shell .data-table tbody,
  #admin-shell .data-table tr,
  #admin-shell .data-table td { display: block; width: 100%; }
  #admin-shell .data-table tr { border: 1px solid var(--border, rgba(127, 127, 127, 0.3)); border-radius: 8px; margin: 0 0 10px; padding: 6px 10px; }
  #admin-shell .data-table td { border: 0; padding: 3px 0; text-align: left; word-break: break-all; }
  #admin-shell .data-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 5.5em; margin-right: 8px; opacity: 0.65; font-size: 0.9em; }
  #admin-shell .data-table td[data-label=""]::before { display: none; }
}

/* 团体赛 P1:我的比赛队伍区 + 三个弹窗(手机宽度优先) */
.team-warning {
  margin-block: 0.25rem 0.6rem;
  color: var(--danger, #c0392b);
  font-weight: 600;
}

.team-box {
  margin-block-start: 0.4rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft, transparent);
}

.team-box-removed {
  border-style: dashed;
}

.team-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 0.45rem;
}

.team-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.45rem;
  padding: 0;
  list-style: none;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.team-member-tag {
  min-inline-size: 4.5em;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.team-member-name {
  font-weight: 600;
}

.team-seat-chip,
.team-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft, rgba(80, 120, 200, 0.14));
}

.team-badge {
  margin-inline-start: 0.35rem;
}

.team-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-start: 0.55rem;
}

.team-invite-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-block: 0.55rem;
}

.team-invite-picked:empty {
  display: none;
}

.team-picked {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.3rem 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft, rgba(80, 120, 200, 0.14));
  font-size: var(--text-sm);
}

.team-invite-results {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-block-size: 12rem;
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.team-search-hit {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.team-search-hit:hover,
.team-search-hit:focus-visible {
  background: var(--surface-soft, rgba(127, 127, 127, 0.12));
}

.team-dialog-title {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
}

.team-invite-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 0;
  border-block-start: 1px solid var(--border-soft);
}

.team-invite-card:first-of-type {
  border-block-start: 0;
}

.team-invite-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.team-seat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-block: 0.75rem;
}

.team-seat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.8rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.team-seat-card.is-mine {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(80, 120, 200, 0.14));
}

.team-seat-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.team-seat-letter {
  font-size: 1.25rem;
  font-weight: 800;
}

.team-seat-owner {
  font-size: var(--text-sm);
  text-align: center;
  word-break: break-all;
}

@media (max-width: 30rem) {
  .team-invite-card {
    flex-direction: column;
  }
  .team-invite-actions {
    width: 100%;
  }
  .team-invite-actions .btn {
    flex: 1 1 auto;
  }
  .team-seat-grid {
    gap: 0.4rem;
  }
}

/* 超管后台：队伍编辑弹窗的 A/B/C 行 */
.team-seat-edit { display: flex; flex-direction: column; gap: 0.5rem; }
.team-seat-edit-row { display: flex; align-items: center; gap: 0.5rem; }
.team-seat-edit-row select { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   团体卡(2026-10 P2):三行位置对阵 + 顶部整队口。
   卡片固定 10×10 点(280×280),与 canvas-model 的 TEAM_CARD_HEIGHT 同源。
   ============================================================ */
.canvas-card.team-card {
  inline-size: 280px;
  min-block-size: 280px;
  display: flex;
  flex-direction: column;
}

.team-names {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-block: 0.1rem 0.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  min-inline-size: 0;
}

.team-name-l,
.team-name-r {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-name-r { text-align: end; }

.team-vs {
  flex: none;
  color: var(--text-muted);
  font-weight: 600;
}

.team-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.team-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 20px 16px 6px 16px 20px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 2px;
  min-block-size: 46px;
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.team-row.won-l,
.team-row.won-r {
  background: var(--accent-soft);
  border-color: rgb(47 107 227 / 0.32);
  font-weight: 700;
}

.team-pos {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--accent-strong);
  text-align: center;
}

.team-cell {
  display: flex;
  align-items: center;
  gap: 3px;
  min-inline-size: 0;
}

.team-cell-r { justify-content: flex-end; text-align: end; }

.team-cell .player-name { font-size: 0.72rem; }
.team-cell .avatar-sm { inline-size: 20px; block-size: 20px; font-size: 0.62rem; }

.team-cl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
}
/* 团体卡职业图标现在是按钮(点击看牌),抹掉原生按钮外观 */
button.team-cl { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; }
button.team-cl:focus-visible { outline: 2px solid var(--accent, #6ba0ff); outline-offset: 2px; border-radius: 4px; }

.team-cl .icon,
.team-cl img { inline-size: 18px; block-size: 18px; }

.team-cl-empty {
  inline-size: 18px;
  block-size: 18px;
}

.team-score {
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.team-colon {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

.team-score-open { inline-size: 22px; block-size: 22px; padding: 0; }
.team-score-open .icon { inline-size: 16px; block-size: 16px; }

.team-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 0.25rem;
  min-block-size: 24px;
}

.team-wins {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.team-override { display: inline-flex; gap: 0.15rem; }
.team-override .btn { padding: 0.1rem 0.35rem; font-size: 0.68rem; }
.team-override .btn.is-active { background: var(--accent-soft); color: var(--accent-strong); }

.team-warning {
  margin-block-start: 0.25rem;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning-strong, #92400e);
  font-size: 0.68rem;
  line-height: 1.3;
}

/* 团体卡连接点:整队口大一号;行口用方圆点区分 W/L */
.card-ports .port-node.port-team {
  border-radius: 4px;
  border-color: #7c3aed;
}

.card-ports .port-node.port-team-whole {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #ede9fe;
}

.card-ports .port-node.link-ok {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.25);
}

.card-ports .port-node.link-bad {
  border-color: #dc2626;
  opacity: 0.55;
}

/* 团体卡表单:三行字段两列,比分行一行 */
.cf-team-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding-block: 0.4rem;
  border-block-end: 1px dashed var(--border);
}

.cf-team-row-fields .form-field:last-child { grid-column: 1 / -1; }
.cf-team-score-row { display: flex; align-items: center; gap: 0.4rem; }
.cf-team-score-row input { inline-size: 4.2rem; }
.cf-team-score-sep { color: var(--text-muted); font-weight: 700; }

/* 赛程侧「队伍管理」弹窗(P3):表格在窄屏改成逐队卡片,不横向撑破 */
.team-manage-dialog { width: min(64rem, calc(100vw - 2rem)); max-height: min(86vh, 52rem); }
.team-manage-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.6rem; }
.team-manage-table { display: flex; flex-direction: column; gap: 0.35rem; }
.team-manage-row { display: grid; grid-template-columns: minmax(7rem, 1.1fr) 5rem minmax(12rem, 1.7fr) minmax(9rem, 1.2fr) auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.55rem; }
.team-manage-head { font-size: 0.76rem; color: var(--text-muted); background: var(--surface-2, rgba(127,127,127,0.06)); border-style: dashed; }
.team-manage-name { font-weight: 600; }
.team-manage-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }
.team-edit-dialog { width: min(34rem, calc(100vw - 2rem)); }
@media (max-width: 48rem) {
  .team-manage-dialog { width: calc(100vw - 1rem); max-height: 92vh; }
  .team-manage-head { display: none; }
  .team-manage-row { grid-template-columns: 1fr auto; }
  .team-manage-row > span:nth-child(3),
  .team-manage-row > span:nth-child(4) { grid-column: 1 / -1; font-size: 0.8rem; }
  .team-manage-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 30rem) {
  .team-manage-toolbar .btn { flex: 1 1 auto; }
  .team-edit-dialog .team-seat-edit-row { flex-wrap: wrap; }
  .team-edit-dialog .team-seat-edit-row select { flex-basis: 100%; }
}