/* ============================================================
   队伍管理网站 · 基础样式
   规范见 docs/03-页面结构与信息架构.md §4：
     纯白底 / 1px 发丝分隔 / 无阴影 / 12px 圆角 / 绿色仅作点缀 / tabular-nums
   ============================================================ */

:root {
  --t1: #111111;
  --t2: #666666;
  --t3: #999999;
  --line: #F0F0F0;
  --line-strong: #E5E5E5;
  --accent: #2EBE6E;
  --accent-text: #17A45B;
  --accent-soft: #E9FBF0;
  --fill: #F5F5F5;
  --danger: #D94A4A;
  --danger-soft: #FDF0F0;
  --radius: 12px;
  --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #fff;
  color: var(--t1);
  font-size: 15px;
  line-height: 1.7;
}
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- 导航 ---------- */
nav { border-bottom: 1px solid var(--line); background: #fff; }
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand-logo {
  width: 28px; height: 28px; border-radius: 8px; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--t2); overflow: hidden;
  flex-shrink: 0;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
/* 队名可以很长（「湖南农业大学飞盘校队」），顶栏挤的时候让它先截断，
   而不是把右边的按钮顶出屏幕。overflow:hidden 顺带把 min-width 变成 0，
   否则 flex 项的默认 min-width:auto 会拒绝收缩。 */
.brand-name {
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-links { display: flex; gap: 28px; margin-left: auto; flex-shrink: 0; }
/* nowrap 是必要的：不加的话，放不下时 flex 会把每个链接压窄，
   中文没有空格可断，就变成一个字一行（实测 753px 就是这样）。 */
.nav-links a {
  font-size: 14px; color: var(--t2); text-decoration: none;
  padding: 4px 0; white-space: nowrap;
}
.nav-links a.active { color: var(--t1); font-weight: 500; }
/* 注意：靠右由 .nav-links 的 margin-left:auto 负责。这里不能再写 auto，
   否则两个 auto 会平分剩余空间，导航项被推到中间去。 */
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: 28px; }
/* 这一页没有队伍公开导航时要换个「靠右」机制：
   原本是靠 .nav-links 的 margin-left:auto 把 .nav-right 顶到最右；
   管理台页不渲染 .nav-links 之后，那排按钮会紧贴品牌名 —— 改由它自己顶。
   （窄屏那一档本来就写了 .nav-right{margin-left:auto}，所以这里只管宽屏。） */
.nav-nolinks .nav-right { margin-left: auto; }
.nav-right .who { font-size: 13px; color: var(--t2); }
.nav-btn {
  font-size: 13px; color: var(--t1); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 16px; background: none; cursor: pointer; font-family: inherit;
}
.nav-btn:hover { border-color: var(--t3); }
.nav-link-btn {
  font-size: 13px; color: var(--t3); background: none; border: 0;
  cursor: pointer; font-family: inherit; padding: 4px 0;
}

/* ---------- 队伍页：导航项移到左侧，做成悬浮竖排 ----------
   起因：队伍页有 8 个导航项（主页/队员/荣誉/队史/精神分/背号/赛季/加入我们），
   全挤在顶栏，左边是品牌名右边是用户菜单 —— 最挤的偏偏是中间这一排。
   而宽屏下内容区（1080px 居中）左侧本来就空着一大片，把它挪进去，顶栏立刻松开。

   排列：项与项从上往下堆，每项文字本身仍是横排（左→右）。
   位置：fixed 悬浮 —— 滚动时一直跟在手边，且**不贴屏幕边**，留出呼吸。

   为什么有 1360px 门槛：侧栏要贴在内容区左边（间隔 44px）且不压到内容，
   需要屏幕 ≥ 1080 + 2×(96 侧栏 + 44 间隔 + 20 边距) = 1360。
   更窄的屏没有这块空白可用，硬塞会把内容挤扁 —— 所以退回顶部横排。 */
@media (min-width: 1360px) {
  .nav-side .nav-links {
    position: fixed;
    top: 92px;
    /* 贴着内容区左边缘再往左 140px（= 96 宽度 + 44 间隔）；屏幕再窄也别小于 20px */
    left: max(20px, calc((100vw - 1080px) / 2 - 140px));
    width: 96px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    z-index: 20;
  }
  .nav-side .nav-links a {
    font-size: 13px; padding: 8px 10px; border-radius: var(--radius-sm);
  }
  .nav-side .nav-links a:hover { background: var(--fill); color: var(--t1); }
  .nav-side .nav-links a.active { background: var(--fill); color: var(--t1); font-weight: 500; }
  /* 最后一项是「加入我们」—— 它是「行动」，前面几项是「浏览」，用一条发丝线分开 */
  .nav-side .nav-links a:last-child {
    margin-top: 9px; border-top: 1px solid var(--line);
    padding-top: 13px; border-radius: var(--radius-sm);
  }
  /* 导航项脱离文档流后，顶栏靠右改由 nav-right 自己顶
     （原来是靠 .nav-links 的 margin-left:auto 把它推到右边的） */
  .nav-side .nav-right { margin-left: auto; }
}

/* ---------- 顶栏放不下时的折行（1200px 以下） ----------
   一行装得下 8 项需要约 1030px，而内容区到 1080px 就封顶了。
   所以「侧栏用不上、一行又装不下」的区间是真实存在的：
   753px 这种平板竖屏宽度，顶栏一样塞不进 8 项。
   这里的处理不是藏起来，而是折到第二行 —— 放不下就横向滑动。

   ⚠️ 为什么断点是 1200 而不是 720：
      原来只在 720 以下才处理，于是 720~1200 之间既没有侧栏、
      也没折行，导航被 flex 压窄，中文逐字换行成竖排。 */
@media (max-width: 1200px) {
  .nav-inner { height: auto; flex-wrap: wrap; gap: 0; }
  .brand, .nav-right { height: 52px; }
  .nav-right { margin-left: auto; }
  .nav-links {
    order: 9;                     /* 排到第一行（品牌 + 按钮）之后 */
    width: 100%;
    /* ★ 这两条缺一不可，否则下面的 overflow-x 形同虚设 ——
       .nav-links 是 flex item，默认 min-width:auto（不肯收缩到内容以下），
       而基础样式又写了 flex-shrink:0。两条叠加的结果：它被 8 个不换行的
       链接撑到 449px，自己顶出 390px 的视口（页面级横向溢出），
       而它**内部**永远不溢出 → overflow-x:auto 一次都没产生过滚动。
       实测（390px）：sw=449 cw=449 maxScroll=0。
       改成可收缩 + 允许窄于内容之后，它收缩回父容器宽（342px），
       内容这才真正溢出，横滑与右边缘渐隐才有意义。 */
    flex-shrink: 1;
    min-width: 0;
    margin-left: 0;
    gap: 24px;
    padding: 9px 0 11px;
    border-top: 1px solid var(--line);
    overflow-x: auto;             /* 放不下就横着滑，而不是折成两行 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* ★ 右边缘渐隐：8 项在 390px 下只露到「赛季」，而滚动条是隐藏的 ——
     「能滑」不等于「知道能滑」，最后一项「加入我们」被切在屏外却毫无提示。
     加一条渐隐，被切断的那一项看起来就是「渐出」而不是「被裁掉」。
     管理台侧栏 (.adm-side::after) 早就这么做了，这里补上、两边一致。

     ⚠️ 为什么用 mask 而不是照抄 .adm-side 的 ::after 伪元素：
       .adm-side 的伪元素挂在**不滚动**的父元素上，所以固定不动；
       而这里的滚动容器就是 .nav-links 自己 —— 伪元素会跟着内容一起滚，
       滑到右边时渐隐也跟着跑到右边去了，等于白做。
       mask 是元素自身坐标系上的遮罩，不随内容滚动，正好绕开这个死结。
     区间取 24px：窄到不干扰刚好放得下 8 项的那档宽度（约 1030px+），
     又足够让「被切掉」这件事看得出来。 */
  .nav-links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.hero-top { display: flex; align-items: center; gap: 24px; }
.hero-logo {
  width: 88px; height: 88px; border-radius: 20px; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 600; color: var(--t2); flex-shrink: 0; overflow: hidden;
}
.hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.hero-name { font-size: 32px; font-weight: 600; letter-spacing: .5px; line-height: 1.25; }
.hero-slogan { font-size: 15px; color: var(--t2); margin-top: 10px; }
.hero-founding { font-size: 13px; color: var(--t3); margin-top: 8px; }
.hero-founding b { color: var(--accent-text); font-weight: 500; }

.stats { display: flex; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 28px; }
.stat { flex: 1; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 28px; }
.stat-num { font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
.stat-num em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--t3); margin-left: 3px; }
.stat-label { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* ---------- 区块 ---------- */
section { padding: 56px 0; border-bottom: 1px solid var(--line); }
section.last { border-bottom: none; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.sec-title { font-size: 17px; font-weight: 600; }
.sec-more { font-size: 13px; color: var(--t3); text-decoration: none; }
.sec-more:hover { color: var(--t2); }

/* ---------- 队长卡 ---------- */
.captains { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cap-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  display: flex; align-items: center; gap: 14px;
}
.cap-avatar {
  width: 44px; height: 44px; border-radius: 10px; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600; color: var(--t2); flex-shrink: 0; overflow: hidden;
}
.cap-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cap-role { font-size: 12px; color: var(--t3); }
.cap-role.spirit { color: var(--accent-text); }
.cap-name { font-size: 15px; font-weight: 600; margin-top: 1px; }
.cap-term { font-size: 12px; color: var(--t3); margin-top: 3px; }

/* ---------- 列表 ---------- */
.list { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 15px; font-weight: 500; letter-spacing: .1px; }
.row-meta { font-size: 13px; color: var(--t3); margin-top: 3px; }
.row-right { font-size: 13px; color: var(--t3); flex-shrink: 0; }
.tag {
  display: inline-block; font-size: 12px; line-height: 1; padding: 4px 8px;
  border-radius: 6px; background: var(--accent-soft); color: var(--accent-text);
  margin-left: 8px; vertical-align: 1px;
}
.tag.gray { background: var(--fill); color: var(--t2); }

/* ---------- 时间轴 ---------- */
.timeline { border-top: 1px solid var(--line); }
.tl-item { display: flex; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.tl-date { width: 92px; flex-shrink: 0; font-size: 13px; color: var(--t3); padding-top: 2px; }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 15px; font-weight: 500; }
.tl-desc { font-size: 13px; color: var(--t2); margin-top: 4px; }
.tl-people { font-size: 12px; color: var(--t3); margin-top: 5px; }

/* ---------- 相册 ---------- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal-item {
  aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--t3); overflow: hidden; text-align: center; padding: 8px;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 比赛 ---------- */
.match-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.match-name { font-size: 15px; font-weight: 500; }
.match-sub { font-size: 13px; color: var(--t3); margin-top: 3px; }
.match-score { font-size: 16px; font-weight: 600; letter-spacing: .5px; flex-shrink: 0; }
.match-res { font-size: 12px; flex-shrink: 0; width: 28px; text-align: right; }
.match-res.win { color: var(--accent-text); }
.match-res.lose { color: var(--t3); }
.match-res.draw { color: var(--t3); }
.spirit { font-size: 12px; color: var(--t3); margin-top: 3px; }

/* ---------- 队员名册 ---------- */
/* 只加这两个：其余全复用 .list / .row / .cap-avatar / .tag，
   避免为一个页面堆一套平行样式（那会让 app.css 慢慢长出两套列表） */
.mem-no { font-size: 15px; font-weight: 600; letter-spacing: .5px; flex-shrink: 0; }
.mem-off .cap-avatar { opacity: .55; }

/* ---------- 表单（登录 / 注册） ---------- */
.auth { max-width: 380px; margin: 0 auto; padding: 72px 24px 96px; }
.auth h1 { font-size: 24px; font-weight: 600; letter-spacing: .3px; }
.auth .sub { font-size: 14px; color: var(--t3); margin-top: 8px; margin-bottom: 36px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; color: var(--t2); margin-bottom: 8px; }
.field input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--t1);
  padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--t2); }
.field .hint { font-size: 12px; color: var(--t3); margin-top: 6px; }
.btn-primary {
  width: 100%; font-family: inherit; font-size: 15px; font-weight: 500;
  color: #fff; background: var(--t1); border: 0; border-radius: 10px;
  padding: 13px 0; cursor: pointer; margin-top: 8px;
}
.btn-primary:hover { background: #000; }
.auth-foot { font-size: 13px; color: var(--t3); text-align: center; margin-top: 24px; }
.auth-foot a { color: var(--t1); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.alert {
  font-size: 13px; padding: 11px 14px; border-radius: 10px; margin-bottom: 20px;
  background: var(--danger-soft); color: var(--danger);
}
/* 成功/提示态：同一套 alert，只换色。分两个类名而不是内联样式，
   是为了让「红=出错、绿=成功」在全站统一。 */
.alert.ok { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- 找回密码：下一步指引 ---------- */
.fg-steps { margin: 8px 0 4px; border-top: 1px solid var(--line); }
.fg-step { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.fg-step-n {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  border-radius: 50%; background: var(--fill); color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.fg-step-b { display: block; flex: 1; min-width: 0; }
.fg-step-t { display: block; font-size: 14px; font-weight: 500; }
.fg-step-d { display: block; font-size: 13px; color: var(--t3); margin-top: 3px; line-height: 1.6; }

/* ---------- 账号设置 ---------- */
.set-hero { padding: 48px 0 28px; border-bottom: 1px solid var(--line); }
.set-form { max-width: 420px; }

/* ---------- 二级页面（荣誉墙 / 队史全量） ---------- */
.page-head { padding: 44px 0 26px; border-bottom: 1px solid var(--line); }
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.page-sub { font-size: 14px; color: var(--t3); margin-top: 10px; }
.page-sub b { color: var(--t2); font-weight: 600; }
/* 年份分组：年份做小标题，条目仍复用 .list / .row 的发丝分隔体系 */
.year-group { margin-top: 40px; }
.year-head {
  font-size: 13px; font-weight: 600; color: var(--t3);
  letter-spacing: 1.2px; margin-bottom: 10px;
}
.page-foot { margin-top: 48px; padding-bottom: 72px; }
.back-link { font-size: 13px; color: var(--t3); text-decoration: none; }
.back-link:hover { color: var(--t2); }

/* ---------- 空态 / 错误页 ---------- */
.empty { padding: 120px 24px; text-align: center; }
.empty h1 { font-size: 20px; font-weight: 600; }
.empty p { font-size: 14px; color: var(--t3); margin-top: 10px; }

/* ---------- 页脚 ---------- */
footer { padding: 40px 0 56px; }
footer p { font-size: 12px; color: var(--t3); }

/* ============================================================
   队务管理台
   布局：左侧固定导航 + 右侧内容，桌面优先（队长在电脑上批量录入）
   视觉：沿用公开层的白底/发丝线/无阴影，只是密度更高
   ============================================================ */
.adm { display: flex; gap: 0; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 64px); }

/* ---------- 侧栏 ---------- */
.adm-side {
  width: 168px; flex-shrink: 0; padding: 28px 0 40px;
  border-right: 1px solid var(--line);
}
.adm-side-head { padding: 0 20px 20px; }
.adm-back { font-size: 12px; color: var(--t3); text-decoration: none; }
.adm-back:hover { color: var(--t2); }
.adm-nav { display: flex; flex-direction: column; }
.adm-nav a {
  font-size: 14px; color: var(--t2); text-decoration: none;
  padding: 9px 20px; border-left: 2px solid transparent;
}
.adm-nav a:hover { color: var(--t1); }
.adm-nav a.on { color: var(--t1); font-weight: 500; border-left-color: var(--t1); }

/* ---------- 主体 ---------- */
.adm-main { flex: 1; min-width: 0; padding: 28px 32px 80px; }
.adm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 26px;
}
.adm-title { font-size: 21px; font-weight: 600; letter-spacing: -.2px; }
.adm-sub { font-size: 13px; color: var(--t3); margin-top: 6px; }

/* ---------- 按钮 ---------- */
.btn-sm {
  font-size: 13px; color: #fff; background: var(--t1); border: 0;
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
  font-family: inherit; text-decoration: none; display: inline-block; white-space: nowrap;
}
.btn-sm:hover { background: #000; }
.btn-sm.ghost { background: none; color: var(--t1); border: 1px solid var(--line-strong); }
.btn-sm.ghost:hover { border-color: var(--t3); background: none; }
.btn-sm.danger { background: none; color: var(--danger); border: 1px solid var(--line-strong); }
.btn-sm.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- 概览的状态格 ---------- */
.adm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.adm-cell { background: #fff; padding: 20px; }
.adm-cell-num { font-size: 26px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.adm-cell-num.hi { color: var(--accent-text); }
.adm-cell-num em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--t3); margin-left: 3px; }
.adm-cell-label { font-size: 12px; color: var(--t3); margin-top: 3px; }

/* ---------- 待办提示条 ---------- */
.adm-todo {
  border: 1px solid var(--accent-soft); background: var(--accent-soft);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.adm-todo p { font-size: 14px; color: var(--accent-text); }
.adm-todo a { font-size: 13px; color: var(--accent-text); text-decoration: none; white-space: nowrap; border-bottom: 1px solid currentColor; }

/* ---------- 面板 ---------- */
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-title { font-size: 15px; font-weight: 600; }
.panel-note { font-size: 12px; color: var(--t3); }
.sec-h { font-size: 13px; font-weight: 600; color: var(--t3); letter-spacing: .8px; margin: 28px 0 12px; }

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--t3);
  padding: 0 12px 10px; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
/* .num 是「不该被断行的内容」—— 日期、背号、分数、届数。
   加 nowrap 是配合下面窄屏的 .tbl{min-width}：min-width 只是下限，
   表格遇到不换行的内容会自己继续变宽，于是日期能撑开、
   而备注这类真正需要折行的长文本仍然折行。 */
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .muted { color: var(--t3); font-size: 13px; }
.tbl .tight { width: 1%; white-space: nowrap; }
/* 横向滚动容器。overscroll-behavior-x: contain 是给手机用的 ——
   否则在表格左边缘往右滑，会触发浏览器的「后退手势」，看表看着就退出页面了。 */
.tbl-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---------- 表单（管理台） ---------- */
.frm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.frm-grid .full { grid-column: 1 / -1; }
.fld label { display: block; font-size: 13px; color: var(--t2); margin-bottom: 7px; }
.fld input, .fld select, .fld textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--t1);
  padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: #fff; outline: none; transition: border-color .15s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--t2); }
.fld textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.fld select { appearance: none; background-image: none; cursor: pointer; }
.fld .hint { font-size: 12px; color: var(--t3); margin-top: 5px; }
.frm-foot { display: flex; gap: 10px; align-items: center; margin-top: 22px; }

/* ---------- 徽标 ---------- */
.badge {
  display: inline-block; font-size: 12px; line-height: 1; padding: 4px 7px;
  border-radius: 5px; background: var(--fill); color: var(--t2); vertical-align: 1px;
}
.badge.ok { background: var(--accent-soft); color: var(--accent-text); }
.badge.warn { background: #FFF6E5; color: #A8761A; }
.badge.off { background: var(--fill); color: var(--t3); }
/* 缺席用的变体。原先只能借用 .off（灰），但请假和缺席视觉一样会分不清 ——
   而这两件事的性质完全不同，队员看到时必须一眼分辨。 */
.badge.bad { background: var(--danger-soft); color: var(--danger); }

/* ---------- 点名（手机优先） ---------- */
.att-list { border-top: 1px solid var(--line); }
.att-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.att-who { flex: 1; min-width: 0; }
.att-name { font-size: 15px; font-weight: 500; }
.att-meta { font-size: 12px; color: var(--t3); margin-top: 2px; }
.att-num {
  width: 34px; flex-shrink: 0; text-align: center; font-size: 13px; color: var(--t3);
  font-variant-numeric: tabular-nums;
}
/* 四态选择：用 radio + label 做成分段控件，点一下就行，不必先点开下拉 */
.seg { display: flex; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  font-size: 12px; padding: 7px 10px; cursor: pointer; color: var(--t2);
  border-right: 1px solid var(--line-strong); user-select: none;
}
.seg label:last-of-type { border-right: none; }
.seg input:checked + label { background: var(--t1); color: #fff; }
.seg input[value="leave"]:checked + label { background: #A8761A; }
.seg input[value="absent"]:checked + label { background: var(--t3); }
.seg input[value="late"]:checked + label { background: var(--accent-text); }

/* ---------- 相册网格（管理台，带删除按钮） ---------- */
.ph-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ph-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--fill); }
.ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.ph-del {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  /* 平时半隐，鼠标进来才明显 —— 免得删除按钮在相册封面里抢戏 */
  opacity: 0; transition: opacity .15s ease;
  z-index: 2;
}
.ph-item:hover .ph-del, .ph-del:focus-visible { opacity: 1; }
.ph-del:hover { background: rgba(0,0,0,.78); }
/* 触屏设备没有 hover，删除按钮必须常显，否则永远点不到 */
@media (hover: none) { .ph-del { opacity: 1; } }

/* ---------- 照片灯箱（点开看大图） ----------
   【为什么必须做这个】
   飞盘队长传照片的动机是「让大家看到这场比赛」。如果点开只能看 1:1 的小方格，
   这个动机就废了 —— 人要在图里找自己、找队友、看比分牌。
   而且手机端必须有：不然后台相册就是一堆看不清的缩略图。 */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 12, 12, .94);
  display: none; align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb img {
  max-width: 94vw; max-height: 88vh; object-fit: contain;
  border-radius: 4px; display: block;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.14); color: #fff;
  border: 0; cursor: pointer; border-radius: 999px;
  width: 44px; height: 44px; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.26); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .lb-prev, .lb-next { width: 38px; height: 38px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-close { top: 10px; right: 10px; }
}

/* ---------- 照片上传区 ---------- */
.up-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 38px 20px; cursor: pointer;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: #FCFCFC;
  transition: border-color .15s ease, background .15s ease;
}
.up-drop:hover { border-color: var(--t3); background: var(--fill); }
/* 拖拽进入时高亮：拖拽是「盲操作」，必须给明确的可放置反馈 */
.up-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.up-icon { color: var(--t3); }
.up-icon svg { width: 26px; height: 26px; }
.up-drop:hover .up-icon { color: var(--t2); }
.up-main { font-size: 15px; font-weight: 500; color: var(--t1); }
.up-sub { font-size: 13px; color: var(--t3); }

.up-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin-top: 14px;
}
.up-list:empty { margin-top: 0; }
.up-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; min-width: 0;
}
.up-item.bad { border-color: var(--danger); background: var(--danger-soft); }
.up-thumb {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  background: var(--fill); display: block;
}
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-meta {
  font-size: 12px; color: var(--t2); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.up-item.bad .up-meta { color: var(--danger); }

.up-alt { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.up-alt summary {
  font-size: 13px; color: var(--t2); cursor: pointer;
  list-style: none; padding: 4px 0;
}
.up-alt summary::-webkit-details-marker { display: none; }
.up-alt summary::before { content: '+ '; color: var(--t3); }
.up-alt[open] summary::before { content: '− '; }
.up-alt summary:hover { color: var(--t1); }
.up-alt form { margin-top: 12px; }

/* ---------- 空态（管理台内，比全页空态轻） ---------- */
.blk-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 40px 24px; text-align: center;
}
.blk-empty p { font-size: 14px; color: var(--t3); }
.blk-empty p + p { margin-top: 6px; font-size: 13px; }

/* ---------- 提示条 ----------
   三态：成功（绿）/ 警告（黄，用于「部分成功」）/ 失败（红）。
   【为什么需要「警告」这一态】
   批量上传 20 张、坏了 1 张，既不是成功也不是失败。
   报成功会让用户以为全好了；报失败会让他以为全白传了 —— 都不对。 */
.toast {
  font-size: 13px; padding: 11px 14px; border-radius: 10px; margin-bottom: 20px;
  background: var(--accent-soft); color: var(--accent-text);
}
.toast.warn { background: #FFF8E8; color: #8A6410; }
.toast.bad { background: var(--danger-soft); color: var(--danger); }

/* ---------- 管理台移动端 ---------- */
@media (max-width: 860px) {
  .adm { flex-direction: column; }
  .adm-side {
    width: 100%; border-right: none; border-bottom: 1px solid var(--line);
    padding: 0; position: sticky; top: 0; background: #fff; z-index: 5;
  }
  .adm-side-head { display: none; }
  /* 导航横向滚动：9 个入口在手机上放不下，滑动比折叠菜单更快。
     ★ 但「能滑」不等于「知道能滑」—— 9 项在 390px 下只露 8 项，
       第 9 项「资料」被切在屏幕外，用户不会去猜右边还有东西。
       所以给滚动容器加一条右边缘渐隐：它同时干两件事 ——
       ① 暗示「右边还有内容」② 让被切断的那一项看起来是「渐出」而不是「被裁掉」。 */
  /* ★ 注意：这里**不能**写 `.adm-side { position: relative }`。
     上面那条规则已经给了 position: sticky —— sticky 本身就会建立
     定位参照，写 relative 会把它覆盖掉，导航吸顶直接失效。
     直接给 ::after 用绝对定位即可，参照物就是 sticky 元素自己。 */
  .adm-side::after {
    content: ''; position: absolute; top: 0; right: 0; width: 28px;
    height: 100%; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  }
  .adm-nav { flex-direction: row; overflow-x: auto; padding: 0 16px; }
  /* 隐藏滚动条：渐隐已经起到提示作用，再多一条灰杠只是噪音 */
  .adm-nav { scrollbar-width: none; -ms-overflow-style: none; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav a { padding: 13px 12px; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .adm-nav a.on { border-left-color: transparent; border-bottom-color: var(--t1); }
  .adm-main { padding: 20px 20px 64px; }
  .adm-title { font-size: 19px; }
  .adm-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-head { flex-direction: column; gap: 12px; }
  .frm-grid { grid-template-columns: 1fr; }
  .ph-grid { grid-template-columns: repeat(3, 1fr); }
  /* 点名行改两行：姓名在上，四态在下 —— 拇指够得着 */
  .att-row { flex-wrap: wrap; gap: 8px 12px; }
  .att-who { flex: 1 0 calc(100% - 50px); }
  .seg { width: 100%; }
  .seg label { flex: 1; text-align: center; padding: 9px 0; }
  .tbl-scroll { margin: 0 -20px; padding: 0 20px; }
  /* ★ 手机上必须给表格一个最小宽度，否则「横向滚动」是假的。
     原因：.tbl 只有 width:100%，浏览器会把表压进容器 —— 中文可以在任意字之间
     断行，所以压得再窄也不会溢出，.tbl-scroll 的 overflow-x 永远不触发。
     代价是列被挤碎：390px 下「张伟」被拆成两行、表头「飞盘名」拆两行。
     600px 是量出来的：管理台内容区最宽的表是 6 列（名册 / 任期 / 训练 / 比赛），
     600 / 6 ≈ 100px 一列，够放「2025-09-01」和两三个汉字；备注这类长文本照常折行。
     超过 600px 视口时容器本来就比它宽，这条规则不产生任何影响。 */
  .tbl { min-width: 600px; }
}

/* ============================================================
   申请入队页（公开）
   ============================================================ */
.join-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.join-steps { counter-reset: s; margin: 32px 0 8px; }
.join-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.join-step-n {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--t2);
}
.join-step-b { flex: 1; }
.join-step-t { font-size: 15px; font-weight: 500; }
.join-step-d { font-size: 13px; color: var(--t3); margin-top: 3px; }

@media (max-width: 720px) {
  .join-hero { padding: 36px 0 28px; }
  .ph-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .wrap, .nav-inner { padding: 0 20px; }
  /* 折行规则在 1200px 那个块里（手机也走它），这里只做手机专属的收紧 */
  .nav-right .who { display: none; }
  .nav-links a { font-size: 13px; padding: 2px 0; }
  .hero { padding: 40px 0 36px; }
  .hero-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-logo { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }
  .hero-name { font-size: 24px; }
  .hero-slogan { font-size: 14px; }
  .stats { margin-top: 28px; padding-top: 20px; flex-wrap: wrap; gap: 20px 0; }
  .stat { flex: 0 0 50%; }
  .stat + .stat { border-left: none; padding-left: 0; }
  section { padding: 36px 0; }
  .sec-head { margin-bottom: 20px; }
  .captains { grid-template-columns: 1fr; }
  .row { padding: 15px 0; }
  .row-title { font-size: 14px; }
  .tl-item { gap: 16px; }
  .tl-date { width: 72px; font-size: 12px; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .match-row { padding: 15px 0; }
  .match-name { font-size: 14px; }
  .auth { padding: 44px 20px 72px; }
}

/* ============================================================
   队伍广场（/explore）· 未进队伍前的总浏览页
   结构：hero → 搜索+筛选 → 有队伍的学校 → 我的队伍 → 队伍卡片 → 建队 CTA
   ============================================================ */
.ex-hero { padding: 52px 0 32px; border-bottom: 1px solid var(--line); }
.ex-hero h1 { font-size: 26px; font-weight: 600; letter-spacing: -.2px; }
.ex-hero p { font-size: 14px; color: var(--t2); margin-top: 8px; max-width: 560px; }

.ex-bar {
  padding: 20px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ex-search { flex: 1; min-width: 220px; display: flex; gap: 8px; }
.ex-search input {
  flex: 1; font-family: inherit; font-size: 14px; color: var(--t1);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 9px 14px; background: #fff; outline: none;
}
.ex-search input::placeholder { color: var(--t3); }
.ex-search input:focus { border-color: var(--t3); }
.ex-search button {
  font-family: inherit; font-size: 14px; color: #fff; background: var(--t1);
  border: none; border-radius: var(--radius-sm); padding: 9px 20px; cursor: pointer;
}
.ex-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-chip {
  font-size: 13px; color: var(--t2); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 14px; background: none; white-space: nowrap;
}
.ex-chip.on { border-color: var(--t1); color: var(--t1); font-weight: 500; }

/* 有队伍的学校 —— 横向快捷入口 */
.ex-schools { padding: 24px 0; border-bottom: 1px solid var(--line); }
.ex-schools-hd { font-size: 12px; color: var(--t3); letter-spacing: .4px; margin-bottom: 12px; }
.ex-school-list { display: flex; gap: 10px; flex-wrap: wrap; }
.ex-school {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 9px 14px; transition: border-color .12s;
}
.ex-school:hover { border-color: var(--t3); }
.ex-school.on { border-color: var(--t1); }
.ex-school-name { font-size: 14px; color: var(--t1); }
.ex-school-meta { font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }

/* 我的队伍 —— 已登录时置顶 */
.ex-mine { padding: 28px 0 4px; }
.ex-list { border-top: 1px solid var(--line); }
.ex-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.ex-row:hover .ex-row-name { color: var(--accent-text); }
.ex-row-logo {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--t2); overflow: hidden;
}
.ex-row-logo img { width: 100%; height: 100%; object-fit: cover; }
.ex-row-body { flex: 1; min-width: 0; }
.ex-row-name { font-size: 15px; font-weight: 500; transition: color .12s; }
.ex-row-meta { font-size: 13px; color: var(--t3); margin-top: 2px; }
.ex-on { font-size: 13px; color: var(--t3); flex-shrink: 0; }
.ex-row-go { font-size: 13px; color: var(--t3); flex-shrink: 0; }

/* 队伍卡片网格 */
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ex-card {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 20px; text-decoration: none; display: flex; flex-direction: column;
  transition: border-color .12s; min-height: 148px;
}
.ex-card:hover { border-color: var(--t3); }
.ex-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ex-logo {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; color: var(--t2); overflow: hidden;
}
.ex-logo img { width: 100%; height: 100%; object-fit: cover; }
.ex-card-hd { min-width: 0; flex: 1; }
.ex-name {
  font-size: 15px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ex-school-label { font-size: 12px; color: var(--t3); margin-top: 2px; }
.ex-slogan {
  font-size: 13px; color: var(--t2); line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ex-stats {
  display: flex; gap: 20px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ex-stat { display: flex; align-items: baseline; gap: 5px; }
.ex-stat b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-stat span { font-size: 12px; color: var(--t3); }

/* 空状态 */
.ex-empty { padding: 64px 0; text-align: center; border-bottom: 1px solid var(--line); }
.ex-empty-t { font-size: 15px; color: var(--t2); }
.ex-empty-d { font-size: 13px; color: var(--t3); margin-top: 6px; }
.ex-empty-act { display: inline-block; margin-top: 20px; }

/* 建队 CTA */
.ex-cta {
  padding: 40px 0; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.ex-cta-b { flex: 1; min-width: 260px; }
.ex-cta-t { font-size: 16px; font-weight: 600; }
.ex-cta-d { font-size: 13px; color: var(--t2); margin-top: 5px; }
.ex-cta-act { flex-shrink: 0; }

.btn-dark {
  display: inline-block; font-family: inherit; font-size: 14px; text-decoration: none;
  color: #fff; background: var(--t1); border: 1px solid var(--t1);
  border-radius: var(--radius-sm); padding: 10px 22px; cursor: pointer;
}
.btn-ghost {
  display: inline-block; font-family: inherit; font-size: 14px; text-decoration: none;
  color: var(--t1); background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 10px 22px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--t3); }

@media (max-width: 900px) {
  .ex-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ex-hero { padding: 36px 0 24px; }
  .ex-hero h1 { font-size: 22px; }
  .ex-grid { grid-template-columns: 1fr; }
  .ex-search { min-width: 100%; }
  .ex-search input { min-width: 0; }
  .ex-filters { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .ex-cta { gap: 16px; }
  .ex-cta-act { width: 100%; }
  .ex-cta-act .btn-dark, .ex-cta-act .btn-ghost { width: 100%; text-align: center; }
}

/* ============================================================
   创建队伍（/team/new）+ 提交成功页
   ============================================================ */
.cn-hero { padding: 48px 0 28px; border-bottom: 1px solid var(--line); }
.cn-form { max-width: 520px; }
.cn-form .field label .req {
  font-size: 11px; color: var(--accent-text); background: var(--accent-soft);
  border-radius: 4px; padding: 2px 6px; margin-left: 6px; font-weight: 500;
}
.cn-form select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--t1);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 12px; background: #fff; outline: none; appearance: none;
  background-image: none; cursor: pointer;
}
.cn-form select:focus { border-color: var(--t2); }
.cn-form textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--t1);
  line-height: 1.6; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 12px; background: #fff; outline: none; resize: vertical;
}
.cn-form textarea:focus { border-color: var(--t2); }
.cn-form .seg { width: max-content; }
.cn-form .seg label { padding: 9px 22px; font-size: 13px; color: var(--t2); cursor: pointer; }
.cn-note {
  font-size: 12px; color: var(--t3); line-height: 1.7;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* 补充资料折叠区：可选字段不占主视线，需要时才展开 */
.cn-more { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.cn-more > summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--t2);
  display: flex; align-items: center; gap: 8px;
}
.cn-more > summary::-webkit-details-marker { display: none; }
.cn-more > summary::before {
  content: '+'; font-size: 15px; line-height: 1; color: var(--t3);
  width: 12px; text-align: center;
}
.cn-more[open] > summary::before { content: '–'; }
.cn-more > summary:hover { color: var(--t1); }
.cn-more-b { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }

/* 提交成功 */
.sent-hero { padding: 56px 0 28px; border-bottom: 1px solid var(--line); }
.sent-hero .page-sub { max-width: 520px; }

@media (max-width: 720px) {
  .cn-hero { padding: 36px 0 22px; }
  .cn-form .seg { width: 100%; }
  .cn-form .seg label { flex: 1; text-align: center; }
  .sent-hero { padding: 40px 0 24px; }
}

/* ============================================================
   导航栏：队伍切换器 + 用户菜单
   ------------------------------------------------------------
   用纯 CSS 做下拉（:hover + :focus-within），不引一行 JS。
   :focus-within 那一条是给键盘用户和触屏留的 —— 只用 :hover 的话，
   手机上点一下菜单会立刻消失，等于这个菜单不存在。
   ============================================================ */
.team-switch, .user-menu { position: relative; }

.team-switch-btn, .user-menu-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13px; color: var(--t2);
  background: none; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
.team-switch-btn:hover, .user-menu-btn:hover { border-color: var(--t3); color: var(--t1); }
.team-switch-caret, .user-caret { font-size: 9px; color: var(--t3); }

.user-avatar {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--t2); overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.team-switch-menu, .user-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 220px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 6px; display: none;
}
.team-switch:hover .team-switch-menu,
.team-switch:focus-within .team-switch-menu,
.user-menu:hover .user-menu-list,
.user-menu:focus-within .user-menu-list { display: block; }

.team-switch-menu a, .user-menu-list a {
  display: block; text-decoration: none; padding: 9px 12px; border-radius: var(--radius-sm);
}
.team-switch-menu a:hover, .user-menu-list a:hover { background: var(--fill); }
.team-switch-menu a.on { background: var(--fill); }
.ts-name { display: block; font-size: 14px; color: var(--t1); font-weight: 500; }
.ts-meta { display: block; font-size: 12px; color: var(--t3); margin-top: 1px; }
.user-menu-list a { font-size: 14px; color: var(--t1); }
.ts-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.ts-all { font-size: 13px !important; color: var(--t2) !important; }
.um-logout {
  display: block; width: 100%; text-align: left; font-family: inherit;
  font-size: 14px; color: var(--danger); background: none; border: none;
  padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.um-logout:hover { background: var(--danger-soft); }
.nav-btn.solid { background: var(--t1); color: #fff; border-color: var(--t1); }

/* 站长后台内页 */
.adm-page { padding: 40px 0 80px; }
.adm-sec { padding: 32px 0; border-bottom: 1px solid var(--line); }
.adm-sec.last { border-bottom: none; }
.adm-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.adm-tabs a {
  font-size: 14px; color: var(--t2); text-decoration: none;
  padding: 12px 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.adm-tabs a.on { color: var(--t1); font-weight: 500; border-bottom-color: var(--t1); }
/* tab 上的待办数：没有它，队长看不出「另一边还有人在等」 */
.tab-n {
  display: inline-block; min-width: 16px; padding: 1px 5px; margin-left: 6px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent-text);
  font-size: 11px; font-weight: 600; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* 审批表单：备注输入 + 两个动作按钮 */
.rv-form { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.rv-form input[type="text"] {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 6px 9px; font-family: inherit; font-size: 12px; color: var(--t1);
}
.rv-form input[type="text"]:focus { outline: none; border-color: var(--accent); }
.adm-kpis { display: flex; gap: 40px; flex-wrap: wrap; }
.adm-kpi-b { font-size: 26px; font-weight: 600; }
.adm-kpi-l { font-size: 13px; color: var(--t3); margin-top: 2px; }
.adm-card {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px;
}
.adm-card-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.adm-card-t { font-size: 15px; font-weight: 600; }
.adm-card-d { font-size: 13px; color: var(--t2); margin-top: 6px; line-height: 1.7; }
.adm-card-act { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.adm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.adm-reason {
  font-size: 13px; color: var(--t2); background: var(--fill);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; line-height: 1.7;
}
.adm-empty { font-size: 14px; color: var(--t3); padding: 28px 0; }

.btn-sm.danger { color: var(--danger); border-color: var(--line-strong); }
.btn-sm.danger:hover { border-color: var(--danger); }

@media (max-width: 720px) {
  /* 导航项在移动端已折到顶栏第二行（见 .nav-links 的移动端规则）——
     这里不要再写 display:none，CSS 顺序上它会覆盖掉那个折行规则。 */
  .adm-grid { grid-template-columns: 1fr; }
  .adm-kpis { gap: 24px; }
  .adm-kpi-b { font-size: 22px; }
  .team-switch-menu, .user-menu-list { right: auto; left: 0; }
}

/* ============================================================
   平台首页（产品落地页）· .lp-*
   ------------------------------------------------------------
   设计约束沿用全站规范：纯白底 / 发丝分隔 / 无阴影 / 绿色仅点缀。
   落地页比管理台「敢用一点空间」：section 之间留白到 88px，
   因为它的唯一任务是让人愿意往下滚。

   动效原则：只做「让人感觉产品是活的」的反馈（悬停抬升、箭头位移、
   数字入场），不做「先播片头再出内容」——那会吃掉 2-3 秒注意力。
   所有动效都包在 prefers-reduced-motion 里。
   ============================================================ */
.lp { overflow-x: hidden; }

/* ---------- Hero ---------- */
/* 【背景设计依据：Stripe 式「上三分之一氛围色，下方回白」】
   纯白板的问题不是不好看，是「没有纵深」——用户眼睛找不到落点，
   页面读起来像一张 A4 纸而不是一个产品。

   Stripe 的解法（那份 DESIGN.md 我读过了）是：用一大团柔和的多彩光晕占据
   页面上三分之一，文字和内容浮在上面，往下渐隐回纯白。

   【为什么用「模糊色块」而不是整块彩色背景】
   整块彩色会跟内容抢注意力，也扛不住长文案。模糊色块是「氛围」不是「底色」，
   文字压上去依然清晰——这才是大厂的实际做法。

   【为什么是绿/青/紫而不是 Stripe 的橙/紫/红】
   复用本项目已有的强调色系（绿 #2EBE6E），青、紫只做邻居色过渡，
   不乱入新色。Stripe 那份 Do/Don't 里明确写了「不要引入规范之外的强调色」，
   我们对自己的品牌同理。
*/
.lp-hero {
  position: relative;
  padding: 104px 0 88px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  /* 让光晕只在这一层内可见，不外溢到下面的段落 */
  overflow: hidden;
  isolation: isolate;
}
/* 光晕层：三层径向渐变叠在一起，各自定位 + 自身模糊，
   形成「有光从侧上方打下来」的自然过渡（单层径向渐变会显得像一块脏斑）。
   z-index: -1 让它待在内容下方；isolation 保证不穿透到别的 section。

   【色相为什么只用绿→青，不要紫】
   第一版加了紫（#9676F0）。桌面宽屏下那团紫跑到右上角，和左边的绿形成
   一冷一暖对撞，看起来「脏」——手机端因为窄所以看不出来。
   去掉紫之后整片光晕是同一个色相家族的渐变（绿→青），干净得多。
   这也更符合「只有绿色点缀」这个既定调性：氛围色只能加深它，不能另开一个色系。
*/
.lp-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 16% 22%, rgba(46, 190, 110, .34) 0%, rgba(46, 190, 110, 0) 70%),
    radial-gradient(38% 46% at 68% 8%, rgba(78, 176, 168, .24) 0%, rgba(78, 176, 168, 0) 72%),
    radial-gradient(34% 42% at 96% 40%, rgba(120, 190, 140, .18) 0%, rgba(120, 190, 140, 0) 74%);
  filter: blur(30px) saturate(108%);
  /* 往下渐隐回白：这是 Stripe「下方回白」的关键，没有这层就是一块死彩色 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .5) 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .5) 70%, transparent 100%);
}
/* 极细网格：给光晕一点「技术感」骨架，避免大面积模糊显得糊。
   【透明度压到 .045 还是太明显 —— 桌面宽屏上像方格纸】
   真正的 Stripe 式做法是「几乎看不见，只留下潜意识里的秩序感」。
   降到 .022 并把格子放大到 72px：单格更大 → 线更少 → 不形成格子观感。
   另外用两层 mask 做成「只在光晕附近隐约可见，往下完全消失」，
   而不是整屏铺满——铺满就会变成背景纹理，抢内容。 */
.lp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17, 17, 17, .022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, .022) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(64% 56% at 46% 0%, #000 0%, transparent 76%);
  mask-image: radial-gradient(64% 56% at 46% 0%, #000 0%, transparent 76%);
}
/* Hero 内容需要压过光晕，所以给内容层一个明确的 stacking context */
.lp-hero > .wrap { position: relative; z-index: 1; }
.lp-hero-eyebrow {
  display: inline-block;
  font-size: 13px; color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 999px; padding: 5px 14px;
  margin-bottom: 26px; letter-spacing: .2px;
}
.lp-hero-title {
  font-size: 52px; line-height: 1.22; font-weight: 600;
  letter-spacing: -1.2px; color: var(--t1);
  margin-bottom: 24px; max-width: 760px;
}
/* 桌面端不换行，让「把你队伍的 / 荣誉、队史和训练 / 都放在一个链接里」三行整齐 */
.lp-br-m { display: none; }
@media (max-width: 900px) { .lp-br-m { display: block; } }

.lp-em {
  /* 用绿色「马克笔」式底衬而不是整段变色：点缀，不是铺色。
     ⚠️ 必须配 box-decoration-break: clone —— 否则换行时背景会被截断成
     两块互不相连的色带（这个标题在窄屏上一定会换行）。 */
  background: linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%);
  padding: 0 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lp-hero-sub {
  font-size: 17px; line-height: 1.8; color: var(--t2);
  max-width: 600px; margin-bottom: 40px;
}
.lp-hero-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  border-radius: 999px; border: 1px solid transparent;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.lp-btn-primary { background: var(--t1); color: #fff; }
.lp-btn-primary:hover { transform: translateY(-1px); background: #000; }
.lp-btn-ghost { border-color: var(--line-strong); color: var(--t1); background: #fff; }
.lp-btn-ghost:hover { border-color: var(--t3); }
.lp-hero-note { font-size: 13px; color: var(--t3); margin-top: 18px; }

/* ---------- 信任条 ---------- */
.lp-trust { border-bottom: 1px solid var(--line); background: #FCFCFC; }
.lp-trust-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 32px 0;
}
.lp-trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid var(--line);
}
.lp-trust-item:last-child { border-right: 0; }
.lp-trust-n { font-size: 30px; font-weight: 600; letter-spacing: -.6px; color: var(--t1); }
.lp-trust-l { font-size: 13px; color: var(--t3); }

/* ---------- 通用 section ---------- */
.lp-sec { padding: 88px 0; border-bottom: 1px solid var(--line); }
.lp-sec-alt { background: #FCFCFC; }
.lp-sec-head { margin-bottom: 48px; }
.lp-sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.lp-sec-title {
  font-size: 30px; font-weight: 600; letter-spacing: -.5px;
  color: var(--t1); margin-bottom: 10px;
}
.lp-sec-sub { font-size: 15px; color: var(--t2); }
.lp-more { font-size: 14px; color: var(--t2); text-decoration: none; white-space: nowrap; }
.lp-more:hover { color: var(--t1); }

/* ---------- 功能三列 ---------- */
.lp-grid3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.lp-feat {
  background: #fff; padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: background .18s ease;
}
.lp-feat:hover { background: #FCFCFC; }
.lp-feat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--fill); color: var(--t1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.lp-feat-icon svg { width: 20px; height: 20px; }
.lp-feat-t { font-size: 16px; font-weight: 600; color: var(--t1); margin-bottom: 10px; line-height: 1.5; }
.lp-feat-d { font-size: 14px; line-height: 1.75; color: var(--t2); flex: 1; }
.lp-feat-tag {
  margin-top: 18px; font-size: 12px; color: var(--accent-text);
  letter-spacing: .3px;
}

/* ---------- 三步 ---------- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.lp-step { display: flex; gap: 18px; align-items: flex-start; }
.lp-step-n {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px;
  background: var(--t1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lp-step-t { font-size: 16px; font-weight: 600; color: var(--t1); margin-bottom: 6px; }
.lp-step-d { font-size: 14px; line-height: 1.7; color: var(--t2); }

/* ---------- 已入驻队伍 ---------- */
.lp-teams { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.lp-team {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; background: #fff; text-decoration: none;
  transition: background .16s ease, padding-left .16s ease;
}
.lp-team:hover { background: #FCFCFC; padding-left: 30px; }
.lp-team-logo {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  background: var(--fill); color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; overflow: hidden;
}
.lp-team-logo img { width: 100%; height: 100%; object-fit: cover; }
.lp-team-body { flex: 1; min-width: 0; }
.lp-team-name { display: block; font-size: 16px; font-weight: 500; color: var(--t1); margin-bottom: 3px; }
.lp-team-meta { display: block; font-size: 13px; color: var(--t3); }
.lp-team-stats { font-size: 13px; color: var(--t2); white-space: nowrap; }
.lp-team-stats b { font-weight: 600; color: var(--t1); }

/* ---------- 滚动淡入 ----------
   【为什么用 CSS 类 + IntersectionObserver 而不是纯 CSS animation】
   纯 CSS animation 在页面加载时就开始跑，用户还没滚到那一段，动画已经播完了——
   滚下去看到的是静止的，等于白做。必须由「是否进入视口」来触发。

   【为什么初始状态用 opacity:0 是安全的】
   有个经典坑：JS 挂了就永远不显示（内容白屏）。所以：
     ① 初始隐藏只在 html.js-ready 下生效（见下方 .js-ready 规则），
        没 JS 时内容正常显示；
     ② HTML 里给动效元素挂的是 class，脚本进不来也不影响可读性。
   这是必须做的兜底，不是可选项。
*/
.reveal { transition: opacity .62s cubic-bezier(.22, .61, .36, 1), transform .62s cubic-bezier(.22, .61, .36, 1); }
.js-ready .reveal { opacity: 0; transform: translateY(16px); }
.js-ready .reveal.is-in { opacity: 1; transform: none; }

/* 同组元素依次入场：给网格里的卡片错开 60ms，产生「一波推上来」的节奏。
   用 class 而不是 JS 里写 setTimeout，省一次遍历也少一个失败点。 */
.js-ready .reveal-d1 { transition-delay: .06s; }
.js-ready .reveal-d2 { transition-delay: .12s; }
.js-ready .reveal-d3 { transition-delay: .18s; }
.js-ready .reveal-d4 { transition-delay: .24s; }
.js-ready .reveal-d5 { transition-delay: .30s; }
.js-ready .reveal-d6 { transition-delay: .36s; }

/* ---------- 信任条：数字上方的一根短线，入场时向上生长 ----------
   纯粹为了给「数字」一个视觉落点，不改变任何布局尺寸
   （用 scaleY 而不是 height，避免入场前后发生跳动）。 */
.lp-trust-item::before {
  content: '';
  width: 1px; height: 22px;
  background: var(--line-strong);
  margin-bottom: 14px;
  transform-origin: top;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1) .1s;
}
.js-ready .lp-trust-item::before { transform: scaleY(0); }
.js-ready .lp-trust-item.is-in::before { transform: scaleY(1); }

/* ---------- 最终 CTA ---------- */
/* 收尾段不是纯灰板：给一层极淡的绿色光晕，和首屏呼应。
   透明度压到首屏的三分之一左右——收尾要「安静」，不能跟首屏抢戏。 */
.lp-final {
  position: relative; padding: 96px 0; text-align: center;
  background: #FCFCFC; overflow: hidden; isolation: isolate;
}
.lp-final::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 160%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(42% 50% at 50% 8%, rgba(46, 190, 110, .14) 0%, rgba(46, 190, 110, 0) 70%);
  filter: blur(26px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}
.lp-final-t { font-size: 32px; font-weight: 600; letter-spacing: -.6px; color: var(--t1); margin-bottom: 14px; }
.lp-final-d { font-size: 16px; color: var(--t2); margin-bottom: 36px; }
.lp-final .lp-hero-act { justify-content: center; }

/* ---------- 页脚 ---------- */
.lp-foot {
  border-top: 1px solid var(--line); padding: 32px 0;
  font-size: 13px; color: var(--t3);
}
.lp-foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-foot-links { display: flex; gap: 22px; }
.lp-foot-links a { color: var(--t3); text-decoration: none; }
.lp-foot-links a:hover { color: var(--t1); }

/* ---------- 响应式 ---------- */
/* 桌面宽视口下同样一团光晕被摊薄了（面积大 → 看着更淡），
   所以宽屏要单独提一档强度，而不是让它「越宽越没颜色」。 */
@media (min-width: 1100px) {
  .lp-hero::before {
    background:
      radial-gradient(40% 54% at 14% 20%, rgba(46, 190, 110, .60) 0%, rgba(46, 190, 110, 0) 70%),
      radial-gradient(36% 50% at 64% 6%, rgba(78, 176, 168, .42) 0%, rgba(78, 176, 168, 0) 72%),
      radial-gradient(32% 46% at 94% 38%, rgba(120, 190, 140, .32) 0%, rgba(120, 190, 140, 0) 74%);
  }
}

@media (max-width: 900px) {
  .lp-hero { padding: 72px 0 64px; }
  .lp-hero-title { font-size: 38px; letter-spacing: -.8px; }
  .lp-hero-sub { font-size: 16px; }
  .lp-sec { padding: 64px 0; }
  .lp-sec-title { font-size: 25px; }
  .lp-grid3 { grid-template-columns: repeat(2, 1fr); }
  .lp-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .lp-trust-item:nth-child(2) { border-right: 0; }
  .lp-steps { grid-template-columns: 1fr; gap: 30px; }
  .lp-final { padding: 72px 0; }
  .lp-final-t { font-size: 26px; }
}

@media (max-width: 640px) {
  .lp-hero-title { font-size: 31px; }
  .lp-hero-act { flex-direction: column; align-items: stretch; }
  .lp-btn { width: 100%; }
  .lp-grid3 { grid-template-columns: 1fr; }
  .lp-team { padding: 16px 18px; gap: 12px; }
  .lp-team:hover { padding-left: 18px; }
  .lp-team-stats { display: none; }
  .lp-sec-head-row { align-items: flex-start; }
}

/* 尊重系统「减少动态效果」设置
   ⚠️ 这里必须把 .js-ready 下的隐藏状态也一并解除——
   只写 transition: none 是不够的：元素仍停在 opacity:0 + translateY(16px)，
   等于内容彻底看不见。这是「无障碍兜底反而造成内容不可见」的典型坑。 */
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-feat, .lp-team { transition: none; }
  .lp-btn-primary:hover { transform: none; }
  .lp-team:hover { padding-left: 24px; }
  .reveal, .js-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-ready .lp-trust-item::before { transform: scaleY(1); }
  .lp-trust-item::before { transition: none; }
}

/* ============================================================
   队员视角（/my）
   与管理台刻意区分：没有侧栏、没有管理按钮，只讲「跟我有关」的事。
   复用 .panel / .row / .adm-grid / .adm-tabs，只新增三组必要样式：
   球员卡、通知条目、申请进度时间线。
   ============================================================ */

/* 未读小点（用在「通知」tab 上） */
.udot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 5px; vertical-align: 2px;
}

/* ---------- 球员卡 ----------
   这是「出勤率」的答案：把考核数据换成队内身份。
   编号 + 飞盘名是队里最有身份感的两样东西，而且都已全量录入。 */
.pc {
  display: flex; align-items: center; gap: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin-bottom: 20px;
}
.pc-no {
  font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -1.5px;
  color: var(--accent-text); min-width: 76px; flex-shrink: 0;
}
.pc-no.dim { color: var(--t3); }
.pc-main { flex: 1; min-width: 0; }
.pc-name { font-size: 20px; font-weight: 600; letter-spacing: .2px; }
.pc-real { font-size: 13px; color: var(--t3); margin-top: 4px; }
.pc-meta { font-size: 12px; color: var(--t3); margin-top: 7px; }
.pc-stats { display: flex; gap: 26px; flex-shrink: 0; text-align: right; }
.pc-stats b {
  display: block; font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.pc-stats b em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--t3); margin-left: 2px; }
.pc-stats span { font-size: 11px; color: var(--t3); }

/* ---------- 通知条目 ---------- */
.nt { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nt-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin-top: 8px; flex-shrink: 0;
}
.nt-dot.off { background: var(--line-strong); }
.nt-b { flex: 1; min-width: 0; }
.nt-t { font-size: 15px; font-weight: 500; text-decoration: none; display: block; }
.nt-t:hover { color: var(--accent-text); }
.nt-t.read { font-weight: 400; color: var(--t2); }
.nt-m { font-size: 13px; color: var(--t2); margin-top: 3px; }
.nt-d { font-size: 12px; color: var(--t3); margin-top: 6px; }

/* ---------- 申请进度（三态时间线） ---------- */
.st { padding-top: 2px; }
.st-row { display: flex; gap: 12px; }
.st-rail { width: 10px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.st-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); background: #fff; margin-top: 6px;
}
.st-dot.on { border-color: var(--accent); background: var(--accent); }
.st-dot.bad { border-color: var(--danger); background: var(--danger); }
.st-line { width: 1px; flex: 1; background: var(--line-strong); margin: 3px 0 1px; }
.st-b { flex: 1; min-width: 0; padding-bottom: 16px; }
.st-t { font-size: 14px; font-weight: 500; }
.st-t.off { color: var(--t3); font-weight: 400; }
.st-t.bad { color: var(--danger); }
.st-d { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* ---------- 空状态 ---------- */
.my-empty { padding: 40px 0; text-align: center; }
.my-empty-t { font-size: 15px; color: var(--t2); }
.my-empty-d { font-size: 13px; color: var(--t3); margin-top: 6px; }

/* ============================================================
   训练点评（.cmt）
   刻意不复用通知的 .nt —— 两者长得像但语义不同：
   .nt-t 是「标题」且可点，.cmt-body 是「正文」且不跳转。
   混用会让「改通知的间距」意外改掉点评的排版。
   ============================================================ */
.cmt-list { border-top: 1px solid var(--line); }
.cmt { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cmt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt-who { font-size: 14px; font-weight: 600; }
.cmt-time { font-size: 12px; color: var(--t3); }
.cmt-del {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 12px; color: var(--t3); padding: 2px 4px; font-family: inherit;
}
.cmt-del:hover { color: var(--danger); }
.cmt-body {
  font-size: 14px; line-height: 1.7; color: var(--t2);
  margin-top: 7px; white-space: pre-wrap; word-break: break-word;
}
.cmt-form { margin-top: 18px; }
.cmt-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.6;
  color: var(--t1); background: #fff;
}
.cmt-form textarea:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   队务概览：掉队预警 + 发公告
   ============================================================ */

/* 掉队名单。刻意不做成表格 —— 它不是考核记录，是「该去问一句」的清单。 */
.risk-list { display: flex; flex-direction: column; }
.risk {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.risk:last-child { border-bottom: none; }
.risk-no {
  min-width: 46px; font-size: 15px; font-weight: 600; color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.risk-name { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }
.risk-n { font-size: 13px; color: var(--t2); }
.risk-n b { color: var(--danger); font-weight: 600; }

/* 发公告表单 */
.ann-form { display: flex; flex-direction: column; gap: 10px; }
.ann-form input[type="text"],
.ann-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 14px; font-family: inherit; font-size: 14px; line-height: 1.6;
  color: var(--t1); background: #fff;
}
.ann-form textarea { resize: vertical; }
.ann-form input[type="text"]:focus,
.ann-form textarea:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   公开层 · 飞盘独有页（精神分 / 背号墙 / 赛季回顾）
   规范不变：纯白底、发丝分隔、无阴影、绿色只作点缀。
   这几页的说服力来自「数字本身」，所以排版让数字站前面，修饰语往后放。
   ============================================================ */

/* ---------- 共同：一段「先讲清楚这是什么」的引言 ----------
   精神分和背号墙都有一件必须先说的事 —— 不然访客（尤其新生）
   看着一堆数字不知道在说什么。所以这两页都从一段解释开始。 */
.sp-hero {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0 24px;
  margin-bottom: 38px;
}
.sp-hero-t { font-size: 19px; font-weight: 600; letter-spacing: .2px; margin-bottom: 12px; }
.sp-hero-d { font-size: 15px; color: var(--t2); line-height: 1.85; margin-bottom: 10px; max-width: 640px; }
.sp-hero-d b { color: var(--t1); font-weight: 600; }
.sp-hero-quiet { color: var(--t3); font-size: 14px; margin-top: 14px; }

/* ---------- 精神分：四个关键数 ---------- */
.sp-kpis {
  display: flex; gap: 44px; flex-wrap: wrap;
  padding: 0 0 30px;
}
.sp-kpi { min-width: 128px; }
.sp-kpi-n {
  font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}
.sp-kpi-n em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--t3); margin-left: 3px; }
.sp-kpi-l { font-size: 12px; color: var(--t3); margin-top: 5px; }

.sp-note {
  font-size: 13px; color: var(--t2);
  background: var(--fill); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 30px;
}

/* ---------- 精神分：逐场 ---------- */
.sp-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sp-row:last-child { border-bottom: none; }
.sp-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sp-row-title { font-size: 15px; font-weight: 500; }
.sp-row-meta { font-size: 13px; color: var(--t3); }
.sp-row-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }

.sp-bar { display: flex; align-items: center; gap: 10px; }
.sp-bar-l { font-size: 12px; color: var(--t3); width: 76px; flex-shrink: 0; }
.sp-bar-track {
  position: relative; flex: 1; height: 6px; min-width: 60px;
  background: var(--fill); border-radius: 3px; overflow: hidden;
}
.sp-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.sp-bar-fill.them { background: var(--accent); }
.sp-bar-fill.us { background: var(--line-strong); }
/* 10 分基准线：把「惯例基准」画出来，比写一句注释直观 */
.sp-bar-base {
  position: absolute; top: -2px; bottom: -2px; left: 50%;
  width: 1px; background: var(--t3); opacity: .55;
}
.sp-bar-v {
  width: 30px; text-align: right; flex-shrink: 0;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sp-row-note {
  margin-top: 10px; font-size: 13px; color: var(--t2);
  padding-left: 12px; border-left: 2px solid var(--line-strong);
}
.sp-legend { font-size: 13px; color: var(--t3); margin-top: 18px; line-height: 1.7; }

/* ---------- 背号墙 ---------- */
.nw-hint { font-size: 13px; color: var(--t3); margin: -4px 0 16px; max-width: 620px; line-height: 1.7; }
.nw-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.nw-cell {
  display: flex; align-items: center; gap: 14px;
  background: #fff; padding: 16px 18px; min-height: 84px;
}
.nw-cell.dim .nw-no { color: var(--t3); }
.nw-no {
  font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -1px;
  color: var(--accent-text); min-width: 46px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.nw-main { min-width: 0; flex: 1; }
.nw-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nw-meta { font-size: 12px; color: var(--t3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.nw-cell.dim .nw-name { font-weight: 400; color: var(--t2); }

/* ---------- 赛季回顾 ---------- */
.ss-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 34px;
}
.ss-cell { background: #fff; padding: 20px 22px; }
.ss-n {
  font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}
.ss-n em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--t3); margin-left: 3px; }
.ss-l { font-size: 12px; color: var(--t3); margin-top: 5px; }
.ss-d { font-size: 12px; color: var(--t3); margin-top: 3px; font-variant-numeric: tabular-nums; }

.ss-highlight {
  border: 1px solid var(--accent-soft); background: var(--accent-soft);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 34px;
}
.ss-hl-label { font-size: 12px; color: var(--accent-text); letter-spacing: .3px; }
.ss-hl-main {
  font-size: 19px; font-weight: 500; margin-top: 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ss-hl-main b { font-weight: 600; }
.ss-hl-score {
  font-size: 24px; font-weight: 600; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.ss-hl-score em { font-style: normal; font-size: 12px; font-weight: 400; margin-left: 2px; }
.ss-hl-meta { font-size: 13px; color: var(--accent-text); opacity: .85; margin-top: 6px; }

.ss-foot-note {
  font-size: 14px; color: var(--t2); line-height: 1.8;
  border-top: 1px solid var(--line); padding-top: 22px; margin-top: 34px;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  .sp-kpis { gap: 28px; }
  .sp-kpi-n { font-size: 26px; }
  .sp-row-main { flex-direction: column; gap: 4px; }
  .sp-bar-l { width: 62px; font-size: 11px; }
  .nw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .nw-no { font-size: 24px; min-width: 36px; }
  .ss-n { font-size: 24px; }
}

@media (max-width: 720px) {
  .pc { flex-wrap: wrap; gap: 16px; }
  .pc-no { min-width: 58px; font-size: 34px; }
  .pc-stats { gap: 18px; }
}