/* =========================================================
   苏州万能墙 · 自媒体官网 —— 仅补「内容区」样式
   ---------------------------------------------------------
   设计系统（配色 / 毛玻璃 / 描边 / 按钮 / 顶栏 / Tab 栏 / 内容卡）
   全部来自 ./base.css（与校园账号查询站同一份），这里绝不重定义。
   本文件只补主站没有的几块内容排布。
   硬规则（用户明确要求，改前先读）：
     · 不要「框套框」—— 一张内容卡里只放分隔线行，绝不再套第二层带边框的盒子。
     · 圆角一律走 --radius-card（32px）体系，图标瓷砖用固定的 10px，
       任何地方都不许出现直角。
   新增样式一律引用 base.css 的 :root token，不要写字面量。
   ========================================================= */

/* ---------- 内容卡内的通用「分隔线行」基底 ----------
   主站 .content-card 已是整套（--radius-card + 内边距），这里只补行式布局：
   每一块内容都是卡里的一行，行与行之间用细线分隔，不再各自套盒子。 */
.content-card > h3 { margin-bottom: 6px; }

/* ---------- 信息页顶部快捷入口行 ----------
   它现在是信息页的最外层（不再是 .content-card 的子元素），所以用主站 .glass 同款底：
   一张卡 + 内部分隔线行，不再套第二层盒子。 */
#moreGroup {
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);   /* base 的 .more-group 只给行内距，圆角在这里补齐 */
  overflow: hidden;                    /* 首/末行 hover 高亮不越出圆角 */
  margin-bottom: 16px;
}
#moreGroup .more-row { padding: 14px 18px; }

/* =========================================================
   ⚠️ 顶栏命中修复（官网专属，不改 base.css）
   ---------------------------------------------------------
   base.css 的 .nav-title 是 .nav-bar（flex，z50）里的普通流式子元素，
   而 #navBrandHome / #navBack 是 position:absolute（left:14px）——
   两者横向重叠，且 .nav-title 在 DOM 里排在后面 ⇒ elementFromPoint 命中的是
   .nav-title，品牌胶囊/返回钮根本收不到 pointerdown，
   initPressSpring 的跟手弹永远不触发（实测 translate 恒为 0）。
   修法：标题纯装饰、无交互 → 直接让它不吃指针事件。
   （只在本文件改，base.css 保持与校园站逐字节一致。） */
.nav-title { pointer-events: none; }

/* ---------- 行：图标 + 主文字 + 右侧说明，不设边框、不设底色 ---------- */
.social-list, .spec-list, .notice-list, .article-list { list-style: none; margin-top: 6px; }
.social-row, .notice-row, .article-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 0;
}
.social-row + .social-row,
.notice-row + .notice-row { border-top: 1px solid var(--glass-border); }

