/* 云体育赛事 · 共享样式 /assets/site.css */

:root{
  --cloud:#F7F9FC;
  --paper:#FFFFFF;
  --sky:#1876E0;
  --sky-deep:#1157AC;
  --space:#0E141B;
  --orange:#FF6A2B;
  --orange-deep:#E4551A;
  --ice:#D6E7FA;
  --track:#5A6473;
  --frost:#E2E8F0;
  --gold:#F5B93C;
  --night:#0A2B4F;

  --rail-w:96px;
  --topbar-h:72px;
  --maxw:1280px;
  --gutter:24px;

  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-num:"Inter","SF Mono",ui-monospace,Menlo,Consolas,monospace;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --sh-1:0 2px 10px -6px rgba(14,20,27,.28);
  --sh-2:0 18px 40px -26px rgba(14,20,27,.5);
  --sh-3:0 34px 70px -40px rgba(14,20,27,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--cloud);
  color:var(--space);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,picture{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
::selection{background:var(--sky);color:#fff}

/* ---------- 文字层级 ---------- */
.display{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:clamp(2rem,4.6vw,4.25rem);
  line-height:1.1;
  letter-spacing:-.01em;
}
.section-title{
  font-family:var(--font-serif);
  font-weight:900;
  font-size:clamp(1.5rem,2.6vw,2.35rem);
  line-height:1.22;
}
.eyebrow{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--sky);
  transition:color .24s var(--ease);
}
.lede{
  font-size:17px;
  line-height:1.8;
  color:var(--track);
  max-width:38em;
}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700}
.prose>p+p{margin-top:16px}
.prose p{max-width:36em}
.prose strong{font-weight:800;color:var(--space)}
.prose em{font-style:normal;color:var(--orange-deep);font-weight:700}
.rule{height:1px;border:0;margin:0;background:var(--frost)}

/* ---------- 布局 ---------- */
.page{padding-top:var(--topbar-h);min-height:60vh}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.section--paper{background:var(--paper)}
.section--night{background:var(--night);color:#EAF1FA}
.section--night .section-title,.section--night .display{color:#fff}
.section--night .lede{color:#B7C6D9}
.section--night .eyebrow{color:var(--gold)}
.section--night .rule{background:rgba(255,255,255,.16)}
[data-section].is-current .eyebrow{color:var(--orange)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn--primary{background:var(--sky);color:#fff;box-shadow:0 14px 28px -18px rgba(24,118,224,1)}
.btn--primary:hover{background:var(--sky-deep);transform:translateY(-1px)}
.btn--accent{background:var(--orange);color:#fff;box-shadow:0 14px 28px -18px rgba(255,106,43,1)}
.btn--accent:hover{background:var(--orange-deep);transform:translateY(-1px)}
.btn--ghost{background:rgba(255,255,255,.72);color:var(--space);border-color:var(--frost);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--sky);color:var(--sky)}
.btn--dark{background:var(--space);color:#fff}
.btn--dark:hover{background:#1B242E}
.btn--sm{padding:9px 16px;font-size:13px;letter-spacing:.06em}
.btn--block{width:100%}

/* ---------- 标签 / 数据 / 卡片 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:var(--ice);
  color:var(--sky-deep);
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.5;
}
.tag--gold{background:rgba(245,185,60,.24);color:#7A5000}
.tag--orange{background:rgba(255,106,43,.15);color:var(--orange-deep)}
.tag--dark{background:rgba(255,255,255,.14);color:#fff}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__value{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.15;
  color:var(--space);
}
.stat__value--sky{color:var(--sky)}
.stat__value--orange{color:var(--orange-deep)}
.stat__label{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--track)}

.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--frost);
  border-radius:var(--r-md);
  padding:22px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--ice)}
.card--glass{
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--sh-1);
}
.card--night{background:var(--night);color:#EAF1FA;border-color:rgba(255,255,255,.14)}
.card--night .stat__value{color:#fff}
.card--night .stat__label{color:#9FB2C8}

.board{
  position:relative;
  background:var(--paper);
  border:1px solid var(--frost);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--sh-1);
}
.board__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid var(--frost);
}
.board__title{font-family:var(--font-serif);font-weight:900;font-size:20px;line-height:1.3}
.board__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.board__item{position:relative;padding-left:40px}
.board__item::before{
  content:attr(data-index);
  position:absolute;
  left:0;
  top:1px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:9px;
  background:var(--ice);
  color:var(--sky);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:700;
}
.board__item dt{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--track)}
.board__item dd{margin-top:6px;font-size:15px;line-height:1.7}

/* ---------- 图片容器 ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:var(--r-lg);
  background-color:var(--ice);
  background-image:
    linear-gradient(135deg,rgba(24,118,224,.22) 0%,rgba(214,231,250,.7) 45%,rgba(255,255,255,.92) 100%),
    repeating-linear-gradient(115deg,rgba(24,118,224,.16) 0 2px,transparent 2px 18px);
  isolation:isolate;
}
.media>img,.media>picture>img{width:100%;height:100%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--3x2{aspect-ratio:3/2}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--3x4{aspect-ratio:3/4}
.media--wide{aspect-ratio:21/9}
.media--veil::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(10,43,79,0) 35%,rgba(10,43,79,.66) 100%);
  pointer-events:none;
}
.media__caption{
  position:absolute;
  left:20px;
  right:20px;
  bottom:16px;
  z-index:2;
  color:#fff;
  font-size:13px;
  letter-spacing:.06em;
}
.media__tag{position:absolute;top:16px;left:16px;z-index:2}

/* ---------- 面包屑 ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--track);letter-spacing:.06em}
.breadcrumb a{color:var(--track);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.breadcrumb a:hover{color:var(--sky);border-bottom-color:var(--sky)}
.breadcrumb__sep{color:var(--frost)}
.breadcrumb__current{color:var(--space);font-weight:800}

/* ---------- 头部外壳 ---------- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:80}
.skip-link{
  position:fixed;
  top:-120px;
  left:14px;
  z-index:200;
  padding:10px 18px;
  background:var(--space);
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0}
.read-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:rgba(226,232,240,.5);
  z-index:190;
  pointer-events:none;
}
.read-progress__bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--sky) 0 62%,var(--orange) 100%);
  transition:width .1s linear;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  z-index:150;
  background:transparent;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.topbar__inner{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}
.site-header[data-scrolled="true"] .topbar{
  background:rgba(247,249,252,.88);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--frost),0 22px 44px -36px rgba(14,20,27,.6);
}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:0;text-decoration:none;color:var(--space)}
.brand__mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--sky);
  color:#fff;
  font-family:var(--font-serif);
  font-weight:900;
  font-size:21px;
  line-height:1;
  box-shadow:0 12px 24px -16px rgba(24,118,224,1);
}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{font-family:var(--font-serif);font-weight:900;font-size:18px;line-height:1.25;letter-spacing:.02em}
.brand__tag{font-size:11px;font-weight:500;letter-spacing:.16em;line-height:1.5;color:var(--track);white-space:nowrap}
.topbar__meta{
  margin-left:auto;
  font-family:var(--font-num);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--track);
  white-space:nowrap;
}
.topbar__actions{display:flex;align-items:center;gap:10px;margin-left:18px}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  margin-left:auto;
  padding:9px 14px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--frost);
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.nav-toggle:hover{border-color:var(--sky);color:var(--sky)}
.nav-toggle__bars{display:grid;gap:4px;width:18px}
.nav-toggle__bars span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease)}
.site-header[data-open="true"] .nav-toggle__bars span:first-child{transform:translateY(3px) rotate(45deg)}
.site-header[data-open="true"] .nav-toggle__bars span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- 侧轨导航（桌面） ---------- */
.nav{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:140;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:var(--rail-w);
  padding:14px 6px 18px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-right:1px solid var(--frost);
}
.nav__mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--space);
  color:#fff;
  font-family:var(--font-serif);
  font-weight:900;
  font-size:19px;
  line-height:1;
}
.nav__label{
  margin:14px 0 10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em;
  color:var(--track);
  writing-mode:vertical-rl;
  text-orientation:upright;
}
.nav__list{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:100%;
  overflow-y:auto;
  scrollbar-width:none;
}
.nav__list::-webkit-scrollbar{display:none}
.nav__item{display:flex;justify-content:center;width:100%}
.nav__link{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:100%;
  padding:9px 0;
  border-radius:10px;
  color:var(--track);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav__num{font-family:var(--font-num);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--track);transition:color .2s var(--ease)}
.nav__text{writing-mode:vertical-rl;text-orientation:upright;line-height:1.1}
.nav__link:hover{color:var(--space);background:rgba(214,231,250,.55)}
.nav__link[aria-current="page"]{color:var(--space)}
.nav__link[aria-current="page"] .nav__num{color:var(--sky)}
.nav__link[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:30px;
  margin-top:-15px;
  border-radius:0 3px 3px 0;
  background:var(--orange);
}
.nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  top:14px;
  right:12px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,106,43,.18);
}
.nav__foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid var(--frost);
}
.nav__hint{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--track);
}
.nav__current{
  writing-mode:vertical-rl;
  text-orientation:upright;
  max-height:12em;
  overflow:hidden;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--sky);
}

.nav-scrim{
  position:fixed;
  inset:0;
  z-index:135;
  background:rgba(14,20,27,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}

.quickbar{display:none}
.quickbar__btn{width:100%}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--space);
  color:#DCE4EE;
  padding:64px 0 26px;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--sky) 0 62%,var(--orange) 100%);
}
.site-footer::after{
  content:"";
  position:absolute;
  top:-70px;
  right:-90px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(24,118,224,.36),transparent 70%);
  pointer-events:none;
}
.site-footer__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}
.footer-top{
  display:grid;
  gap:34px;
  grid-template-columns:1fr;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand{display:flex;flex-direction:column;gap:10px;max-width:34ch}
.footer-brand__mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:13px;
  background:var(--sky);
  color:#fff;
  font-family:var(--font-serif);
  font-weight:900;
  font-size:22px;
  line-height:1;
}
.footer-brand__name{font-family:var(--font-serif);font-weight:900;font-size:20px;letter-spacing:.02em;color:#fff}
.footer-brand__line{font-size:14px;line-height:1.8;color:#A9B6C7}
.footer-brand__domain{font-family:var(--font-num);font-size:12px;letter-spacing:.14em;color:var(--sky);word-break:break-all}
.footer-cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.footer-col__title{margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.18em;color:#fff}
.footer-col__list{display:flex;flex-direction:column;gap:10px}
.footer-link{
  font-size:14px;
  color:#A9B6C7;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.footer-link:hover{color:#fff}
.footer-contact{padding:30px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.footer-contact__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.footer-contact__item{display:flex;flex-direction:column;gap:6px}
.footer-contact__label{font-size:11px;font-weight:800;letter-spacing:.2em;color:#8494A8}
.footer-contact__value{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  font-family:var(--font-num);
  font-size:15px;
  letter-spacing:.02em;
  color:#fff;
  word-break:break-all;
}
.footer-contact__value--text{font-family:var(--font-sans);font-size:14px;line-height:1.7;color:#DCE4EE}
.footer-contact__note{margin-top:16px;max-width:62ch;font-size:13px;line-height:1.8;color:#8494A8}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 22px;
  padding-top:22px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:#8494A8;
}
.footer-bottom__copy{margin:0}
.footer-bottom__icp{font-family:var(--font-num);color:#A9B6C7}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:16px}

.copy-btn{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:#A9B6C7;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.copy-btn:hover{color:#fff;border-color:var(--sky);background:rgba(24,118,224,.22)}
.copy-btn.is-done{color:var(--gold);border-color:var(--gold)}

/* ---------- 入场 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 桌面增强 ---------- */
@media (min-width:1024px){
  .page{padding-left:var(--rail-w)}
  .topbar{left:var(--rail-w)}
  .topbar__inner{padding:0 40px}
  .container{padding:0 40px}
  .section{padding:104px 0}
  .section--tight{padding:60px 0}
  .footer-top{grid-template-columns:minmax(250px,1.3fr) 2fr;gap:48px}
  .site-footer{padding-left:var(--rail-w)}
  .site-footer__inner{padding:0 40px}
}
@media (min-width:760px) and (max-width:1023px){
  .container{padding:0 32px}
  .section{padding:80px 0}
}

/* ---------- 移动端：抽屉 + 底部快速通道 ---------- */
@media (max-width:1023px){
  :root{--topbar-h:64px;--gutter:18px}
  html.nav-open{overflow:hidden}
  body{padding-bottom:84px}

  .topbar{left:0}
  .topbar__inner{padding:0 16px;gap:10px}
  .topbar__meta{display:none}
  .topbar__actions{display:none}
  .nav-toggle{display:inline-flex}
  .brand__mark{width:36px;height:36px;font-size:19px;border-radius:11px}
  .brand__name{font-size:16px}
  .brand__tag{font-size:10px;letter-spacing:.12em}

  .nav{
    left:auto;
    right:0;
    width:min(86vw,360px);
    height:100vh;
    height:100dvh;
    align-items:stretch;
    padding:76px 22px 28px;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
    border-right:0;
    border-left:1px solid var(--frost);
    box-shadow:-30px 0 60px -40px rgba(14,20,27,.65);
    transform:translateX(103%);
    transition:transform .32s var(--ease);
    overflow-y:auto;
  }
  .site-header[data-open="true"] .nav,
  .nav[data-open="true"]{transform:translateX(0)}
  .site-header[data-open="true"] .nav-scrim{opacity:1;pointer-events:auto}

  .nav__mark{width:34px;height:34px;font-size:17px;border-radius:10px}
  .nav__label{writing-mode:horizontal-tb;text-orientation:initial;margin:16px 0 10px;font-size:11px;letter-spacing:.3em}
  .nav__list{flex:0 0 auto;align-items:stretch;justify-content:flex-start;gap:0;overflow:visible}
  .nav__item{width:auto}
  .nav__link{
    flex-direction:row;
    justify-content:flex-start;
    gap:14px;
    padding:15px 10px;
    border-radius:12px;
    border-bottom:1px solid var(--frost);
    font-size:16px;
    letter-spacing:.04em;
  }
  .nav__text{writing-mode:horizontal-tb;text-orientation:initial}
  .nav__num{font-size:11px;letter-spacing:.1em}
  .nav__link[aria-current="page"]{background:rgba(24,118,224,.08)}
  .nav__link[aria-current="page"]::before{left:0;top:50%;width:3px;height:22px;margin-top:-11px;border-radius:3px}
  .nav__link[aria-current="page"]::after{right:10px;top:50%;margin-top:-3px}
  .nav__foot{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:auto;
    margin-top:26px;
    padding-top:18px;
  }
  .nav__hint,.nav__current{writing-mode:horizontal-tb;text-orientation:initial;max-height:none}
  .nav__hint{font-size:11px;letter-spacing:.2em}
  .nav__current{font-size:13px;letter-spacing:.1em}

  .quickbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:150;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(247,249,252,.93);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--frost);
  }
  .quickbar__btn{padding:11px 12px;font-size:13px}

  .grid-12{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .board{padding:20px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

@media (min-width:1024px){
  .nav-scrim{display:none}
  .quickbar{display:none}
}

/* ---------- 降低动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .card:hover,.btn--primary:hover,.btn--accent:hover{transform:none}
  .read-progress__bar{transition:none}
}