/* ============================================================
   乐游赛事现场 OA 与成绩管理系统 · 自适应样式表 V2
   ------------------------------------------------------------
   适配目标：手机（竖/横）、平板（竖/横）、笔记本、桌面、
             电视 / LED 大屏（FHD / 4K）
   核心技术：
     · 流式布局 —— clamp() / vw / vmin / % / min() / max()
     · 弹性网格 —— repeat(auto-fit, minmax(min(100%, Xpx), 1fr))
     · 自适应媒体查询 —— 宽度 / 方向 / 指针精度 / 分辨率
   设计原则：现场操作要快、状态要清楚、触控友好、信息密度高
   ============================================================ */

/* ============================================================
   一、设计令牌（Design Tokens）
   ============================================================ */
:root {
  /* ---- 色彩 ---- */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --border: #e4e9f2;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #8a97ab;
  --primary: #4f46e5;
  --primary-600: #4338ca;
  --primary-700: #3730a3;
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --accent: #f59e0b;
  --accent-50: #fffbeb;
  --success: #059669;
  --success-50: #ecfdf5;
  --danger: #dc2626;
  --danger-50: #fef2f2;
  --info: #0284c7;
  --info-50: #f0f9ff;
  --purple: #7c3aed;

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  /* ---- 阴影 ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 20px rgba(15, 23, 42, .06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .14);

  /* ---- 字体族 ---- */
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* ============================================================
     流式排版阶梯 —— clamp(最小值, 流式值, 最大值)
     随视口宽度连续缩放，不产生断点跳变
     ============================================================ */
  --fs-2xs:  clamp(10.0px, 0.60rem + 0.10vw, 12.0px);
  --fs-xs:   clamp(11.0px, 0.66rem + 0.12vw, 13.0px);
  --fs-sm:   clamp(12.0px, 0.72rem + 0.14vw, 14.0px);
  --fs-base: clamp(13.0px, 0.78rem + 0.16vw, 15.5px);
  --fs-md:   clamp(14.0px, 0.82rem + 0.20vw, 17.0px);
  --fs-lg:   clamp(15.5px, 0.90rem + 0.34vw, 20.0px);
  --fs-xl:   clamp(17.5px, 0.95rem + 0.60vw, 25.0px);
  --fs-2xl:  clamp(21.0px, 1.05rem + 1.00vw, 34.0px);
  --fs-3xl:  clamp(25.0px, 1.15rem + 1.60vw, 46.0px);

  /* ============================================================
     流式间距阶梯
     ============================================================ */
  --sp-1: clamp(3px,  0.20rem + 0.08vw,  6px);
  --sp-2: clamp(5px,  0.32rem + 0.12vw,  9px);
  --sp-3: clamp(8px,  0.46rem + 0.18vw, 13px);
  --sp-4: clamp(11px, 0.62rem + 0.28vw, 18px);
  --sp-5: clamp(15px, 0.82rem + 0.44vw, 26px);
  --sp-6: clamp(20px, 1.05rem + 0.70vw, 38px);

  /* ---- 流式控件尺寸（保证触控安全下限） ---- */
  --ctl-h:      clamp(34px, 2.00rem + 0.30vw, 42px);
  --ctl-h-sm:   clamp(30px, 1.80rem + 0.24vw, 36px);
  --ctl-h-lg:   clamp(44px, 2.60rem + 0.40vw, 54px);
  --touch-min:  44px;

  /* ---- 布局尺寸 ---- */
  --sidebar-w:   clamp(196px, 12.0rem + 2.4vw, 260px);
  --topbar-h:    clamp(52px, 3.10rem + 0.50vw, 70px);
  --page-pad:    clamp(11px, 0.60rem + 1.10vw, 30px);
  --content-max: 1720px;
  --modal-max:   min(620px, calc(100vw - 2 * var(--sp-4)));
  --modal-wide:  min(940px, calc(100vw - 2 * var(--sp-4)));
}

/* 超大屏（电视 / LED）：整体放大，保证远距离可读 */
@media (min-width: 1920px) {
  :root {
    --fs-2xs: 12px; --fs-xs: 13.5px; --fs-sm: 15px; --fs-base: 16.5px;
    --fs-md: 18.5px; --fs-lg: 22px; --fs-xl: 27px; --fs-2xl: 36px; --fs-3xl: 50px;
    --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 20px; --sp-5: 28px; --sp-6: 40px;
    --ctl-h: 44px; --ctl-h-sm: 38px; --ctl-h-lg: 58px;
    --content-max: 1980px;
  }
}
@media (min-width: 2560px) {
  :root {
    --fs-2xs: 14px; --fs-xs: 16px; --fs-sm: 18px; --fs-base: 20px;
    --fs-md: 22px; --fs-lg: 27px; --fs-xl: 33px; --fs-2xl: 44px; --fs-3xl: 60px;
    --sp-1: 8px; --sp-2: 13px; --sp-3: 18px; --sp-4: 26px; --sp-5: 36px; --sp-6: 52px;
    --ctl-h: 52px; --ctl-h-sm: 44px; --ctl-h-lg: 68px;
    --content-max: 2400px;
  }
}

/* ============================================================
   二、基础重置与流式默认值
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0; padding: 0;
  /* 阻止 iOS 横屏时字号被强制放大 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0; padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* 长英文/数字不撑破容器 */
  overflow-wrap: break-word;
}

/* ---- 弹性图片与媒体元素 ---- */
img, svg, video, canvas, picture, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
svg { display: inline-block; }

/* ---- 表单元素继承字号，避免 iOS 聚焦缩放 ---- */
button, input, select, textarea {
  font-family: inherit;
  font-size: max(16px, var(--fs-base));
  color: inherit;
}
@media (min-width: 768px) {
  button, input, select, textarea { font-size: var(--fs-base); }
}
button { cursor: pointer; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 长文本安全换行 */
.break, td, th, .card-head h2, .notice span { overflow-wrap: anywhere; }

/* ---- 启动占位 ---- */
.boot {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-5); text-align: center;
}
.boot-logo { font-size: clamp(40px, 9vw, 64px); }
.boot-text { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .5px; }
.boot-sub { color: var(--text-3); font-size: var(--fs-sm); }

/* ============================================================
   三、应用外壳布局
   ============================================================ */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ---- 侧边导航 ---- */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  z-index: 40;
  scrollbar-width: thin;
}
.sidebar-brand {
  padding: var(--sp-4) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky; top: 0; background: #0f172a; z-index: 1;
}
.sidebar-brand .mark { font-size: var(--fs-xl); line-height: 1; }
.sidebar-brand .ttl { font-size: var(--fs-sm); font-weight: 700; color: #fff; line-height: 1.25; }
.sidebar-brand .sub { font-size: var(--fs-2xs); color: #64748b; }

.nav-group { padding: var(--sp-3) var(--sp-2) var(--sp-1); }

/* 侧栏赛事切换：窄屏时顶栏放不下，移入抽屉 */
.sidebar-event { display: none; padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.sidebar-event .select {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
  color: #e2e8f0;
}
.sidebar-event .select option { color: #0f172a; background: #fff; }
.nav-group-label {
  font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: #64748b; padding: var(--sp-1) var(--sp-3) var(--sp-2); font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: 9px; cursor: pointer;
  color: #cbd5e1; font-size: var(--fs-sm); margin-bottom: 2px;
  border: none; background: none; width: 100%; text-align: left;
  min-height: 38px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--primary); color: #fff; font-weight: 600; }
.nav-item .ico { width: 1.3em; text-align: center; font-size: var(--fs-md); flex: none; }
.nav-item .badge {
  margin-left: auto; background: rgba(255, 255, 255, .16); border-radius: 20px;
  padding: 1px 7px; font-size: var(--fs-2xs); font-weight: 600;
}
.nav-item.active .badge { background: rgba(255, 255, 255, .28); }

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

.topbar {
  min-height: var(--topbar-h); flex: none;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--page-pad);
  position: sticky; top: 0; z-index: 30;
  flex-wrap: nowrap;
}
.topbar h1 {
  font-size: var(--fs-md); margin: 0; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.topbar .spacer { flex: 1 1 auto; min-width: var(--sp-2); }
.hamburger {
  display: none; background: none; border: none;
  font-size: var(--fs-xl); cursor: pointer; padding: var(--sp-2);
  min-width: var(--touch-min); min-height: var(--touch-min);
  border-radius: var(--radius-sm); flex: none;
}
.hamburger:hover { background: var(--surface-3); }

.live-dot {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-2);
  background: var(--surface-3); border-radius: 20px;
  padding: var(--sp-1) var(--sp-3); white-space: nowrap; flex: none;
}
.live-dot i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); animation: pulse 2s infinite; flex: none;
}
.live-dot.off i { background: var(--text-3); box-shadow: none; animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.who { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); flex: none; }
.who .avatar {
  width: clamp(28px, 2vw + 12px, 38px); aspect-ratio: 1;
  border-radius: 50%; background: var(--primary-50);
  color: var(--primary-700); display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-xs); flex: none;
}
/* 上传头像后是 <img>：裁成圆形 */
.who img.avatar { object-fit: cover; background: var(--surface-2); }
.who .role { font-size: var(--fs-2xs); color: var(--text-3); }

/* ---- 内容区：流式内边距 + 超宽屏居中限宽 ---- */
.content {
  padding: var(--page-pad);
  flex: 1; min-width: 0;
  container-type: inline-size;
  container-name: page;
}
.content.flush { padding: 0; }
@media (min-width: 1600px) {
  .content:not(.flush) {
    padding-inline: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
  }
}

