/* ==========================================================================
   B体育主站 · 共享样式 /assets/site.css
   深夜数据作战室：深空黑底 + 矩阵绿信号 + 荧光黄关键数字 + 暖灰数据卡
   ========================================================================== */

/* --- 1. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,dl,dt,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--bs-fluoro);outline-offset:3px}

/* --- 2. 设计变量 --------------------------------------------------------- */
:root{
  --bs-black:#070B0A;
  --bs-midnight:#0E1B2A;
  --bs-matrix:#19D67A;
  --bs-electric:#2D8CFF;
  --bs-fluoro:#F2FF4D;
  --bs-warm:#CFC7BA;
  --bs-clay:#B86B4B;
  --bs-moss:#5F7A5A;
  --bs-rice:#F4F1EA;
  --bs-amber:#FFB020;

  --bs-line:rgba(244,241,234,.13);
  --bs-line-strong:rgba(244,241,234,.26);
  --bs-muted:rgba(244,241,234,.62);
  --bs-dim:rgba(244,241,234,.40);

  --bs-max:1440px;
  --bs-gutter:clamp(16px,4vw,56px);
  --bs-unit:8px;

  --bs-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-narrow:"Arial Narrow","Helvetica Neue Condensed",Arial,system-ui,sans-serif;
}

/* --- 3. 基础排版 --------------------------------------------------------- */
body{
  min-height:100vh;
  background-color:var(--bs-black);
  background-image:
    linear-gradient(rgba(244,241,234,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.022) 1px,transparent 1px);
  background-size:64px 64px;
  color:var(--bs-rice);
  font-family:var(--bs-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:800;line-height:1.22;letter-spacing:.02em}
h1{font-family:var(--bs-narrow);font-size:clamp(40px,8vw,96px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(28px,4vw,48px)}
h3{font-size:clamp(19px,2.2vw,24px)}
strong{font-weight:700;color:var(--bs-rice)}

.bs-lead{font-size:clamp(15px,1.4vw,17px);line-height:1.8;color:var(--bs-muted);max-width:66ch}
.bs-muted{color:var(--bs-muted)}
.bs-dim{color:var(--bs-dim)}
.bs-meta{font-family:var(--bs-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bs-dim)}
.bs-num{font-family:var(--bs-mono);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bs-index{display:block;font-family:var(--bs-mono);font-weight:700;font-size:clamp(40px,6vw,76px);line-height:.92;letter-spacing:-.04em;color:var(--bs-clay)}

/* --- 4. 骨架与网格 ------------------------------------------------------- */
.bs-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;
  background:var(--bs-fluoro);color:#12140A;
  font-weight:700;font-size:14px;letter-spacing:.06em;
}
.bs-skip:focus{left:12px;top:12px}
.bs-container{width:100%;max-width:var(--bs-max);margin:0 auto;padding-left:var(--bs-gutter);padding-right:var(--bs-gutter)}
.bs-section{padding-top:clamp(48px,8vw,120px);padding-bottom:clamp(48px,8vw,120px)}
.bs-grid{display:grid;gap:clamp(16px,2vw,28px)}
.bs-grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}

/* --- 5. 按钮 ------------------------------------------------------------- */
.bs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;
  border:1px solid var(--bs-line-strong);
  background:transparent;color:var(--bs-rice);
  font-size:14px;letter-spacing:.05em;line-height:1.2;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.bs-btn:hover{border-color:var(--bs-matrix);color:var(--bs-matrix)}
.bs-btn--primary{background:var(--bs-matrix);border-color:var(--bs-matrix);color:#04120B;font-weight:700}
.bs-btn--primary:hover{background:var(--bs-fluoro);border-color:var(--bs-fluoro);color:#12140A}
.bs-btn--ghost{color:var(--bs-muted)}
.bs-btn--ghost:hover{background:rgba(25,214,122,.08)}

/* --- 6. 数据面板与标签 --------------------------------------------------- */
.bs-panel{
  position:relative;
  padding:clamp(18px,2.4vw,30px);
  border:1px solid var(--bs-line);
  background:linear-gradient(180deg,rgba(14,27,42,.72),rgba(7,11,10,.86));
}
.bs-panel--warm{
  background:linear-gradient(180deg,#D9D2C6,#CFC7BA);
  border-color:rgba(18,16,13,.16);
  color:#161410;
}
.bs-panel--warm .bs-meta,.bs-panel--warm .bs-dim{color:rgba(22,20,16,.62)}
.bs-panel--warm .bs-muted{color:rgba(22,20,16,.72)}
.bs-panel--warm .bs-num{color:#161410}
.bs-panel__label{
  display:inline-block;margin-bottom:14px;
  font-family:var(--bs-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bs-matrix);
}
.bs-panel--warm .bs-panel__label{color:#4A3B2C}
.bs-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border:1px solid var(--bs-line-strong);
  font-family:var(--bs-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bs-muted);
}
.bs-tag--matrix{color:var(--bs-matrix);border-color:rgba(25,214,122,.42)}
.bs-tag--electric{color:var(--bs-electric);border-color:rgba(45,140,255,.42)}
.bs-tag--amber{color:var(--bs-amber);border-color:rgba(255,176,32,.42)}

/* --- 7. 面包屑 ----------------------------------------------------------- */
.bs-breadcrumb{padding-top:clamp(18px,3vw,30px)}
.bs-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--bs-mono);font-size:11.5px;letter-spacing:.1em;color:var(--bs-dim)}
.bs-breadcrumb li{display:flex;align-items:center;gap:8px}
.bs-breadcrumb li:not(:last-child)::after{content:"/";color:var(--bs-line-strong)}
.bs-breadcrumb a:hover{color:var(--bs-matrix)}
.bs-breadcrumb [aria-current="page"]{color:var(--bs-warm)}

/* --- 8. 图片容器 --------------------------------------------------------- */
.bs-figure{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:160px;
  border:1px solid var(--bs-line);
  background:
    linear-gradient(135deg,rgba(45,140,255,.12),rgba(7,11,10,.94) 58%),
    var(--bs-black);
}
.bs-figure::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(244,241,234,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.055) 1px,transparent 1px);
  background-size:32px 32px;
}
.bs-figure img,.bs-figure svg{width:100%;height:100%;object-fit:cover}
.bs-figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(7,11,10,0),rgba(7,11,10,.9));
  font-size:12px;letter-spacing:.03em;color:var(--bs-warm);
}
.bs-figure--wide{aspect-ratio:16/9}
.bs-figure--banner{aspect-ratio:21/9}
.bs-figure--tall{aspect-ratio:4/5}
.bs-figure--square{aspect-ratio:1/1}

