/* Magene Season Ride 2026 — 按 hifi.html v2.18 / hifi-mobile.html v2.14（2026-10-23）实现
   设计 token：整页暗色（#03141a / #02131d）+ 橙 #de491d / 青 #42e5ff，
   方角 + 偏移阴影（新粗野风）+ 按钮扫光，Inter 字体（400/600/700/900 + Italic）
   字重只用包内五档：设计稿的 500 系笔误（包内无 Medium，浏览器本就回落 400），全站已显式对齐
   v2.18/v2.14 变更：奖品图换实拍+logo 水印、排版整体缩小（h2 clamp 46-88 / 移动 24px）、
   排行榜 PC 加纹理底图+三列居中、footer 缩版带社媒图标、理念区标题段落化 */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Black.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

:root {
    --sr-night: #02141d;
    --sr-night-2: #03141a;
    --sr-ink: #071c24;
    --sr-ice: #dffcff;
    --sr-snow: #f5fcfd;
    --sr-cyan: #42e5ff;
    --sr-blue: #1f50ff;
    --sr-cta: #de491d;
    --sr-cta-hover: #ff5b32;
    --sr-line-dark: rgba(201, 247, 255, .22);
    --sr-line-white: rgba(255, 255, 255, .1);
    --sr-muted-dark: #a8c6cd;
    --sr-muted-light: #526c74;
    --sr-content: 1320px;
    --sr-header: 78px;
    --sr-gutter: 28px;
}

html {
    scroll-behavior: smooth;
}

html {
    font-family: "Inter", Arial, sans-serif;
}

body {
    color: var(--sr-ink);
    background: var(--sr-night-2);
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.48;
    overflow-x: clip;
}

/* 移动端抽屉菜单展开时锁页面滚动(设计稿 body.modal-open, body.menu-open { overflow: hidden };modal-open 由 Bootstrap 弹窗自管) */
body.menu-open {
    overflow: hidden;
}

/* 进场动画的 X 轴位移(prize 卡 ±72px)会撑宽 layout viewport,手机上出现整页横向滑动;
   按参考稿做法在 main 上整体裁剪(clip 不产生滚动容器,sticky 头部/锚点平滑滚动不受影响)。
   注意:761-1100 视口已由下方中间视口段接管(timeline 改可收缩),1206 以上桌面定宽完整呈现 */
main {
    overflow: clip;
}

:focus-visible {
    outline: 3px solid var(--sr-cyan);
    outline-offset: 3px;
}

/* 参考稿无 Bootstrap,标题走浏览器默认 bold(700);覆盖 Bootstrap reboot 的 500 字重
   h1 也在列(页内唯一 h1 是无障碍隐藏的 hero 标题,包内无 Medium 档,500 会落空) */
h1,
h2,
h3 {
    font-weight: 700;
}

.skip-link {
    position: fixed;
    z-index: 1031;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    transform: translateY(-160%);
    background: #fff;
    color: var(--sr-ink);
    font-weight: 900;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ============ 按钮（方角 + 扫光 + 偏移阴影，覆盖 Bootstrap .btn 外观） ============ */
.btn-cta {
    min-height: 48px;
    padding: 13px 22px;
    border: 1px solid var(--sr-cta);
    border-radius: 0;
    background-color: var(--sr-cta);
    background-image: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .3) 48%, transparent 62%);
    background-repeat: no-repeat;
    background-position: 135% 0;
    background-size: 240% 100%;
    color: #fff;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
    box-shadow: 6px 6px 0 rgba(3, 20, 29, .15);
    transition:
        transform .24s cubic-bezier(.22, 1, .36, 1),
        background-color .24s ease,
        background-position .62s cubic-bezier(.22, 1, .36, 1),
        border-color .24s ease,
        color .24s ease,
        box-shadow .24s ease;
}

.btn-cta:hover,
.btn-cta:focus {
    transform: translateY(-2px);
    background-color: var(--sr-cta-hover);
    border-color: var(--sr-cta-hover);
    background-position: -35% 0;
    color: #fff;
}

.btn-cta:active {
    transform: translateY(1px) scale(.985);
    background-color: var(--sr-cta);
    border-color: var(--sr-cta);
    box-shadow: 2px 2px 0 rgba(3, 20, 29, .18);
    transition-duration: .08s;
}

/* 活动结束(提交截止已过):报名/提交入口统一降透明度 50% 且不可点(需求 2026-10-26;.btn-cta:disabled 旧 .45 同步改 .5) */
.btn-cta:disabled,
.btn-ghost:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.mobile-submit-bar .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 次按钮：描边 + 橙色填充扫入（hover 从右往左填充） */
.btn-ghost {
    min-height: 48px;
    padding: 13px 22px;
    border: 1px solid currentColor;
    border-radius: 0;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--sr-cta) 0 50%, transparent 50% 100%);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 205% 100%;
    color: inherit;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
    box-shadow: none;
    transition:
        transform .24s cubic-bezier(.22, 1, .36, 1),
        background-position .5s cubic-bezier(.22, 1, .36, 1),
        border-color .24s ease,
        color .24s ease;
}

.btn-ghost:hover,
.btn-ghost:focus {
    transform: translateY(-2px);
    border-color: var(--sr-cta);
    background-position: 0 0;
    color: #fff;
}

.btn-ghost:active {
    transform: translateY(1px) scale(.985);
    transition-duration: .08s;
}

/* ============ 顶部固定导航（sticky） ============ */
.site-header {
    position: sticky;
    z-index: 1030;
    /* 低于 Bootstrap 弹窗 backdrop(1050)，弹窗打开时被盖住 */
    top: 0;
    height: var(--sr-header);
    background: #02131d;
    color: #fff;
}

.header-inner {
    width: min(calc(100% - 56px), var(--sr-content));
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    width: 142px;
    margin-right: auto;
    flex: 0 0 auto;
}