/* ============================================================
   四、通用组件
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  min-width: 0;
}
.card + .card { margin-top: var(--sp-4); }
.card-head {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.card-head .sub { color: var(--text-3); font-size: var(--fs-xs); }
.card-head .spacer { flex: 1 1 auto; }
.card-body { padding: var(--sp-4); }
.card-body.flush { padding: 0; }

/* ---- 弹性网格：auto-fit + minmax，列数随可用宽度自动增减 ---- */
.grid { display: grid; gap: var(--sp-4); }
.grid.auto   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid.auto-s { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.grid.auto-l { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
/* 强制固定列数（仅用于确实需要等分的场景） */
.grid.fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: var(--sp-2); }
.row.end { justify-content: flex-end; }
.row.nowrap { flex-wrap: nowrap; }
.spacer { flex: 1 1 auto; }

/* ---- 两栏主从布局：宽屏双栏，窄屏自动堆叠 ---- */
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 900px) {
  .split-layout { grid-template-columns: minmax(0, clamp(220px, 20vw, 320px)) minmax(0, 1fr); }
  .split-layout.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(220px, 20vw, 320px)); }
}
/* 容器查询：主区自身足够宽时才启用双栏（适配大屏下侧栏展开的场景） */
@container page (min-width: 860px) {
  .split-layout.cq { grid-template-columns: minmax(0, clamp(220px, 22cqw, 320px)) minmax(0, 1fr); }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  min-height: var(--ctl-h); max-width: 100%;
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-600); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.success:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); min-height: var(--ctl-h-sm); }
.btn.lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-md); min-height: var(--ctl-h-lg); border-radius: var(--radius); }
.btn.xl { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-lg); min-height: clamp(54px, 3.4rem + .4vw, 68px); border-radius: var(--radius); font-weight: 700; }
.btn.block { width: 100%; }
.btn.grow { flex: 1 1 auto; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.field .hint { font-size: var(--fs-2xs); color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); outline: none; min-height: var(--ctl-h);
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50);
}
.input.lg { padding: var(--sp-3) var(--sp-4); font-size: max(16px, var(--fs-md)); min-height: var(--ctl-h-lg); }
.input.mono { font-family: var(--mono); }
.textarea { min-height: 76px; resize: vertical; }

/* 宽度工具类（替代散落的内联 maxWidth） */
.w-xs  { max-width: 84px; }
.w-sm  { max-width: 108px; }
.w-md  { max-width: 170px; }
.w-lg  { max-width: 240px; }
.w-xl  { max-width: 320px; }
.w-search { flex: 1 1 180px; max-width: 320px; min-width: 140px; }
@media (max-width: 560px) {
  .w-search { flex-basis: 100%; max-width: none; }
}

/* 超小屏：顶栏只保留「菜单 + 标题 + 退出」，彻底避免挤压 */
@media (max-width: 420px) {
  .who > div:nth-child(2) { display: none; }
}

/* 参赛记录编辑行：窄屏自动换行，输入框不溢出 */
.entry-row {
  display: flex; gap: var(--sp-2); align-items: center;
  flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.entry-row .select { flex: 1 1 140px; min-width: 118px; }
.entry-row .input { flex: 0 0 auto; }
@media (max-width: 560px) {
  .entry-row .select { flex-basis: 100%; }
  .entry-row .input { flex: 1 1 40%; max-width: none; }
}

/* ---------- 徽标 / 标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-3); border-radius: 20px;
  font-size: var(--fs-2xs); font-weight: 600;
  background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.tag.primary { background: var(--primary-50); color: var(--primary-700); }
.tag.success { background: var(--success-50); color: var(--success); }
.tag.danger { background: var(--danger-50); color: var(--danger); }
.tag.warn { background: var(--accent-50); color: #b45309; }
.tag.info { background: var(--info-50); color: var(--info); }
.tag.purple { background: #f5f3ff; color: var(--purple); }
.tag.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); }
.tag.lg { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-4); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.green { background: var(--success); }
.dot.amber { background: var(--accent); }
.dot.red { background: var(--danger); }
.dot.gray { background: var(--text-3); }

/* ---------- 表格：横向可滚动 + 滚动阴影提示 ---------- */
.table-wrap {
  overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat;
  background-attachment: local, local;
}
.table-wrap.can-stack { background: none; }
table.tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: max-content;
}
table.tbl th, table.tbl td {
  padding: var(--sp-2) var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.tbl thead th {
  background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr.active-row { background: var(--primary-50); }
table.tbl tbody tr.hl { box-shadow: inset 3px 0 0 var(--primary); }
table.tbl td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl td.center, table.tbl th.center { text-align: center; }
table.tbl.compact th, table.tbl.compact td { padding: var(--sp-1) var(--sp-2); }
/* 主列不被压缩，保证姓名可读 */
table.tbl td:first-child, table.tbl th:first-child { white-space: nowrap; }

/* ============================================================
   表格 → 卡片 自适应降级（窄屏）
   ------------------------------------------------------------
   表格类数据在窄屏上改用「一列一卡片」呈现，
   由 data-label 提供行内标签，避免关键操作被挤到横向滚动区外。
   用法：<table class="tbl stack"> + 每个 <td data-label="列名">
   ============================================================ */
@media (max-width: 700px) {
  .table-wrap.can-stack { overflow-x: visible; }
  table.tbl.stack { min-width: 0; display: block; font-size: var(--fs-sm); }
  table.tbl.stack thead { display: none; }
  table.tbl.stack tbody { display: block; }
  table.tbl.stack tbody tr {
    display: block;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3);
    background: var(--surface); box-shadow: var(--shadow-xs);
  }
  table.tbl.stack tbody tr:last-child { margin-bottom: 0; }
  table.tbl.stack tbody tr:hover { background: var(--surface); }
  table.tbl.stack tbody tr.hl { box-shadow: inset 3px 0 0 var(--primary); }
  table.tbl.stack tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    border: none; border-top: 1px dashed var(--border);
    padding: var(--sp-2) 0;
    text-align: right; white-space: normal;
    min-width: 0;
  }
  table.tbl.stack tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700;
    color: var(--text-3); text-align: left; white-space: nowrap;
  }
  table.tbl.stack tbody td[data-label=""]::before,
  table.tbl.stack tbody td:not([data-label])::before { display: none; }
  /* 首列作为卡片标题：通栏、无标签、加大字号 */
  table.tbl.stack tbody td:first-child {
    display: block; text-align: left; white-space: normal;
    border-top: none; padding-top: 0; padding-bottom: var(--sp-2);
    font-size: var(--fs-md);
  }
  table.tbl.stack tbody td:first-child::before { display: none; }
  table.tbl.stack tbody td.center, table.tbl.stack tbody td.num { text-align: right; }
  table.tbl.stack tbody td > .row { justify-content: flex-end; flex-wrap: wrap; }
  /* 号码牌等 chip 在卡片内左对齐展示 */
  table.tbl.stack tbody td > .bib-chip { margin-left: auto; }
}

