/* =========================================================
   B体育在线 · 平台中国官网  共享样式 /assets/site.css
   目录型内容地图 · 高原夜空深蓝 / 青海湖青 / 经幡橙
   ========================================================= */

/* ---------- 01 · 设计变量 ---------- */
:root{
  --night:#0B1F3A;
  --night-2:#12305A;
  --teal:#1FA6A6;
  --teal-soft:#7ED9D9;
  --flame:#F28C28;
  --data-bg:#E8EDF3;
  --paper:#F4F1EA;
  --ink:#0F1720;
  --muted:#6B7C93;
  --line-light:rgba(15,23,32,.14);
  --line-dark:rgba(232,237,243,.18);
  --on-dark:rgba(232,237,243,.76);
  --shadow:0 2px 12px rgba(11,31,58,.08);
  --shadow-lift:0 12px 34px rgba(11,31,58,.16);
  --radius:2px;
  --shell:1240px;
  --gutter:clamp(16px,4vw,40px);
  --head-h:72px;
  --font-sans:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --fs-hero:clamp(2.4rem,7.2vw,5.2rem);
  --fs-h2:clamp(1.55rem,3.4vw,2.5rem);
  --fs-h3:clamp(1.15rem,2vw,1.5rem);
}
@media (max-width:720px){ :root{ --head-h:60px } }