.brand img {
    width: 100%;
    height: auto;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.desktop-nav a {
    position: relative;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    /* v2.18:导航字重 900→700 */
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -10px;
    height: 2px;
    background: var(--sr-cta);
    transition: right .2s ease;
}

.desktop-nav a:hover::after {
    right: 0;
}

/* 对齐参考稿 .header-join/.header-submit:flex 居中 —— 超宽文字两侧对称溢出,
   避免块级 text-align:center 把溢出全挤到右端、顶穿右边框 */
/* 宽 160/高 44 → 统一 200px 宽(用户需求 10-27:与排行区按钮同宽),左右边距 12→16px */
.header-btn {
    width: 200px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 200px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    color: #fff;
}

/* 双按钮间距 28→16(用户需求 10-28):flex gap 只能整行统一,负 margin 只收这一对,
   nav↔按钮的 28 不动;移动/中屏两按钮 display:none 不受影响 */
.header-btn + .header-btn {
    margin-left: -12px;
}

.mobile-menu-button,
.mobile-nav,
.mobile-submit-bar {
    display: none;
}

/* ============ 区块骨架（整页暗色，容器仅封顶 1320） ============ */
.section {
    position: relative;
    padding: 118px var(--sr-gutter);
    scroll-margin-top: calc(var(--sr-header) + 16px);
}

.section>.container,
footer>.container {
    max-width: var(--sr-content);
    padding-left: 0;
    padding-right: 0;
}

.section-light {
    background: var(--sr-night-2);
    color: #fff;
}

/* 参考稿 prizes/rules 背景是专属图(section-prizes/rules.jpg),不是通用噪点 */
.section-noise {
    color: #fff;
    background: var(--sr-night-2) url("../images/season-ride/noise-texture.png") center / cover no-repeat;
}

.section-prizes {
    color: #fff;
    background: var(--sr-night-2) url("../images/season-ride/section-prizes.jpg") center / cover no-repeat;
}

.section-rules {
    color: #fff;
    background: var(--sr-night-2) url("../images/season-ride/section-rules.jpg") center / cover no-repeat;
}

.section-ice {
    background: var(--sr-night-2);
    color: #fff;
}

.section-board {
    background: #02131d;
    color: #fff;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--sr-cta);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "/";
    font-size: 18px;
}

.section h2 {
    margin-bottom: 26px;
    /* 用户拍板:统一 80px/字距 2px(原 v2.18 clamp 46→88,1920 顶到 88、-.06em) */
    font-size: 80px;
    line-height: .87;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section h3 {
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 1.05;
}

/* Bootstrap 的 .lead 同名，此处覆盖为设计字号 */
.lead {
    max-width: 800px;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.55;
}

/* ============ 主 Banner（整图 KV：日期/标题/副标题已烤进图，PC 横版 + 移动竖版 <picture> 切换） ============ */
.hero {
    display: block;
    /* #top 锚点(logo 点击):设计稿 section 类型选择器全局带 scroll-margin=头部+16,
       hero 落点 78-94 为负被钳到 0 → 回绝对顶部;漏带会停在 sticky 头高位置,上方留滑动余量 */
    scroll-margin-top: calc(var(--sr-header) + 16px);
    color: #fff;
    background: var(--sr-night);
}

.hero-bg {
    display: block;
    width: 100%;
    height: auto;
}

/* ============ 活动介绍（左字右图，暗底） ============ */
.intro-grid {
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    gap: clamp(48px, 7vw, 110px);
    align-items: center;
}

.intro-copy p {
    max-width: 610px;
    color: rgba(255, 255, 255, .5);
}

.intro-copy .lead {
    width: 544px;
    max-width: 544px;
    margin-bottom: 50px;
    color: rgba(255, 255, 255, .5);
    font-size: 16px;
    line-height: 20px;
}

.intro-copy h2 {
    max-width: 544px;
    /* 设计稿 PC 行距 84/80=1.05(参考稿 hifi PC 定值);通用 .87 是参考稿移动端行距,四行大标题行框会互相叠压 */
    line-height: 1.05;
}

.text-link {
    width: fit-content;
    display: block;
    margin: 12px 0 0;
    color: inherit;
    font-size: 13px;
    font-style: italic;
    line-height: 18px;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
}

.text-link:hover {
    color: #fff;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 12→16(用户需求 10-28) */
    gap: 16px;
}

.about-actions .btn {
    min-width: 0;
    min-height: 72px;
    padding: 18px 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    box-shadow: none;
    /* 设计稿 ≥761 定宽 190/222;VIEW LEADERBOARD 文字 182px 超出内容盒,靠 nowrap 居中外溢到内边距(设计稿同款) */
    white-space: nowrap;
}

/* 190→200(用户需求 10-28:与头部/排行区按钮统一 200px) */
.about-actions .btn:first-child {
    width: 200px;
}

/* 222→200(用户需求 10-28:两按钮同宽) */
.about-actions .btn.btn-ghost {
    width: 200px;
}

.winter-photo {
    min-height: 600px;
    position: relative;
    overflow: hidden;
    background: var(--sr-night);
}

.winter-photo-main {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center;
}

/* 右下角 AI MODIFIED 徽章（设计稿 PC:14/14 锚定 116×26;移动端随 .winter-photo display:none 隐藏） */
.winter-photo-badge {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    width: 58px;
    height: 13px;
    object-fit: contain;
}

/* ============ 奖品展示（2×2 全图底卡 + 底部渐变文字区） ============ */
.prize-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 52px;
}

.prize-card {
    min-height: 610px;
    position: relative;
    overflow: hidden;
    border: 0;
    background: #0a2c39;
    isolation: isolate;
}

.prize-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 10, 16, .02) 28%, rgba(1, 14, 20, .94) 100%);
}

/* Mileage 卡(nth-child(3)):新图自带烤图 TOP3 面板,渐变推迟到面板底(≈64%)才起,
   免得压暗面板内的品名文字;面板下方深色带本就够文案对比(移动端断点内同款覆盖) */
.prize-card:nth-child(3)::before {
    background: linear-gradient(180deg, rgba(0, 10, 16, .02) 63%, rgba(1, 14, 20, .94) 100%);
}

/* <picture> 外壳铺满卡片，内部 img 负责裁切(素材已按卡片比例出图，正常不裁) */
.prize-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.prize-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 对齐参考稿桌面端:文案块顶部锚定(top + 定高),四张卡的 badge/标题/描述
   y 坐标一致(底部锚定时内容高度不同会上下浮动,同一行卡片横向错位) */
.prize-copy {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 353.75px;
    bottom: auto;
    height: 250px;
    padding: 46px 40px 42px;
}

.quantity {
    display: inline-flex;
    margin-bottom: 26px;
    padding: 8px 12px 7px;
    border: 1px solid var(--sr-cta);
    color: var(--sr-cta);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* v2.18:h3 定值 48px nowrap → clamp(1920 顶到 48),随视口缩 */
.prize-copy h3 {
    max-width: 520px;
    margin-bottom: 0;
    font-size: clamp(30px, 3vw, 48px);
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.prize-copy p {
    max-width: 550px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    line-height: 20px;
}

/* ============ 参与流程（5 列时间轴左对齐，移动端转纵向） ============ */
/* v2.18:五列按设计稿量取定宽(177-228),space-between 撑满 1320;342px 定高 */
.timeline {
    position: relative;
    display: grid;
    grid-template-columns: 177px 187px 192px 228px 157px;
    justify-content: space-between;
    gap: 0;
    min-height: 342px;
    margin-top: 70px;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 40px;
    right: 115px;
    height: 1px;
    /* v2.18:连线 2px→1px,起点右移对齐步骤点 */
    background: rgba(222, 73, 29, .58);
}

.step {
    position: relative;
    width: auto;
    padding: 70px 0 0;
    text-align: left;
}

.step::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 30px;
    /* v2.18:步骤点右移 30px,圆心压在连线上 */
    width: 20px;
    height: 20px;
    background: var(--sr-cta);
}

/* config 文本本身全大写(STEP 01),v2.18 字重 900→700、去字距 */
.step-number {
    display: block;
    min-height: 20px;
    color: var(--sr-cta);
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0;
    font-weight: 700;
    text-transform: uppercase;
}

/* v2.18:标题去大写(混合大小写原样),定高 68px 保证五列描述起始线一致 */
.step h3 {
    width: 100%;
    min-height: 68px;
    margin: 24px 0 0;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0;
    text-transform: none;
}

.step h3+p {
    margin-top: 8px;
}

.step p,
.step li {
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    line-height: 20px;
}

.step p {
    margin-bottom: 14px;
}

.step ul {
    margin: 0;
    padding: 4px 0 0 18px;
}

/* 参考稿:deadline 比正文小一号(14px vs 16px);用 .step p.deadline 压过 .step p 的 16px(0-1-1) */
.step p.deadline {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

/* ============ 活动规则（WE ACCEPT 大卡，桌面白色大字编号） ============ */
.section-noise .lead {
    color: var(--sr-muted-dark);
    font-size: 16px;
}

/* v2.18:lead 不限宽不换行(16px 在 1320 内单行放下) */
/* 用户定:60% 白 + 16px(基础 .lead 20px 是 About 区设计字号,不吃进来) */
.section-rules .lead {
    max-width: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
}

/* v2.18:两列定宽 216.58px 1fr */
.rule-card {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 216.58px 1fr;
    gap: 46px;
}

/* v2.18:h3 38px cyan uppercase → 30px 白色常规大小写 */
.rule-card h3 {
    color: #fff;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0;
    text-transform: none;
}

.rule-card ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rules;
}

.rule-card li {
    counter-increment: rules;
    display: grid;
    grid-template-columns: 68px 1fr;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--sr-line-dark);
}

/* 参考稿:每条 li 统一 border-top(首条上方也有线),last-child 再加 border-bottom 收底 */
.rule-card li:last-child {
    border-bottom: 1px solid var(--sr-line-dark);
}

/* v2.18:编号与正文 28px→20px,字重 900→700,计数去掉 0 前缀 */
.rule-card li::before {
    content: counter(rules);
    color: var(--sr-cta);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    text-align: center;
}

.rule-card li span {
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}

/* ============ 排行榜（亮青纹理底图 leaderboard-bg(与设计稿 leaderboard-background-final-pc 像素一致)+ 半透明面板 + 三列等宽居中，移动端表格形态） ============ */
/* v2.18:设计稿 1333px 为 10 行演示定高;站内 0-10 条动态 → 不设 min-height,section 随内容回流
   (末页行数不满时收短,否则定高会把面板下方撑出大片空白) */