/* --- 9. 章节目录与滚动定位 ----------------------------------------------- */
.bs-toc{font-size:13px;line-height:1.6}
.bs-toc ol{display:flex;flex-direction:column;gap:2px}
.bs-toc a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 10px;
  border-left:1px solid var(--bs-line);
  color:var(--bs-dim);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.bs-toc a:hover{color:var(--bs-rice);background:rgba(244,241,234,.03)}
.bs-toc a[aria-current="true"]{color:var(--bs-matrix);border-left-color:var(--bs-matrix);background:rgba(25,214,122,.06)}
.bs-toc__index{font-family:var(--bs-mono);font-size:11px;color:var(--bs-dim)}
.bs-toc a[aria-current="true"] .bs-toc__index{color:var(--bs-matrix)}

.bs-progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:90;
  transform:scaleX(var(--bs-progress,0));
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bs-matrix),var(--bs-electric) 55%,var(--bs-fluoro));
  pointer-events:none;
}
.bs-to-top{
  position:fixed;right:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);z-index:70;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:44px;padding:0 14px;
  border:1px solid var(--bs-line-strong);
  background:rgba(14,27,42,.94);color:var(--bs-matrix);
  font-family:var(--bs-mono);font-size:11px;letter-spacing:.16em;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background-color .2s ease,color .2s ease;
}
.bs-to-top[data-visible]{opacity:1;visibility:visible;transform:none}
.bs-to-top:hover{background:var(--bs-matrix);border-color:var(--bs-matrix);color:#04120B}

/* --- 10. 进入动效 -------------------------------------------------------- */
[data-reveal]{transition:opacity .6s ease,transform .6s ease}
[data-reveal].bs-reveal--pending{opacity:0;transform:translateY(18px)}

/* --- 11. 页头 ------------------------------------------------------------ */
.bs-header{
  --bs-header-h:72px;
  position:sticky;top:0;z-index:60;
  background:rgba(7,11,10,.94);
  border-bottom:1px solid var(--bs-line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bs-header{background:var(--bs-black)}
}
.bs-header__inner{
  max-width:var(--bs-max);margin:0 auto;
  padding-left:var(--bs-gutter);padding-right:var(--bs-gutter);
  min-height:var(--bs-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.bs-brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.bs-brand__mark{
  position:relative;flex:none;width:30px;height:30px;
  border:1px solid rgba(25,214,122,.75);
  background:linear-gradient(135deg,rgba(25,214,122,.24),rgba(25,214,122,0) 62%);
  box-shadow:inset 0 0 16px rgba(25,214,122,.2);
}
.bs-brand__mark::before{
  content:"";position:absolute;inset:6px;
  background:repeating-linear-gradient(90deg,var(--bs-matrix) 0 2px,transparent 2px 5px);
  opacity:.85;
}
.bs-brand__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.bs-brand__name{font-size:16px;font-weight:800;letter-spacing:.14em;color:var(--bs-rice);white-space:nowrap}
.bs-brand__sub{font-family:var(--bs-mono);font-size:10px;letter-spacing:.16em;color:var(--bs-dim);white-space:nowrap}

.bs-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.bs-nav__list{counter-reset:bsnav;display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.bs-nav__list>li{display:flex}
.bs-nav__list a{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 1px;
  font-size:14px;letter-spacing:.04em;color:var(--bs-muted);
  transition:color .2s ease;
}
.bs-nav__list a::before{
  counter-increment:bsnav;
  content:counter(bsnav,decimal-leading-zero);
  font-family:var(--bs-mono);font-size:10px;letter-spacing:0;color:var(--bs-dim);
  transition:color .2s ease;
}
.bs-nav__list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--bs-matrix);
  transition:right .28s cubic-bezier(.4,0,.2,1);
}
.bs-nav__list a:hover,.bs-nav__list a:focus-visible{color:var(--bs-rice)}
.bs-nav__list a:hover::after,.bs-nav__list a:focus-visible::after{right:0}
.bs-nav__list a[aria-current="page"]{color:var(--bs-matrix)}
.bs-nav__list a[aria-current="page"]::before{color:var(--bs-matrix)}
.bs-nav__list a[aria-current="page"]::after{right:0}

.bs-nav__cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;
  border:1px solid rgba(25,214,122,.5);
  background:linear-gradient(180deg,rgba(25,214,122,.14),rgba(25,214,122,.03));
  font-size:13px;letter-spacing:.06em;color:var(--bs-matrix);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.bs-nav__cta::before{content:"";flex:none;width:5px;height:5px;background:currentColor}
.bs-nav__cta:hover,.bs-nav__cta:focus-visible{background:var(--bs-matrix);border-color:var(--bs-matrix);color:#04120B}

.bs-nav-toggle{
  display:none;align-items:center;gap:10px;
  padding:9px 13px;
  border:1px solid var(--bs-line-strong);
  color:var(--bs-rice);
  font-family:var(--bs-mono);font-size:11px;letter-spacing:.16em;
  transition:border-color .2s ease,color .2s ease;
}
.bs-nav-toggle__bars{position:relative;display:block;width:18px;height:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.bs-nav-toggle__bars::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:currentColor;transition:transform .2s ease;
}
.bs-nav-toggle__label{line-height:1}
.bs-nav-toggle:hover{border-color:var(--bs-matrix);color:var(--bs-matrix)}
.bs-nav-toggle[aria-expanded="true"]{border-color:var(--bs-matrix);color:var(--bs-matrix)}
.bs-nav-toggle[aria-expanded="true"] .bs-nav-toggle__bars::after{transform:scaleX(.38)}

/* --- 12. 页脚 ------------------------------------------------------------ */
.bs-footer{position:relative;background:var(--bs-midnight);border-top:1px solid var(--bs-line)}
.bs-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--bs-matrix),var(--bs-electric) 45%,transparent 92%);
  opacity:.75;
}
.bs-footer__inner{
  max-width:var(--bs-max);margin:0 auto;
  padding:clamp(36px,5vw,64px) var(--bs-gutter) clamp(20px,3vw,28px);
}
.bs-footer__top{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(220px,.95fr) minmax(0,1.7fr);
  align-items:start;
}
.bs-footer__tagline{margin-top:14px;font-size:13px;color:var(--bs-dim);letter-spacing:.04em}
.bs-footer__cols{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:repeat(3,minmax(0,1fr))}
.bs-footer__title{
  margin-bottom:14px;
  font-family:var(--bs-mono);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bs-matrix);
}
.bs-footer__list li+li{margin-top:9px}
.bs-footer__list a{
  font-size:14px;color:var(--bs-muted);
  transition:color .2s ease,padding-left .2s ease;
}
.bs-footer__list a:hover{color:var(--bs-rice);padding-left:4px}
.bs-footer__contact{
  margin-top:clamp(28px,4vw,48px);
  padding-top:22px;
  border-top:1px solid var(--bs-line);
}
.bs-footer__contact-label{
  font-family:var(--bs-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bs-fluoro);
}
.bs-footer__contact-list{
  display:flex;flex-wrap:wrap;gap:10px 34px;
  margin-top:12px;
}
.bs-footer__key{
  display:inline-block;margin-right:8px;
  font-family:var(--bs-mono);font-size:11px;letter-spacing:.1em;
  color:var(--bs-dim);
}
.bs-footer__val{font-family:var(--bs-mono);font-size:13px;color:var(--bs-warm);word-break:break-word}
.bs-footer__note{margin-top:14px;font-size:12.5px;line-height:1.75;color:var(--bs-dim);max-width:76ch}
.bs-footer__legal{
  margin-top:clamp(24px,3vw,36px);
  padding-top:18px;
  border-top:1px solid var(--bs-line);
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;
  font-family:var(--bs-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--bs-dim);
}
.bs-footer__copy{display:flex;flex-wrap:wrap;gap:10px}
.bs-footer__icp{color:var(--bs-dim)}
.bs-footer__legal-links{display:flex;flex-wrap:wrap;gap:10px 20px}
.bs-footer__legal-links a{color:var(--bs-muted);transition:color .2s ease}
.bs-footer__legal-links a:hover{color:var(--bs-matrix)}

