/* 「不走按需加载」的几个页面的样式 —— 必须首屏就位。
 *
 * 为什么单独一个文件：2026-09-26 把 15 个页面模块改按需加载时，顺带把内联 <style> 拆成了
 * 11 个页面 CSS（PAGE_CSS 进页注入）。拆的时候是按「在原文件里挨着」切的，于是几段样式被切进了
 * 错误的文件：优惠券专区 + 人气榜整套落进 raffle.v1.css，冲榜赛(.mom-*)落进 hole.v1.css，
 * 榜单中心 + 活动日程落进 boards.v1.css —— 而这三页都不在 PAGE_CSS 里，没有任何时机会去拉这些文件。
 * 结果：index.html 的 #critical-hide 把页壳 display:none 了，而解除它的 .show 规则永远加载不到
 * → 点进去整页空白（内容其实渲染好了，38KB HTML 就在 DOM 里，只是不可见）。
 * 只有先逛过金库夺宝 / 树洞 / 荣誉榜的人才碰巧能打开。
 *
 * 所以：这些页面的样式一律放这里，由 index.html 静态 <link> 加载，不参与按需注入。
 * ⚠️ 本文件在 /css/* 下 = immutable 一年缓存：**改内容必须同时把文件名升 vN 并改 index.html 的 <link>**，
 *   否则已经加载过旧版的人一年内拿不到新样式（2026-09-27 第一次原地改就踩了，提交后才发现）。
 * ★ 往这里加东西前先想清楚：这个页面进不进 PAGE_CSS？进 → 样式写进它自己的页面 CSS；
 *   不进（首屏就有入口、或被别的页当组件复用）→ 写这里。
 *   tests/page-shell-css.test.mjs 会核对每个页壳的 .show 规则确实加载得到。
 */

/* ── 优惠券专区（首页两连瓷片入口 · 原在 raffle.v1.css） ────────────── */
#couponszone-page { display: none; }
#couponszone-page.show { display: block; }