.section-board {
    background: var(--sr-night) url("../images/season-ride/leaderboard-bg.jpg") center top / cover no-repeat;
}

.leader-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    min-height: 227.625px;
    margin-top: -28px;
    /* v2.18:头部上提,标题贴住背景图上部 */
    margin-bottom: 0;
    padding-bottom: 36px;
    border-bottom: 0;
    /* v2.18:去掉头部分隔线 */
}

.leader-head-copy {
    max-width: 790px;
}

.leader-head-copy h2 {
    margin-bottom: 20px;
}

.leader-head-copy p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    line-height: 20px;
}

.leader-actions {
    position: absolute;
    top: 125.88px;
    right: 0;
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

/* 宽 188 → 统一 200px(用户需求 10-27:与头部按钮同宽),左右边距 22→16px;高 72 随设计稿不动 */
.leader-actions .btn {
    width: 200px;
    height: 72px;
    min-height: 72px;
    padding: 18px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.section-board .btn-cta {
    box-shadow: none;
}

/* v2.18:工具条+表格+说明+分页整体蒙层(半透明夜色),工具条 108px/28px → 80px/24px
   蒙层改 ::before 铺满整个 panel(inset 0):设计稿是静态 10 行定高演示,站内 0-15 行动态,
   定高蒙层在行数不满时会把下方撑出大片空洞、绝对定位的分页也悬空脱节——
   改回流内自适应,满 15 行时与设计定高一致,不满时收紧贴内容 */
.leader-board-panel {
    position: relative;
    padding: 0 0 24px;
    isolation: isolate;
}

.leader-board-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(2, 19, 29, .4);
}

.leader-toolbar {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
}

/* 移动端说明文字挂在工具条标题下,桌面隐藏(桌面说明在表格下方 leader-note) */
.leader-note-mobile {
    display: none;
}

.refresh-button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #fff;
}

.refresh-button img {
    display: block;
    width: 36px;
    height: 36px;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

/* 图标 40→36(用户要求缩至 90%;按钮壳 40 不动=设计稿壳尺寸) */
.refresh-button:hover img,
.refresh-button:focus-visible img {
    transform: rotate(180deg) scale(1.08);
}

.refresh-feedback {
    display: none;
    font-weight: 900;
}

.refresh-button.is-refreshed img {
    display: none;
}

.refresh-button.is-refreshed .refresh-feedback {
    display: block;
}

/* v2.18:表头两侧补块(th 背景只铺到表格两侧内缩处,补块把 56px 高的表头带补满) */
.board-table-wrap {
    position: relative;
    overflow: visible;
}

.board-table-wrap::before,
.board-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    width: 41px;
    height: 56px;
    background: rgba(2, 19, 29, .7);
}

.board-table-wrap::before {
    left: 0;
}

.board-table-wrap::after {
    right: 0;
}

/* v2.18:表格两侧内缩(40/41px),三列等宽居中,固定布局 */
.board-table {
    width: calc(100% - 81px);
    margin: 0 41px 0 40px;
    border-collapse: collapse;
    table-layout: fixed;
}