.rank-badge {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 var(--sp-2);
  border-radius: 7px; background: var(--surface-3);
  font-weight: 700; font-family: var(--mono); font-size: var(--fs-sm);
}
.rank-badge.r1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.rank-badge.r2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.rank-badge.r3 { background: linear-gradient(135deg, #d8a26a, #b45309); color: #fff; }
.rank-badge.online { background: var(--success); color: #fff; }

/* ---------- 统计块 ---------- */
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.stat .k { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.stat .v {
  font-size: var(--fs-2xl); font-weight: 800; font-family: var(--mono); line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat .v small { font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; font-family: var(--font); }
.stat.accent .v { color: var(--primary); }
.stat.ok .v { color: var(--success); }

/* ---------- 空态 ---------- */
.empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-3); }
.empty .ico { font-size: clamp(30px, 5vw, 44px); opacity: .5; }
.empty .t { margin-top: var(--sp-2); font-size: var(--fs-md); }
.empty .s { font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ---------- 提示条 ---------- */
.notice {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.5;
  min-width: 0;
}
.notice.info { background: var(--info-50); color: #075985; border: 1px solid #bae6fd; }
.notice.warn { background: var(--accent-50); color: #92400e; border: 1px solid #fde68a; }
.notice.success { background: var(--success-50); color: #065f46; border: 1px solid #a7f3d0; }
.notice.danger { background: var(--danger-50); color: #991b1b; border: 1px solid #fecaca; }
.notice .ic { flex: none; font-size: var(--fs-md); }

/* ============================================================
   五、登录页
   ============================================================ */
.login-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--sp-5);
  background:
    radial-gradient(1000px 500px at 12% -10%, #e0e7ff 0%, transparent 60%),
    radial-gradient(900px 460px at 105% 105%, #fef3c7 0%, transparent 55%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: min(430px, 100%);
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-5);
}
.login-card .brand { text-align: center; margin-bottom: var(--sp-5); }
.login-card .brand .logo { font-size: clamp(34px, 7vw, 52px); }
.login-card .brand h1 { font-size: var(--fs-lg); margin: var(--sp-2) 0 var(--sp-1); font-weight: 800; }
.login-card .brand p { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
.quick-users { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.quick-users .q {
  font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); border-radius: 20px;
  border: 1px dashed var(--border-strong); background: var(--surface-2);
  cursor: pointer; color: var(--text-2);
}
.quick-users .q:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }

/* ============================================================
   六、Toast / Modal
   ============================================================ */
/* ---- Toast ----
   白底 + 状态色图标容器。以前是「深色实心块 + 裸字符图标 + 整段 600 粗体」：
   裸字符会跟正文同字号同字重、折行时还垂直居中于整块（不与首行对齐），
   看起来像文字的一部分而不是图标；整段加粗则让长文案读起来很累。 */
.toast-host {
  position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 2 * var(--sp-4)));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  pointer-events: auto;              /* host 是 none，但内容要能点（关闭按钮 / 悬停暂停） */
  background: var(--surface); color: var(--text);
  padding: 12px 10px 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .24), 0 2px 6px rgba(15, 23, 42, .05);
  font-size: var(--fs-sm); line-height: 1.5;
  animation: toastIn .24s cubic-bezier(.4, 0, .2, 1);
}
/* 状态图标：独立圆形容器，与首行文字对齐 */
.toast-ic {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  font-size: 12px; font-weight: 700; line-height: 1; color: #fff;
}
.toast.ok   .toast-ic { background: var(--success); }
.toast.err  .toast-ic { background: var(--danger); }
.toast.warn .toast-ic { background: var(--accent); }
.toast.info .toast-ic { background: var(--primary); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { display: block; font-weight: 600; margin-bottom: 3px; }
.toast-msg { display: block; overflow-wrap: anywhere; white-space: pre-line; }
/* 有标题时正文降一级，形成「标题 + 说明」的层次；无标题时正文就是主体，保持主色 */
.toast-body.has-title .toast-msg { color: var(--text-2); }
.toast-x {
  flex: none; width: 22px; height: 22px; margin: -2px 0 0;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--text-3);
  font-size: 13px; line-height: 1;
  transition: background .15s, color .15s;
}
.toast-x:hover { background: var(--surface-3); color: var(--text-2); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }

/* ---- 确认弹窗正文 ----
   直接用段落，不再套一层 .notice：弹窗里再套提示条是双重框，
   而且那个「?」图标会把一句确认问句读成「系统提示」。 */
.confirm-text { font-size: var(--fs-base); line-height: 1.7; color: var(--text-2); white-space: pre-line; }
.confirm-impacts { margin-top: var(--sp-3); }
.ci-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.ci-warn { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--danger); }

.modal-host {
  position: fixed; inset: 0; z-index: 150;
  /* 用 flex + auto margin 实现居中：
     空间充足时居中，内容超高时 auto margin 归零 → 容器可正常滚动，顶部不会被裁掉 */
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4);
}
.modal-host[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
.modal {
  position: relative;
  margin: auto;                 /* 水平 + 垂直居中 */
  width: 100%;
  max-width: var(--modal-max);
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: min(88vh, 88dvh);
  display: flex; flex-direction: column;
  animation: modalIn .2s ease;
}
.modal.wide { max-width: var(--modal-wide); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.modal-head {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-2); flex: none;
}
.modal-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; overflow-wrap: anywhere; }
.modal-body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot {
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; flex: none;
}

/* ============================================================
   七、业务组件
   ============================================================ */

/* ---------- 成绩录入 ---------- */
.score-input {
  width: clamp(72px, 8vw, 100px);
  padding: var(--sp-2) var(--sp-2);
  border: 1.5px solid var(--border-strong); border-radius: 7px;
  font-family: var(--mono); font-size: max(16px, var(--fs-md)); font-weight: 700;
  text-align: center; background: #fff; min-height: var(--ctl-h);
}
.score-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); outline: none; }
.score-input.saved { border-color: var(--success); background: var(--success-50); }
.score-input.err { border-color: var(--danger); background: var(--danger-50); }
tr.recording { background: var(--accent-50) !important; }
tr.recording td { border-bottom-color: #fde68a; }

/* 出发顺序：并入号码牌列，节省表格横向宽度 */
.start-no {
  display: inline-block; min-width: 1.5em; margin-right: var(--sp-2);
  text-align: right; font-family: var(--mono);
  font-size: var(--fs-xs); color: var(--text-3); vertical-align: middle;
}
/* 特殊状态标记：紧凑下拉，替代 4 个按钮 */
.select.sel-mark {
  width: 100%; min-width: 76px; min-height: var(--ctl-h-sm);
  padding: 2px var(--sp-1); font-size: var(--fs-xs); font-weight: 700;
}
.select.sel-mark:not([data-plain]) { color: var(--text-2); }

/* ============================================================
   批量导入（模板下载 + 多格式文件上传）
   ============================================================ */
.import-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }

.import-tpl {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--primary-50); border: 1px solid var(--primary-100);
  margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--primary-700);
}
.import-tpl b { color: var(--primary-700); }
.import-tpl .hint { color: var(--text-3); font-size: var(--fs-2xs); width: 100%; }