/* --- 13. 响应式 ---------------------------------------------------------- */
@media (max-width:1080px){
  .bs-nav__list a{font-size:13px}
  .bs-brand__sub{letter-spacing:.12em}
}

@media (max-width:960px){
  .bs-header{--bs-header-h:64px}
  .bs-nav-toggle{display:inline-flex}
  .bs-nav{
    position:fixed;left:0;right:0;top:var(--bs-header-h);
    display:none;flex-direction:column;align-items:stretch;gap:0;
    max-height:calc(100vh - var(--bs-header-h));
    overflow-y:auto;
    padding:10px var(--bs-gutter) 22px;
    background:var(--bs-midnight);
    border-top:1px solid var(--bs-line);
    border-bottom:1px solid var(--bs-line);
    box-shadow:0 24px 48px rgba(0,0,0,.55);
  }
  .bs-nav[data-open]{display:flex}
  .bs-nav__list{flex-direction:column;align-items:stretch;gap:0;counter-reset:bsnav}
  .bs-nav__list>li{border-bottom:1px solid var(--bs-line)}
  .bs-nav__list a{width:100%;padding:14px 2px;font-size:15px}
  .bs-nav__list a::after{display:none}
  .bs-nav__cta{margin-top:18px;justify-content:center;padding:13px 16px;font-size:14px}
}

@media (max-width:900px){
  .bs-grid--12{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bs-footer__top{grid-template-columns:1fr}
  .bs-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .bs-figure--banner{aspect-ratio:16/10}
}

@media (max-width:560px){
  .bs-grid--12{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-brand__sub{display:none}
  .bs-footer__cols{grid-template-columns:1fr}
  .bs-footer__contact-list{flex-direction:column;gap:10px}
  .bs-footer__legal{flex-direction:column;align-items:flex-start}
  h1{letter-spacing:0}
}

/* --- 14. 动效降级 -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal].bs-reveal--pending{opacity:1;transform:none}
}