.board-table th,
.board-table td {
    width: 33.333%;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.board-table th {
    height: 56px;
    border: 0;
    background: rgba(2, 19, 29, .7);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 16.28px;
    letter-spacing: 1.32px;
    text-transform: none;
}

.board-table td {
    height: 60px;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .18px;
}

.board-table tbody tr {
    transition: background .18s ease;
}

.board-table tbody tr:hover {
    background: rgba(66, 229, 255, .035);
}

/* 文本排名只有 ≥4 才会渲染(1-3 是奖牌切图,数字不露出),设计稿 4+ 为 CTA 色;
   不用 nth-child(n+4)——它按页内行号取行,第二页前 3 行(绝对排名 11-13)会误回灰色,移动端列表本就是全行 CTA 红 */
.board-table .rank {
    color: var(--sr-cta);
    font-size: 18px;
    letter-spacing: 0;
}

.board-table .distance {
    color: #fff;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}

.medal-badge {
    width: 48px;
    height: 48px;
    overflow: hidden;
    position: relative;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0;
}

.medal-badge .medal-art {
    display: block;
    max-width: none;
    object-fit: contain;
}

.medal-badge.gold .medal-art {
    width: 31.556px;
    height: 39.776px;
}

.medal-badge.silver .medal-art,
.medal-badge.bronze .medal-art {
    width: 44.444px;
    height: 47.145px;
}

.mobile-leader-list {
    display: none;
}

.leader-note {
    margin: 28px 0 0 40px;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    line-height: 20px;
    font-style: normal;
}

/* 分页（参考稿:← 页码 → 方块按钮;PC 回流内右对齐——设计稿绝对定位按 10 行定高演示,
   站内 0-15 行动态数据,行数不满时绝对定位会把分页悬空甩出面板;移动端居中） */
.board-pagination {
    position: static;
    display: flex;
    justify-content: flex-end;
    margin: 28px 40px 0;
}

.board-pagination .pagination {
    gap: 6px;
    margin-bottom: 0;
}

.board-pagination .page-button {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.board-pagination .page-button.current {
    border-color: var(--sr-cta);
    background: var(--sr-cta);
    color: #fff;
    cursor: default;
}

.board-pagination .page-button:disabled {
    opacity: .45;
    cursor: default;
}

.board-pagination .page-ellipsis {
    align-self: center;
    color: #fff;
}

/* ============ 活动理念（全屏底图，桌面 540px 缩版 + 标题段落化） ============ */
/* v2.18:860px → 540px;标题从 80px 大字降为 26px 段落级,与正文同字号同字重 */
.manifesto {
    /* 定高 520→334.6:上下留白→各 40(用户需求 10-27;内容 254.6 参与居中) */
    height: 334.6px;
    min-height: 334.6px;
    position: relative;
    /* 绝对定位的底图/遮罩以此为准，不逃逸到视口盖住首屏 */
    display: grid;
    align-items: center;
    color: #fff;
    background: var(--sr-night);
    isolation: isolate;
    scroll-margin-top: var(--sr-header);
}

.manifesto-bg {
    position: absolute;
    z-index: -3;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* <picture> 外壳 static 会占 grid 一行把内容挤出居中(设计稿 img 直接 absolute 无此问题);
   外壳 absolute 化后不参与 grid 布局,内部 img 仍按原规则铺满 */
.manifesto>picture {
    position: absolute;
    z-index: -3;
    inset: 0;
    display: block;
}

.manifesto>picture .manifesto-bg {
    inset: 0;
    width: 100%;
    height: 100%;
}

.manifesto .container {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

/* 上下留白对称(用户需求 10-26:顶端为参考),去 translateY(-10px) 不对称偏移 */
/* eyebrow→标题间距 40→20,与通用 eyebrow 一致(用户需求 10-27) */
.manifesto .eyebrow {
    margin-bottom: 20px;
}

/* 字号 20/行高 24,段落间距 16(用户需求 10-27) */
.manifesto h2 {
    max-width: var(--sr-content);
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.manifesto p {
    max-width: var(--sr-content);
    margin: 0 0 16px;
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}

.manifesto p:last-child {
    margin-bottom: 0;
}

/* ============ Footer（v2.18 缩版：小标题 + 社媒四格带图标） ============ */
footer {
    padding: 40px 28px 38px;
    /* v2.18:78px → 40px */
    border-top: 0;
    background: #010f16;
    color: #fff;
}

.footer-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

/* v2.18:大标题 clamp(34-58)/900 → 16px/500 常规大小写 */
.footer-title {
    max-width: 680px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
}

.footer-logo {
    width: 110.264px;
    opacity: 1;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 28px 0 0;
}

/* v2.18:四格保留描边,字号 13px/900 → 16px/500,加图标 + 箭头 */
.social-item {
    min-height: 60px;
    height: 60px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--sr-line-white);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    transition:
        transform .24s cubic-bezier(.22, 1, .36, 1),
        border-color .24s ease,
        background-color .24s ease,
        color .24s ease,
        box-shadow .24s ease;
}

.social-item:hover,
.social-item:focus-visible {
    transform: translateY(-2px);
    border-color: var(--sr-cta);
    background: rgba(222, 73, 29, .08);
    color: var(--sr-cta);
    box-shadow: inset 3px 0 0 var(--sr-cta);
}

.social-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 图标为独立切图(config icon-{name}.png),不用设计稿的雪碧图负偏移窗口法,视觉一致 */
.social-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.social-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.social-arrow {
    width: 12px;
    height: 12px;
    display: grid;
    place-items: center;
}

.social-arrow img {
    display: block;
    width: 12px;
    height: 12px;
}

.social-item span {
    transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}

.social-item:hover .social-arrow,
.social-item:focus-visible .social-arrow {
    transform: translate(4px, -4px);
}

.copyright {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--sr-line-white);
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

/* ============ Livewire 弹窗换皮（深色 entry-dialog：480px 底图 + 双 tab + 结果弹窗，对齐设计稿 v2.18） ============ */
.modal-backdrop.show {
    opacity: 1;
    background: rgba(0, 0, 0, .42);
}

.modal-dialog {
    max-width: 480px;
}

/* 双 tab 共用一张弹窗壳(480px 居中),底图随 tab 切换;min-height 弹性(错误提示撑高时深色底兜底) */
.modal-content.sr-modal {
    border: 0;
    border-radius: 0;
    background-color: #051d26;
    background-position: center top;
    background-repeat: no-repeat;
    color: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-content.sr-modal[data-entry-state="join"] {
    min-height: 528px;
    background-image: url("../images/season-ride/entry-dialog-join.jpg");
    background-size: 480px 528px;
}

.modal-content.sr-modal[data-entry-state="submit"] {
    /* min-height 846 弃用,改随内容回流(设计稿 height 随内容、按钮底=弹窗底-padding 32):
       定高超出内容 ~48px 把提交钮距底端撑到 80(用户需求 10-27:距最底端 32px);
       底图随高度拉伸(设计稿 background-size:480px 100%),高度变化不错切 */
    background-image: url("../images/season-ride/entry-dialog-submit.jpg");
    background-size: 480px 100%;
}

/* 结果弹窗(设计稿 result-dialog):纯深色 300px 定高(注册成功 399px) */
.modal-content.result-dialog {
    background-image: none;
    min-height: 300px;
}

.modal-content.result-dialog.registration-success {
    min-height: 399px;
}

/* 弹窗体：头/标签绝对定位之上,内容流式排布(join 从 tabs 下 21px 起) */
.sr-modal .dialog-inner {
    position: relative;
    padding: 0 24px 32px;
}

/* 弹窗头：绝对定位,标题 28px 白;关闭 × 悬出弹窗右上角 */
.sr-modal .dialog-head {
    position: absolute;
    z-index: 2;
    top: 31px;
    left: 24px;
    right: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.sr-modal .dialog-head h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 28px;
    letter-spacing: 0;
    text-transform: uppercase;
    /* 设计稿标题文案为大写直书,站内文案混排 → 统一转大写(Submit My Ride → SUBMIT MY RIDE) */
}

.dialog-close {
    position: absolute;
    z-index: 3;
    top: -17px;
    right: -12px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 48px;
    font-weight: 400;
    line-height: 50.4px;
}

.dialog-close:hover,
.dialog-close:focus-visible {
    border: 0;
    background: transparent;
    color: var(--sr-cta);
}

/* 双 tab：JOIN THE EVENT / SUBMIT MY RIDE，选中实心橙 */
.sr-modal .dialog-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 92px;
}

.sr-modal .dialog-tab {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    background: rgba(2, 19, 29, .6);
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: color .2s ease, background-color .2s ease;
}

.sr-modal .dialog-tab:not([aria-selected="true"]):hover,
.sr-modal .dialog-tab:not([aria-selected="true"]):focus-visible {
    color: #fff;
}

.sr-modal .dialog-tab[aria-selected="true"] {
    border: 0;
    background: var(--sr-cta);
    color: #fff;
    font-weight: 700;
}

/* 面板描述：join/submit 均为一行说明(submit 的标题行已并入弹窗头,随 tab 切换) */
.sr-modal .entry-description {
    margin: 21px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
}

.sr-modal .entry-description-copy {
    margin-top: 21px;
    color: rgba(255, 255, 255, .6);
    line-height: 14px;
}

/* 标题行删除后成为面板首行,间距对齐 join 说明的 21px */
/* 表单字段：标签 16px/700 白,输入 56px 深色无边框,聚焦橙环 */
.sr-modal .entry-field {
    display: grid;
    gap: 9px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0;
}

.sr-modal .entry-field>span:first-child {
    text-transform: uppercase;
}

.sr-modal .entry-email-field {
    margin-top: 22px;
}

.sr-modal .entry-instagram-field {
    margin-top: 22px;
}

/* submit 滚动区首字段顶部 margin 归零:设计稿该间距由滚动区 margin-top 26 提供,
   不归零会叠加成 48(说明行上下 21/48 不协调,用户走查);join 页说明→字段 22px 是设计值,不受影响 */
.sr-modal .ride-form-scroll>.entry-field:first-child {
    margin-top: 0;
}

/* 滚动区其余字段统一 22px 间距(设计稿 23px):distance/proof 原本无 margin 规则贴死上一字段,
   校验错误行插入后与下一字段标签 0 间距(用户走查) */
.sr-modal .ride-form-scroll>.entry-field {
    margin-top: 22px;
}

.sr-modal input.entry-input {
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 18px 16px;
    border: 0;
    border-radius: 0;
    background: rgba(2, 19, 29, .6);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    box-shadow: none;
}

.sr-modal input.entry-input::placeholder {
    color: rgba(255, 255, 255, .6);
    opacity: 1;
}

.sr-modal input.entry-input:focus {
    outline: 2px solid var(--sr-cta);
    outline-offset: 0;
    box-shadow: none;
}

.sr-modal input.entry-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.sr-modal input.entry-input[type="number"]::-webkit-inner-spin-button,
.sr-modal input.entry-input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* 字段说明小字（Instagram ID 匹配提示 / 截图要求） */
.sr-modal .field-note {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
}

/* submit 面板滚动区：字段多内部滚动,滚动条贴弹窗右缘(设计稿 ride-form-scroll)
   定高 521→auto(设计稿现行 height:auto/overflow:visible):定高超出内容 25px slack
   把提交钮上方间距撑到 73,改 auto 后间距全由按钮 margin 提供(用户需求 10-27:按钮距上元素 40px) */
.sr-modal .ride-form-scroll {
    margin: 26px -24px 0;
    padding: 0 24px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, .36) transparent;
    scrollbar-width: thin;
}

.sr-modal .ride-form-scroll::-webkit-scrollbar {
    width: 5px;
}

.sr-modal .ride-form-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sr-modal .ride-form-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255, 255, 255, .36);
}

/* 文件选择壳：整块可点,原生 input 铺满透明(按钮文字不跟浏览器语言走) */
.sr-modal .file-input-shell {
    height: 56px;
    min-height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    overflow: hidden;
    background: rgba(2, 19, 29, .6);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
}

.sr-modal .file-input-shell input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* 橙环只给键盘焦点(用户需求 10-27:去掉点击的橙色效果——点击聚焦原生 file input 不再闪橙环),
   Tab 遍历仍可见:file input 非文本输入,鼠标点击不触发 :focus-visible */
.sr-modal .file-input-shell:has(input[type="file"]:focus-visible) {
    outline: 2px solid var(--sr-cta);
    outline-offset: 0;
}

.sr-modal .file-upload-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.sr-modal .file-input-shell.has-files {
    border: 1px solid rgba(255, 255, 255, .2);
}

/* 已选文件列表：文件行 28px + 名称 ellipsis + × 删除 */
.sr-modal .proof-file-list {
    max-height: 84px;
    display: grid;
    gap: 0;
    margin: 8px 0 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    scrollbar-color: rgba(255, 255, 255, .36) transparent;
    scrollbar-width: thin;
}

.sr-modal .proof-file-list::-webkit-scrollbar {
    width: 4px;
}

.sr-modal .proof-file-list::-webkit-scrollbar-track {
    background: transparent;
}

.sr-modal .proof-file-list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255, 255, 255, .36);
}