.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-4); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  background: var(--surface-2);
}
.dropzone:hover, .dropzone.over {
  border-color: var(--primary); background: var(--primary-50);
}
.dropzone.over { transform: scale(1.005); }
.dropzone .dz-ico { font-size: clamp(28px, 6vw, 44px); line-height: 1; }
.dropzone .dz-t { font-weight: 700; margin-top: var(--sp-2); font-size: var(--fs-md); }
.dropzone .dz-s { color: var(--text-3); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.dropzone .dz-fmt {
  display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
  margin-top: var(--sp-3);
}

.file-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-top: var(--sp-2);
  background: var(--surface); min-width: 0;
}
.file-item .fi-ico { font-size: var(--fs-xl); flex: none; }
.file-item .fi-info { flex: 1 1 auto; min-width: 0; }
.file-item .fi-name { font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.file-item .fi-meta { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.file-item.err { border-color: #fecaca; background: var(--danger-50); }
.file-item.ok { border-color: #a7f3d0; background: var(--success-50); }

.preview-wrap {
  max-height: min(260px, 34vh); overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-top: var(--sp-3);
}
.preview-wrap table.tbl { font-size: var(--fs-xs); }
.preview-wrap table.tbl th, .preview-wrap table.tbl td { padding: var(--sp-1) var(--sp-2); white-space: nowrap; }

.import-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--sp-2); margin-top: var(--sp-3);
}
.import-summary .is-item {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--surface-3); text-align: center;
}
.import-summary .is-item .k { font-size: var(--fs-2xs); color: var(--text-3); font-weight: 600; }
.import-summary .is-item .v { font-size: var(--fs-lg); font-weight: 800; font-family: var(--mono); }

/* ---------- 现场大屏（电视 / LED） ----------
   大屏是 16:9 全屏展示场景，字号统一以 vmin 为基准标定：
   在 1920×1080 与 3840×2160 上呈严格 2 倍关系，
   竖装 LED 墙也能按短边等比缩放，不会出现「4K 上字太小」的问题。
   标定基准：vmin(1080p) = 10.8px
   ------------------------------------------------------------ */
.board {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(160deg, #0b1220 0%, #131c31 45%, #0b1220 100%);
  color: #e2e8f0;
  display: flex; flex-direction: column;
  padding: clamp(10px, 1.8vmin, 40px) clamp(12px, 2.9vmin, 64px);
  gap: clamp(8px, 1.2vmin, 28px);
  overflow: hidden;
}
.board-head { display: flex; align-items: center; gap: clamp(8px, 1.5vmin, 32px); flex-wrap: wrap; }
.board-head .ev {
  font-size: clamp(17px, 3.58vmin, 78px);
  font-weight: 800; color: #fff; letter-spacing: .5px; line-height: 1.15;
}
.board-head .meta { color: #7c8aa5; font-size: clamp(10.5px, 1.61vmin, 36px); }
.board-head .clock {
  margin-left: auto; font-family: var(--mono);
  font-size: clamp(19px, 3.8vmin, 84px); font-weight: 700; color: #fff;
  white-space: nowrap;
}
.board-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 1.2vmin, 28px);
  flex: 1 1 auto; min-height: 0;
}
/* 后台关闭了部分板块、只剩一栏时占满整行（否则宽屏右侧留空很难看） */
.board-body.single { grid-template-columns: minmax(0, 1fr); }
.board-panel {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: clamp(10px, 1.4vmin, 32px);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.board-panel > .ph {
  padding: clamp(6px, 1.1vmin, 26px) clamp(12px, 2.2vmin, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  display: flex; align-items: center; gap: clamp(6px, 1.1vmin, 26px);
  background: rgba(255, 255, 255, .03); flex-wrap: wrap;
}
.board-panel > .ph .t { font-size: clamp(12px, 1.78vmin, 40px); font-weight: 700; color: #fff; }
.board-panel > .pb { flex: 1 1 auto; overflow: hidden auto; padding: clamp(2px, .5vmin, 10px) 0; min-height: 0; }
.board .now-title { font-size: clamp(17px, 3.65vmin, 80px); font-weight: 800; color: #fff; line-height: 1.15; }
.board .now-sub { color: #93a4c0; font-size: clamp(10.5px, 1.61vmin, 36px); margin-top: 2px; }

table.board-tbl { width: 100%; border-collapse: collapse; }
table.board-tbl th {
  font-size: clamp(9.5px, 1.36vmin, 30px); color: #7c8aa5; font-weight: 700;
  padding: clamp(4px, .62vmin, 14px) clamp(8px, 1.8vmin, 40px); text-align: left;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
table.board-tbl td {
  padding: clamp(4px, .9vmin, 20px) clamp(8px, 1.8vmin, 40px);
  font-size: clamp(12px, 2.16vmin, 48px);
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--mono); color: #dbe4f3; white-space: nowrap;
}
table.board-tbl td.nm {
  font-family: var(--font); font-size: clamp(12px, 2.09vmin, 46px);
  font-weight: 600; color: #fff;
}
table.board-tbl tr.top1 td { background: rgba(245, 158, 11, .13); }
table.board-tbl tr.top2 td { background: rgba(148, 163, 184, .1); }
table.board-tbl tr.top3 td { background: rgba(180, 83, 9, .12); }
table.board-tbl td.rk {
  font-weight: 800; font-size: clamp(13px, 2.22vmin, 49px); color: #fff;
  width: clamp(40px, 6vmin, 130px);
}

.next-card {
  padding: clamp(10px, 2.1vmin, 46px) clamp(12px, 2.4vmin, 52px);
  border-radius: clamp(10px, 1.4vmin, 32px);
  margin: 0 clamp(8px, 1.7vmin, 38px) clamp(8px, 1.7vmin, 38px);
  background: linear-gradient(135deg, rgba(79, 70, 229, .28), rgba(79, 70, 229, .08));
  border: 1px solid rgba(129, 140, 248, .35);
}
.next-card .lbl { font-size: clamp(9.5px, 1.33vmin, 30px); color: #a5b4fc; font-weight: 700; letter-spacing: .1em; }
.next-card .big { font-size: clamp(14px, 2.7vmin, 60px); font-weight: 800; color: #fff; margin: 4px 0; line-height: 1.2; }
.next-card .info {
  display: flex; gap: clamp(8px, 2.2vmin, 48px); flex-wrap: wrap;
  color: #c7d2fe; font-size: clamp(10.5px, 1.56vmin, 35px); font-family: var(--mono);
}
.next-card .callout {
  margin-top: clamp(6px, 1.3vmin, 28px);
  padding: clamp(5px, 1.1vmin, 24px) clamp(8px, 1.8vmin, 40px);
  border-radius: clamp(7px, .9vmin, 20px); font-weight: 800;
  font-size: clamp(11.5px, 1.93vmin, 43px);
  background: var(--accent); color: #422006; text-align: center;
  animation: pulse 1.6s infinite;
}
.mini-row {
  display: flex; align-items: center; gap: clamp(6px, 1.4vmin, 30px);
  padding: clamp(5px, 1.3vmin, 29px) clamp(12px, 2.2vmin, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: clamp(10.5px, 1.7vmin, 38px);
}
.mini-row .tm { font-family: var(--mono); color: #fbbf24; font-weight: 700; flex: none; }
/* 名称单行省略，避免「5-6岁组」被拆成两行；计数固定不换行 */
.mini-row .nm2 {
  color: #e2e8f0; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-row > span:last-child { flex: none; white-space: nowrap; }
.board-ticker {
  background: rgba(255, 255, 255, .05); border-radius: clamp(7px, .9vmin, 20px);
  padding: clamp(5px, 1.1vmin, 26px) clamp(12px, 2.2vmin, 48px);
  color: #93a4c0; font-size: clamp(10.5px, 1.56vmin, 35px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none;
}
.board-ticker b { color: #fbbf24; }

/* ---------- 大屏：颁奖环节 ---------- */
.board .ba-icon { margin-right: clamp(4px, 1vmin, 18px); }
.board-award {
  padding: clamp(8px, 1.6vmin, 32px) clamp(10px, 1.8vmin, 40px);
  overflow-y: auto;
}
.ba-group + .ba-group { margin-top: clamp(10px, 2.2vmin, 44px); }
.ba-group-title {
  font-size: clamp(12px, 1.9vmin, 42px); font-weight: 700; color: #fff;
  margin-bottom: clamp(6px, 1.2vmin, 24px);
  display: flex; align-items: center; gap: clamp(6px, 1.2vmin, 24px);
  flex-wrap: wrap;
}
.ba-pending { font-size: clamp(10px, 1.2vmin, 24px); color: #fbbf24; font-weight: 600; }
.ba-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(8px, 1.4vmin, 28px);
}
.ba-card {
  border-radius: clamp(10px, 1.4vmin, 30px);
  padding: clamp(10px, 2vmin, 44px) clamp(8px, 1.6vmin, 36px);
  text-align: center; color: #fff; min-width: 0;
}
.ba-card.r1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ba-card.r2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.ba-card.r3 { background: linear-gradient(135deg, #c2854f, #92400e); }
.ba-card.rn { background: linear-gradient(135deg, #475569, #334155); }
.ba-rank { font-size: clamp(11px, 1.6vmin, 34px); font-weight: 800; letter-spacing: .14em; opacity: .95; }
.ba-bib { font-family: var(--mono); font-weight: 900; font-size: clamp(24px, 4.6vmin, 104px); line-height: 1.05; }
.ba-name { font-size: clamp(13px, 2.2vmin, 48px); font-weight: 800; overflow-wrap: anywhere; }
.ba-time { font-family: var(--mono); font-size: clamp(11px, 1.7vmin, 38px); opacity: .95; margin-top: clamp(2px, .6vmin, 12px); }

/* ---------- 大屏：休息环节 ---------- */
.board-break { display: grid; place-items: center; }
.bb-main { text-align: center; color: #e2e8f0; }
.bb-emoji { font-size: clamp(48px, 14vmin, 260px); line-height: 1; }
.bb-text { font-size: clamp(20px, 4.4vmin, 96px); font-weight: 800; color: #fff; margin-top: clamp(6px, 1.4vmin, 28px); }
.bb-sub { font-size: clamp(11px, 1.7vmin, 38px); color: #93a4c0; margin-top: clamp(4px, 1vmin, 20px); }

/* 下一环节卡片：颁奖 / 休息 用暖色区分 */
.next-card.agenda {
  background: linear-gradient(135deg, rgba(245, 158, 11, .26), rgba(245, 158, 11, .07));
  border-color: rgba(251, 191, 36, .38);
}
.next-card.agenda .lbl { color: #fcd34d; }
.next-card.agenda .info { color: #fde68a; }

/* 大屏：宽屏时启用「主区 + 预告栏」双栏 */
@media (min-width: 900px) {
  .board-body { grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 700px); }
}
/* 大屏横屏（电视标准 16:9）：锁定一屏高度，不出现滚动条 */
@media (min-width: 900px) and (orientation: landscape) {
  .board { height: 100vh; height: 100dvh; }
}
/* 大屏竖屏（竖装 LED）：预告栏移到下方，按短边等比缩放 */
@media (min-width: 900px) and (orientation: portrait) {
  .board-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 颁奖 ---------- */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--sp-4); }
.podium-card {
  border-radius: 16px; padding: var(--sp-5) var(--sp-4); text-align: center; color: #fff;
  box-shadow: var(--shadow); position: relative; overflow: hidden; min-width: 0;
}
.podium-card .rk { font-size: var(--fs-md); font-weight: 800; letter-spacing: .16em; opacity: .95; }
.podium-card .bib { font-size: var(--fs-3xl); font-weight: 900; font-family: var(--mono); line-height: 1.05; margin: var(--sp-2) 0 2px; }
.podium-card .nm { font-size: var(--fs-xl); font-weight: 800; overflow-wrap: anywhere; }
.podium-card .tm { font-family: var(--mono); font-size: var(--fs-lg); margin-top: var(--sp-2); opacity: .95; }
.podium-card .club { font-size: var(--fs-xs); opacity: .85; margin-top: 2px; }
.podium-card.r1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.podium-card.r2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.podium-card.r3 { background: linear-gradient(135deg, #c2854f, #92400e); }
.podium-card.rn { background: linear-gradient(135deg, #64748b, #475569); }
.podium-card.claimed { opacity: .62; }
.podium-card .stamp {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: rgba(255, 255, 255, .9); color: #065f46;
  font-size: var(--fs-2xs); font-weight: 800; padding: 3px var(--sp-3); border-radius: 20px;
}
.podium-card .claim-btn { margin-top: var(--sp-4); }

/* ---------- A4 打印中心：官方成绩公告版式 ---------- */

/* 工具栏（深色官方风；打印时整体隐藏） */
.print-toolbar {
  background: #0f172a; color: #e2e8f0; border-bottom: 1px solid #334155;
  padding: var(--sp-3) var(--page-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
/* 左右两组各自成块且不压缩：一行放不下时整组换行，不会把按钮打散 */
.pt-group { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; flex: 0 0 auto; }
.pt-group.pt-right { justify-content: flex-end; }
.print-toolbar b { color: #fff; }
.print-toolbar .pt-badge {
  background: #059669; color: #fff; font-size: var(--fs-2xs); font-weight: 800;
  padding: 2px var(--sp-2); border-radius: 3px; letter-spacing: .02em;
}
.print-toolbar .pt-dim { color: #94a3b8; font-size: var(--fs-xs); }
.print-toolbar .select {
  background: #1e293b; color: #e2e8f0; border-color: #334155;
}
/* 下拉略收窄，好让工具栏在常见笔记本宽度下一行放得下（配合左右分组） */
.print-toolbar .select.w-xl { max-width: 230px; }
.print-toolbar .btn.ghost { color: #cbd5e1; border-color: #475569; background: transparent; }
.print-toolbar .btn.ghost:hover { background: #1e293b; }
.print-toolbar .btn.primary { background: #dc2626; border-color: #dc2626; color: #fff; }
.print-toolbar .btn.primary:hover { background: #b91c1c; border-color: #b91c1c; }

/* 「自定义」下拉菜单 */
.pt-menu { position: relative; }
.pt-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 250px; padding: 5px;
  background: #fff; color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: grid; gap: 2px;
}
.pt-menu-list[hidden] { display: none; }
.pt-mi {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: transparent; cursor: pointer;
  text-align: left; border-radius: var(--radius-sm); font: inherit; color: inherit;
}
.pt-mi:hover:not(:disabled) { background: var(--surface-2); }
.pt-mi:disabled { opacity: .45; cursor: not-allowed; }
.pt-mi .ic { flex: none; width: 18px; text-align: center; font-size: 14px; line-height: 1.4; }
.pt-mi b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.pt-mi i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }

/* Logo 选择弹窗内的预览 */
.logo-pick {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: var(--sp-4); text-align: center;
}
.logo-pick img { max-height: 96px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.logo-pick .ph { color: var(--text-3); font-size: var(--fs-sm); padding: var(--sp-4) 0; }
.logo-pick .hint { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }

/* 打印模板设置面板 */
.ps-body { display: grid; gap: var(--sp-5); }
.ps-sec { display: grid; gap: var(--sp-3); }
.ps-sec-h {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.ps-sec-h b { font-size: var(--fs-md); }
.ps-sec-h i { font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }
.ps-chks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.ps-chk { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); }
.ps-chk input { flex: none; margin-top: 2px; }
.ps-chk b { font-weight: 600; }
.ps-chk i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }
.ps-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ps-seg-btn {
  padding: 5px var(--sp-4); border: none; background: var(--surface); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--text-2);
}
.ps-seg-btn + .ps-seg-btn { border-left: 1px solid var(--border-strong); }
.ps-seg-btn.on { background: var(--primary); color: #fff; font-weight: 700; }
.ps-rows { display: grid; gap: var(--sp-2); }
.ps-row { display: flex; align-items: center; gap: var(--sp-2); }
.ps-row-2 {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2);
}
@media (max-width: 560px) { .ps-row-2 { grid-template-columns: minmax(0, 1fr); } }

/* 打印纸：盖章位（虚线圆，作为盖章位置指引） */
.pb-stamp {
  margin-top: 3mm; width: 24mm; height: 24mm; border: 1px dashed #9ca3af; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 6.5pt; color: #9ca3af; letter-spacing: .1em;
}

/* 打印纸：抬头 Logo 居中布局（Logo / 赛事名 / 徽标 纵向居中排列） */
.pb-logos.logo-center { flex-direction: column; align-items: center; gap: 2.5mm; text-align: center; }
.pb-logos.logo-center .pb-head-main { text-align: center; }

/* A4 纸张舞台（窄屏横向滚动，不压缩版式） */
.print-stage { overflow-x: auto; padding: var(--sp-5) var(--sp-3); }

/* A4 纸张：210 × 297mm */
.print-sheet {
  width: 210mm; min-height: 297mm; margin: 0 auto; padding: 10mm;
  background: #fff; color: #000;
  box-shadow: var(--shadow); border-radius: 2px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  font-size: 10pt; line-height: 1.45;
}
.print-sheet * { box-sizing: border-box; }
.print-sheet .mono { font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; }

/* ---- 抬头：Logo 区（可自定义上传）+ 赛事信息 + 官方成绩徽标 ---- */
.pb-logos {
  display: flex; align-items: center; gap: 5mm;
  border-bottom: 2px solid #000; padding-bottom: 2.5mm; margin-bottom: 3mm;
}
.pb-logo-zone { flex: 0 0 auto; display: flex; align-items: center; }
.pb-logo { max-height: 15mm; max-width: 56mm; object-fit: contain; display: block; }
/* 未上传 Logo：屏幕预览态显示可点占位，打印时自动隐藏 */
.pb-logo-empty {
  width: 36mm; height: 15mm; border: 1px dashed #9ca3af; border-radius: 1.5mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6mm;
  color: #6b7280; font-size: 7pt; cursor: pointer; background: #f9fafb;
  transition: border-color .15s, color .15s, background .15s;
}
.pb-logo-empty:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }
.pb-logo-empty .ic { font-size: 11pt; line-height: 1; }
.pb-head-main { flex: 1 1 auto; min-width: 0; }
.pb-head-main .en { font-size: 13pt; font-weight: 900; letter-spacing: .02em; line-height: 1.25; }
.pb-head-main .eo { font-size: 8.5pt; color: #374151; margin-top: .8mm; }
.pb-badge { flex: 0 0 auto; border: 2px solid #000; border-radius: 2px; padding: 1mm 2.2mm; text-align: center; line-height: 1.18; }
.pb-badge .y { font-size: 7pt; font-weight: 800; }
.pb-badge .n { font-size: 9pt; font-weight: 900; white-space: nowrap; }
.pb-badge .e { font-size: 5.5pt; letter-spacing: .03em; text-transform: uppercase; font-family: "SF Mono", Monaco, Consolas, monospace; }

/* ---- 标题区 ---- */
.pb-title { text-align: center; margin: 0 0 2.5mm; }
.pb-title h1 { font-size: 14.5pt; font-weight: 900; letter-spacing: .02em; margin: 0 0 1mm; }
.pb-title h2 { font-size: 10.5pt; font-weight: 700; margin: 0; }
.pb-banner { display: inline-block; margin-top: 2.2mm; padding: .8mm 8mm; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.pb-banner span { font-size: 12.5pt; font-weight: 900; letter-spacing: .3em; }

/* ---- 元信息栅格（2 行 × 3 列）---- */
.pb-meta {
  margin-top: 2.5mm; padding-top: 1.5mm; border-top: 1px solid #000;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2mm 4mm; font-size: 9.5pt; font-weight: 600;
}
.pb-meta .k { color: #374151; display: inline-block; min-width: 11mm; }
.pb-meta .v { font-weight: 800; color: #000; overflow-wrap: anywhere; }
.pb-meta .v.chip { background: #e5e7eb; padding: 0 1.5mm; border-radius: 1mm; }

/* ---- 成绩表 ---- */
.pb-table-wrap { margin-top: 3mm; flex: 1 1 auto; }
table.pb-table { width: 100%; border-collapse: collapse; border: 2px solid #000; font-size: 9.5pt; }
table.pb-table th, table.pb-table td {
  border-right: 1px solid #000; padding: 1.3mm 1mm; text-align: center; vertical-align: middle;
}
table.pb-table th:last-child, table.pb-table td:last-child { border-right: none; }
table.pb-table thead th { background: #f3f4f6; border-bottom: 2px solid #000; font-weight: 800; }
table.pb-table tbody tr + tr td { border-top: 1px solid #000; }
table.pb-table td.tl { text-align: left; }
table.pb-table td.hl { background: #f9fafb; font-weight: 800; }
table.pb-table td.gap { color: #4b5563; }
table.pb-table td.remark { font-size: 8pt; font-weight: 800; }
table.pb-table td.remark.gold { color: #b91c1c; }
table.pb-table td.remark.silver { color: #374151; }
table.pb-table td.remark.bronze { color: #92400e; }
table.pb-table td.remark.q { color: #b91c1c; }
table.pb-table td.remark.plain { color: #374151; font-weight: 600; }
table.pb-table td.remark.special { color: #b91c1c; }

/* 名次徽标：第 1 名实心黑圆，第 2/3 名空心圆 */
.pb-rk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5mm; height: 5mm; border-radius: 50%; font-size: 8pt; font-weight: 900; line-height: 1;
}
.pb-rk.r1 { background: #000; color: #fff; }
.pb-rk.r2, .pb-rk.r3 { border: 1px solid #000; }
.pb-rk.ro { font-weight: 800; }

/* ---- 图例 ---- */
.pb-legend {
  display: flex; justify-content: space-between; gap: 4mm;
  margin-top: 1.5mm; font-size: 7.5pt; color: #4b5563;
}

/* ---- 签字栏 ---- */
.pb-sign {
  margin-top: 8mm; padding-top: 3mm; border-top: 2px solid #000;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6mm;
}
.pb-sign .lbl { font-weight: 800; font-size: 9.5pt; margin-bottom: 9mm; }
.pb-sign .line { border-bottom: 1px solid #000; width: 75%; }
.pb-sign .hint { font-size: 7.5pt; color: #6b7280; margin-top: 1mm; }

/* ---- 页脚 ---- */
.pb-foot {
  margin-top: 5mm; padding-top: 2mm; border-top: 1px solid #9ca3af;
  display: flex; justify-content: space-between; gap: 3mm;
  font-size: 7.5pt; color: #4b5563;
  font-family: "SF Mono", Monaco, Consolas, monospace;
}

/* 打印预览容器限宽 */
.print-holder { max-width: 820px; margin: 0 auto var(--sp-5); }

/* 版心边框（预览用，帮助确认内容是否落在可打印区域内） */
.print-sheet.show-print-border { outline: 1px dashed #3b82f6; outline-offset: -1px; }

/* ============================================================
   八、手机端页面（扫码签到 / 成绩查询）
   ============================================================ */
.mobile-page {
  min-height: 100vh; min-height: 100dvh;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(800px 420px at 50% -8%, #e0e7ff, transparent 62%), var(--bg);
}
.mobile-shell { max-width: 560px; margin: 0 auto; }
.mobile-head { text-align: center; margin-bottom: var(--sp-4); }
.mobile-head .logo { font-size: clamp(30px, 9vw, 46px); }
.mobile-head h1 { font-size: var(--fs-lg); margin: var(--sp-2) 0 var(--sp-1); font-weight: 800; }
.mobile-head p { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }

.bib-chip {
  display: inline-grid; place-items: center;
  min-width: clamp(46px, 12vw, 62px); height: clamp(30px, 8vw, 42px);
  padding: 0 var(--sp-3); border-radius: 10px;
  background: var(--primary-50); color: var(--primary-700);
  font-family: var(--mono); font-weight: 800; font-size: var(--fs-md);
  white-space: nowrap;
}
.bib-chip.lg { min-width: clamp(62px, 16vw, 86px); height: clamp(42px, 11vw, 56px); font-size: var(--fs-xl); }

.entry-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); margin-bottom: var(--sp-2); min-width: 0;
}
.entry-card .info { flex: 1 1 auto; min-width: 0; }
.entry-card .pj { font-weight: 700; font-size: var(--fs-md); }
.entry-card .gp { color: var(--text-3); font-size: var(--fs-xs); }

.status-line { display: flex; gap: 0; margin: var(--sp-4) 0; }
.status-step {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-size: var(--fs-2xs); color: var(--text-3);
  overflow-wrap: anywhere;
}
.status-step::before {
  content: ''; display: block; height: 3px; background: var(--border); margin-bottom: var(--sp-2);
}
.status-step.done { color: var(--success); font-weight: 700; }
.status-step.done::before { background: var(--success); }
.status-step.cur { color: var(--primary); font-weight: 700; }
.status-step.cur::before { background: var(--primary); }

.sched-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); cursor: pointer;
  min-height: var(--touch-min); min-width: 0;
}
.sched-item:hover { background: var(--surface-2); }
.sched-item.active { background: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary); }
.sched-item .tm { font-family: var(--mono); font-weight: 700; color: var(--text-2); width: 3.2em; flex: none; }
.sched-item .info { flex: 1 1 auto; min-width: 0; }
.sched-item .pj { font-weight: 700; font-size: var(--fs-sm); }
.sched-item .gp { font-size: var(--fs-xs); color: var(--text-3); }
.sched-item .st { flex: none; }
/* 「现在该录」标记：当前选中的组优先显示 active 样式 */
.sched-item.now:not(.active) { background: var(--info-50); box-shadow: inset 3px 0 0 var(--info); }
.sched-item.done { opacity: .62; }

/* ============================================================
   成绩录入 · 赛程流程导航
   ------------------------------------------------------------
   顶部赛程提示条说明「现在该录哪一组」及其在当天流程中的位置；
   左侧改为带进度与状态标记的当天流程，替代原来的组别清单。
   ============================================================ */

.race-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--info-50); border: 1px solid #bae6fd;
  border-radius: var(--radius); margin-bottom: var(--sp-4);
}
.race-bar.warn { background: var(--accent-50); border-color: #fde68a; }
.race-bar .rb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex: none; }
.race-bar.warn .rb-dot { background: var(--accent); }
.race-bar .rb-label { font-size: var(--fs-xs); font-weight: 700; color: #075985; flex: none; }
.race-bar.warn .rb-label { color: #92400e; }
.race-bar .rb-name { font-size: var(--fs-md); font-weight: 700; color: #0c4a6e; overflow-wrap: anywhere; }
.race-bar.warn .rb-name { color: #78350f; }
.race-bar .rb-meta { font-size: var(--fs-xs); color: #0369a1; }
.race-bar.warn .rb-meta { color: #a16207; }
.race-bar .rb-acts { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.flow-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
}
.flow-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.flow-head .sub { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }

.sched-meta {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-2);
}
.sched-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.sched-meta .meta-hi { color: var(--primary-700); font-weight: 700; }
.sched-meta .meta-warn { color: #b45309; }

.flow-next {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--success-50); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: #065f46;
}
.flow-next.done { background: var(--surface-2); color: var(--text-2); }
.flow-next b { color: #064e3b; }

/* ---- 决赛录入：与预赛在视觉上完全分开 ---- */
.race-bar.final-mode { background: #f5f3ff; border-color: #c4b5fd; }
.race-bar.final-mode .rb-dot { background: var(--purple); }
.race-bar.final-mode .rb-label { color: #5b21b6; }
.race-bar.final-mode .rb-name { color: #4c1d95; }
.race-bar.final-mode .rb-meta { color: #6d28d9; }
.race-bar.final-mode.warn { background: var(--accent-50); border-color: #fde68a; }
.race-bar.final-mode.warn .rb-dot { background: var(--accent); }
.race-bar.final-mode.warn .rb-label { color: #92400e; }
.race-bar.final-mode.warn .rb-name { color: #78350f; }
.race-bar.final-mode.warn .rb-meta { color: #a16207; }

/* 提示条内的实时状态徽标（核对「现在进行的是哪一组」） */
.race-bar .rb-state {
  flex: none; font-size: var(--fs-2xs); font-weight: 700;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--success); color: #fff; white-space: nowrap;
}

/* 左栏决赛条目：类型徽标与名称同排 */
.sched-item.final-item .pj { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sched-item .pj .tag { flex: none; }

/* 决赛关联多个组别时的组别切换 */
.ref-switch {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: #faf9ff;
}
.ref-switch .rs-label { font-size: var(--fs-xs); color: var(--text-3); }

@media (max-width: 768px) {
  .race-bar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .race-bar .rb-acts { margin-left: 0; width: 100%; }
  .sched-meta { gap: var(--sp-1) var(--sp-3); }
  /* 窄屏：录入表格优先，当天流程后置（顶部提示条已提供前后组切换） */
  .referee-layout > .card { order: 2; }
  .referee-layout > div:last-child { order: 1; }
}

.picker-list { max-height: min(320px, 45vh); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.picker-item {
  padding: var(--sp-3); border-bottom: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch-min);
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: var(--surface-2); }
.picker-item.sel { background: var(--primary-50); }

/* ============================================================
   九、自适应媒体查询
   ------------------------------------------------------------
   断点定义（与实现保持一致）：
     ≤ 380px   超小屏手机（iPhone SE / 折叠屏外屏）
     ≤ 560px   手机竖屏
     ≤ 768px   手机横屏 / 小平板
     ≤ 1024px  平板竖屏 —— 侧栏转为抽屉
     ≤ 1280px  平板横屏 / 小笔记本
     ≥ 1920px  电视 / FHD 大屏
     ≥ 2560px  4K 大屏
   ============================================================ */

/* ---------- ≤1280px：平板横屏 / 小笔记本 ---------- */
@media (max-width: 1280px) {
  .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
}

/* ---------- ≤1024px：平板竖屏，侧栏转抽屉 ---------- */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: 0; top: 0;
    height: 100vh; height: 100dvh;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-lg);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { flex-wrap: nowrap; }
}

/* ---------- ≤768px：手机横屏 / 小平板 ---------- */
@media (max-width: 768px) {
  /* 统计块保持双列（信息密度），其余多列网格降为单列 */
  .grid.c2, .grid.c3 { grid-template-columns: minmax(0, 1fr); }
  .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); }
  .card-head { padding: var(--sp-3); }
  .card-body { padding: var(--sp-3); }
  /* 顶栏精简：标题优先，次要信息收起 */
  .topbar { gap: var(--sp-2); }
  .topbar h1 { flex: 0 1 auto; min-width: 0; font-size: var(--fs-base); }
  .live-dot span { display: none; }
  .live-dot { padding: var(--sp-1); }
  .who .avatar, .who .role { display: none; }
  /* 赛事切换移入侧栏抽屉（见 .sidebar-event） */
  #event-picker { display: none; }
  .sidebar-event { display: block; }
  /* 弹窗改为底部抽屉式，避免超出视口 */
  .modal-host { padding: 0; }
  .modal {
    margin: auto 0 0;              /* 顶部 auto 撑开 → 紧贴底部 */
    width: 100%; max-width: none;
    max-height: 92vh; max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-body { padding: var(--sp-4); }
  .modal-head, .modal-foot { padding-inline: var(--sp-4); }
  .modal-foot .btn { flex: 1 1 auto; }
  /* Toast 全宽 */
  .toast-host { left: var(--sp-4); right: var(--sp-4); max-width: none; }
  .toast { justify-content: flex-start; }
  /* 表格更紧凑 */
  table.tbl th, table.tbl td { padding: var(--sp-2); }
  /* 打印工具栏横向滚动而非换行挤压（左右两组各自不换行，整体可横滑） */
  .print-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .pt-group { flex-wrap: nowrap; flex: none; }
}

/* ---------- ≤560px：手机竖屏 ---------- */
@media (max-width: 560px) {
  .stat .v { font-size: var(--fs-xl); }
  .card-head { gap: var(--sp-2); }
  .card-head h2 { font-size: var(--fs-base); }
  .row { gap: var(--sp-2); }
  .btn { padding: var(--sp-2) var(--sp-3); }
  /* 登录页在手机上更紧凑 */
  .login-card { padding: var(--sp-5) var(--sp-4); }
  .quick-users .q { font-size: var(--fs-2xs); }
  /* 状态链文字竖排更省空间 */
  .status-line { flex-wrap: wrap; }
  .status-step { flex: 1 1 30%; margin-bottom: var(--sp-2); }
}

/* ---------- ≤380px：超小屏 ---------- */
@media (max-width: 380px) {
  .stat .v { font-size: var(--fs-lg); }
  .tag { padding: 2px var(--sp-2); }
  .btn.sm { padding: var(--sp-1) var(--sp-2); }
  .bib-chip { min-width: 42px; height: 28px; font-size: var(--fs-sm); }
}

/* ---------- 手机横屏（矮视口）：压缩纵向空间 ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .login-wrap { align-items: start; padding-top: var(--sp-4); }
  .login-card .brand { margin-bottom: var(--sp-3); }
  .login-card .brand .logo { font-size: 30px; }
  .sidebar { height: 100dvh; }
  .boot-logo { font-size: 34px; }
  /* 矮视口：收紧弹窗留白，靠 auto margin 自然顶部对齐并允许滚动 */
  .modal-host { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .modal { max-height: 94vh; max-height: 94dvh; }
  .mobile-head { margin-bottom: var(--sp-2); }
}

/* ---------- 触控设备：放大可点击区域（现场误触防护） ---------- */
@media (pointer: coarse) {
  .btn { min-height: var(--touch-min); }
  .btn.sm { min-height: 38px; }
  .nav-item { min-height: var(--touch-min); }
  .sched-item { min-height: 52px; }
  .picker-item { min-height: 52px; }
  .quick-users .q { min-height: 34px; display: inline-flex; align-items: center; }
  .score-input { min-height: var(--touch-min); }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}

/* ---------- 大屏（电视）阅读优化 ---------- */
@media (min-width: 1920px) {
  .card { border-radius: 14px; }
}
@media (min-width: 2560px) {
  .content { padding-inline: max(var(--page-pad), calc((100% - var(--content-max)) / 2)); }
}

/* ---------- 无障碍：尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 无障碍：键盘聚焦可见 ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn:focus-visible, .nav-item:focus-visible, .input:focus-visible, .select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 跳转到主内容（键盘/读屏用户） */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 999;
  background: var(--primary); color: #fff;
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700; font-size: var(--fs-sm);
  transition: top .16s ease;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 侧栏遮罩（抽屉模式） ---------- */
.sidebar-mask {
  display: none; position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45); z-index: 39;
  opacity: 0; transition: opacity .24s ease;
}
.sidebar-mask.show { display: block; opacity: 1; }

/* ============================================================
   十、赛程时间线（/admin/schedule）
   ------------------------------------------------------------
   设计目标：把「当天流程」按时间轴纵向展开，竞赛 / 决赛 /
   颁奖 / 休息四类环节各自成条、各自着色；顶部一行汇总流程
   健康度，一眼看出哪个环节卡住、卡在哪一步。
   ============================================================ */

/* ---- 顶部汇总条（保持一行，窄屏自动换行） ---- */
.tl-toolbar {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tl-count { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.tl-count b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  font-size: var(--fs-xs); font-family: inherit; cursor: pointer;
  min-height: var(--ctl-h-sm); white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.tl-chip:hover { border-color: var(--text-3); }
.tl-chip .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.tl-chip.on { background: var(--primary-50); border-color: var(--primary); color: var(--primary-700); }
.tl-chip.todo .n { color: #b45309; }
.tl-chip.bad .n { color: var(--danger); }
.tl-chip.todo.on { background: var(--accent-50); border-color: var(--accent); color: #92400e; }
.tl-chip.bad.on { background: var(--danger-50); border-color: var(--danger); color: var(--danger); }
.tl-search { flex: 1 1 150px; max-width: 250px; min-width: 120px; }
.tl-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- 时间轴 ---- */
.timeline { padding: var(--sp-4); }
.tl-item {
  --tl-time-w: clamp(50px, 5.2vw, 82px);
  display: grid;
  grid-template-columns: var(--tl-time-w) 1px minmax(0, 1fr);
  column-gap: var(--sp-3);
}
.tl-time {
  text-align: right; padding-top: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.tl-time small { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--danger); }
.tl-axis { position: relative; background: var(--border-strong); }
.tl-axis::after {
  content: ''; position: absolute; left: -4px; top: calc(var(--sp-3) + 5px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--k, var(--text-3));
  box-shadow: 0 0 0 3px var(--surface);
}
.tl-body { padding-bottom: var(--sp-3); min-width: 0; }

/* ---- 环节卡片 ---- */
.tl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--k, var(--border-strong));
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color .15s, box-shadow .15s;
}
.tl-card:hover { border-color: var(--border-strong); border-left-color: var(--k); box-shadow: var(--shadow-xs); }
.tl-card.is-bad { background: #fffafa; border-color: #fecaca; border-left-color: var(--danger); }
.tl-card.is-done { opacity: .84; }

/* 四类环节配色（同时供顶部添加面板复用） */
.k-comp  { --k: var(--info);   --k-bg: var(--info-50);   --k-fg: #075985; }
.k-final { --k: var(--purple); --k-bg: #f5f3ff;          --k-fg: #5b21b6; }
.k-award { --k: var(--accent); --k-bg: var(--accent-50); --k-fg: #b45309; }
.k-break { --k: #94a3b8;       --k-bg: var(--surface-3); --k-fg: var(--text-2); }

.tl-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tl-kind {
  flex: none; font-size: var(--fs-2xs); font-weight: 700;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--k-bg); color: var(--k-fg); white-space: nowrap;
}
.tl-title { font-size: var(--fs-base); font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.tl-acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tl-sub { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.tl-sub.is-bad { color: var(--danger); }

/* ---- 健康度徽标 ---- */
.hb {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
}
.hb.todo { background: var(--accent-50); color: #b45309; border: 1px solid #fde68a; }
.hb.bad  { background: var(--danger-50); color: var(--danger); border: 1px solid #fecaca; }

/* 可点击的状态标签 */
.st-chip { cursor: pointer; user-select: none; }
.st-chip:hover { filter: brightness(.95); }
.st-chip::after { content: '\25BE'; margin-left: 4px; opacity: .5; font-size: .85em; }

/* ---- 添加环节面板 ---- */
.add-list { display: grid; gap: var(--sp-2); }
.add-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--sp-3); align-items: center; text-align: left;
  padding: var(--sp-3); border: 1px solid var(--border);
  border-left: 3px solid var(--k, var(--border-strong));
  border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; font-family: inherit; width: 100%;
}
.add-item:hover { border-color: var(--border-strong); border-left-color: var(--k); background: var(--surface-2); }
.add-t { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.add-d { grid-column: 2; font-size: var(--fs-xs); color: var(--text-3); }

/* ---- 空状态 ---- */
.tl-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-3); }

/* ---- 更多操作 / 筛选面板（复用弹窗内的纵向按钮列表） ---- */
.more-list { display: grid; gap: var(--sp-2); }
.more-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left; font-family: inherit;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-sm); cursor: pointer;
  min-height: var(--ctl-h-lg);
}
.more-item:hover { background: var(--surface-2); border-color: var(--border-strong); }
.more-item.on { background: var(--primary-50); border-color: var(--primary); }
.more-item .spacer { flex: 1 1 auto; }

/* 工具栏作为卡片首行时补齐圆角 */
.card > .tl-toolbar:first-child { border-radius: var(--radius) var(--radius) 0 0; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .tl-tools { margin-left: 0; }
}
@media (max-width: 768px) {
  .tl-item { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .tl-time { text-align: left; padding: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--text-2); }
  .tl-time small { display: inline; margin-left: var(--sp-2); }
  .tl-axis { display: none; }
  .tl-card { padding: var(--sp-3); }
  .tl-acts { width: 100%; margin-left: 0; }
  .timeline { padding: var(--sp-3) var(--sp-2); }
  .tl-search { max-width: none; flex: 1 1 100%; order: 9; }
}
@media (max-width: 560px) {
  .tl-toolbar { padding: var(--sp-2) var(--sp-3); }
  .tl-title { font-size: var(--fs-sm); }
}

/* ============================================================
   十一、打印输出
   ============================================================ */
@media print {
  .tl-toolbar, .tl-axis, .tl-acts, .tl-time small { display: none !important; }
  .tl-item { grid-template-columns: 1fr; }
  .tl-card { break-inside: avoid; page-break-inside: avoid; border-left-width: 3px; }
  html, body { background: #fff !important; color: #000 !important; }
  .sidebar, .topbar, .print-toolbar, .toast-host, .modal-host,
  .sidebar-mask, .no-print { display: none !important; }
  .content { padding: 0 !important; }
  .shell { display: block; }
  /* A4 纸张铺满页面：由 @page 控制边距，纸张自身不再留白与投影 */
  .print-stage { overflow: visible !important; padding: 0 !important; }
  .print-sheet {
    box-shadow: none; margin: 0; width: 100%;
    /* 撑满一页可打印高度（297 − 8 − 10 = 279mm），
       让签字栏落在页面底部（官方公告惯例）；内容超长时自然翻页 */
    min-height: 277mm;
    padding: 0; border-radius: 0;
    /* 保留底色与边框（名次徽标、表头灰底、最好成绩高亮） */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-holder { max-width: none; margin: 0; }
  /* 避免表格行与签字栏被跨页截断 */
  table.pb-table tr, table.pb-table thead { break-inside: avoid; page-break-inside: avoid; }
  table.pb-table thead { display: table-header-group; }
  .pb-sign, .pb-foot, .pb-logos, .pb-title { break-inside: avoid; page-break-inside: avoid; }
  .print-sheet.show-print-border { outline: none; }
  /* 未上传 Logo 时的上传占位只是屏幕预览辅助，不进入打印 */
  .pb-logo-empty { display: none !important; }
  @page { size: A4 portrait; margin: 8mm 10mm 10mm 10mm; }
}

/* ============================================================
 * 「项目与组别」页 —— 配置总览矩阵 / 批量创建 / 列表微调
 *
 * 矩阵是这个页面的核心：两栏列表只能看到「有哪些项目 / 有哪些组别」，
 * 矩阵才能看出「谁用了谁」「哪个组合有报名却没排赛程」。
 * ============================================================ */

/* 危险操作：ghost 风格但用危险色，与「编辑」在视觉上分开，减少误点 */
.btn.ghost.danger { color: var(--danger); }
.btn.ghost.danger:hover:not(:disabled) { background: var(--danger-50); border-color: var(--danger); }

/* ---- 列表：名称列（含 ↑↓）---- */
.pg-name { flex-wrap: nowrap; align-items: center; gap: var(--sp-2); }
.pg-move { display: flex; gap: 2px; flex: 0 0 auto; }
.pg-move .btn { padding: 1px 6px; line-height: 1.3; }
.pg-name-text { min-width: 0; }
.pg-name-text b { overflow-wrap: anywhere; }
.pg-sub { font-size: var(--fs-xs); color: var(--text-3); }

/* ---- 使用情况：辅助信息，紧凑且不抢宽度 ---- */
.pg-usage { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.pg-usage.none { color: #b45309; }

.pg-form-hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); line-height: 1.6; }

/* ---- 配置总览矩阵 ---- */
.pg-matrix-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
table.pg-matrix {
  border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); width: 100%;
}
table.pg-matrix th, table.pg-matrix td {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 6px 8px; text-align: center; white-space: nowrap;
}
table.pg-matrix tr > *:last-child { border-right: none; }
table.pg-matrix tbody tr:last-child > *, table.pg-matrix tfoot tr:last-child > * { border-bottom: none; }
table.pg-matrix thead th { background: var(--surface-2); font-weight: 600; color: var(--text-2); }
/* 首列固定：组别多到需要横向滚动时，仍能看到是哪一行 */
table.pg-matrix th.corner,
table.pg-matrix th.row-head { position: sticky; left: 0; text-align: left; }
table.pg-matrix th.corner { z-index: 2; color: var(--text-3); font-weight: 500; background: var(--surface-2); }
table.pg-matrix th.row-head { z-index: 1; font-weight: 600; background: var(--surface); min-width: 92px; }
table.pg-matrix td.cell { color: var(--text-3); font-variant-numeric: tabular-nums; }
table.pg-matrix td.cell.on { background: rgba(34, 197, 94, .14); color: #15803d; font-weight: 700; }
table.pg-matrix td.cell.warn { background: rgba(245, 158, 11, .2); color: #b45309; font-weight: 700; }
/* 「覆盖」汇总列固定窄宽，否则 auto 布局会把剩余空间全给它、数据列被压扁 */
table.pg-matrix th.sum, table.pg-matrix td.sum { width: 58px; color: var(--text-2); font-variant-numeric: tabular-nums; }
table.pg-matrix thead th:not(.corner):not(.sum) { min-width: 60px; }
table.pg-matrix tfoot th { background: var(--surface-2); font-weight: 500; color: var(--text-2); }
table.pg-matrix tfoot th.unused { color: #b45309; }
.pg-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-2);
}
.pg-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.pg-legend .sw {
  width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid var(--border-strong); display: inline-block; flex: none;
}
.pg-legend .sw.on { background: rgba(34, 197, 94, .35); border-color: #15803d; }
.pg-legend .sw.warn { background: rgba(245, 158, 11, .45); border-color: #b45309; }
.pg-legend .sw.none { background: var(--surface-2); }

/* ---- 批量创建组别 ---- */
.pg-batch-input { min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.6; }
.pg-batch-box { margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pg-batch-title {
  background: var(--surface-2); padding: 7px var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-2); font-weight: 600;
}
.pg-batch-preview { max-height: 210px; overflow-y: auto; }
.pg-batch-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); border-top: 1px solid var(--border); }
.pg-batch-item:first-child { border-top: none; }
.pg-batch-item.exists { opacity: .55; }
.pg-batch-item .sub { font-size: var(--fs-xs); color: var(--text-3); }
.pg-batch-hint { padding: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); }

/* 窄屏：矩阵压缩留白，让更多组别列能露出来 */
@media (max-width: 700px) {
  table.pg-matrix { font-size: var(--fs-xs); }
  table.pg-matrix th, table.pg-matrix td { padding: 5px 6px; }
  table.pg-matrix th.row-head { min-width: 78px; }
  table.pg-matrix th.corner { font-size: 10px; }
}

/* ============================================================
 * 「赛制管理」页 —— Apple 风格（macOS「系统设置」的设计语言）
 *
 * 全部样式限定在 .fmt-page 内，不改动其它页面。
 * 取向（按 antislop 的剂量上限自我约束，别把「苹果风」做成
 * 「到处毛玻璃 + 全胶囊 + 大阴影」）：
 *   · 一个强调色（系统蓝 #0071e3）+ 灰阶；不做蓝紫渐变
 *   · 圆角成体系：卡片 16 / 控件 10 / 标签 6（不把一切都做成胶囊）
 *   · 毛玻璃只用一处（底部操作栏），其余靠留白与 0.5px 细线分层
 *   · 阴影只表达层级：卡片一层极轻，控件不做悬浮感
 * ============================================================ */

.fmt-page {
  --ap-blue: #0071e3;
  --ap-blue-hover: #0077ed;
  --ap-blue-ring: rgba(0, 113, 227, .18);
  --ap-gray: #f5f5f7;
  --ap-sep: rgba(0, 0, 0, .09);
  --ap-text: #1d1d1f;
  --ap-text-2: #6e6e73;
  --ap-text-3: #86868b;
  --ap-orange: #ff9500;
  --ap-r-card: 16px;
  --ap-r-ctl: 10px;
  --ap-ease: cubic-bezier(.4, 0, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
}

/* ---- 卡片：白底大圆角，靠极轻阴影离地 ---- */
.fmt-page .card {
  background: #fff;
  border: none;
  border-radius: var(--ap-r-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -10px rgba(0, 0, 0, .1);
  overflow: hidden;
}
.fmt-page .card-head { padding: 20px 22px 12px; border-bottom: none; align-items: baseline; }
.fmt-page .card-head h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.015em; color: var(--ap-text); }
.fmt-page .card-head .sub { font-size: var(--fs-sm); font-weight: 400; color: var(--ap-text-3); }
.fmt-page .fmt-body { padding: 0 22px 20px; }

/* ---- 选项行：macOS 分组列表（整行可点 + 右侧系统蓝勾） ---- */
.fmt-options { display: flex; flex-direction: column; }
.fmt-opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; cursor: pointer;
  border-top: .5px solid var(--ap-sep);
  transition: background .18s var(--ap-ease);
}
.fmt-opt:first-child { border-top: none; }
.fmt-opt:hover { background: rgba(0, 0, 0, .022); }
.fmt-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.fmt-opt-text { flex: 1; min-width: 0; }
.fmt-opt-text b { display: block; font-size: var(--fs-md); font-weight: 500; color: var(--ap-text); }
.fmt-opt-hint { font-size: var(--fs-sm); color: var(--ap-text-3); margin-top: 2px; line-height: 1.45; }
/* 勾用两条边框旋转画出来：颜色跟随 currentColor，不引入任何图标依赖 */
.fmt-opt-check {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  color: transparent; background: transparent;
  transition: background .18s var(--ap-ease), color .18s var(--ap-ease);
}
.fmt-opt-check::after {
  content: ''; width: 5px; height: 9px; margin-top: -2px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fmt-opt.on .fmt-opt-check { background: var(--ap-blue); color: #fff; }
.fmt-opt:focus-within { background: rgba(0, 113, 227, .06); }

/* ---- 条件区：当前模式用不到时整块隐藏（JS 切 display，不重建 DOM 以免丢焦点） ---- */
.fmt-cond:not(:empty) { margin-top: 14px; }
.fmt-cond + .fmt-cond:not(:empty) { margin-top: 18px; }
.fmt-group-title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ap-text-3);
  margin-bottom: 8px; padding-bottom: 0; border-bottom: none;
}

/* ---- 表单字段 ---- */
.fmt-page .field label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ap-text-2); margin-bottom: 7px; }
.fmt-page .input {
  background: var(--ap-gray); border: 1px solid transparent;
  border-radius: var(--ap-r-ctl); padding: 11px 14px;
  font-size: var(--fs-md); color: var(--ap-text); font-variant-numeric: tabular-nums;
  transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease), box-shadow .18s var(--ap-ease);
}
.fmt-page .input:hover { background: #efeff2; }
.fmt-page .input:focus {
  background: #fff; border-color: var(--ap-blue);
  box-shadow: 0 0 0 3.5px var(--ap-blue-ring); outline: none;
}
.fmt-page .hint { font-size: var(--fs-xs); color: var(--ap-text-3); margin-top: 5px; }

/* ---- 说明块 ---- */
.fmt-page .fmt-note {
  margin-top: 16px; padding: 12px 15px;
  background: var(--ap-gray); border-radius: var(--ap-r-ctl);
  font-size: var(--fs-sm); color: var(--ap-text-2); line-height: 1.55;
}

/* ---- 顶部说明条 ---- */
.fmt-page .notice.info {
  background: rgba(0, 113, 227, .07); border: none;
  border-radius: var(--ap-r-ctl); padding: 13px 16px;
  color: var(--ap-text-2); font-size: var(--fs-base); line-height: 1.6;
}
.fmt-page .notice.info .ic { color: var(--ap-blue); }
.fmt-page .fmt-intro { margin-bottom: 16px; }

/* ---- 按钮 ---- */
.fmt-page .btn {
  border: none; border-radius: var(--ap-r-ctl);
  font-size: var(--fs-md); font-weight: 500; padding: 10px 20px; box-shadow: none;
  transition: background .18s var(--ap-ease), transform .12s var(--ap-ease);
}
.fmt-page .btn.primary { background: var(--ap-blue); color: #fff; }
.fmt-page .btn.primary:hover:not(:disabled) { background: var(--ap-blue-hover); }
.fmt-page .btn.primary:active:not(:disabled) { transform: scale(.975); }
.fmt-page .btn.primary:disabled { background: #dcdce1; color: #fff; opacity: 1; cursor: default; }
.fmt-page .btn.ghost { background: transparent; color: var(--ap-blue); }
.fmt-page .btn.ghost:hover:not(:disabled) { background: rgba(0, 113, 227, .08); }

/* ---- 底部操作栏：本页唯一一处毛玻璃 ---- */
.fmt-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding: 15px 20px;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: .5px solid var(--ap-sep);
  border-radius: var(--ap-r-card);
}
.fmt-dirty { font-size: var(--fs-sm); color: var(--ap-text-3); }
.fmt-dirty.on { color: var(--ap-orange); font-weight: 500; }

/* ---- 试算预览表 ---- */
.fmt-page .fmt-preview-card { margin-top: 16px; }
.fmt-page table.tbl { border-collapse: separate; border-spacing: 0; }
.fmt-page table.tbl thead th {
  background: transparent; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ap-text-3); text-transform: none; letter-spacing: 0;
  padding: 10px 14px; border-bottom: .5px solid var(--ap-sep);
}
.fmt-page table.tbl tbody td {
  padding: 13px 14px; font-size: var(--fs-md); color: var(--ap-text);
  border-bottom: .5px solid var(--ap-sep);
}
.fmt-page table.tbl tbody tr:last-child td { border-bottom: none; }
.fmt-page table.tbl tbody tr:hover { background: rgba(0, 0, 0, .018); }
/* 人数列固定窄宽：否则 auto 布局把空隙全撑在这一列，标签被推到很右边 */
.fmt-page table.tbl th:first-child,
.fmt-page table.tbl td:first-child { width: 110px; }
.fmt-page .tag {
  border: none; border-radius: 6px; padding: 2px 7px;
  font-size: var(--fs-xs); font-weight: 500;
  background: var(--ap-gray); color: var(--ap-text-2);
}
.fmt-page .tag.success { background: rgba(0, 113, 227, .12); color: var(--ap-blue); }

/* 两栏卡片：固定两栏（.grid.c2 是 auto-fit，宽屏下会挤成 3~4 列，
   卡片过窄会让「预赛轮数 / 决赛轮数」这类字段被迫纵向堆叠）。
   注意特异性：.grid.c2 是两个类，这里必须用 .fmt-page .fmt-grid 才盖得住。 */
.fmt-page .fmt-grid { gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 900px) { .fmt-page .fmt-grid { grid-template-columns: 1fr; } }
.fmt-page .fmt-grid > .card { min-width: 0; }

/* 卡片内的字段两列：默认 .grid.c2 的 minmax(280px) 在卡片里只放得下一列，
   于是「预赛轮数 / 决赛轮数」「晋级人数下限 / 上限」被迫各占一行 */
.fmt-page .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .fmt-page .grid.c2 { grid-template-columns: 1fr; } }