/* ---------- 02 · Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 18px);
}
html.nav-open{overflow:hidden}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:rgba(31,166,166,.28);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.site-header :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible{outline-color:var(--teal-soft)}

/* ---------- 03 · 中文排版与基础元素 ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.16}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
.display{
  font-size:var(--fs-hero);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.032em;
}
.section-title{font-size:var(--fs-h2);margin:0}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--teal);
  text-transform:uppercase;
}
.lede{max-width:62ch;font-size:1.06rem;color:var(--muted);line-height:1.7}
.section--dark .lede,.hero .lede{color:var(--on-dark)}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:1.08em;
  letter-spacing:-.01em;
}
.muted{color:var(--muted)}
.section--dark .muted{color:rgba(232,237,243,.6)}
.annotation{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.22em;
  color:var(--muted);
}
.annotation--vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  letter-spacing:.34em;
  color:var(--teal);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 04 · 布局骨架 ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(44px,7vw,88px);position:relative}
.section--tight{padding-block:clamp(28px,4vw,48px)}
.section--dark{background:var(--night);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--paper{background:var(--paper)}
.section--data{background:var(--data-bg)}
.section-head{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:baseline;justify-content:space-between;
  margin-bottom:clamp(20px,3vw,36px);
}
.grid{display:grid;gap:var(--gap,24px)}
.stack{display:grid;gap:var(--stack-gap,16px)}
.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .col-3{grid-column:span 3}
  .col-4{grid-column:span 4}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
  .col-7{grid-column:span 7}
  .col-8{grid-column:span 8}
  .col-9{grid-column:span 9}
  .col-12{grid-column:span 12}
  .col-side{grid-column:span 4}
  .col-main{grid-column:span 8}
}
@media (max-width:899px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12,.col-main,.col-side{grid-column:1/-1}
}
.page-main--offset{padding-top:calc(var(--head-h) + 32px)}
main{display:block}
#main-content{outline:none}

/* ---------- 05 · 首屏基调（页面可扩展） ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--night);
  color:var(--on-dark);
  padding:calc(var(--head-h) + clamp(40px,9vw,110px)) 0 clamp(40px,7vw,84px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 82% 8%, rgba(31,166,166,.22), transparent 68%),
    radial-gradient(48% 42% at 12% 88%, rgba(242,140,40,.12), transparent 70%),
    linear-gradient(180deg, rgba(11,31,58,.2), rgba(7,17,33,.85));
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(232,237,243,.07) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(232,237,243,.05) 0 1px, transparent 1px 84px);
}
.hero > *{position:relative;z-index:1}
.hero .display{color:#fff}

/* ---------- 06 · 按钮与链接 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  font-size:14.5px;font-weight:600;letter-spacing:.02em;
  background:transparent;color:var(--ink);
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--flame);border-color:var(--flame);color:var(--night);
}
.btn-primary:hover{background:#ff9c3f;border-color:#ff9c3f}
.btn-teal{background:var(--teal);border-color:var(--teal);color:#03201F}
.btn-teal:hover{background:var(--teal-soft);border-color:var(--teal-soft)}
.btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.btn-ghost:hover{background:rgba(31,166,166,.16);border-color:var(--teal)}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--teal);
  border-bottom:1px solid rgba(31,166,166,.4);
}
.link-arrow:hover{border-bottom-color:var(--teal)}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(-180%);
  padding:10px 16px;
  background:var(--night);color:#fff;
  border:1px solid var(--teal);border-radius:var(--radius);
  font-size:14px;
  transition:transform .2s ease;
}
.skip-link:focus{transform:none}

/* ---------- 07 · 头部 ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  color:var(--on-dark);
  transition:background-color .24s ease,box-shadow .24s ease;
}
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,58,.94) 0%,rgba(11,31,58,.6) 58%,rgba(11,31,58,0) 100%);
  transition:opacity .24s ease;
}
.site-header[data-scrolled]{
  background:var(--night);
  box-shadow:0 1px 0 var(--line-dark),0 8px 26px rgba(11,31,58,.24);
}
.site-header[data-scrolled]::before{opacity:0}
.header-inner{
  position:relative;
  display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--head-h);
  transition:height .24s ease;
}
.site-header[data-scrolled] .header-inner{height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-glyph{
  display:grid;place-items:center;
  width:34px;height:34px;
  border:1px solid var(--teal);
  background:rgba(31,166,166,.14);
  color:var(--teal-soft);
  font-family:var(--font-mono);font-weight:700;font-size:16px;
  line-height:1;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-mark{font-size:15.5px;font-weight:800;letter-spacing:.02em;color:#fff}
.brand-line{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.28em;
  color:rgba(232,237,243,.58);
}
.site-nav{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  margin-left:auto;
}
.nav-list{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.nav-link{
  position:relative;display:inline-block;
  padding:6px 2px;
  font-size:14.5px;font-weight:600;
  color:rgba(232,237,243,.78);
  transition:color .2s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--teal);
  transition:right .24s ease,background-color .2s ease;
}
.nav-link:hover{color:#fff}
.nav-link:hover::after{right:0}
.nav-link[aria-current="page"]{color:var(--teal-soft)}
.nav-link[aria-current="page"]::after{right:0;background:var(--flame)}
.nav-aside{
  display:flex;align-items:center;gap:18px;
  padding-left:clamp(12px,2vw,24px);
  border-left:1px solid var(--line-dark);
}
.utility-list{display:flex;align-items:center;gap:16px}
.utility-link{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.14em;
  color:rgba(232,237,243,.58);
  transition:color .2s ease;
}
.utility-link:hover{color:var(--teal-soft)}
.nav-cta{padding:8px 14px;font-size:13px}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  margin-left:auto;
  padding:8px 10px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  color:var(--on-dark);
}
.nav-toggle:hover{border-color:var(--teal);color:#fff}
.nav-toggle-bars{display:grid;gap:4px;width:16px}
.nav-toggle-bars span{
  display:block;height:1.5px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
.site-header[data-open] .nav-toggle-bars span:first-child{transform:translateY(2.75px) rotate(45deg)}
.site-header[data-open] .nav-toggle-bars span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.nav-toggle-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.2em;
}
.header-progress{
  position:absolute;left:0;right:0;bottom:0;
  height:2px;overflow:hidden;
}
.header-progress-bar{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal),var(--teal-soft) 55%,var(--flame));
  transition:transform .1s linear;
}
.site-header[data-open]{background:var(--night)}
.site-header[data-open]::before{opacity:0}

/* 移动端 / 平板：导航转为全屏面板 */
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:fixed;inset:var(--head-h) 0 0;
    margin:0;
    padding:clamp(18px,5vw,36px) var(--gutter) 48px;
    background:var(--night);
    flex-direction:column;align-items:stretch;gap:0;
    overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
  }
  .site-nav[data-open]{opacity:1;visibility:visible;transform:none}
  .nav-list{
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line-dark);
  }
  .nav-link{
    display:block;
    padding:16px 2px;
    font-size:clamp(1.3rem,5vw,1.7rem);
    font-weight:800;letter-spacing:-.02em;
    color:var(--on-dark);
    border-bottom:1px solid var(--line-dark);
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{
    color:var(--teal-soft);
    background:linear-gradient(90deg,rgba(31,166,166,.16),transparent 70%);
    padding-left:12px;
  }
  .nav-aside{
    flex-direction:column;align-items:flex-start;gap:16px;
    margin-top:28px;padding-left:0;border-left:0;
  }
  .utility-list{flex-direction:column;align-items:flex-start;gap:10px}
  .utility-link{font-size:12.5px;letter-spacing:.18em}
  .nav-cta{width:100%;justify-content:center;padding:14px;font-size:15px}
}
/* 无 JS 降级：导航直接可读 */
@media (max-width:980px){
  html:not(.js) .site-header{position:static;background:var(--night)}
  html:not(.js) .site-header::before{opacity:0}
  html:not(.js) .header-inner{height:auto;flex-wrap:wrap;padding-block:12px}
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .site-nav{
    position:static;display:flex;flex-wrap:wrap;
    width:100%;padding:8px 0 14px;
    opacity:1;visibility:visible;transform:none;overflow:visible;
  }
  html:not(.js) .nav-list{flex-direction:row;flex-wrap:wrap;gap:8px 18px;border-top:0}
  html:not(.js) .nav-link{border-bottom:0;padding:4px 2px;font-size:14px;font-weight:600}
  html:not(.js) .nav-aside{flex-direction:row;align-items:center;margin-top:10px;gap:14px}
  html:not(.js) .utility-list{flex-direction:row;align-items:center;gap:14px}
  html:not(.js) .nav-cta{width:auto;padding:8px 14px;font-size:13px}
  html:not(.js) .header-progress{display:none}
}