/* ---------- 发现我们 ---------- */
.social-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px; color: #fff;
}
.ico-weibo  { background: linear-gradient(135deg, #ff8a4c, #ff4d4d); }
.ico-weixin { background: linear-gradient(135deg, #4ce07a, #16b34a); }
.ico-qq     { background: linear-gradient(135deg, #4cb6ff, #1c7dff); }
/* 小红书：官方红（#ff2442）做主色，往右上提亮一档做渐变 */
.ico-xhs    { background: linear-gradient(135deg, #ff5c6e, #ff2442); }
.social-name { flex: 1; font-size: 15px; font-weight: 600; }
.social-desc { font-size: 13.5px; color: var(--ink-2); }

/*  QQ 行右侧「添加」按钮：不再直接亮账号，点了跳校园账号查询站。
    做成小号胶囊，主色描边 + 主色字，右对齐；视觉权重低于左侧名称，不抢行主次。 */
.social-add {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--tint); color: var(--tint);
  font-size: 13px; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s;
}
.social-add i { font-size: 11px; }
.social-add:active { background: var(--tint); color: #fff; }

/* ---------- 文章行（接口生成，点击进详情） ----------
   两处用法必须分开对待：
     ① 首页 #articleGrid —— 它已经在 .content-card.glass 里，卡片和内距都由主站给，
        这里只补行式布局，绝不能再加一层底/边/圆角（否则框套框）。
     ② 信息页 #listGrid —— 它是 #view-list 的裸子元素、卡外直接落地，
        必须自己长成一张卡（跟上面 #moreGroup 同款），否则文章标题会顶到屏幕边缘（x=14），
        与快捷入口行文字（x=77）差 60 多像素，两种左对齐节奏叠一起 → 用户说的
        「左右边距太窄、看着怪」。行内左距 63 = 18(卡内距) + 32(图标占位) + 13(gap)，
        缩进后文章标题与「投稿须知」那行文字严格对齐。 */
.article-row { cursor: pointer; align-items: flex-start; }
.article-row:active { background: rgba(var(--ink-rgb), 0.03); }

/* ② 信息页：裸列表自己长成卡片 + 左右对称内距
   ⚠️ 这里**故意不缩进 63px**：上一轮为了跟快捷入口行的文字左边界（x=78）对齐，
      给文章行塞了 18+32+13=63 的左侧内距 —— 但信息流**本身没有图标**，
      前面留出图标位就是凭空一段空档（用户原话：「它前面有空干嘛，我这个信息流又没有图标」）。
      正解：文章行的左右内距对称 = 18px，左边界跟卡片内距走（与首页文章卡一致），
      没有图标就不给图标留位。 */
#listGrid {
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 16px;
}
#listGrid .article-row { padding: 16px 18px; gap: 13px; }
#listGrid .article-row + .article-row { border-top: 1px solid var(--glass-border); }
/* 骨架屏占位（首屏接口未回）：左右内距与文章行对齐，避免到位后横向跳动 */
#listGrid .article-skel { margin: 8px 18px; }
.article-main { flex: 1; min-width: 0; }
.article-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.article-date { font-size: 12px; color: var(--ink-3); }
.article-excerpt {
  margin-top: 5px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-go { flex: none; margin-top: 3px; color: var(--ink-3); font-size: 13px; }
.article-row:active .article-go { color: var(--tint); }
/* 骨架屏：接口未回来时占位，避免内容跳动 */
.article-skel {
  height: 52px; border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.04);
  margin: 8px 0;
  animation: skelPulse 1.4s ease-in-out infinite;
}
@keyframes skelPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- 我们的专业 ---------- */
.spec-row { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; }
.spec-row + .spec-row { border-top: 1px solid var(--glass-border); }
.spec-row > i {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px;
  color: var(--tint); background: rgba(var(--tint-rgb), 0.1);
}
.spec-row h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.spec-row p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

/* ---------- 站点公告（样式保留：公告已并入文章列表，改用 article-row 渲染；
     这两条留给将来真要单独放公告块时复用，当前 HTML 里没有 .notice-* 节点） ---------- */
.notice-row { display: block; }
.notice-date { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.notice-text { font-size: 14.5px; margin-top: 3px; }

/* ---------- 卡片底部「查看全部」入口 ----------
   放在 .content-card 内、文章列表之下：一条与卡片左右内距对齐的细线分隔 + 居中一行，
   只作跳转，不抢文章本身的注意力（弱化色，hover/active 才转主题色）。
   左内距 22（= .content-card 的 padding）由卡片自带，这里只补上下留白与分隔线。 */
.card-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--glass-border);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; cursor: pointer;
  transition: color 0.2s;
}
.card-more i { font-size: 11px; transition: transform 0.25s var(--ease-spring); }
.card-more:hover, .card-more:active { color: var(--tint); }
.card-more:active i { transform: translateX(3px); }

/* ---------- 文章 / 须知详情页 ---------- */
.doc-body { font-size: 15px; color: var(--ink-2); line-height: 1.95; margin-top: 4px; }
.doc-body p + p { margin-top: 12px; }
.doc-body h3 {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 22px 0 10px; padding-left: 11px; border-left: 3px solid var(--tint); line-height: 1.4;
}
.doc-body ul { list-style: none; margin: 8px 0; }
.doc-body li { position: relative; padding: 4px 0 4px 16px; font-size: 14.5px; }
.doc-body li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tint);
}
.doc-body b { color: var(--ink); }

/* ---------- 统计条修正 ----------
   主站 .stat-num（25px）是给「12 / 8 / 3」短数字用的；
   官网是「1300万＋ / 9300万」长值，等宽 flex 会撑破容器。
   允许收缩 + 字号收敛，防横向溢出。 */
.stat-card { flex-wrap: wrap; }
.stat-item { min-width: 0; }
.stat-num { font-size: clamp(19px, 5.4vw, 25px); white-space: nowrap; }

/*  统计副标题（原版 .visitor-label）：整行独占，小字灰调居中，不抢三格数字的主次。
    .stat-card 已 flex-wrap，给它 flex-basis:100% 就能强制换到第二行。 */
.stat-note {
  flex-basis: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 420px) {
  .social-desc { font-size: 12.5px; }
}

/* =========================================================
   卡片描边改写（官网专属 · 只动卡片，其余全部保持 base.css 原生）
   ---------------------------------------------------------
   用户边界：
     · 只改：卡片 —— 斜向打光 → 静态淡灰细线
     · 不改（**保持 base.css 原生**）：
           顶部品牌胶囊 .nav-brand-home
           顶部圆钮 .nav-back/.nav-filter/.nav-share/.nav-menu
                    /.tab-search/.back-to-top
           底部 Tab 栏 .tab-bar
           —— 这几类在 site.css 里 **完全不出现任何 CSS 规则**，
              直接吃 base.css 的 --stroke-grey / --stroke-grey-flat
              （to bottom left / 190deg 斜角打光）原样。
   ========================================================= */

/* ---------------------------------------------------------
   B. 卡片：去掉斜向打光 → 静态淡灰细线
   ---------------------------------------------------------
   覆盖对象 = base.css 里所有吃到 --stroke-grey-card / 暗色对角白光的 ::after。
   几何全部沿用，只把 background 换成纯色 → 斜向明暗差消失，变成一圈均匀细线。
   不改尺寸、不改圆角、不改投影。
   --------------------------------------------------------- */
.stat-card::after,
.legend-card::after,
.menu-pop::after,
.filter-pop::after,
.filter-panel::after,
.dropdown--card .dropdown-menu::after,
.vf-drop .dropdown-menu::after,
.search-shell::after,
.legend-search::after,
.info-sheet::after,
.dev-sheet::after,
#liquidToastOv::after,
.peek-menu::after {
  background: rgba(28, 28, 33, 0.07);
}

body.dark .stat-card::after,
body.dark .legend-card::after,
body.dark .menu-pop::after,
body.dark .filter-pop::after,
body.dark .filter-panel::after,
body.dark .dropdown--card .dropdown-menu::after,
body.dark .vf-drop .dropdown-menu::after,
body.dark .search-shell::after,
body.dark .legend-search::after,
body.dark .info-sheet::after,
body.dark .dev-sheet::after,
body.dark #liquidToastOv::after,
body.dark .peek-menu::after {
  background: rgba(255, 255, 255, 0.14);
}

/* =========================================================
   暗色模式修复 · 信息页（#moreGroup / #listGrid）
   ---------------------------------------------------------
   问题：#moreGroup 与 #listGrid 的底写死 var(--glass-card)
        = rgba(255,255,255,0.66)（亮色专用 token，base.css 里没有暗色覆盖）
        → 暗色模式下渲染成一块「白色/灰色糊块」，非常突兀。
   修法：完全照抄校园站（css/style.css）的暗色配方 ——
        · 卡片本体：body.dark .school-card { background: rgb(var(--surface-dark-rgb)); }
        · 行：      body.dark .more-row  { background: rgba(var(--surface-dark-rgb), 0.62); }
        保持本文件「只补排布、配色走 base.css token」的原则，不写字面量。
   ========================================================= */

/* 容器：暗色下交回给行自己着色（与校园站一致，容器透明） */
body.dark #moreGroup,
body.dark #listGrid {
  background: transparent;
  border-color: var(--glass-border);
  box-shadow: var(--shadow-soft);
}

/* 行底色：暗色深玻璃，和校园站 .more-row 同款同值 */
body.dark #moreGroup .more-row,
body.dark #listGrid .article-row {
  background: rgba(var(--surface-dark-rgb), 0.62);
}
body.dark #moreGroup .more-row:hover,
body.dark #listGrid .article-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
body.dark #moreGroup .more-row:active,
body.dark #listGrid .article-row:active {
  background: rgba(255, 255, 255, 0.10);
}

/* 行分隔线：暗色下走白色微光（同校园站 rgba(255,255,255,0.08)） */
body.dark #moreGroup .more-row + .more-row,
body.dark #listGrid .article-row + .article-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* 骨架屏：亮色是 ink 4%，暗色必须改白（否则深底上看不见） */
body.dark .article-skel { background: rgba(255, 255, 255, 0.06); }

/* QQ 行「添加」按钮：暗色下主色描边偏暗，提亮一档保证可读 */
body.dark .social-add {
  border-color: var(--tint-dark, var(--tint));
  color: var(--tint-dark, var(--tint));
}

/* ============================================================================
   活动页 · 苏州校园食堂榜单
   ----------------------------------------------------------------------------
   · 每个板块自带年份 chips，顶部不再有全局切换
   · 榜单/菜品/评价的行都是按钮，点了弹「三年走势」
   · 只用全站 token；金/银/铜只给前三名，涨绿跌红沿用原图习惯
   ========================================================================== */

/* ---- 封面 ---- */
.act-hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 24px 20px 18px; margin-bottom: 16px;
  background: linear-gradient(160deg, rgba(255,149,0,.10), rgba(255,149,0,0) 58%), rgba(255,255,255,.72);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -18px rgba(var(--shadow-rgb), .45);
}
body.dark .act-hero {
  background: linear-gradient(160deg, rgba(255,149,0,.20), rgba(255,149,0,0) 58%), rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
}
.act-hero-glow {
  position: absolute; width: 220px; height: 220px; right: -70px; top: -90px;
  background: radial-gradient(circle, rgba(255,149,0,.35), rgba(255,149,0,0) 68%);
  filter: blur(6px); pointer-events: none;
}
.act-hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: #ff8a00; background: rgba(255,149,0, .12);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.act-hero-title { font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.22; margin: 0 0 6px; }
.act-hero-sub { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; }
.act-stats { display: flex; gap: 8px; }
.act-stat {
  flex: 1; min-width: 0; text-align: center; padding: 9px 4px 8px;
  border-radius: 15px; background: rgba(255,255,255,.6); border: 1px solid var(--glass-border);
}
body.dark .act-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.act-stat b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; color: #ff8a00; font-variant-numeric: tabular-nums; }
.act-stat span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-3); }