/* ── 人气榜 · 竞技至尊擂台 + 押榜竞猜（底部导航 tab · 原在 raffle.v1.css） ── */
/* 人气榜 */
#crabboard-page { display: none; }
#crabboard-page.show { display: block; }
.cb-intro { font-size: 12px; color: var(--gray2); line-height: 1.6; margin: 0 2px 14px; }
.cb-rules { background: var(--bg1); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin: 0 0 14px; }
.cb-rules summary { list-style: none; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--white); padding: 10px 0; cursor: pointer; }
.cb-rules summary::-webkit-details-marker { display: none; }
.cb-rules summary iconify-icon { color: #ff8a3d; }
.cb-rules .cb-rules-arrow { margin-left: auto; color: var(--gray3); transition: transform 0.2s; }
.cb-rules[open] .cb-rules-arrow { transform: rotate(180deg); }
.cb-rules ul { margin: 0 0 12px; padding: 0 0 0 18px; }
.cb-rules li { font-size: 12px; color: var(--gray1); line-height: 1.9; }
.cb-rules li b { color: #ff8a3d; }
/* 人气榜 · 竞技至尊擂台（本页专属真金变量：站点 --gold 其实是蓝） */
#crabboard-page { --cbg: #e8a90a; --cbg2: #f6c33d; --cbfire: #ff8a3d; }
html.light #crabboard-page { --cbg: #c8860a; --cbg2: #d99a08; }
.cb2-head { display: flex; align-items: center; gap: 10px; padding: 16px 0 14px; }
.cb2-title { font-size: 19px; font-weight: 800; color: var(--white); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.cb2-title iconify-icon { color: var(--cbfire); }
.cb2-share { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #fff; background: var(--blue, #3b5be0); border: 1px solid var(--blue, #3b5be0); padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.cb2-share:active { transform: scale(0.96); }
/* 我的贡献/身份卡 */
.cb2-reward { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: -8px 0 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(232,169,10,0.16), rgba(246,195,61,0.07)); border: 1px solid rgba(232,169,10,0.4); }
.cb2-reward > iconify-icon { color: var(--cbg2); font-size: 20px; flex: none; }
.cb2-reward-tx { font-size: 12px; font-weight: 600; color: var(--gray1); line-height: 1.5; }
.cb2-reward-tx b { color: var(--cbg2); font-weight: 800; }
html.light .cb2-reward-tx b { color: #b3790a; }

/* 冲榜有奖·详情页活动卡（.cbz-*）——金主题，浅深双主题 */
.cbz-card { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(232,169,10,0.13), rgba(246,195,61,0.04)); border: 1px solid rgba(232,169,10,0.42); }
.cbz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cbz-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #1a1305; background: linear-gradient(135deg, #f6c33d, #e8a90a); padding: 4px 11px; border-radius: 999px; }
.cbz-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1a1305; animation: cbzPulse 1.6s infinite; }
@keyframes cbzPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .cbz-live::before { animation: none; } }
.cbz-target { font-size: 11px; color: var(--gray2); font-weight: 700; }
.cbz-bar { margin-top: 11px; }
.cbz-bt { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gray1); font-weight: 700; margin-bottom: 5px; }
.cbz-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
html.light .cbz-track { background: rgba(0,0,0,0.07); }
.cbz-fill { height: 100%; border-radius: 999px; }
.cbz-fill.m { background: linear-gradient(90deg, #e8a90a, #f6c33d); }
.cbz-fill.w { background: linear-gradient(90deg, #2f9e6f, #5fd0a0); }
.cbz-gap { font-size: 11px; margin-top: 5px; color: var(--gray2); }
.cbz-gap b { color: #f6c33d; font-weight: 800; }
html.light .cbz-gap b { color: #b3790a; }
.cbz-gap.w b { color: #4fbf8f; }
html.light .cbz-gap.w b { color: #2e8f66; }
.cbz-gap.ok { color: #4fbf8f; font-weight: 700; }
html.light .cbz-gap.ok { color: #2e8f66; }
.cbz-cd { display: flex; gap: 8px; margin-top: 12px; }
.cbz-cbox { flex: 1; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(232,169,10,0.2); border-radius: 11px; padding: 8px 4px; }
html.light .cbz-cbox { background: rgba(232,169,10,0.06); }
.cbz-cbox b { display: block; font-size: 19px; font-weight: 900; color: #f6c33d; line-height: 1; }
html.light .cbz-cbox b { color: #b3790a; }
.cbz-cbox span { font-size: 10px; color: var(--gray2); }
.cbz-cbox.hot { border-color: rgba(255,138,61,0.5); }
.cbz-cbox.hot b { color: #ff8a3d; }
.cbz-rwd { margin-top: 12px; border-top: 1px solid rgba(232,169,10,0.18); padding-top: 11px; display: grid; gap: 7px; }
.cbz-r { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--gray1); }
.cbz-mk { font-size: 10px; font-weight: 800; width: 46px; text-align: center; padding: 3px 0; border-radius: 6px; flex: none; }
.cbz-mk.g { color: #1a1305; background: linear-gradient(135deg, #f6c33d, #e8a90a); }
.cbz-mk.s { color: #f6c33d; background: rgba(246,195,61,0.15); border: 1px solid rgba(246,195,61,0.4); }
html.light .cbz-mk.s { color: #b3790a; }
.cbz-mk.b { color: #4fbf8f; background: rgba(63,174,130,0.14); border: 1px solid rgba(95,208,160,0.4); }
html.light .cbz-mk.b { color: #2e8f66; }
.cbz-mk.wk { color: #0d2b1e; background: linear-gradient(135deg, #5fd0a0, #3fae82); }
.cbz-cta { margin-top: 13px; width: 100%; padding: 12px; border: none; border-radius: 13px; background: linear-gradient(135deg, #f6c33d, #e29a0a); color: #1a1305; font-size: 15px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: 0 10px 22px -8px rgba(232,169,10,0.55); }
.cbz-cta iconify-icon { font-size: 17px; }
.cbz-cta:active { transform: scale(0.98); }
.cbz-boardlink { margin-top: 9px; width: 100%; text-align: center; font-size: 12px; font-weight: 700; color: var(--gray2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.cbz-boardlink iconify-icon { font-size: 14px; }

/* 冲榜有奖·助攻榜弹层（.cbzb-*）*/
#cbz-board-modal { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 10000; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.7); }
#cbz-board-modal.open { display: flex; }
.cbzb-card { width: 100%; max-width: 440px; max-height: 82vh; overflow-y: auto; background: var(--bg1); border-radius: 20px 20px 0 0; padding: 20px 16px 26px; position: relative; }
.cbzb-x { position: absolute; top: 14px; right: 14px; color: var(--gray2); cursor: pointer; font-size: 20px; }
.cbzb-h { font-size: 17px; font-weight: 900; text-align: center; color: var(--gray1); margin-bottom: 14px; }
.cbzb-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cbzb-tab { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid rgba(232,169,10,0.25); background: transparent; color: var(--gray2); font-size: 13px; font-weight: 700; cursor: pointer; }
.cbzb-tab.on { color: #1a1305; background: linear-gradient(135deg, #f6c33d, #e8a90a); border-color: transparent; }
.cbzb-row { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-top: 1px solid var(--line); }
.cbzb-row:first-child { border-top: none; }
.cbzb-pos { width: 24px; text-align: center; font-size: 15px; font-weight: 900; color: var(--gray2); flex: none; }
.cbzb-row.one .cbzb-pos, .cbzb-row.three .cbzb-pos { color: #f6c33d; }
html.light .cbzb-row.one .cbzb-pos, html.light .cbzb-row.three .cbzb-pos { color: #b3790a; }
.cbzb-nm { flex: 1; min-width: 0; font-size: 13.5px; color: var(--gray1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbzb-row.me { background: rgba(232,169,10,0.1); border-radius: 10px; }
.cbzb-row.me .cbzb-nm { color: #f6c33d; font-weight: 800; }
html.light .cbzb-row.me .cbzb-nm { color: #b3790a; }
.cbzb-amt { font-size: 15px; font-weight: 900; color: #f6c33d; flex: none; }
html.light .cbzb-amt { color: #b3790a; }
.cbzb-dash { text-align: center; border-top: 1px dashed rgba(95,208,160,0.5); margin: 9px 0 2px; }
.cbzb-dash span { position: relative; top: -9px; background: var(--bg1); padding: 0 10px; font-size: 10.5px; color: #4fbf8f; }
html.light .cbzb-dash span { color: #2e8f66; }
.cbzb-empty { text-align: center; color: var(--gray2); font-size: 13px; padding: 24px 0; }
.cbzb-reward { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--gray1); background: linear-gradient(135deg, rgba(232,169,10,0.14), rgba(246,195,61,0.05)); border: 1px solid rgba(232,169,10,0.35); border-radius: 12px; padding: 9px 12px; margin-bottom: 12px; }
.cbzb-reward iconify-icon { color: #f6c33d; font-size: 16px; flex: none; margin-top: 1px; }
html.light .cbzb-reward iconify-icon { color: #b3790a; }
.cbzb-reward b { color: #f6c33d; font-weight: 800; }
html.light .cbzb-reward b { color: #b3790a; }

/* ── 本周冲榜赛：.mom-* 是人气榜「本周冲榜赛」tab 在用（crabboard.v2.js 渲染），
 *    #momentum-page 是已并入人气榜的旧页壳（switchPage 开头就重定向，留着不碍事）。原在 hole.v1.css ── */
/* 冲榜赛 */
#momentum-page{display:none;}
#momentum-page.show{display:block;position:relative;z-index:1;min-height:100vh;}
#momentum-page.show::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:var(--bg);}
.mom-count{display:inline-flex;align-items:center;gap:6px;background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gray1);font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;margin:2px 2px 12px;}
.mom-count iconify-icon{color:var(--blue);font-size:14px;}
.mom-segs{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.mom-seg{flex:none;padding:7px 15px;border-radius:20px;border:1px solid var(--line);background:var(--bg1);color:var(--gray2);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}
.mom-seg.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 8px rgba(59,91,224,0.3);}
.mom-mine{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:14px;padding:13px 14px;margin-bottom:14px;}
.mom-mine .big{font-size:30px;font-weight:850;color:#12a65a;letter-spacing:-.02em;line-height:1;}
.mom-mine .big small{font-size:13px;font-weight:700;color:var(--gray2);margin-left:4px;}
.mom-mine .ln{font-size:12.5px;color:var(--gray1);margin-top:8px;display:flex;flex-wrap:wrap;gap:10px;}
.mom-mine .ln b{color:var(--blue);}
.mom-row{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--bg1);border:1px solid transparent;border-radius:14px;margin-bottom:8px;}
.mom-row.me{background:var(--gold-bg);border-color:var(--gold-border);}
.mom-rk{width:24px;text-align:center;font-weight:800;font-size:15px;color:var(--gray2);flex:none;}
.mom-rk.g1{color:#e0a12f;}.mom-rk.g2{color:#9aa3b2;}.mom-rk.g3{color:#c48a5a;}
.mom-av{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg3);}
.mom-nm{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mom-nm .metag{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:6px;background:var(--blue);color:#fff;margin-left:6px;}
.mom-dl{text-align:right;flex:none;}
.mom-dl .v{font-weight:800;font-size:15px;color:#12a65a;}
.mom-dl .u{font-size:10px;color:var(--gray3);}
.mom-glabel{font-size:13px;font-weight:800;color:var(--white);margin:16px 2px 10px;display:flex;align-items:center;gap:8px;}
.mom-glabel .cnt{font-size:11px;font-weight:600;color:var(--gray3);}

/* ── 空列表占位：树洞的类名，人气榜/冲榜赛也复用（原在 hole.v1.css，搬到首屏两边都能用） ── */
.hl-empty{text-align:center;color:var(--gray3);padding:50px 0;font-size:13px;line-height:1.7;}

/* ── 榜单中心 + 活动日程（发现页入口 · 原在 boards.v1.css） ────────── */
/* 榜单中心（合并入口） */
#boardhub-page { display: none; }
#boardhub-page.show { display: block; }
.bh-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg1); border: 1px solid var(--line); cursor: pointer; transition: transform 0.1s ease; }
.bh-item:active { transform: scale(0.99); }
.bh-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; }
.bh-tx { flex: 1; min-width: 0; }
.bh-t { font-size: 15px; font-weight: 700; color: var(--white); }
.bh-s { font-size: 12px; color: var(--gray2); margin-top: 2px; }
.bh-go { margin-left: auto; color: var(--gray3); font-size: 18px; flex: none; }

/* 活动日程（运营推荐日历：每天主推一个玩法） */
#schedule-page { display: none; }
#schedule-page.show { display: block; }


/* ══════════════════════════════════════════════════════════════════
 * 跨页复用的组件：由 A 页的 CSS 定义、却被 B 页渲染。
 * B 页不会注入 A 页的 CSS → 在 B 页上就是「一堆没样式的裸元素」。
 * 2026-09-27 现场：积分页的排课宝入口卡整个散架（图标/标题/副标题各占一行、没底色没圆角）。
 * 这类东西没有单一归属页，一律放首屏。tests/page-shell-css.test.mjs 有自动扫描钉死。
 * ══════════════════════════════════════════════════════════════════ */

/* ── 排课宝入口卡（积分页 / 会员页都在用，但这两页不注入 booking.v1.css）
   （原在 css/booking.v1.css） ── */
.bk-entry { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg1); border: 1px solid var(--line2); cursor: pointer; transition: transform .1s; }
.bk-entry:active { transform: scale(.985); }
.bk-entry .be-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-bg); color: var(--blue2); display: grid; place-items: center; font-size: 18px; }
.bk-entry .be-tx { flex: 1; min-width: 0; }
.bk-entry .be-t { font-size: 14px; font-weight: 800; color: var(--white); }
.bk-entry .be-s { font-size: 11px; color: var(--gray2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-entry .be-s b { color: var(--blue2); font-weight: 800; font-variant-numeric: tabular-nums; }
.bk-entry .be-go { font-size: 16px; color: var(--gray3); flex: none; }

/* ── 树洞的卡片 / 发帖传图块 —— 黑榜页(blackboard.v2.js)整套复用，但黑榜只注入 blackboard.v1.css
   （原在 css/hole.v1.css） ── */
.hl-card{background:var(--bg1);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 2px 12px rgba(20,30,60,.05);}
.hl-txt{flex:1;font-size:14px;line-height:1.6;color:var(--gray1);white-space:pre-wrap;word-break:break-word;cursor:pointer;}
.hl-card .hl-txt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.hp-imgtile{margin-top:14px;width:88px;height:88px;border:1.5px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--gray2);font-size:11px;cursor:pointer;background:var(--bg1);}
.hp-imgtile iconify-icon{font-size:22px;}
.hp-thumb{margin-top:14px;position:relative;width:88px;height:88px;}
.hp-thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.hp-thumb .x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border:2px solid var(--bg);}

/* ── 中奖/结果弹层 —— 积分竞拍(auction)和金库夺宝(raffle)整套复用，但它们各自只注入自己的 CSS
   （原在 css/lottery.v1.css） ── */
.lot-modal { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 900; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; padding: 30px; overflow: hidden; }
.lot-modal-card { position: relative; z-index: 2; width: 100%; max-width: 320px; background: linear-gradient(165deg, #1c0f30, #0c0718); border: 1.5px solid var(--lot-mag, #ff3ea5); border-radius: 22px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 30px 60px -18px rgba(0,0,0,0.75), 0 0 40px -8px rgba(255,62,165,0.6); animation: lotRise 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes lotRise { from{transform:scale(0.8) translateY(24px);opacity:0;} to{transform:none;opacity:1;} }
.lot-modal-card .m-ic { font-size: 46px; color: var(--lot-cy, #22e0e0); }
.lot-modal-card .m-t { font-size: 22px; font-weight: 900; margin-top: 10px; letter-spacing: -.01em; background: linear-gradient(90deg, #ff7cc4, #c9fff8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lot-modal-card .m-p { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; color: #fff; margin-top: 12px; background: linear-gradient(135deg, rgba(255,62,165,0.22), rgba(138,92,255,0.18)); border: 1px solid rgba(255,62,165,0.4); border-radius: 12px; padding: 8px 15px; text-shadow: 0 0 12px rgba(255,62,165,0.5); }
.lot-modal-card .m-p iconify-icon { color: var(--lot-lime, #c6ff3a); }
.lot-modal-card .m-s { font-size: 12.5px; color: var(--lot-mut, #a79bc8); margin-top: 12px; line-height: 1.6; }
.lot-modal-card .m-btn { margin-top: 18px; width: 100%; padding: 13px; border: none; border-radius: 13px; background: linear-gradient(135deg, var(--lot-mag, #ff3ea5), var(--lot-vio, #8a5cff)); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 22px -6px rgba(255,62,165,0.6); }
.lot-modal-card .lot-view-teacher { margin-top: 14px; width: 100%; padding: 11px; border: 1px solid rgba(255,255,255,0.14); border-radius: 13px; background: rgba(255,255,255,0.05); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lot-modal-card .lot-view-teacher iconify-icon { font-size: 16px; color: var(--lot-cy, #22e0e0); }
.lot-modal-card .lot-view-teacher:active { transform: scale(0.97); }
.lot-modal-card .lot-view-teacher + .m-btn { margin-top: 10px; }