/* ---------- 08 · 页脚 ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--night);
  color:var(--on-dark);
  padding-top:clamp(44px,6vw,80px);
}
.footer-inner{
  position:relative;z-index:1;
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:1fr;
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:860px){
  .footer-inner{grid-template-columns:1.35fr 2fr 1.4fr}
}
.footer-mark{font-size:20px;font-weight:800;letter-spacing:.02em;color:#fff}
.footer-line{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.28em;
  color:rgba(232,237,243,.55);
}
.footer-note{
  margin-top:18px;max-width:36ch;
  font-size:12.5px;line-height:1.7;
  color:rgba(232,237,243,.6);
}
.footer-nav{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.footer-col-title{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.24em;
  color:var(--teal-soft);
}
.footer-list{display:grid;gap:10px}
.footer-link{
  font-size:14px;color:rgba(232,237,243,.76);
  transition:color .2s ease;
}
.footer-link:hover{color:var(--flame)}
.footer-contact-list{display:grid;gap:16px}
.footer-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:4px 10px;align-items:center;
}
.footer-label{
  grid-column:1/-1;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.2em;
  color:var(--muted);
}
.footer-value{font-size:13.5px;color:var(--on-dark);word-break:break-word}
.footer-value--num{font-family:var(--font-mono);letter-spacing:.04em}
.copy-btn{
  padding:4px 9px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.14em;
  color:rgba(232,237,243,.7);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.copy-btn:hover{border-color:var(--teal);color:var(--teal-soft)}
.copy-btn[data-copied="true"]{
  border-color:var(--flame);color:var(--flame);
  background:rgba(242,140,40,.12);
}
.footer-legal{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px 28px;
  align-items:center;justify-content:space-between;
  width:100%;max-width:var(--shell);margin:clamp(32px,5vw,56px) auto 0;
  padding:18px var(--gutter) 30px;
  border-top:1px solid var(--line-dark);
  font-size:12.5px;
  color:rgba(232,237,243,.55);
}
.footer-legal-item{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.footer-legal-item .footer-label{grid-column:auto}
.footer-backdrop{
  position:absolute;left:0;right:0;bottom:0;height:340px;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(31,166,166,.22), transparent 62%),
    radial-gradient(80% 60% at 78% 6%, rgba(242,140,40,.14), transparent 66%),
    linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,.4) 58%, rgba(7,17,33,.88) 100%);
}
.footer-backdrop::before{
  content:"";position:absolute;left:0;right:0;top:58%;bottom:0;
  border-top:1px solid rgba(126,217,217,.28);
  background:linear-gradient(180deg, rgba(31,166,166,.12), rgba(11,31,58,0) 72%);
}
.footer-backdrop::after{
  content:"";position:absolute;inset:0;opacity:.3;
  background-image:radial-gradient(rgba(244,241,234,.55) .6px, transparent .8px);
  background-size:46px 46px;
}

/* ---------- 09 · 面包屑 ---------- */
.breadcrumb{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:calc(var(--head-h) + 20px) var(--gutter) 0;
  font-size:12.5px;color:var(--muted);
}
.breadcrumb-list{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);letter-spacing:.06em;
}
.breadcrumb-item{display:inline-flex;align-items:center;gap:8px}
.breadcrumb-item + .breadcrumb-item::before{content:"/";color:rgba(107,124,147,.6)}
.breadcrumb-link{color:var(--muted);transition:color .2s ease}
.breadcrumb-link:hover{color:var(--teal)}
.breadcrumb-current{color:var(--ink);font-weight:600}
.breadcrumb--on-dark{color:rgba(232,237,243,.6)}
.breadcrumb--on-dark .breadcrumb-current{color:#fff}
.breadcrumb--on-dark .breadcrumb-link:hover{color:var(--teal-soft)}

/* ---------- 10 · 研究板组件 ---------- */
.panel{
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:clamp(18px,2.4vw,28px);
  box-shadow:var(--shadow);
}
.panel--dark{
  background:var(--night-2);
  border-color:var(--line-dark);
  color:var(--on-dark);
  box-shadow:none;
}
.panel--dark h3,.panel--dark h2{color:#fff}
.panel--float{
  border-color:rgba(242,140,40,.55);
  box-shadow:var(--shadow-lift);
}
.metric{
  font-family:var(--font-mono);
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:700;line-height:1.08;
  color:var(--flame);
  font-variant-numeric:tabular-nums;
}
.metric-label{
  font-size:12.5px;letter-spacing:.06em;color:var(--muted);
}
.metric-unit{font-size:.58em;color:var(--muted);margin-left:4px}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border:1px solid var(--line-light);
  border-radius:999px;
  background:rgba(232,237,243,.6);
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.1em;
  color:var(--muted);
}
.tag--teal{border-color:rgba(31,166,166,.5);color:#0d6b6b;background:rgba(31,166,166,.1)}
.tag--flame{border-color:rgba(242,140,40,.5);color:#9a4f0c;background:rgba(242,140,40,.12)}
.data-strip{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  align-items:center;justify-content:space-between;
  padding:14px 0;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.08em;
  color:var(--muted);
}
.data-strip--dark{border-color:var(--line-dark);color:rgba(232,237,243,.6)}
.prose{max-width:68ch;font-size:16.5px;line-height:1.75}
.prose > p + p{margin-top:1.2em}
.prose h2{margin-top:2em;font-size:1.45rem}
.prose h3{margin-top:1.6em;font-size:1.15rem}
.prose ul{margin-top:1.1em;display:grid;gap:.6em}
.prose ul li{position:relative;padding-left:1.25em}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:9px;height:1px;background:var(--teal);
}
.prose a{color:var(--teal);border-bottom:1px solid rgba(31,166,166,.4)}
.table-scroll{
  overflow-x:auto;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  background:#fff;
}
.data-table{min-width:520px;font-size:14px}
.data-table thead th{
  padding:12px 16px;
  background:var(--data-bg);
  border-bottom:1px solid var(--line-light);
  font-size:12px;font-weight:600;letter-spacing:.14em;
  color:#3d4c60;text-align:left;white-space:nowrap;
}
.data-table td{
  padding:12px 16px;
  border-bottom:1px solid rgba(15,23,32,.07);
  vertical-align:top;
}
.data-table tbody tr:nth-child(even) td{background:rgba(232,237,243,.45)}
.data-table .num,.data-table th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.index-list{border-top:1px solid var(--line-light)}
.index-item{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:4px 16px;align-items:baseline;
  padding:16px 4px;
  border-bottom:1px solid var(--line-light);
}
.index-no{font-family:var(--font-mono);font-size:12px;color:var(--teal)}
.index-title{font-size:1.05rem;font-weight:700}
.index-desc{grid-column:2;font-size:14px;color:var(--muted)}
.tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  border-bottom:1px solid var(--line-light);
}
.tab{
  padding:10px 16px;
  border:1px solid transparent;border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  font-size:14px;font-weight:600;color:var(--muted);
  transition:color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  color:var(--ink);background:#fff;
  border-color:var(--line-light);
  box-shadow:inset 0 2px 0 var(--teal);
}
.tab-panel{padding-top:20px}
.tab-panel[hidden]{display:none}
.tabs--dark{border-bottom-color:var(--line-dark)}
.tabs--dark .tab{color:rgba(232,237,243,.6)}
.tabs--dark .tab[aria-selected="true"]{
  background:var(--night-2);border-color:var(--line-dark);color:#fff;
  box-shadow:inset 0 2px 0 var(--flame);
}
.timeline{display:grid;gap:2px}
.timeline-item{border:1px solid var(--line-light);background:#fff}
.timeline-trigger{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;
  font-size:14.5px;font-weight:600;text-align:left;
}
.timeline-caret{
  font-family:var(--font-mono);color:var(--teal);
  transition:transform .24s ease;
}
.timeline-item[data-open] .timeline-caret{transform:rotate(180deg)}
.timeline-body{
  display:grid;gap:10px;
  padding:0 16px 16px;
  font-size:14px;color:var(--muted);
}
.timeline-body[hidden]{display:none}
.anchor-rail{
  position:sticky;top:calc(var(--head-h) + 24px);
  display:grid;gap:2px;
  font-size:13px;
}
.anchor-link{
  display:block;padding:8px 10px;
  border-left:1px solid var(--line-light);
  color:var(--muted);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.anchor-link:hover{color:var(--ink)}
.anchor-link[aria-current="true"]{
  color:var(--teal);
  border-left-color:var(--flame);
  background:rgba(31,166,166,.08);
}
.section--dark .anchor-link{border-left-color:var(--line-dark);color:rgba(232,237,243,.6)}
.section--dark .anchor-link[aria-current="true"]{color:var(--teal-soft);background:rgba(31,166,166,.14)}

/* ---------- 11 · 图像容器（页面阶段放置图片） ---------- */
.media{display:block;margin:0}
.media-canvas{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  background:
    linear-gradient(135deg, rgba(31,166,166,.14), rgba(232,237,243,.9) 55%, rgba(242,140,40,.12));
}
.media[data-ratio="4x3"] .media-canvas{aspect-ratio:4 / 3}
.media[data-ratio="1x1"] .media-canvas{aspect-ratio:1 / 1}
.media[data-ratio="21x9"] .media-canvas{aspect-ratio:21 / 9}
.media[data-ratio="3x4"] .media-canvas{aspect-ratio:3 / 4}
.media-canvas > img,.media-canvas > picture > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.media-cap{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;line-height:1.6;letter-spacing:.04em;
  color:var(--muted);
}
.media--dark .media-canvas{
  border-color:var(--line-dark);
  background:
    linear-gradient(135deg, rgba(31,166,166,.28), rgba(18,48,90,.95) 60%, rgba(242,140,40,.18));
}
.media--dark .media-cap{color:rgba(232,237,243,.6)}

/* ---------- 12 · 动效 ---------- */
.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;
}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 13 · 响应式与可访问性收尾 ---------- */
@media (min-width:1400px){
  :root{--shell:1320px}
}
@media (max-width:600px){
  body{font-size:16px}
  .data-strip{justify-content:flex-start}
  .footer-legal{justify-content:flex-start}
  .brand-line{letter-spacing:.2em}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal [data-reveal]{opacity:1;transform:none}
  .btn:hover{transform:none}
}