/* ---- 板块头：标题 + 年份 chips ---- */
.act-block { margin-bottom: 26px; }
.act-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 6px; }
.act-block-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.act-chips { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(var(--ink-rgb), .06); }
body.dark .act-chips { background: rgba(255,255,255,.08); }
.act-chip {
  border: none; background: none; font-family: inherit; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  padding: 5px 9px; border-radius: 9px; line-height: 1;
  transition: color .2s ease, background .25s ease, transform .2s var(--ease-spring);
}
.act-chip.on { color: #fff; background: linear-gradient(135deg,#ffb340,#ff7a00); box-shadow: 0 3px 10px -4px rgba(255,149,0, .8); }
.act-chip:active { transform: scale(.94); }
.act-note-mini { font-size: 11.5px; color: var(--ink-3); }
.act-sub { margin: 0 2px 10px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.act-sub b { color: var(--ink-2); font-weight: 700; }
.act-empty { margin: 0; padding: 16px; font-size: 13px; color: var(--ink-3); }

/* ---- 通用卡片面 ---- */
.act-card, .cp-col, .dish-card, .quote-card {
  background: rgba(255,255,255,.72); border: 1px solid var(--glass-border);
}
body.dark .act-card, body.dark .cp-col, body.dark .dish-card, body.dark .quote-card {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09);
}
.act-card { border-radius: 22px; overflow: hidden; }

/* ---- 榜单 ---- */
.rk-list { border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.72); border: 1px solid var(--glass-border); }
body.dark .rk-list { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09); }
.rk-row { padding: 9px 14px; }
/* 榜首：金底 + 皇冠 + 略大字号，让它一眼不同 */
.rk-champ {
  background: linear-gradient(100deg, #e2453f 0%, #c22f2a 58%, #a82722 100%);
  box-shadow: 0 6px 18px -10px rgba(194,47,42,.85);
}
.rk-champ .rk-name { font-size: 15px; font-weight: 800; color: #fff; }
.rk-champ .rk-val { font-size: 15px; color: #fff; }
.rk-champ .rk-delta.is-down { background: rgba(255,255,255,.2); color: #ffe0e0; }
.rk-champ .rk-delta.is-up { background: rgba(255,255,255,.2); color: #eaffef; }
.rk-champ .rk-delta.is-flat { background: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.rk-crown { flex: none; font-size: 12px; color: #ffd166; margin-right: -3px; }
.rk-champ .rk-no { color: #b3271f; background: #ffd166; box-shadow: none; }
.rk-champ .rk-chart.is-up .rk-line { stroke: #a8f0c0; }
.rk-champ .rk-chart.is-down .rk-line { stroke: #ffc4c4; }
.rk-champ .rk-chart.is-up .rk-dot, .rk-champ .rk-chart.is-down .rk-dot { stroke: #fff; fill: #c22f2a; }
.rk-champ .rk-num { fill: rgba(255,255,255,.9); }
.rk-champ .rk-fill { fill: rgba(255,255,255,.10); }
.rk-row + .rk-row { box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), .055); }
body.dark .rk-row + .rk-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.rk-main { display: flex; align-items: center; gap: 9px; }
.rk-no {
  flex: none; width: 25px; height: 25px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: rgba(var(--ink-rgb), .06);
}
.rk-no--1 { color: #fff; background: linear-gradient(160deg,#ffd166,#eea21f); }
.rk-no--2 { color: #fff; background: linear-gradient(160deg,#d3dae4,#98a4b5); }
.rk-no--3 { color: #fff; background: linear-gradient(160deg,#e8bb8c,#c5874c); }
.rk-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  line-height: 1.32; white-space: normal; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.rk-val { flex: none; font-size: 13.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rk-delta {
  flex: none; min-width: 44px; text-align: center;
  font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
.rk-delta.is-up { color: #0f9d58; background: rgba(15,157,88,.11); }
.rk-delta.is-down { color: #e5484d; background: rgba(229,72,77,.11); }
.rk-delta.is-flat { color: var(--ink-3); background: rgba(var(--ink-rgb), .05); }
body.dark .rk-delta.is-up { color: #4ade80; background: rgba(74,222,128,.14); }
body.dark .rk-delta.is-down { color: #ff7b7b; background: rgba(255,123,123,.15); }
body.dark .rk-delta.is-flat { background: rgba(255,255,255,.07); }

/* 第二行：整行铺开的三年走势（不点、不弹） */
.rk-extra { margin: 0 12px 2px 34px; }
.rk-chart { display: block; width: 100%; max-width: 340px; height: 46px; overflow: visible; }
.rk-line { fill: none; stroke: #9a9aa2; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rk-fill { fill: rgba(142,142,147,.09); }
.rk-chart.is-up .rk-line { stroke: #30b158; }
.rk-chart.is-up .rk-fill { fill: rgba(48,177,88,.10); }
.rk-chart.is-down .rk-line { stroke: #e5484d; }
.rk-chart.is-down .rk-fill { fill: rgba(229,72,77,.10); }
.rk-dot { fill: #fff; stroke: #9a9aa2; stroke-width: 1.6; }
.rk-chart.is-up .rk-dot { stroke: #30b158; }
.rk-chart.is-down .rk-dot { stroke: #e5484d; }
body.dark .rk-line { stroke: #8b8b93; }
body.dark .rk-dot { fill: #1c1c22; stroke: #8b8b93; }
body.dark .rk-chart.is-up .rk-line { stroke: #4ade80; }
body.dark .rk-chart.is-up .rk-dot { stroke: #4ade80; }
body.dark .rk-chart.is-down .rk-line { stroke: #ff7b7b; }
body.dark .rk-chart.is-down .rk-dot { stroke: #ff7b7b; }
.rk-num { font-size: 8.5px; font-weight: 700; fill: var(--ink-3); text-anchor: middle; font-variant-numeric: tabular-nums; }
.rk-year { font-size: 8px; fill: rgba(var(--ink-rgb), .30); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
body.dark .rk-year { fill: rgba(255,255,255,.32); }
.rk-champ .rk-year { fill: rgba(255,255,255,.72); }
.rk-none { display: block; padding: 3px 0 5px; font-size: 10px; color: rgba(var(--ink-rgb), .30); }

/* ---- 涨跌之最（贴在榜单卡下面） ---- */
.ex-card { margin-top: 10px; }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px 14px; }
.ex-head { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; margin-bottom: 7px; }
.ex-head.is-up { color: #0f9d58; }
.ex-head.is-down { color: #e5484d; }
body.dark .ex-head.is-up { color: #4ade80; }
body.dark .ex-head.is-down { color: #ff7b7b; }
.ex-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  width: 100%; padding: 5px 0; border: none; background: none; font-family: inherit;
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.ex-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ex-num { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-num.is-up { color: #0f9d58; }
.ex-num.is-down { color: #e5484d; }
body.dark .ex-num.is-up { color: #4ade80; }
body.dark .ex-num.is-down { color: #ff7b7b; }

/* ---- 菜品 / 评价：紧凑条目（无头像、无侧边装饰条） ---- */
.post-list { display: flex; flex-direction: column; gap: 6px; }
.post {
  background: rgba(255,255,255,.7); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 9px 12px 10px;
}
body.dark .post { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.post-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.post-who { min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-meta { flex: none; font-size: 10.5px; color: var(--ink-3); }
.post.is-bad .post-meta { color: #e5484d; }
body.dark .post.is-bad .post-meta { color: #ff7b7b; }
.post-body { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }

/* ---- 三年同框 ---- */
.cp-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr);
  gap: 9px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cp-grid::-webkit-scrollbar { display: none; }
.cp-col { border-radius: 18px; padding: 12px 11px; }
.cp-year { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; font-weight: 800; color: #ff8a00; margin-bottom: 8px; }
.cp-year small { font-size: 10px; font-weight: 600; color: var(--ink-3); }
.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-list li { display: flex; align-items: baseline; gap: 5px; font-size: 12px; line-height: 1.35; }
.cp-no { flex: none; width: 12px; text-align: center; font-size: 10.5px; font-weight: 800; color: var(--ink-3); }
.cp-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; }
.cp-val { flex: none; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- 页尾说明 ---- */
.act-note {
  margin: 12px 0 24px; padding: 14px 15px; border-radius: 20px;
  background: rgba(var(--ink-rgb), .035); border: 1px solid rgba(var(--ink-rgb), .06);
}
body.dark .act-note { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
body.dark .act-note p { color: rgba(255,255,255,.74); }
body.dark .act-note b { color: #fff; }
.act-note-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 9px; }
.act-note p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.85; color: rgba(var(--ink-rgb), .72); }
.act-note p:last-child { margin-bottom: 0; }
.act-note b { color: var(--ink); font-weight: 700; }

/* ---- 学校三年走势（底部弹层） ---- */
body.trend-lock { overflow: hidden; }
.trend-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,20,28,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .24s ease;
}
.trend-mask.in { opacity: 1; }
.trend-sheet {
  width: 100%; max-width: 480px;
  background: rgba(255,255,255,.94); border: 1px solid var(--glass-border);
  border-radius: 26px 26px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 50px -20px rgba(var(--shadow-rgb), .55);
  transform: translateY(18px); transition: transform .3s var(--ease-glider);
}
body.dark .trend-sheet { background: rgba(28,28,34,.96); border-color: rgba(255,255,255,.09); }
.trend-mask.in .trend-sheet { transform: translateY(0); }
.trend-grab { width: 38px; height: 4px; border-radius: 999px; background: rgba(var(--ink-rgb), .16); margin: 2px auto 12px; }
body.dark .trend-grab { background: rgba(255,255,255,.22); }
.tr-head h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 4px; line-height: 1.35; }
.tr-big { display: flex; align-items: baseline; gap: 8px; font-size: 27px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tr-chg { font-size: 12.5px; font-weight: 800; padding: 3px 7px; border-radius: 8px; }
.tr-chg.is-up { color: #0f9d58; background: rgba(15,157,88,.12); }
.tr-chg.is-down { color: #e5484d; background: rgba(229,72,77,.12); }
.tr-chg.flat { color: var(--ink-3); background: rgba(var(--ink-rgb), .06); }
.tr-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.trend { width: 100%; height: 132px; margin: 6px 0 2px; display: block; }
.trend .tg { stroke: rgba(var(--ink-rgb), .07); stroke-width: 1; }
body.dark .trend .tg { stroke: rgba(255,255,255,.09); }
.trend .tarea { fill: url(#trendFill); }
.trend .tbase { stroke: rgba(255,149,0,.55); stroke-width: 1.4; stroke-dasharray: 4 4; }
.trend .tline { fill: none; stroke: #ff8a00; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.trend .td { fill: #fff; stroke: #ff8a00; stroke-width: 2.2; }
.trend .td.is-last { fill: #ff8a00; }
.trend .tv { font-size: 9.5px; font-weight: 700; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.trend .ty { font-size: 9.5px; fill: var(--ink-3); text-anchor: middle; }
.tr-hint { margin: 2px 0 6px; font-size: 11.5px; color: var(--ink-3); }
.tr-list { list-style: none; margin: 6px 0 14px; padding: 0; }
.tr-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  font-size: 12.5px; border-top: 1px solid rgba(var(--ink-rgb), .06);
}
body.dark .tr-list li { border-top-color: rgba(255,255,255,.07); }
.tr-list li:first-child { border-top: none; }
.tr-y { flex: none; width: 42px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tr-v { flex: none; width: 62px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-p { flex: 1; color: var(--ink-3); }
.tr-d { flex: none; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr-d.up { color: #0f9d58; }
.tr-d.down { color: #e5484d; }
.tr-miss .tr-v { color: var(--ink-3); font-weight: 600; }
.trend-close {
  width: 100%; height: 46px; border: none; border-radius: 16px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg,#ffb340,#ff7a00); box-shadow: 0 8px 20px -10px rgba(255,149,0, .9);
}
.trend-close:active { transform: scale(.98); }

/* 活动页激活时，底部 Tab 选中态也走橘黄（只影响本页，不动全站组件） */
body.view-activity .tab-item.on { color: #ff7a00; }
body.dark.view-activity .tab-item.on { color: #ffa733; }
body.view-activity .tab-glider { background: rgba(255,149,0,.16); border-color: rgba(255,149,0,.22); }
body.dark.view-activity .tab-glider { background: rgba(255,149,0,.26); border-color: rgba(255,149,0,.30); }

/* 活动页：长页面统一「以顶部为缩放原点」，否则 0.99 的缩放作用在整页高度上，
   顶部内容会被甩动一大截，观感比其它页明显。 */
#view-activity > *:not(.large-title) { transform-origin: top; }
/* 标题带上自媒体主体名后变长，缩到 28px 才不会换行（换行就吸不上去）。
   ⚠️ 必须写成全局的 .large-title.lt-sm，不能挂在 #view-activity 下 ——
   吸顶时的克隆节点是 append 到 body 的，页内作用域的规则对它不生效，
   克隆按 34px 渲染会因超宽而放弃折叠（踩过）。 */
.large-title.lt-sm { font-size: 28px; letter-spacing: -.03em; }