/* competitions.css — 赛事页专用样式。
   由原 03-chrome / 04-components / 05-sections / 06-detail 四层**按原顺序**拼接而成;
   拆层时顺序就是层叠顺序, 合并后必须保持同样的先后。
   全站公共部分在 shared/design/{tokens,base}.css, 能用两次以上的规则都该上提到那里。 */

/* 03-chrome.css
   页面外框: 顶栏、Hero、横滑区的头部与轨道。
   由 index.html 的内联样式按层拆出; 加载顺序即层叠顺序, 不要调整。 */

/* ================= 顶栏 ================= */
  .top.stuck{background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px);border-bottom-color:var(--line);
    box-shadow:0 1px 0 rgba(38,79,74,.06),0 8px 30px -12px rgba(0,0,0,.14)}
  /* 未滚动时压在深色 Hero 上, 文字与控件要转成浅色 */
  .kbd{background:#fff;border-color:var(--line);color:var(--faint)}
  #q{text-decoration:none}
  .brand span.t{display:none}
  @media (min-width:520px){ .brand span.t{display:inline} }
  /* 品牌标: 纯黑方块 + 白字。原来那个蓝紫渐变 + 蓝色投影是典型的模板味。 */
  .search{position:relative;flex:1;max-width:520px;margin-left:auto}
  .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2.2;transition:stroke var(--dur-62)}
  #q{width:100%;padding:9px 42px 9px 38px;font-size:14px;color:var(--ink);
    border:1px solid var(--line);border-radius:9px;background:#fff;
    outline:none;transition:border-color var(--dur-62) var(--ease),box-shadow var(--dur-62) var(--ease)}
  #q:focus{border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft)}
  .search:focus-within svg{stroke:var(--brand)}
  .kbd{position:absolute;right:11px;top:50%;transform:translateY(-50%);
    font:11px/1 ui-monospace,Menlo,monospace;color:var(--faint);background:#fff;
    border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:3px 6px}
  @media (max-width:640px){ .kbd{display:none} }

  /* ================= 简介 ================= */
  /* 负 margin 把 Hero 顶到顶栏下面, 让透明的顶栏真正"浮"在 Hero 上。 */
  .intro{position:relative;overflow:hidden;margin-top:calc(-1 * var(--topbar-h));
    padding:calc(var(--topbar-h) + 34px + env(safe-area-inset-top)) 0 26px;
    background:#fff}
  /* ---- 装饰 B: Hero 右侧的"刻度尺" ----
     右半屏原来是空的。一排刻度线呼应"什么时候报名"的时间主题:
     是**结构 + 隐喻**, 不是插画, 所以不会跟数据抢注意力、也不会过时。
     用 repeating-linear-gradient 画, 零图片、零请求。 */
  .intro .ruler{position:absolute;right:0;top:calc(var(--topbar-h) + 76px);
    width:38%;height:190px;pointer-events:none;z-index:0;opacity:.9;
    -webkit-mask:linear-gradient(90deg,transparent,#000 32%,#000 78%,transparent);
    mask:linear-gradient(90deg,transparent,#000 32%,#000 78%,transparent)}
  /* 刻度分两级: 每 13px 一根短副刻度, 每 5 根(65px)一根长主刻度。
     用 background-size 控制**每一级的高度**(上一次误把它当成周期用了)。 */
  .intro .ruler::before{content:"";position:absolute;left:0;top:0;width:100%;height:26px;
    background-image:
      repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 65px),
      repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 13px);
    background-size:100% 22px,100% 9px;
    background-repeat:no-repeat,no-repeat;
    background-position:0 0,0 0}
  /* 主刻度下方一条基线, 让整排刻度"立"在一条线上 */
  .intro .ruler::after{content:"";position:absolute;left:0;top:25px;width:100%;height:1px;
    background:var(--line)}
  @media (max-width:1000px){ .intro .ruler{display:none} }

  /* Hero 的立体感来自两件事: 顶部一层"光从上方照下来"的极淡强调色渐变,
     以及一条压底的细线。不要多色柔光 —— 那正是之前判定为土的东西。 */
  .intro::before{content:"";position:absolute;inset:0 0 auto 0;height:340px;
    pointer-events:none;
    background:
      radial-gradient(1100px 300px at 78% -40%,var(--accent-soft),transparent 70%),
      linear-gradient(180deg,rgba(0,0,0,.028),transparent 62%)}
  /* 唯一的彩色装饰: 一条压在 Hero 底边上的强调线段。
     高级站点的装饰是**看得见**的, 不是 .07 透明度的柔光 —— 一条线就够。
     宽度=左对齐内容线的宽度, 让它是"内容的一部分", 而不是页面边缘的脏点。 */
  .intro .rule{position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;
    width:min(var(--maxw),100%);padding:0 var(--pad-x);box-sizing:border-box}
  .intro .rule::after{content:"";display:block;height:2px;
    background:linear-gradient(90deg,var(--accent) 0 52px,var(--line) 52px 100%)}
  /* 分区编号: 结构性的排版元素, 不是插画 */
  .eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 18px;
    font-size:var(--fs-eyebrow);font-weight:640;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
  .eyebrow .n{color:var(--accent);font-weight:720}
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
  /* 细噪点: 消除大面积平色的"塑料感", 是廉价与高级的分界线之一 */
  .intro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
  .intro .wrap{position:relative;z-index:2}
  .intro h1{margin:0 0 14px;font-size:var(--fs-h1);line-height:1.08;
    letter-spacing:-1.9px;font-weight:800;color:var(--ink);max-width:15em}
  /* 不再用渐变文字 —— 那是 2021 味最重的一处。强调靠字色与字重, 不靠色相。 */
  /* 标题里的强调: 深靛字 + 一道细下划线。
     原来是一整块鲜亮原色蓝, 又跳又像链接 —— 现在字色压深, 用下划线承担强调,
     既有层次又不像"没渲染完的链接"。下划线用 background 画, 不占据行高。 */
  .intro h1 em{font-style:normal;color:var(--accent);
    background-image:linear-gradient(var(--accent),var(--accent));
    background-repeat:no-repeat;
    background-size:100% .055em;
    background-position:0 96%;
    padding-bottom:.06em}
  .intro .lede{margin:0 0 34px;color:var(--muted);font-size:15.5px;
    max-width:600px;line-height:1.62}

  /* 统计条: 一块玻璃, 内部靠发丝线分区 —— 结构是"表", 不是三张卡片。
     三色圆点已删: 绿/橙/蓝三个色相把刚收干净的配色又打散了, 且与状态色语义重复。 */
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:660px;margin:0 0 30px;position:relative;border-radius:14px;
    overflow:hidden;border:1px solid var(--line);
    background:#fff;
    box-shadow:none}
  .stat{position:relative;text-align:left;padding:18px 20px 19px;
    background:transparent;border-radius:0;
    border-left:1px solid var(--line);
    transition:background var(--dur-62) var(--ease)}
  .stat:first-child{border-left:none}
  .stat:hover{background:rgba(255,255,255,.72)}
  .stat .v{font-size:var(--fs-stat);font-weight:760;line-height:1.06;
    font-variant-numeric:tabular-nums;letter-spacing:-1.6px;color:var(--ink);
    transition:color var(--dur-62) var(--ease)}
  .stat .l{font-size:12.5px;color:var(--muted);margin-top:5px;
    display:flex;align-items:center;gap:6px;letter-spacing:-.1px}
  /* 未选中区: 一条极短的"未点亮"下划线, 说明这块是可点的 */
  .stat::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;
    background:var(--line2);opacity:0;transition:opacity var(--dur-62) var(--ease)}
  .stat:hover::after{opacity:1}
  /* 选中区: 只用强调色 —— 数字变色 + 一条实心短线, 不做整块渐变底 */
  .stat.on{background:var(--accent-soft)}
  .stat.on .v{color:var(--accent-ink)}
  .stat.on .l{color:var(--accent-ink)}
  .stat.on::after{opacity:1;background:var(--accent)}
  /* 窄屏: 三列还要保住, 靠缩字号与内边距, 不让"本月正在报名"折成"本月正在报 / 名" */
  @media (max-width:520px){
    .stats{max-width:100%;margin-bottom:28px}
    .stat{padding:14px 12px 15px}
    .stat .v{font-size:24px;letter-spacing:-1.2px}
    .stat .l{font-size:11.5px;margin-top:3px;line-height:1.35;letter-spacing:-.2px}
    .stat::after{left:12px;right:12px}
  }

  /* ================= 横滑区块(热门 / 截止) =================
     区块之间用 --gap-sec 拉开(原来只有 26px, 密得发闷);
     标题去掉了 emoji, 改成一条短横 + 小号大写标签 —— 锐利、可复用、不喧哗。 */
  /* 数据不够时收起(不用 [hidden]: 隐藏元素 top=0 会污染滚动判定) */
  .rail[data-empty]{display:none}
  .rail{padding:var(--gap-sec) 0 0}
  .rhead{display:flex;align-items:baseline;gap:var(--head-gap);margin-bottom:22px;flex-wrap:wrap}
  .rhead h2{margin:0;font-size:clamp(18px,1.9vw,22px);font-weight:600;
    letter-spacing:-.6px;position:relative;padding-left:15px}
  /* 标题前的短竖线: 结构性标记, 替代原来的 ⏰/🔥 */
  /* 标题前的主刻度: 与 Hero 刻度尺同一种"量尺"语言, 但更短更实。
     这里**必须**绝对定位, 不能用 flex 布局塞进标题 —— h2 一旦是 flex 容器,
     父级 align-items:baseline 取的就不是标题文字自身的基线, 而是第一个
     flex 子项(这根竖线)的下边缘, 于是"02"比"最近截止"低 2.6px。 */
  .rhead h2::before{content:"";position:absolute;left:0;top:50%;
    transform:translateY(-50%);width:3px;height:1em;background:var(--ink)}
  .rhead .why{font-size:12.5px;color:var(--faint);letter-spacing:.01em}
  .rnav{margin-left:auto;display:flex;gap:8px}
  .rnav button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
    background:#fff;color:var(--ink2);display:grid;place-items:center;
    transition:var(--dur-62) var(--ease)}
  .rnav button:hover{border-color:var(--ink);color:var(--ink)}
  .rnav button:disabled{opacity:.3;pointer-events:none}
  .rnav button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
  @media (hover:none){ .rnav{display:none} }
  /* 触摸端: 所有独立控件至少 40px 高。原生 23px 的链接/小按钮在手机上很难点中。 */
  @media (hover:none){
    .fbtn,.viewtog button,.seg button,.chip,.clearbtn,.stab,.go,
    #sort,.hcard .clink,.mfoot .go{min-height:40px}
    .seg button,.viewtog button{min-height:40px}
    /* 分段控件本身也要跟着长高, 否则按钮会溢出容器 */
    .seg,.viewtog{padding:4px}
    /* 顶栏品牌是回首页的链接, 本体只有 28px 高, 撑到 44px;
       并给触摸设备去掉 iOS 的灰色高亮块(自绘反馈更干净)。 */
    /* 分区导航是横向滚动的链接条, 30px 高在手机上偏小 */
    .secnav a{min-height:40px;padding-top:11px;padding-bottom:11px}
    /* 搜索框本体 36px -> 44px(触摸端最容易误触的控件) */
    #q{min-height:44px;padding-top:12px;padding-bottom:12px}
    a,button,select,.chip,.seg button,.viewtog button,.stab{
      -webkit-tap-highlight-color:transparent}
    /* 触摸端没有 hover, 按下的即时反馈由 :active 承担 */
    .card:active,.hcard:active,.abox:active{transform:scale(.994)}
  }

  .railwrap{position:relative;margin:0 calc(var(--pad-x) * -1);padding:0 var(--pad-x);
    perspective:1600px}
  .railwrap::after{content:"";position:absolute;top:0;bottom:8px;right:0;width:56px;
    pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg));
    opacity:1;transition:opacity var(--dur-62)}
  .railwrap.atend::after{opacity:0}
  .rscroll{display:grid;grid-auto-flow:column;grid-auto-columns:300px;
    gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
    padding:2px 2px 10px;scroll-behavior:smooth;scrollbar-width:none}
  .rscroll::-webkit-scrollbar{display:none}
  @media (max-width:900px){ .rscroll{grid-auto-columns:min(78vw,280px)} }
  .rscroll>*{scroll-snap-align:start}

  /* 横滑卡与主卡同一套语言: 实边、无玻璃、无跟手高光。 */
  .hcard{position:relative;border:1px solid var(--line);border-radius:var(--r);
    padding:20px;cursor:pointer;
    background:#fff;
    display:flex;flex-direction:column;gap:12px;overflow:hidden;min-height:206px;
    transform-style:preserve-3d;
    box-shadow:var(--depth-1),var(--edge);
    transition:transform var(--dur-62) var(--ease),box-shadow var(--dur-62) var(--ease),
      border-color var(--dur-62) var(--ease)}
  .hcard::before,.hcard::after{display:none}
  .hcard:hover{transform:translateY(-3px);border-color:var(--accent);
    box-shadow:var(--depth-3),var(--edge)}
  .hcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .hcard .top2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .flame{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
    background:transparent;border:1px solid var(--ink);color:var(--ink);
    border-radius:5px;padding:3px 7px;letter-spacing:.02em}
  .hcard h3{margin:0;font-size:16.5px;line-height:1.38;font-weight:700;
    letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .hcard .d{font-size:13px;color:var(--ink2);display:grid;
    grid-template-columns:auto 1fr;gap:4px 9px;margin:0}
  .hcard .d dt{color:var(--faint);white-space:nowrap}
  .hcard .d dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 倒计时: 单色。只有 7 天内的"临期"用唯一的信号色 —— 整页彩色就这一处例外。 */
  .cdown{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
    border-radius:5px;padding:3px 7px;background:var(--accent-soft);color:var(--ink2);
    letter-spacing:.02em}
  .cdown.urgent{background:var(--hot-soft);color:var(--hot);
    box-shadow:inset 0 0 0 1px rgba(177,98,86,.22)}
/* 04-components.css
   可复用组件: 分区导航、分区标题、汇总盒、雷达图、占比条。
   由 index.html 的内联样式按层拆出; 加载顺序即层叠顺序, 不要调整。 */

/* ================= 分区导航(01…09) =================
     页面原来只有一个孤零零的「01」, 后面接不上 —— 编号在暗示一个不存在的结构。
     现在补齐成真正的编号分区, 并给一条可点的导航条: 编号 = 分区号, 点它跳过去。 */
  .secnav{position:sticky;top:var(--topbar-h);z-index:30;background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .secnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
    padding-top:10px;padding-bottom:10px}
  .secnav .wrap::-webkit-scrollbar{display:none}
  .secnav a{flex:none;display:inline-flex;align-items:baseline;gap:7px;
    font-size:12.5px;color:var(--muted);padding:5px 11px;border-radius:6px;
    white-space:nowrap;transition:color var(--dur-62) var(--ease),background var(--dur-62) var(--ease)}
  .secnav a b{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;
    color:var(--faint);letter-spacing:.04em}
  .secnav a:hover{color:var(--ink);background:var(--accent-soft);text-decoration:none}
  .secnav a{position:relative}
  .secnav a.on{color:var(--ink);background:var(--accent-soft);font-weight:600}
  .secnav a.on b{color:var(--ink)}
  .secnav a::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;
    background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:center;
    transition:transform var(--dur-62) var(--ease)}
  .secnav a.on::after{transform:scaleX(1)}
  /* 跳转时给吸顶栏留出偏移, 否则标题会被压住 */
  .sec{scroll-margin-top:calc(var(--topbar-h) + 52px)}
  /* 翻页时把视口锚回分区标题(见 keepListingInView)。偏移量刻意和侧栏吸顶
     用同一条线(topbar + 58px), 这样"01 报名总表"落下时正好与侧栏上沿齐平。 */
  #s1 .sechead{scroll-margin-top:calc(var(--topbar-h) + 58px)}

  /* 全年节奏图: 每个月有多少赛事的报名窗口 / 比赛窗口处于开启状态。
     这是一张**有信息量**的图形 —— 柱高就是条数 —— 既能回答"什么时候该来看
     这个站", 又不会像纯装饰图形那样变成噪音。
     两个序列同一种墨色、只靠明度区分, 不破坏单色底原则。 */
  .rhythm{margin:28px 0 0;max-width:660px;position:relative}
  .rfig{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;
    align-items:end;height:92px;padding-bottom:9px;border-bottom:1px solid var(--line)}
  .rfig .m{position:relative;height:100%;display:flex;align-items:flex-end;
    justify-content:center;gap:2px;border-radius:3px 3px 0 0;outline:none;
    transition:background var(--dur-62) var(--ease)}
  .rfig .m i{display:block;width:46%;border-radius:1px 1px 0 0;
    transform-origin:bottom center;animation:growup var(--dur-62) var(--ease) both;
    animation-delay:calc(var(--i,0) * var(--dur-22))}
  .rfig .m i.r{background:var(--accent)}
  .rfig .m i.c{background:var(--faint)}
  /* 悬停/聚焦时整列有一层淡底 + 一条竖向参考线, 让"在看哪个月"一目了然 */
  .rfig .m::after{content:"";position:absolute;left:50%;top:-8px;bottom:-9px;width:1px;
    background:var(--accent);opacity:0;transform:translateX(-50%);
    transition:opacity var(--dur-62) var(--ease);pointer-events:none}
  .rfig .m:hover,.rfig .m:focus-visible{background:var(--accent-soft)}
  .rfig .m:hover::after,.rfig .m:focus-visible::after{opacity:.5}
  .rfig .m:focus-visible{box-shadow:0 0 0 2px var(--accent-soft)}
  /* 自定义提示气泡(替代原生 title: 原生提示又慢又不能控制样式) */
  .rtip{position:absolute;z-index:5;pointer-events:none;opacity:0;
    transform:translate(-50%,-100%) translateY(-6px);
    transition:opacity var(--dur-62) var(--ease);
    background:var(--ink);color:#fff;border-radius:6px;
    padding:7px 10px;font-size:11.5px;line-height:1.5;white-space:nowrap;
    box-shadow:0 6px 20px -6px rgba(0,0,0,.4)}
  .rtip.on{opacity:1}
  .rtip b{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
    color:rgba(255,255,255,.66);margin-bottom:3px}
  .rtip u{text-decoration:none;display:flex;align-items:center;gap:6px;
    font-variant-numeric:tabular-nums}
  .rtip u::before{content:"";width:9px;height:6px;border-radius:1px;flex:none}
  .rtip .kr::before{background:#fff}
  .rtip .kc::before{background:rgba(255,255,255,.45)}
  .rtip .n{font-weight:700}
  /* 气泡下方的小尖角 */
  .rtip::after{content:"";position:absolute;left:50%;top:100%;width:0;height:0;
    transform:translateX(-50%);border:5px solid transparent;
    border-top-color:var(--ink)}
  @keyframes growup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .rlab{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:7px}
  .rlab span{text-align:center;font-size:10px;color:var(--faint);
    font-variant-numeric:tabular-nums}
  .rlab span.hot{color:var(--ink);font-weight:700}
  .rhead2{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px}
  .rhead2 b{font-size:12px;font-weight:700;letter-spacing:.05em}
  .rkey{display:flex;gap:16px;font-size:11.5px;color:var(--muted)}
  .rkey em{font-style:normal;display:inline-flex;align-items:center;gap:6px}
  .rkey em::before{content:"";width:11px;height:7px;display:block;border-radius:1px}
  .rkey .kr::before{background:var(--accent)}
  .rkey .kc::before{background:var(--faint)}

  /* ================= 汇总分区 ================= */
  .sec{padding:var(--gap-sec) 0 0;position:relative}
  /* A. 超大号分区编号水印。
     装饰来自**排版本身**(瑞士网格/编辑设计的做法), 不是插画:
     数字给版面一个锚点, 强化"这是一份编号文档"的结构感。
     挂在与 .wrap 同宽的定位层上, 贴住右侧内容线, 不溢出、不挡内容。 */
  .sec>.wrap{position:relative}
  /* right 要减掉内边距: 绝对定位的参照是 .wrap 的 **padding box**,
     写 right:0 实际落在 .wrap 的外边缘上, 于是这行水印比内容右线探出 44px,
     和它自己"贴住右侧内容线、不溢出"的注释正好相反。 */
  .sec>.wrap::before{content:attr(data-n);position:absolute;right:var(--pad-x);
    top:calc(-.34em + var(--py,0px));
    font-size:clamp(80px,9.5vw,132px);font-weight:800;letter-spacing:-.07em;
    line-height:.78;color:var(--accent-soft);pointer-events:none;user-select:none;
    z-index:0;will-change:transform}
  @media (prefers-reduced-motion:reduce){ .sec>.wrap::before{--py:0px !important} }
  /* 切到某个分区时, 它的编号水印放大回弹一下 —— 用编号本身做"到达"的反馈,
     不引入新元素、不加新颜色。 */
  @keyframes markpulse{
    0%{transform:scale(1);opacity:.05}
    28%{transform:scale(1.07);opacity:.10}
    100%{transform:scale(1);opacity:.05}
  }
  .sec.pulse>.wrap::before{animation:markpulse var(--dur-62) var(--ease) both}
  @media (prefers-reduced-motion:reduce){ .sec.pulse>.wrap::before{animation:none} }
  .sec>.wrap>*{position:relative;z-index:1}
  @media (max-width:760px){ .sec>.wrap::before{display:none} }
  .sec> .wrap> .sechead{display:flex;align-items:baseline;gap:var(--head-gap);margin-bottom:8px}
  .sec .snum{font-size:11px;font-weight:700;color:var(--faint);
    font-variant-numeric:tabular-nums;letter-spacing:.08em;flex:none;
    width:var(--snum-col);
    padding-top:2px;display:flex;align-items:center;gap:8px}
  /* 编号后一枚短刻度, 把"编号 + 标题"连成一条可读的轴线 */
  .sec .snum::after{content:"";width:14px;height:1px;background:var(--ink);opacity:.35;
    flex:none}
.sec h2{margin:0;font-size:clamp(18px,1.9vw,22px);font-weight:600;
    letter-spacing:-.6px}
  /* 分区内的元素在 .reveal 触发后依次浮起 */
  .sec.reveal.in .snum{animation:floatup var(--dur-62) var(--ease) both}
  .sec.reveal.in h2{animation:floatup var(--dur-62) var(--ease) var(--dur-45) both}
  .sec.reveal.in .sdesc{animation:floatup var(--dur-62) var(--ease) var(--dur-62) both}
  .sec .sdesc{margin:0 0 22px;font-size:13px;color:var(--muted);line-height:1.7;
    max-width:70ch;padding-left:calc(var(--snum-col) + var(--head-gap))}
  /* 三列汇总卡: 每条一个数值 + 一条极细的占比条 */
  /* 裁掉重复格子之后, 各分区的盒子数不再都是 3 个。用 auto-fit 让每一行都铺满
     内容线(而不是在末尾留一个空格子); **同一行内宽度仍然完全相等**。
     1152px 内容宽时正好 3 列, 窄屏自动降列, 所以下面两条断点可以省掉。 */
  .srcnote{font-size:12.5px;color:var(--muted);line-height:1.75;margin:0;
    padding-left:calc(var(--snum-col) + var(--head-gap));max-width:78ch}
  .srcnote b{color:var(--ink)}

  /* 来源说明还留在页脚(收录多少场/多少有官网/最近更新), 这里只保留它的排版 */
  .srcnote{font-size:12.5px;color:var(--muted);line-height:1.75;margin:0}
  .srcnote b{color:var(--ink)}
  footer.site #srcNote{padding-left:0;max-width:none;margin-top:10px}
/* 05-sections.css
   01 分区的两列骨架: 布局、侧栏筛选控件、结果工具条、卡片、分页。
   由 index.html 的内联样式按层拆出; 加载顺序即层叠顺序, 不要调整。 */

/* ================= 布局 ================= */
  /* 表格本体现在在 01 分区里。底部不再叠 70px —— 区块间距由 .sec 的 --gap-sec 负责,
     否则"01 之后到 02"会凭空多出一大段空白。 */
  /* 横向内边距必须**再写一遍 var(--pad-x)**: 这一条和 `.wrap` 同权重, 又在后面,
     于是 `padding:20px 0 0` 会把 .wrap 的左右内边距整个抹掉 —— 01 分区的
     侧栏+结果两列因此比其它所有分区宽 88px, 左边界跑到内容线左边 44px、
     右边界探出内容线右侧 44px。整页只有这一块对不齐, 就是这一条造成的。 */
  .layout{display:grid;grid-template-columns:var(--side-w) 1fr;gap:26px;
    align-items:start;padding:20px var(--pad-x) 0}
  /* 侧栏吸顶要**同时**避开顶栏和分区导航条(后者也是 sticky), 否则会被压在下面 */
  aside{position:sticky;top:calc(var(--topbar-h) + 58px);
    max-height:calc(100vh - var(--topbar-h) - 78px);overflow-y:auto;padding-right:6px;
    overscroll-behavior:contain}
  /* —— 为什么这里必须再用 id 写一遍 position:sticky ——
     上面那条 `aside{position:sticky}` 其实一直被 `.sec>.wrap>*` 的
     `position:relative` 盖掉: (0,2,0) 比 (0,0,1) 权重高。于是侧栏真正生效的定位
     是 relative, 而 `top:calc(var(--topbar-h) + 58px)` = 122px 就变成了
     「整块往下挪 122px」, 后果有三个:
       · 上沿比右侧内容低 122px, 和 .layout 的顶边对不齐;
       · 吸顶完全失效, 主列往下滚的时候侧栏跟着一起走;
       · 布局被凭空撑高 122px, 页面多出一段滚不到底的空白。
     用 id 选择器把权重提回来即可。**不要去改 `.sec>.wrap>*`** —— 它是分区编号
     水印的定位层, 08 个分区都靠它把内容压在数字上面。 */
  #side{position:sticky;z-index:1;
    /* 滚动条只在指针进到面板里时显形: 常驻一根深色条会被误读成"页面旁边
       又多了一条滚动条", 而这里其实是面板自己的内部滚动。 */
    scrollbar-width:thin;scrollbar-color:transparent transparent}
  #side:hover,#side:focus-within{scrollbar-color:var(--line) transparent}
  /* 121 之前的 Chrome 不认 scrollbar-width, 靠这几条兜底; 新 Chrome 会忽略它们 */
  #side::-webkit-scrollbar{width:8px}
  #side::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
  #side:hover::-webkit-scrollbar-thumb,#side:focus-within::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.2)}
  .fg{margin-bottom:18px}
  .ft{font-size:11.5px;font-weight:700;color:var(--faint);letter-spacing:.7px;margin-bottom:8px}
  .seg{display:flex;background:rgba(255,255,255,.85);border-radius:10px;padding:3px;
    gap:3px;margin-bottom:10px}
  .seg button{flex:1;padding:6px;border-radius:7px;font-size:12.5px;color:var(--muted);
    font-weight:500;transition:var(--dur-62)}
  .seg button.on{background:#fff;color:var(--ink);font-weight:650;
    box-shadow:0 1px 3px rgba(0,0,0,.10)}
  /* 月份 4 列而不是 3 列: 12 个月排 3 行而不是 4 行, 侧栏矮一整行 ——
     侧栏越短, 它自己的那根滚动条就越少出现。 */
  .months{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .mo{border:1px solid var(--line);background:rgba(255,255,255,.85);border-radius:10px;
    padding:7px 0 6px;font-size:12.5px;color:var(--ink2);text-align:center;
    line-height:1.25;transition:var(--dur-62) var(--ease);font-weight:500}
  .mo small{display:block;font-size:10px;color:var(--faint);font-weight:600;
    font-variant-numeric:tabular-nums}
  .mo:hover{border-color:var(--ink);color:var(--ink)}
  .mo:active{transform:translateY(1px)}
  .mo.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .mo.on small{color:rgba(255,255,255,.8)}
  .mo.zero{opacity:.42}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{border:1px solid var(--line);background:rgba(255,255,255,.85);border-radius:9px;
    padding:5px 10px;font-size:12.5px;color:var(--ink2);transition:var(--dur-62) var(--ease);
    display:inline-flex;align-items:center;gap:6px;font-weight:500;max-width:100%;overflow:hidden}
  .chip>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chip:hover{border-color:var(--ink);color:var(--ink)}
  .chip:active{transform:scale(.97)}
  .chip .n{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;font-weight:700}
  .chip.on{background:var(--brand-soft);border-color:var(--brand-line);
    color:var(--brand-ink);font-weight:650}
  .chip.on .n{color:var(--brand)}
  /* 「细分方向」上百个标签, 用原生 <details> 折起来: 默认只占一行,
     展开后按收录数从多到少铺开。零 JS、可键盘操作、屏幕阅读器也认。 */
  .fg.dirs{border-top:1px solid var(--line2);padding-top:12px}
  .fg.dirs>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
    gap:6px;user-select:none}
  .fg.dirs>summary::-webkit-details-marker{display:none}
  .fg.dirs>summary::before{content:"";width:0;height:0;flex:none;
    border-left:4px solid var(--faint);border-top:3.5px solid transparent;
    border-bottom:3.5px solid transparent;transition:transform var(--dur-62) var(--ease)}
  .fg.dirs[open]>summary::before{transform:rotate(90deg)}
  .fg.dirs>summary:hover{color:var(--ink2)}
  .fg.dirs>summary .n{font-size:10.5px;font-weight:700;color:var(--faint);
    font-variant-numeric:tabular-nums;margin-left:auto}
  .fg.dirs[open]>summary{margin-bottom:9px}
  .chip.zero{opacity:.4;pointer-events:none}
  /* 某一组在当前筛选下被筛空时留一句话, 免得那里是一片看不懂的空白 */
  .chipnone{font-size:12px;color:var(--faint);padding:2px 0;line-height:1.6}
  .reset{width:100%;text-align:center;border:1px solid var(--line);border-radius:10px;
    padding:8px;font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.8);
    font-weight:500;transition:var(--dur-62)}
  .reset:hover{color:var(--ink);border-color:var(--faint)}
  /* 侧栏第一行"时间"要和右侧结果工具条的首行文字落在**同一条基线**上。
     工具条那行高 38px(.viewtog 撑起来的)、内容垂直居中, 所以文字比行盒顶端低
     8.2px; 侧栏标签如果直接顶格, 就比右边高出 11.6px。这里给同样的行高并居中,
     padding-top 再补掉字体大小差带来的 1.6px。 */
  #side > .fg:first-child > .ft{min-height:38px;display:flex;align-items:center;
    margin-bottom:0;padding-top:3.2px}

  /* ================= 结果 ================= */
  .rtop{display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:14px;flex-wrap:wrap;scroll-margin-top:112px}
  .rleft{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .rcount{font-size:13.5px;color:var(--muted)}
  .rcount b{color:var(--ink);font-size:16px;font-weight:750;
    font-variant-numeric:tabular-nums}
  .result-pages{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin:28px 0 8px;font-family:var(--sans)}
  .result-pages[hidden]{display:none}
  .result-pages button{min-width:40px;height:40px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink2);font-size:14px;font-weight:650;cursor:pointer}
  .result-pages button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .result-pages button[aria-current="page"],.result-pages button[aria-current="page"]:hover{border-color:var(--accent);background:var(--accent);color:#fff}
  .result-pages button:disabled{opacity:.35;cursor:default}
  .result-pages button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .result-pages .page-gap{padding:0 2px;color:var(--faint)}
  .result-pages .page-meta{flex-basis:100%;text-align:center;color:var(--muted);font-size:12px;margin-top:4px}
  @media(max-width:640px){.result-pages{gap:4px;margin-bottom:18px}.result-pages button{min-width:36px;height:38px;padding:0 7px}}
  .clearbtn{font-size:12.5px;color:var(--brand-ink);font-weight:600;padding:4px 8px;
    border-radius:8px;background:var(--brand-soft)}
  .clearbtn:hover{background:var(--accent-soft);text-decoration:none}
  .rright{display:flex;gap:8px;align-items:center}
  .viewtog{display:flex;background:rgba(255,255,255,.85);border-radius:10px;padding:3px;gap:3px}
  .viewtog button{padding:6px 11px;border-radius:7px;font-size:12.5px;color:var(--muted);
    font-weight:600;display:flex;align-items:center;gap:5px;transition:var(--dur-62)}
  .viewtog button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10)}
  .viewtog svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
  select{padding:8px 32px 8px 13px;border:1px solid var(--line);border-radius:10px;
    background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b93ab' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size:13px;color:var(--ink2);appearance:none;cursor:pointer;font-weight:500}
  @media (max-width:640px){ .rright{width:100%} .rright select{flex:1} }

  /* —— 卡片视图 —— */
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));
    gap:var(--gap);perspective:1500px}
  html[data-device="tablet"] .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  html[data-device="phone"] .cards{grid-template-columns:1fr}
  /* 卡片: 去掉"液态玻璃"(模糊 + 饱和度增益 + 渐变描边 + 跟手蓝色镜面高光)。
     那套东西在纯白底上既看不见又在拖动时闪蓝光, 是廉价感的直接来源。
     现在是一条实边 + 极浅阴影: 干净、锐利, 内容自己说话。 */
  .card{position:relative;border:1px solid var(--line);
    background:#fff;
    border-radius:var(--r);padding:22px 24px 20px;cursor:pointer;overflow:hidden;
    display:flex;flex-direction:column;gap:15px;
    transform-style:preserve-3d;
    box-shadow:var(--depth-1),var(--edge);
    transition:transform var(--dur-62) var(--ease),box-shadow var(--dur-62) var(--ease),
      border-color var(--dur-62) var(--ease)}
  .sheen{display:none}
  /* hover 时抬起来一点 + 阴影加深 —— 立体感靠"离页面的高度差", 不靠投影本身多大 */
  .card:hover{transform:translateY(-3px);border-color:var(--accent);
    box-shadow:var(--depth-3),var(--edge)}
  .card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  /* 状态标记: 单色。用小方块 + 字重区分, 不再用绿/橙/紫的糖果色药丸。 */
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
    border-radius:5px;padding:3px 7px;white-space:nowrap;letter-spacing:.02em}
  .pill.open{background:var(--ink);color:#fff}
  .pill.soon,.pill.near{background:var(--accent-soft);color:var(--ink2)}
  .pill.later{background:var(--accent-soft);color:var(--muted)}
  .pill.unknown{background:var(--accent-soft);color:var(--faint)}
  .pill .d{width:5px;height:5px;border-radius:50%;background:currentColor;
    animation:pulse 2.4s ease-in-out infinite}
  .pill.open .d{background:#fff}
  .pill.later .d,.pill.unknown .d{animation:none}
  .tag{font-size:11px;padding:3px 7px;border-radius:5px;background:transparent;
    border:1px solid var(--line);color:var(--muted);font-weight:500;white-space:nowrap}
  .tag.lead{background:transparent;border-color:var(--ink);color:var(--ink);font-weight:600}
  .cname{margin:0;font-size:var(--fs-name);line-height:1.34;font-weight:600;
    letter-spacing:-.35px}
  .calias{margin:4px 0 0;font-size:12.5px;color:var(--faint)}
  .dates{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;
    border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:11px 0}
  .dates.one{grid-template-columns:1fr}
  .dt{min-width:0}
  .dt span{display:block;font-size:10.5px;font-weight:700;color:var(--faint);
    letter-spacing:.6px;margin-bottom:3px}
  .dt strong{display:block;font-size:14px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-width:0}
  .meta .ic{flex:none;opacity:.55}
  .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
  .fresh{font-size:11.5px;color:var(--faint);display:inline-flex;align-items:center;gap:5px}
  .fresh.live{color:var(--open)}
  .go{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;
    font-weight:600;color:#fff;border-radius:8px;padding:9px 16px;white-space:nowrap;
    background:var(--accent);letter-spacing:.01em;
    transition:background var(--dur-62) var(--ease)}
  .go{position:relative;overflow:hidden}
  .go:hover{text-decoration:none;background:var(--accent-ink)}
  .go:active{transform:translateY(1px)}
  .go::after{content:"";position:absolute;top:0;bottom:0;width:34%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
    transform:translateX(-120%);pointer-events:none}
  .go:hover::after{animation:sweep var(--dur-62) var(--ease)}
  /* 卡片里的官网入口: 文字 + 箭头, 不是实心按钮。
     原来每张卡片都刷一个大蓝按钮, 等于把强调色铺满整页 —— 强调色一旦到处都是
     就不再是强调。实心按钮只留给弹窗底部那个真正的"主操作"。 */
  .clink{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
    color:var(--ink);white-space:nowrap;letter-spacing:-.01em;
    box-shadow:inset 0 -1px 0 var(--ink);padding-bottom:2px;
    transition:color var(--dur-62) var(--ease),box-shadow var(--dur-62) var(--ease)}
  .clink:hover{text-decoration:none;color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
  /* 触摸设备上把命中区域撑到 44px 高(x 方向不外扩, 免得盖住相邻元素)。
     实测链接本体只有 23px 高, 手指点起来容易落空。 */
  @media (hover:none){
    .clink{padding-top:11px;padding-bottom:11px}
    .card .clink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px}
    .card{position:relative}
  }
  .clink .ar{transition:transform var(--dur-62) var(--ease)}
  .clink:hover .ar{transform:translate(2px,-2px)}
  .nogo{font-size:12.5px;color:var(--faint)}
  mark{background:var(--accent-soft);color:var(--ink);border-radius:2px;padding:0 2px;
    box-shadow:inset 0 -1px 0 var(--accent)}

  /* —— 按月视图 —— */
  .mgroups{display:flex;flex-direction:column;gap:6px}
  .mgroup{position:relative}
  .mgh{position:sticky;top:var(--topbar-h);z-index:5;margin:0 0 6px;
    display:flex;align-items:baseline;gap:10px;
    font-size:13.5px;font-weight:750;color:var(--ink);
    background:linear-gradient(180deg,var(--bg) 62%,rgba(235,242,241,.86));
    padding:9px 2px 8px;backdrop-filter:blur(6px)}
  .mgh .n{font-size:12px;font-weight:600;color:var(--faint)}
  .mgh::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand);
    align-self:center}
  .lrow{display:grid;grid-template-columns:1fr 190px 108px auto;gap:14px;
    align-items:center;background:rgba(255,255,255,.9);border:1px solid var(--line);
    border-radius:12px;padding:12px 16px;margin-bottom:6px;cursor:pointer;
    transition:var(--dur-62) var(--ease);box-shadow:var(--sh)}
  .lrow:hover{transform:translateX(2px);border-color:var(--ink);box-shadow:var(--sh2)}
  .lrow:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
  .lname{font-weight:640;font-size:14.5px;letter-spacing:-.2px;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ldate{font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .lgo{font-size:12.5px;font-weight:650;color:var(--brand);white-space:nowrap}
  @media (max-width:900px){
    .lrow{grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px}
    .lname{grid-column:1/-1}
    .ldate{grid-column:1/-1;color:var(--muted);font-size:12.5px}
  }

  /* 空状态线稿: 一张"空表格"。与全站的表格/刻度语言同源, 不是人物插画。 */
  .eart{width:132px;height:84px;margin:0 auto 20px;display:block;
    stroke:var(--line);fill:none;stroke-width:1.2;stroke-linecap:square}
  .eart .hd{fill:var(--accent-soft);stroke:none}
  .eart .accent{stroke:var(--accent);stroke-width:2}
  .eart .dash{stroke-dasharray:3 4;stroke:var(--line)}
  @media (prefers-reduced-motion:no-preference){
    /* 一条扫描线缓缓走过空表格 —— 极轻, 表示"在等你的条件" */
    .eart .scan{animation:scan 3.2s var(--ease) infinite}
    @keyframes scan{0%,100%{transform:translateX(0);opacity:.9}
      50%{transform:translateX(96px);opacity:.35}}
  }
  .empty{text-align:center;padding:70px 24px;color:var(--muted);grid-column:1/-1;
    background:rgba(255,255,255,.6);border:1px dashed var(--line);border-radius:var(--r)}
  .empty h3{color:var(--ink2);margin:0 0 8px;font-size:17px}

  .sk{border-radius:var(--r);background:rgba(82,135,129,.09);
    background-image:linear-gradient(90deg,rgba(82,135,129,.07) 0%,rgba(82,135,129,.16) 42%,rgba(82,135,129,.07) 84%);
    background-size:560px 100%;animation:shimmer 1.15s linear infinite;
    border:1px solid var(--line)}
  .sk.card{height:214px;cursor:default}
  .sk.hcard{height:196px;cursor:default}
/* 06-detail.css
   详情弹窗、页脚、底部导航, 以及最后的窄屏/触摸端覆写。
   由 index.html 的内联样式按层拆出; 加载顺序即层叠顺序, 不要调整。 */

/* ================= 详情 ================= */
  .ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:none;
    align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto;
    backdrop-filter:blur(3px)}
  .ov.on{display:flex;animation:fadein var(--dur-62) ease-out}
  .modal{background:#fff;border:1px solid var(--line);border-radius:14px;
    max-width:720px;width:100%;
    box-shadow:var(--sh3);animation:pop var(--dur-62) var(--ease);overflow:hidden;
    display:flex;flex-direction:column;max-height:calc(100vh - 96px)}
  @keyframes pop{from{opacity:0;transform:translateY(16px) scale(.985)}}
  @media (max-width:640px){
    .ov{padding:0;align-items:stretch}
    .modal{max-width:100%;border-radius:0;max-height:100vh;min-height:100vh}
    .mhead{padding:20px 18px 16px}
    .mbody{padding:18px 18px 20px}
    .mfoot{padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  }
  .mhead{padding:26px 28px 20px;border-bottom:1px solid var(--line)}
  .mhead h2{margin:9px 0 0;font-size:clamp(19px,2.2vw,23px);line-height:1.32;
    letter-spacing:-.5px;font-weight:750}
  .mclose{position:absolute;top:16px;right:18px;width:32px;height:32px;border-radius:9px;
    color:var(--faint);font-size:22px;line-height:1;display:grid;place-items:center;
    transition:var(--dur-62)}
  .mclose:hover{background:var(--line2);color:var(--ink);transform:rotate(90deg)}
  .mtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;
    padding-right:38px}
  .mbody{padding:22px 28px 26px;display:flex;flex-direction:column;gap:18px;
    overflow-y:auto;flex:1;min-height:0}
  .mdates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .mdates.one{grid-template-columns:1fr}
  .mdate{background:rgba(82,135,129,.07);border:1px solid transparent;
    border-radius:13px;padding:14px 16px}
  .mdate span{display:block;font-size:10.5px;font-weight:700;color:var(--faint);
    letter-spacing:.6px;margin-bottom:5px}
  .mdate strong{font-size:16px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
  .mrow{display:grid;grid-template-columns:92px 1fr;gap:14px;font-size:14px;
    padding-bottom:13px;border-bottom:1px solid var(--line2)}
  .mrow:last-of-type{border-bottom:none;padding-bottom:0}
  .mrow dt{color:var(--faint);font-size:12.5px;font-weight:600}
  .mrow dd{margin:0;color:var(--ink2);word-break:break-word}
  .mfoot{flex:none;display:flex;align-items:center;gap:14px;justify-content:space-between;
    padding:14px 28px;border-top:1px solid var(--line);
    background:rgba(255,255,255,.88);backdrop-filter:blur(20px);
    box-shadow:0 -1px 0 rgba(38,79,74,.07);flex-wrap:wrap}
  .mfoot .src{font-size:12px;color:var(--muted);line-height:1.55;min-width:0}
  .mfoot .acts{display:flex;align-items:center;gap:10px;margin-left:auto}
  @media (max-width:520px){ .mfoot .acts{width:100%} .mfoot .go{width:100%} }
  .note{font-size:12.5px;color:var(--faint);line-height:1.7;margin:0;
    background:rgba(255,255,255,.8);border-radius:11px;padding:12px 14px}

  /* ============ 详情弹窗: 分区 / 月份条 / 赛程流向 ============
     以前弹窗只有一个大标题加一串 .mrow, 信息薄且没有层次。现在分四块:
     时间窗口 -> 赛程路径 -> 关键信息 -> 参赛与分类。 */
  .msec{display:flex;flex-direction:column;gap:16px}
  .shead{display:flex;align-items:center;gap:11px;margin:0;
    font-size:11px;font-weight:700;color:var(--faint);
    letter-spacing:.15em;text-transform:uppercase}
  .shead::after{content:"";flex:1;height:1px;background:var(--line)}
  .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:560px){ .mgrid{grid-template-columns:1fr} }
  .mdate em{display:block;font-style:normal;font-size:12px;color:var(--faint);
    margin-top:6px;line-height:1.5}
  /* 长抽取值: 小一号、行距放开, 不当标题用 */
  .mdate .mval{font-size:13.5px;color:var(--ink2);line-height:1.58;
    overflow-wrap:anywhere;margin-top:3px}
  .mdate .stab + .mval{margin-top:5px;font-size:12px;color:var(--faint)}

  /* 时间规律 / 稳定性: 用一个小方块表示颜色语义, 顺带说明它是什么意思 */
  .stab{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;
    font-weight:650;color:var(--ink2)}
  .stab .sq{width:9px;height:9px;border-radius:3px;flex:none}
  .stab.s1 .sq{background:var(--open)}
  .stab.s2 .sq{background:var(--accent)}
  .stab.s3 .sq{background:var(--soon)}

  /* 月份条: 12 格, 报名/比赛各自着色, 两者重叠用斜纹。
     这比再写一行「通常 7–9 月」信息密度高得多, 而且一眼能跨年比对。 */
  .mstrip{margin-top:10px}
  .mbar{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
  .mbar i{height:9px;border-radius:3px;background:rgba(82,135,129,.13)}
  .mbar i.reg{background:var(--accent)}
  .mbar i.cmp{background:var(--open)}
  .mbar i.both{background:linear-gradient(135deg,var(--accent) 0 42%,
    var(--open) 42% 58%,var(--accent) 58% 100%)}
  .mticks{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:5px}
  .mticks span{text-align:center;font-size:9px;color:var(--faint);
    font-variant-numeric:tabular-nums;line-height:1}
  .mlegend{display:flex;gap:14px;margin-top:9px;font-size:11.5px;color:var(--muted)}
  .mlegend em{font-style:normal;display:inline-flex;align-items:center;gap:5px}
  .mlegend b{width:11px;height:5px;border-radius:2px;display:block}

  /* 赛程路径: 解析 stages 里的箭头。解析不出来就退化成纯文本, 不硬凑。 */
  .flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .flow .st{display:inline-flex;align-items:baseline;gap:6px;
    background:rgba(82,135,129,.075);border-radius:10px;padding:8px 12px}
  .flow .st b{font-size:10px;font-weight:800;color:var(--accent);flex:none;
    font-variant-numeric:tabular-nums}
  .flow .st span{font-size:13.5px;color:var(--ink2);line-height:1.4}
  .flow .ar{color:var(--faint);font-size:13px;flex:none}

  /* 参赛与分类: 标签墙 */
  .tagwall{display:flex;flex-wrap:wrap;gap:7px}
  .tagwall span{font-size:12.5px;color:var(--ink2);background:rgba(255,255,255,.9);
    border:1px solid var(--line);border-radius:8px;padding:4px 10px}

  /* 数据缺口的诚实提示: 16 条补充赛事还没有时间字段, 不要假装有 */
  /* 数据缺口提示: 单色 + 左侧粗竖线(结构性), 不再用橙色底 ——
     全页只有"7 天内临期"允许信号色, 提示靠结构而不是颜色也能被看见。 */
  .warn{display:flex;gap:13px;align-items:flex-start;font-size:12.5px;
    line-height:1.7;color:var(--ink2);background:#fff;
    border:1px solid var(--line);border-left:3px solid var(--ink);
    border-radius:4px;padding:14px 16px}
  .warn .ic{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;
    line-height:1.8;color:var(--ink);text-transform:uppercase}
  .warn a{font-weight:600;color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
  .warn a:hover{color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}

  footer.site{border-top:1px solid var(--line);background:rgba(255,255,255,.6);
    padding:30px 0 calc(40px + env(safe-area-inset-bottom));
    font-size:13px;color:var(--muted)}
  footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
  footer.site b{color:var(--ink2);display:block;margin-bottom:7px;font-size:13.5px}
  footer.site p{margin:0 0 8px;line-height:1.75}
  @media (max-width:760px){ footer.site .cols{grid-template-columns:1fr;gap:20px} }

  .fbtn{display:none;border:1px solid var(--line);background:#fff;
    border-radius:10px;
    padding:8px 14px;font-size:13px;color:var(--ink2);font-weight:600}
  html[data-device="tablet"] .fbtn,html[data-device="phone"] .fbtn{display:inline-flex}
  @media (max-width:900px){
    /* 同样要带回左右内边距, 否则这里的 0 会把整页的内容线冲掉(同上) */
    .layout{grid-template-columns:1fr;gap:16px;padding:16px var(--pad-x) 56px}
    aside.hide{display:none}
  }
  body{padding-bottom:112px}
  .campus-bottom-nav{position:fixed;z-index:200;left:50%;bottom:12px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(330px,calc(100vw - 32px));height:58px;padding:5px;border:1px solid #ceeae6;border-radius:18px;background:rgba(245,252,251,.96);box-shadow:0 6px 24px #243b2417;backdrop-filter:blur(15px)}
  .campus-bottom-nav a{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:650}
  .campus-bottom-nav a.active{background:#ebf2f1;color:var(--muted)}
  .campus-bottom-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
  .campus-bottom-nav a:focus-visible{outline:2px solid #0d5435;outline-offset:-3px}
  body:has(.ov.on) .campus-bottom-nav{display:none}

/* ================= 顶栏统一后的适配层 =================
   赛事页原来有一套自己的固定顶栏, 所以 .intro 用"负 margin + 等量大 padding"
   去补偿高度; 现在顶栏是全站共用的 sticky 顶栏(在正常流里), 这套补偿必须去掉。
   同理 .search 原来靠顶栏的 flex 上下文定位, 移进页内后要自己撑起布局。 */
.intro{margin-top:0;padding:26px 0 24px}
.search{position:relative;display:block;flex:none;max-width:560px;margin:20px 0 0}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2.2;pointer-events:none}
#q{display:block;width:100%;min-height:46px;padding:0 46px 0 40px;
  border:1px solid var(--line);border-radius:var(--rad-8);background:var(--bg);
  color:var(--ink);font-size:var(--fs-14)}
.search .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:11px/1 ui-monospace,Menlo,monospace;color:var(--faint);background:transparent}


/* ================= 使用者视角改进批次(赛事页) ================= */
.site-icp{text-align:center;margin:20px 0 0;font-size:12px}
.site-icp a{color:var(--faint);text-decoration:none}
.site-icp a:hover{text-decoration:underline}

/* ① 顶栏右侧补回搜索框: 上一步删掉顶部导航后, 顶栏右侧空了, 视觉失衡。
    搜索本来就是放在这里的, 上一轮我把它挪进页内 —— 现在归位。 */
.site-topbar .search{flex:0 1 420px;max-width:420px;margin:0 0 0 auto}
.site-topbar #q{min-height:42px;font-size:var(--fs-13)}
@media(max-width:820px){.site-topbar .search{display:none}}   /* 窄屏仍用页内搜索 */

/* ⑤ 首屏右侧约 40% 是空的: 宽屏下把统计卡与全年节奏放到右列, 首屏两侧都有内容 */
@media(min-width:1020px){
  .intro .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    column-gap:64px;row-gap:0;align-items:start}
  .intro .eyebrow{grid-area:1/1}
  .intro h1{grid-area:2/1}
  .intro .lede{grid-area:3/1}
  .intro .search{grid-area:4/1;margin-top:8px}
  .intro .stats{grid-area:1/2/4/3;margin:6px 0 0;max-width:none}
  .intro .rhythm{grid-area:4/2/5/3;margin-top:20px;max-width:none}
}

/* 2 列布局下大标题的字号与断行: 左列宽度约 594px, 原字号会把"去哪报名"断成两行 */
@media(min-width:1020px){
  .intro h1{font-size:clamp(34px,3.55vw,52px);letter-spacing:-1.4px}
  .intro h1 em{white-space:nowrap}   /* "去哪报名"必须整体在一起 */
}