.sr-modal .proof-file-row {
    min-width: 0;
    height: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.sr-modal .proof-file-name,
.sr-modal .proof-file-remove {
    min-width: 0;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.sr-modal .proof-file-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.sr-modal .proof-file-name:hover,
.sr-modal .proof-file-name:focus-visible {
    color: var(--sr-cta);
}

.sr-modal .proof-file-remove {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
}

.sr-modal .proof-file-remove:hover,
.sr-modal .proof-file-remove:focus-visible {
    color: var(--sr-cta);
}

/* 文件名点击 → 大图预览(设计稿 proof-image-dialog):全屏蒙层 + 图片 contain,点 × / 蒙层收起 */
.proof-preview-backdrop {
    position: fixed;
    z-index: 1080;
    /* Bootstrap modal 1055 / backdrop 1050 之上 */
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .72);
}

.proof-image-dialog {
    width: min(92vw, 960px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #02131d;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
}

.proof-image-dialog .proof-image-inner {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 48px 24px 20px;
}

.proof-image-dialog .proof-image-close {
    position: absolute;
    top: 4px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 38px;
    line-height: 40px;
}

.proof-image-dialog .proof-image-close:hover,
.proof-image-dialog .proof-image-close:focus-visible {
    color: var(--sr-cta);
}

.proof-image-dialog img {
    width: 100%;
    max-height: calc(100dvh - 145px);
    object-fit: contain;
    background: rgba(0, 0, 0, .28);
}

.proof-image-dialog .proof-image-name {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proof-image-dialog .proof-preview-unsupported {
    margin: 0;
    padding: 40px 0;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    text-align: center;
}

/* 校验错误：红字 + 感叹图标（设计稿 form-message）；join 的错误统一进按钮上方槽位 */
.sr-modal .form-message-slot {
    min-height: 18px;
    display: grid;
    gap: 4px;
    align-content: start;
    margin: 14px 0 0;
}

.sr-modal .form-message {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    color: #ff8080;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
}

.sr-modal .form-message::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: url("../images/season-ride/error-status-icon.svg") center / 14.9px 14.9px no-repeat;
}

.sr-modal .form-switch-link {
    color: #ff8080;
    font-style: italic;
    font-weight: 900;
    text-decoration: underline;
}

/* 弹窗内主按钮：56px 橙色实心 */
/* margin-top 28→40(用户需求 10-27:join/submit 两页最下面的按钮距上面元素 40px):
   submit 页滚动区改 auto 后 0+40=40;join 页按钮上方是留位槽,由下方邻接选择器修正 */
.sr-modal .entry-submit {
    margin-top: 40px;
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 18px 22px;
    border: 0;
    background-color: var(--sr-cta);
    background-image: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    box-shadow: none;
}

.sr-modal .entry-submit:hover,
.sr-modal .entry-submit:focus-visible {
    background-color: #ff5b32;
    box-shadow: none;
}

/* join 页按钮上方是错误留位槽(margin 14 + min-height 18):视觉间距 14+18+8=40 与 submit 页一致,
   错误进字段不进槽,槽高恒定,报错时按钮位置不位移(10-26 决定保留) */
.sr-modal .form-message-slot + .entry-submit {
    margin-top: 8px;
}

.sr-modal .submit-loading {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

/* 结果弹窗：标题/文案/动作按钮（设计稿 result-dialog，动作贴底锚定） */
.result-dialog .dialog-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 43px 24px 41px;
}

.result-dialog .result-title {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0;
    text-align: center;
}

.result-dialog .result-copy {
    margin: 15px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

.result-dialog .result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.result-action {
    min-width: 0;
    height: 56px;
    padding: 0 12px;
    border: 1px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
}

.result-action.primary {
    border-color: var(--sr-cta);
    background: var(--sr-cta);
}

.result-action:hover,
.result-action:focus-visible {
    border-color: var(--sr-cta);
    color: #fff;
}

.result-action.primary:hover,
.result-action.primary:focus-visible {
    background: #ff5b32;
}

/* YOU'RE IN.：注册成功（399px 定高）,check 图 + DONE + 已完成引导 */
.result-dialog .result-check {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto;
}

.registration-success .dialog-inner {
    padding: 44px 24px 21px;
}

.registration-success .result-title {
    margin-top: 12px;
}

.registration-success .result-copy {
    margin-top: 20px;
    font-size: 14px;
    line-height: 20px;
}

.registration-success .registration-done {
    width: 278px;
    margin: 40px auto 0;
}

.registration-success .registration-helper {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.registration-success .registration-submit-link {
    margin: 0 auto;
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sr-cta);
    font-size: 14px;
    font-weight: 700;
    /* 用户要求加粗(设计稿 500 渲染回落 400) */
}

.registration-success .registration-submit-link img {
    width: 11px;
    height: 11px;
}

/* ============ 滚动进场动画（data-reveal + IntersectionObserver；html.js 门控：无 JS 时不藏内容）
   可逆：进视口加 .is-visible 正向播放，出视口移除逆向回退（JS 侧 toggle，不 unobserve）
   动感三要素：位移大（上浮 48px/横飞 72px）+ 触发晚（JS 侧 IO 参数）+ 戏剧曲线 expo-out；
   opacity 先到（0.5s）transform 后收（0.8s），内容快速出现再缓缓落定 ============ */
html.js [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.5s ease-out,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.js [data-reveal="up"] {
    transform: translateY(48px);
}

html.js [data-reveal="left"] {
    transform: translateX(-72px);
}

html.js [data-reveal="right"] {
    transform: translateX(72px);
}

/* is-visible 写在方向选择器之后覆盖初始位移 */
html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ============ 中间视口适配（761-1100：手机横屏 / 竖屏平板 / 半屏窗口）
   桌面版式按 ≥1206 设计，此区间两个定宽元素会把页面撑出可视区（main overflow:clip 裁掉右侧不可达）：
   header 双按钮 160×2 + nav ~500 + logo 142 ≈ 910；.timeline 五列 230×5 = 1150。策略：
   header 复用移动端汉堡导航（结构现成，desktop-nav/按钮隐掉即可）；timeline 五列改 1fr 均分可收缩；
   奖品/文字块定宽改百分比随容器缩。≥1101 恢复完整桌面版式（1194 iPad mini 横屏实测全绿） ============ */
@media (min-width: 761px) and (max-width: 1100px) {
    .site-header {
        background: rgba(1, 15, 22, .94);
        backdrop-filter: blur(14px);
    }

    .header-inner {
        width: calc(100% - 32px);
        gap: 14px;
    }

    .brand {
        width: 112px;
    }

    .desktop-nav,
    .header-inner>.btn {
        display: none;
    }

    .mobile-menu-button {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--sr-line-dark);
        background: transparent;
        color: #fff;
        font-size: 19px;
    }

    .mobile-nav {
        position: fixed;
        z-index: 1029;
        top: var(--sr-header);
        left: 0;
        right: 0;
        padding: 14px 16px 22px;
        border-bottom: 1px solid var(--sr-line-dark);
        background: rgba(1, 15, 22, .985);
        box-shadow: 0 24px 48px rgba(0, 0, 0, .48);
    }

    .mobile-nav.open {
        display: grid;
        gap: 6px;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 13px 14px;
        border: 1px solid var(--sr-line-dark);
        background: transparent;
        color: #fff;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .07em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .mobile-nav button {
        justify-content: center;
        border-color: var(--sr-cta);
        background: var(--sr-cta);
    }

    /* 五步流程:230px 定宽五列 → 1fr 均分随容器收缩;字号取参考稿基础值(h3 20px),
       连线两端对齐首/末列步骤点圆心(点 left 30 + 20px → 圆心 40px) */
    .timeline {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 22px;
    }

    .timeline::before {
        right: calc(20% + 40px);
    }

    .step {
        width: auto;
    }

    .step h3 {
        font-size: 20px;
        line-height: 24px;
    }

    /* 奖品/介绍文案的桌面定宽（px）→ 百分比/放开，随容器缩；h3 已是 clamp(3vw) 自动缩放 */
    .intro-copy .lead {
        width: auto;
        max-width: 544px;
    }

    .prize-copy {
        padding: 36px 28px 34px;
    }

    .leader-actions .btn {
        width: 150px;
    }
}

/* ============ 移动端适配（按 hifi-mobile v2.14；单页响应式，底栏 + 抽屉弹窗 + 固定高滚动排行榜） ============ */
@media (max-width: 760px) {
    :root {
        --sr-header: 48px;
        --sr-gutter: 18px;
    }

    body {
        line-height: 1.45;
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    /* 活动结束底栏整条不渲染(blade @if),预留空间同步收回,否则页脚下方多 88px 空白 */
    body.submit-closed {
        padding-bottom: 0;
    }

    /* 参考稿移动版进场只有上浮+图片缩放(无 X 轴飞入):prize 卡左右飞入降级为上浮,
       与其余区块方向一致,同时根除移动端 X 轴位移源 */
    html.js [data-reveal="left"],
    html.js [data-reveal="right"] {
        transform: translateY(48px);
    }

    .site-header {
        background: rgba(1, 15, 22, .94);
        backdrop-filter: blur(14px);
    }

    .header-inner {
        width: calc(100% - 36px);
        gap: 14px;
    }

    .brand {
        width: 75px;
    }

    .desktop-nav,
    .header-inner>.btn {
        display: none;
    }

    .mobile-menu-button {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--sr-line-dark);
        background: transparent;
        color: #fff;
        font-size: 19px;
        font-weight: 900;
    }

    .mobile-nav {
        position: fixed;
        z-index: 1029;
        top: var(--sr-header);
        left: 50%;
        width: min(100%, 480px);
        max-height: calc(100dvh - var(--sr-header));
        padding: 14px 16px calc(22px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .05);
        background: rgba(1, 15, 22, .985);
        box-shadow: 0 24px 48px rgba(0, 0, 0, .48);
        transform: translateX(-50%);
        overflow: auto;
    }

    .mobile-nav.open {
        display: grid;
        gap: 6px;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 13px 14px;
        border: 1px solid var(--sr-line-dark);
        background: transparent;
        color: #fff;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .07em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .mobile-nav button {
        justify-content: center;
        border-color: var(--sr-cta);
        background: var(--sr-cta);
    }

    .section {
        padding: 30px var(--sr-gutter);
    }

    .section h2 {
        margin-bottom: 20px;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: 0;
    }

    .eyebrow {
        gap: 7px;
        margin-bottom: 10px;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: .1em;
    }

    .eyebrow::before {
        font-size: 16px;
    }

    .lead {
        font-size: 16px;
    }

    /* 按钮：移动端 36px 小按钮 + 硬阴影（参考稿 0 4px 0，仅主按钮） */
    .btn-cta,
    .btn-ghost {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
    }

    .btn-cta {
        box-shadow: 0 4px 0 rgba(0, 0, 0, .24);
    }

    .btn-ghost {
        box-shadow: none;
    }

    /* 固定底栏：双按钮等宽，居中 480px 上限（参考稿 submit-bar） */
    .mobile-submit-bar {
        position: fixed;
        z-index: 1028;
        left: 50%;
        bottom: 0;
        width: min(100%, 480px);
        transform: translateX(-50%);
        display: block;
        min-height: 77.2px;
        padding: 6px 19.5px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--sr-line-dark);
        background: rgba(1, 15, 22, .96);
        backdrop-filter: blur(14px);
    }

    .mobile-submit-bar .submit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mobile-submit-bar .btn {
        min-height: 57.2px;
        padding: 10px 8px;
        font-size: 13px;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* 参考稿 .submit-bar .submit-button { color: #fff }:底栏在 main 外,ghost 按钮的
       color:inherit 会继承 body 深色 --sr-ink,深字压深底不可读,显式回白(描边同随 currentColor) */
    .mobile-submit-bar .btn-ghost {
        color: #fff;
    }

    /* Banner：竖版 KV 整图 */
    .hero {
        background: #02131d;
    }

    /* About：v2.14 去掉冬骑图，纯文案 + 双按钮并排 */
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .intro-copy {
        order: 1;
    }

    .intro-copy .lead {
        width: auto;
        max-width: none;
        margin-bottom: 30px;
        color: rgba(255, 255, 255, .6);
        font-size: clamp(11px, 2.933vw, 14.08px);
        line-height: clamp(14px, 3.733vw, 17.92px);
    }

    /* 颜色 .6:设计稿移动端 .about .lead 不覆盖色,落 p 的 --muted=.6(PC 稿显式 .5 不跟) */
    .intro-copy h2 {
        max-width: none;
    }

    .about-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .about-actions .btn {
        min-width: 0;
        width: auto;
        min-height: clamp(34.56px, 9.216vw, 44.2368px);
        padding: 7.68px 11.52px;
        font-size: clamp(11.52px, 3.072vw, 14.7456px);
    }

    .about-actions .btn:first-child,
    .about-actions .btn.btn-ghost {
        width: auto;
    }

    /* 回收 PC 定宽,移动端格子均分 */
    .text-link {
        margin-top: 5px;
        font-size: inherit;
        text-underline-offset: 2px;
    }

    .winter-photo {
        display: none;
    }

    /* 奖品：全宽竖卡(678:508)，文案按卡顶部锚定(设计稿逐卡 top)、无右上角徽标 */
    .section-prizes {
        padding: 8vw 4.8vw 10.666667vw;
    }

    .prize-grid {
        grid-template-columns: 1fr;
        gap: 4.266667vw;
        margin-top: 0;
    }

    .prize-card {
        min-height: 0;
        aspect-ratio: 678 / 508;
    }

    .prize-card::before {
        background: linear-gradient(180deg, rgba(0, 10, 16, .02) 28%, rgba(1, 14, 20, .94) 100%);
    }

    .prize-copy {
        top: 38.933333vw;
        bottom: auto;
        height: auto;
        left: 4.4vw;
        right: 4.4vw;
        padding: 0;
    }

    .prize-card:nth-child(2) .prize-copy {
        top: 37.866667vw;
    }

    /* Mileage 卡(nth-child(3)):v2.18+ 新图上 2/3 是烤图的 TOP3 奖品面板,
       面板底边 y≈338/508 → 45.5vw,文案块贴面板下方起排(其余卡按各自底图构图定位);
       底图渐变同 PC 逻辑推迟到面板底(≈66%)起,保品名清晰 */
    .prize-card:nth-child(3) .prize-copy {
        top: 46vw;
    }

    .prize-card:nth-child(3)::before {
        background: linear-gradient(180deg, rgba(0, 10, 16, .02) 66%, rgba(1, 14, 20, .94) 100%);
    }

    .prize-card:nth-child(4) .prize-copy {
        top: 34.133333vw;
    }

    .quantity {
        width: 17.866667vw;
        height: 6.4vw;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: .55px solid var(--sr-cta);
        font-size: 2.133333vw;
        line-height: 3.17vw;
        letter-spacing: .342667vw;
    }

    .prize-copy h3 {
        margin: 3.733333vw 0 1.066667vw;
        font-size: 5.333333vw;
        line-height: 5.333333vw;
        letter-spacing: 0;
    }

    .prize-copy p {
        margin: 0;
        font-size: 2.933333vw;
        line-height: 3.733333vw;
    }

    /* 五步流程：单列纵排，左连线 1.5px、节点 10×10，正文 11px */
    .section-ice {
        min-height: 546px;
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 10px;
    }

    .timeline::before {
        top: 8.5px;
        bottom: 67.5px;
        left: 4.5px;
        right: auto;
        height: auto;
        width: 1.5px;
    }

    .step {
        width: auto;
        min-height: 86px;
        padding: 0 0 18px 31.5px;
    }

    .step:last-child {
        padding-bottom: 0;
    }

    .step::before {
        top: 8.5px;
        left: 0;
        width: 10px;
        height: 10px;
    }

    .step-number {
        display: inline-flex;
        align-items: center;
        min-height: 0;
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        letter-spacing: .1em;
    }

    .step h3 {
        width: auto;
        min-height: 0;
        margin: 6px 0 3px;
        font-size: 14px;
        line-height: 17px;
    }

    .step h3+p {
        margin-top: 0;
    }

    .step p,
    .step li {
        font-size: 11px;
        line-height: 14px;
    }

    .step p {
        margin-bottom: 0;
    }

    .step p.deadline {
        font-size: 11px !important;
        font-style: normal;
    }

    /* 活动规则：定高 294px + 专属移动底图，编号 11px 左对齐、正文 11px/500 */
    .section-rules {
        height: 314px;
        min-height: 314px;
        background: #03141a url("../images/season-ride/rules-mobile.jpg") center / cover no-repeat;
    }

    /* 设计稿移动端定高 314(原 294 少 20px 底部留白) */
    .section-rules .lead {
        white-space: normal;
        margin-bottom: 0;
        color: rgba(255, 255, 255, .6);
        font-size: 11px;
        line-height: 14px;
    }

    /* 颜色 .6:设计稿移动端不覆盖色落 p 的 --muted=.6 */
    .rule-card {
        margin-top: 15px;
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* 行距用 h3 margin-bottom 10(设计稿无 row-gap;gap 15+mb 10 会叠成 25) */
    .rule-card h3 {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 17px;
        letter-spacing: 0;
        text-transform: none;
    }

    .rule-card li {
        grid-template-columns: 28px 1fr;
        gap: 0;
        min-height: 45px;
        align-items: center;
        padding: 8px 0;
    }

    .rule-card li::before {
        content: "0" counter(rules);
        font-size: 11px;
        line-height: 14px;
        text-align: left;
    }

    .rule-card li span {
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
    }

    /* 排行榜：专属移动底图 + 说明移进工具条 + 三列表格 + 奖牌切图 */
    /* 内容上边距:设计稿 padding 50 + 子块上移 20 = 净 30,底部 12+20 = 净 32(等价直写,不做 transform) */
    .section-board {
        min-height: 675.5px;
        padding: 30px 19.5px 32px;
    }

    .leader-head {
        display: grid;
        align-items: start;
        gap: 24px;
        margin-top: 0;
        min-height: 0;
        padding-bottom: 0;
    }

    /* position: static 收掉桌面残留的绝对定位(否则按钮收缩包裹、叠在说明文字上);
       按钮整宽 36px 高(设计稿 .leader-intro .btn) */
    .leader-actions {
        display: block;
        position: static;
    }

    .leader-actions .btn {
        width: 100%;
        height: 36px;
        min-height: 36px;
        padding: 8px 12px;
    }

    .leader-head-copy p {
        margin-bottom: 0;
        color: #fff;
        font-size: 11px;
        line-height: 14px;
    }

    .leader-toolbar {
        min-height: 58px;
        margin-top: 20px;
        border-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
    }

    .leader-toolbar-copy {
        min-width: 0;
        padding: 8px 0;
    }

    .leader-note-mobile {
        display: block;
        margin: 3px 0 0;
        color: rgba(255, 255, 255, .6);
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        font-style: normal;
    }

    .refresh-button {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .refresh-button img {
        width: 22.1px;
        height: 22.1px;
    }

    .board-table-wrap {
        display: none;
    }

    /* 列表不做滚动容器(设计稿 .leader-scroll overflow:hidden+滚动条样式是 Figma 导出残留):
       10 条/页 × 34px + 28px 表头恰好装满 368px 定高,无超出内容可滚;若留 overflow:auto+contain
       这类滚动容器,部分内核在零溢出时也会吃掉触摸手势导致整页滑不动(用户走查),故回 overflow:visible
       让手势直达页面 */
    .mobile-leader-list {
        display: grid;
        gap: 0;
        /* align-content: start 防末页行数不满时网格把行轨道拉伸填满 368px 定高 */
        align-content: start;
        height: 368px;
    }

    .leader-table-head {
        height: 28px;
        display: grid;
        grid-template-columns: 70px 1fr 1fr;
        align-items: center;
        background: rgba(0, 0, 0, .4);
        color: #fff;
        font-size: 10px;
        font-weight: 400;
        text-align: center;
    }

    .mobile-leader-row {
        min-height: 34px;
        display: grid;
        grid-template-columns: 70px 1fr 1fr;
        align-items: center;
        gap: 0;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
    }

    .mobile-leader-row .rank {
        color: var(--sr-cta);
        font-size: 10px;
        font-weight: 700;
    }

    .mobile-leader-row strong {
        overflow: hidden;
        color: #fff;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-leader-row .distance {
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    /* 奖牌移动形态：20×20 切图（v2.14 双端均用切图，数字圆圈废弃） */
    .mobile-leader-row .medal-badge {
        width: 20px;
        height: 20px;
    }

    .mobile-leader-row .medal-badge .medal-art {
        width: 20px;
        height: 20px;
    }

    /* 说明挂工具条下（桌面 leader-note 隐藏），分页回文档流居中（PC 是绝对定位） */
    .leader-note {
        display: none;
    }

    .board-pagination {
        position: static;
        justify-content: center;
        margin-top: 16px;
    }

    .board-pagination .pagination {
        gap: 2px;
    }

    .board-pagination .page-button {
        min-width: 24px;
        min-height: 24px;
        font-size: 8px;
    }

    /* Manifesto：全幅底图 + 内容垂直居中(上下留白 44→54,用户需求 10-28;
       定高 336.9 = 内容 228.9 + 上下各 54,padding 30 参与居中计算) */
    .manifesto {
        height: 336.9px;
        min-height: 336.9px;
        padding: 30px 19.5px;
        display: flex;
        align-items: center;
    }

    .manifesto::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background: rgba(2, 19, 29, .16);
    }

    .manifesto-bg {
        top: 0;
        height: 100%;
    }

    /* 设计稿底图全幅(原 15%/70% 裁切随旧设计作废) */
    .manifesto .container {
        transform: none;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .manifesto .eyebrow {
        margin-bottom: 10px;
    }

    .manifesto h2 {
        margin: 0;
        font-size: clamp(11.2px, 2.9867vw, 14.336px);
        line-height: min(4.266667vw, 20.48px);
        font-weight: 400;
    }

    .manifesto p {
        margin: 0;
        padding-top: min(3.733333vw, 17.92px);
        font-size: clamp(11.2px, 2.9867vw, 14.336px);
        line-height: min(4.266667vw, 20.48px);
        font-weight: 400;
    }

    /* Footer：小标题 + logo 右上浮 + 社媒双格 */
    footer {
        position: relative;
        min-height: 226.5px;
        padding: 30px 18px 17px;
    }

    /* position: relative 让 footer-head 成为 logo 的稳定包含块:logo 绝对定位,head 带 data-reveal
       动画,若包含块落在 footer(transform 动画期间会被 head 的 transform/will-change 抢走,
       is-visible 时 transform:none+will-change:auto 又切回),logo 会在动画前后弹跳(用户走查);
       top/right 补偿 footer 内边距 30/18,视觉位置不变(footer.top+32 / 右缘-20) */
    .footer-head {
        display: block;
        position: relative;
    }

    .footer-title {
        max-width: 220px;
        font-size: 13.5px;
        line-height: 17px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .footer-logo {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 103px;
        margin: 0;
    }

    /* 2px=设计 32/20 减 footer 内边距 30/18(含块改到 footer-head 上) */
    .social-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7.5px;
        margin: 17px 0 18px;
    }

    .social-item {
        min-height: 44px;
        height: auto;
        padding: 14px;
        font-size: 14.5px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    /* height:auto 回收 PC 定高 60(设计稿移动端仅 min-height 44,内容撑到 51);设计稿移动端大写 */
    .social-label {
        gap: 5px;
    }

    .social-icon {
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
    }

    .social-arrow {
        width: 12px;
        height: 12px;
    }

    .copyright {
        margin-top: 0;
        padding-top: 12px;
        font-size: 11px;
        text-transform: uppercase;
    }

    /* 弹窗移动形态：entry 贴底 sheet 定高，结果弹窗居中小卡（设计稿 mobile dialog）
       display 必须 !important：blade 的 .d-block 是 Bootstrap !important 工具类，会压过普通 display:flex */
    .modal.show {
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
    }

    .modal.fade .modal-dialog {
        transform: translate(0, 3rem);
    }

    /* show 后收回入场位移：与 Bootstrap 同名规则同特异性，靠源序后置取胜 */
    .modal.show .modal-dialog {
        transform: none;
    }

    .modal-dialog {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* 压掉 Bootstrap .modal-dialog-centered 的内部居中：sheet 贴住底栏 */
    .modal-dialog.entry-dialog {
        display: flex;
        align-items: flex-end;
        min-height: 0;
    }

    .modal-content.sr-modal {
        max-height: 100dvh;
        border-width: 0;
        box-shadow: 0 -18px 64px rgba(0, 0, 0, .48);
    }

    .modal-content.sr-modal[data-entry-state="join"] {
        height: min(390px, 100dvh);
        min-height: 0;
        background-size: cover;
    }

    .modal-content.sr-modal[data-entry-state="submit"] {
        height: min(637px, 100dvh);
        min-height: 0;
        background-size: cover;
    }

    /* 结果弹窗居中（.result-show 由 blade 按 $result 加） */
    .modal.result-show {
        align-items: center;
    }

    .modal.result-show .modal-dialog {
        width: min(calc(100% - 24px), 375px);
    }

    .modal-content.result-dialog {
        height: auto;
        min-height: 300px;
    }

    .modal-content.result-dialog.registration-success {
        min-height: 399px;
    }

    /* 弹窗体转 flex 列：头/标签回流，表单撑满、按钮贴底 */
    .sr-modal .dialog-inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: 23px 18px calc(28px + env(safe-area-inset-bottom));
    }

    /* 顶部 23px=设计稿 head top 23;水平 18px:设计稿 join 表单 left/right 18(与 submit 态一致) */
    /* submit 态水平 18px(设计稿实测:头/标签/输入框/橙环/按钮全部 18..357 对称 339 宽;15px 会让输入框和聚焦橙环比设计稿长 3px) */
    .modal-content.sr-modal[data-entry-state="submit"] .dialog-inner {
        padding: 23px 18px calc(24px + env(safe-area-inset-bottom));
    }

    /* 顶部 23px 同 join:设计稿 head top 23 */
    .sr-modal .dialog-head {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        min-height: 22px;
    }

    .sr-modal .dialog-head h2 {
        font-size: 20px;
        line-height: 22px;
    }

    .dialog-close {
        top: -12px;
        right: 0;
        width: 44px;
        height: 44px;
        font-size: 30px;
        line-height: 39.375px;
    }

    /* 设计稿 entry 弹窗移动端 ×:44×44,锚 head 右上 */
    .sr-modal .dialog-tabs {
        margin-top: 23px;
    }

    /* head 底 45 → 设计稿 join tabs top 68 */
    .modal-content.sr-modal[data-entry-state="submit"] .dialog-tabs {
        margin-top: 21px;
    }

    /* 设计稿 submit tabs top 66 */
    .sr-modal .dialog-tab {
        min-height: 32px;
        padding: 0 6px;
        font-size: 12px;
        line-height: 12px;
    }

    .sr-modal .entry-description {
        margin-top: 21px;
        font-size: 11px;
        line-height: 16px;
    }

    .sr-modal .entry-description-copy {
        margin-top: 17px;
        font-size: 12px;
        line-height: 16px;
    }

    /* 设计稿 tabs 底→说明 17px;说明 fs 12/lh 16 两行(33px),下方字段随之下移对齐设计稿 */
    .sr-modal form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .sr-modal .entry-field {
        gap: 5px;
        font-size: 12px;
        line-height: 13px;
    }

    .sr-modal .entry-email-field,
    .sr-modal .entry-instagram-field {
        margin-top: 22px;
    }

    /* 设计稿字段间距约 21-22px */
    .sr-modal .ride-form-scroll>.entry-field {
        margin-top: 22px;
    }

    /* 同 PC 统一间距(设计稿约 21-22px),错误行不贴下一标签 */
    .sr-modal input.entry-input {
        height: 40px;
        min-height: 40px;
        padding: 10px 12px;
        font-size: 16px;
    }

    .modal-content.sr-modal[data-entry-state="submit"] input.entry-input:not([type="file"]) {
        font-size: 12.8px;
    }

    .sr-modal .field-note {
        font-size: 11px;
        line-height: 14px;
    }

    .sr-modal .ride-form-scroll {
        margin: 8px -2px 0;
        padding: 13px 2px 0;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 左右各外扩 2px(clip 区 16..359):聚焦橙环画在输入框外侧 2px,容器若贴着输入框会把环裁掉(设计稿环浮于框外);字段仍 18..357 对称 339 宽 */
    .sr-modal .file-input-shell {
        height: 40px;
        min-height: 40px;
        gap: 6px;
        font-size: 12px;
    }

    .sr-modal .file-upload-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .sr-modal .form-message {
        font-size: 11px;
        line-height: 14px;
    }

    .sr-modal .form-message::before {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background-size: 12px 12px;
    }

    .sr-modal .entry-submit {
        margin-top: auto;
        height: 44px;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* PC 段 join 邻接覆盖(0,3,0)会压过上面 margin-top:auto(0,2,0):移动端表单撑满、按钮钉底不变 */
    .sr-modal .form-message-slot + .entry-submit {
        margin-top: auto;
    }

    /* 大图预览移动端(设计稿 hifi-mobile 532-535) */
    .proof-preview-backdrop {
        padding: 12px;
    }

    .proof-image-dialog {
        width: min(calc(100% - 24px), 375px);
        max-height: calc(100dvh - 24px);
    }

    .proof-image-dialog .proof-image-inner {
        gap: 10px;
        padding: 48px 16px 16px;
    }

    .proof-image-dialog .proof-image-close {
        right: 8px;
        font-size: 36px;
    }

    .proof-image-dialog img {
        max-height: calc(100dvh - 130px);
    }

    /* 结果弹窗小字排版 */
    .result-dialog .dialog-inner {
        padding: 32px 20px calc(24px + env(safe-area-inset-bottom));
        text-align: center;
    }

    .result-dialog .result-title {
        font-size: 27px;
        line-height: 32px;
    }

    .result-dialog .result-copy {
        margin-top: 14px;
        font-size: 14px;
        line-height: 20px;
    }

    .result-dialog .result-actions {
        margin-top: 24px;
    }

    .result-action {
        min-height: 50px;
        height: auto;
        padding: 8px;
        font-size: 13px;
    }

    .registration-success .result-check {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
    }

    .registration-success .registration-done {
        width: 100%;
        margin-top: 22px;
    }
}

/* 窄屏（≤340px）与宽手机（≥430px）微调（对齐 hifi-mobile 断点 340/430） */
@media (max-width: 340px) {
    :root {
        --sr-gutter: 16px;
    }

    .section h2 {
        font-size: 22px;
        line-height: 27px;
    }

    .leader-table-head,
    .mobile-leader-row {
        grid-template-columns: 64px 1fr 1fr;
    }

    .mobile-leader-row .distance {
        font-size: 10px;
    }

    .social-item {
        padding-inline: 10px;
        font-size: 12px;
    }
}

@media (min-width: 430px) and (max-width: 760px) {
    :root {
        --sr-gutter: 24px;
    }
}

/* 无障碍：跟随系统减弱动效 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn-cta,
    .btn-cta:hover,
    .btn-ghost,
    .btn-ghost:hover,
    .social-item,
    .social-item span,
    .refresh-button img,
    .board-table tbody tr,
    .desktop-nav a::after {
        transition: none;
    }

    .btn-cta:hover,
    .btn-ghost:hover,
    .social-item:hover {
        transform: none;
    }

    /* 滚动进场降级：去位移、保留快速淡入（淡入不算"运动"，无障碍可接受；
       完全无动画会让关了系统动画的用户以为功能没生效） */
    html.js [data-reveal] {
        transform: none;
        transition: opacity 0.3s ease;
    }
}