/* ============================================================
   必发赛场 · bifa-sprint.com.cn
   共享样式表 /assets/site.css
   深色竞技数据风 · 框架式导航 · 编号章节体系
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --ink:#0B0F0E;
  --ink-2:#10241F;
  --ink-3:#17332C;
  --indigo:#221C3A;
  --wine:#4A1F2B;
  --orange:#FF6A1F;
  --cyan:#38F0D0;
  --paper:#EDEAE3;
  --text:#D8D5CE;
  --muted:#9FB3AC;
  --line:#2E3B37;
  --line-strong:#3C4E48;

  --font-display:"Archivo Narrow","Arial Narrow","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-mono:"SFMono-Regular","JetBrains Mono","Roboto Mono",Menlo,Consolas,"Courier New",monospace;

  --frame:1240px;
  --gut:24px;
  --rail:36px;
  --measure:40em;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  min-height:100vh;
  background-color:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,pre{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
hr{border:0;margin:0;}

::selection{background:var(--orange);color:#0B0F0E;}

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

/* ---------- 3. 框架：桌面端左侧刻度竖线 ---------- */
@media (min-width:1024px){
  body{padding-left:var(--rail);}
  body::before{
    content:"";
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:var(--rail);
    border-right:1px solid var(--line);
    background-image:repeating-linear-gradient(
      to bottom,
      transparent 0 63px,
      var(--line) 63px 64px
    );
    background-size:14px 100%;
    background-repeat:no-repeat;
    background-position:0 0;
    pointer-events:none;
    z-index:1;
  }
}

/* ---------- 4. 容器与网格 ---------- */
.wrap{
  width:100%;
  max-width:var(--frame);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--narrow{max-width:860px;}

.grid{display:grid;gap:20px;}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--asym{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}

.stack>*+*{margin-top:16px;}

.rule{height:1px;background:var(--line);border:0;}

/* ---------- 5. 通用版式 ---------- */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform:uppercase;
}

.lead{
  font-size:17px;
  line-height:1.75;
  color:var(--text);
  max-width:var(--measure);
}

.prose{
  font-size:16px;
  line-height:1.7;
  color:var(--text);
}
.prose p,
.prose ul,
.prose ol,
.prose dl{max-width:var(--measure);}
.prose p+p{margin-top:1em;}
.prose h2,
.prose h3{
  font-family:var(--font-serif);
  color:var(--paper);
  font-weight:700;
  font-size:19px;
  line-height:1.45;
  margin-top:1.9em;
  margin-bottom:.55em;
}
.prose ul{margin-top:.6em;}
.prose li{
  position:relative;
  padding-left:22px;
  margin-top:.5em;
}
.prose li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--orange);
}
.prose strong{color:var(--paper);font-weight:600;}
.prose a{
  color:var(--paper);
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-underline-offset:3px;
  transition:text-decoration-color .16s ease,color .16s ease;
}
.prose a:hover{
  color:var(--cyan);
  text-decoration-color:var(--cyan);
}

/* ---------- 6. 编号章节 ---------- */
.section{
  padding-block:56px;
  border-top:1px solid var(--line);
}
.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 20px;
  margin-bottom:28px;
}
.section-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:44px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--orange);
}
.section-title{
  font-family:var(--font-serif);
  font-size:23px;
  line-height:1.35;
  font-weight:700;
  color:var(--paper);
}
.section-sub{
  flex:1 1 100%;
  font-size:13.5px;
  color:var(--muted);
}

/* ---------- 7. 色带与面板 ---------- */
.band{
  display:block;
  width:100%;
  height:6px;
  background:var(--ink-3);
}
.band--indigo{background:var(--indigo);}
.band--wine{background:var(--wine);}
.band--green{background:var(--ink-3);}
.band--orange{background:var(--orange);}

.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:1px;
  padding:20px;
  transition:border-color .16s ease,background-color .16s ease;
}
.panel--indigo{background:var(--indigo);}
.panel--wine{background:var(--wine);}
.panel--tight{padding:14px;}

/* ---------- 8. 按钮与标记 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.2;
  color:var(--paper);
  background:transparent;
  border:1px solid var(--line);
  border-radius:1px;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
.btn:hover{border-color:var(--orange);color:var(--orange);}
.btn--solid{
  background:var(--orange);
  border-color:var(--orange);
  color:#0B0F0E;
}
.btn--solid:hover{
  background:transparent;
  color:var(--orange);
}
.btn--ghost{
  border-color:var(--cyan);
  color:var(--cyan);
}
.btn--ghost:hover{
  border-color:var(--orange);
  color:var(--orange);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.4;
  color:var(--muted);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:1px;
}
.tag--live{color:var(--orange);border-color:rgba(255,106,31,.42);}
.tag--data{color:var(--cyan);border-color:rgba(56,240,208,.36);}

/* ---------- 9. 面包屑 ---------- */
.breadcrumb{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}
.breadcrumb li{
  display:flex;
  align-items:center;
}
.breadcrumb li+li::before{
  content:"/";
  margin:0 9px;
  color:var(--line-strong);
}
.breadcrumb a{
  color:var(--muted);
  transition:color .16s ease;
}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb [aria-current="page"]{color:var(--paper);}

/* ---------- 10. 表格 ---------- */
.table-wrap{
  overflow-x:auto;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:1px;
}
.table{
  width:100%;
  min-width:560px;
  font-size:14px;
  line-height:1.55;
}
.table th,
.table td{
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
.table thead th{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.1em;
  color:var(--muted);
  border-bottom-color:var(--line-strong);
  white-space:nowrap;
}
.table tbody tr{
  transition:background-color .16s ease;
}
.table tbody tr:hover{background:var(--ink-3);}
.table tbody tr:last-child td{border-bottom:0;}
.table .num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* ---------- 11. 图片容器 ---------- */
.media-frame{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:1px;
  overflow:hidden;
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(1.04);
}
.media-frame--wide{aspect-ratio:16/7;}
.media-frame--std{aspect-ratio:4/3;}
.media-frame--tall{aspect-ratio:3/4;}
.media-frame--square{aspect-ratio:1/1;}

.media-frame--blank::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:36px 36px;
  opacity:.5;
  pointer-events:none;
}

.media-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:8px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
  background:linear-gradient(to top,rgba(11,15,14,.92),rgba(11,15,14,0));
}
.media-frame--std .media-caption,
.media-frame--tall .media-caption{position:static;background:none;}

/* ---------- 12. 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.skip-link{
  position:absolute;
  top:-80px;
  left:16px;
  z-index:200;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  color:#0B0F0E;
  background:var(--orange);
  border-radius:1px;
  transition:top .16s ease;
}
.skip-link:focus{top:10px;}

.header-frame{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  max-width:var(--frame);
  min-height:66px;
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  padding-right:20px;
  margin-right:20px;
  border-right:1px solid var(--line);
}
.brand-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--orange);
  background:var(--ink-2);
  border:1px solid var(--orange);
  border-radius:1px;
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.brand-name{
  font-family:var(--font-display);
  font-stretch:condensed;
  font-size:19px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.15;
  color:var(--paper);
}
.brand-line{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  line-height:1.3;
  color:var(--muted);
  white-space:nowrap;
}

/* 导航 */
.site-nav{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  min-width:0;
}
.nav-list{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
  width:100%;
}
.nav-item{display:flex;min-width:0;}
.nav-link{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  font-size:13.5px;
  letter-spacing:.05em;
  line-height:1.3;
  white-space:nowrap;
  color:var(--muted);
  border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.nav-link:hover{
  color:var(--paper);
  background:var(--ink-2);
  border-bottom-color:var(--cyan);
}
.nav-link[aria-current="page"]{
  color:var(--paper);
  background:var(--ink-2);
  border-bottom-color:var(--orange);
}

/* 页头右侧工具位 */
.header-utility{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
  margin-left:20px;
  padding-left:20px;
  border-left:1px solid var(--line);
}
.utility-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  line-height:1.4;
  white-space:nowrap;
  color:var(--muted);
}
.utility-item--index{
  padding:4px 8px;
  color:var(--cyan);
  border:1px solid var(--line);
  border-radius:1px;
}
.utility-label{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
}
.login-state{color:var(--muted);}
.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  flex:0 0 auto;
  background:var(--orange);
  border-radius:50%;
}

.nav-toggle{
  display:none;
  width:40px;
  height:38px;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:1px;
  transition:border-color .16s ease;
}
.nav-toggle:hover{border-color:var(--orange);}
.nav-toggle-bar{
  display:block;
  width:18px;
  height:1px;
  background:var(--paper);
}
.nav-toggle[aria-expanded="true"]{border-color:var(--orange);}

/* ---------- 13. 移动 / 平板导航 ---------- */
@media (max-width:1079.98px){
  .header-frame{min-height:60px;gap:12px;}
  .brand{
    padding-right:0;
    margin-right:0;
    margin-left:0;
    border-right:0;
  }
  .brand-line{display:none;}
  .header-utility{
    margin-left:auto;
    padding-left:0;
    border-left:0;
    gap:12px;
  }
  .nav-toggle{display:inline-flex;}

  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    background:var(--ink-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .site-nav[data-open]{display:block;}

  .nav-list{
    grid-template-columns:1fr;
    counter-reset:navitem;
  }
  .nav-item{
    counter-increment:navitem;
    border-bottom:1px solid var(--line);
  }
  .nav-item:last-child{border-bottom:0;}
  .nav-link{
    justify-content:flex-start;
    padding:14px var(--gut);
    font-size:15px;
    border-bottom:2px solid transparent;
  }
  .nav-link::before{
    content:counter(navitem,decimal-leading-zero);
    margin-right:14px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    color:var(--orange);
  }
  .nav-link[aria-current="page"]{border-bottom-color:var(--orange);}
}

@media (max-width:720px){
  .utility-item--index{display:none;}
}

@media (max-width:480px){
  .brand-name{font-size:17px;}
  .brand-mark{width:32px;height:32px;font-size:11px;}
  .login-state{font-size:10.5px;}
}

/* ---------- 14. 页脚 ---------- */
.site-footer{
  margin-top:72px;
  background:var(--ink-2);
  border-top:1px solid var(--line);
}

/* 反馈锚点色带 */
.footer-feedback{
  background:var(--orange);
  color:#0B0F0E;
}
.footer-feedback-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  min-height:58px;
  padding-block:12px;
}
.footer-feedback-text{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  color:#0B0F0E;
}
.footer-feedback-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:#0B0F0E;
  padding-bottom:1px;
  border-bottom:1px solid rgba(11,15,14,.45);
  transition:border-color .16s ease,gap .16s ease;
}
.footer-feedback-link::after{content:"→";}
.footer-feedback-link:hover{
  border-bottom-color:#0B0F0E;
  gap:12px;
}

/* 页脚主体 */
.footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.9fr);
  gap:52px;
  padding-block:52px 36px;
}
.footer-brand{min-width:0;}
.brand--footer{
  padding-right:0;
  margin-right:0;
  border-right:0;
}
.footer-note{
  margin-top:18px;
  max-width:34em;
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
}
.footer-meta{
  margin-top:20px;
  display:grid;
  gap:7px;
}
.footer-meta-row{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:12.5px;
  line-height:1.6;
}
.footer-meta dt{
  flex:0 0 auto;
  min-width:60px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan);
}
.footer-meta dd{color:var(--muted);}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.footer-col{min-width:0;}
.footer-col-title{
  margin-bottom:14px;
  padding-bottom:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--cyan);
  border-bottom:1px solid var(--line);
}
.footer-col-list li+li{margin-top:9px;}
.footer-col-list a{
  display:inline-block;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.footer-col-list a:hover{
  color:var(--paper);
  border-bottom-color:var(--orange);
}

/* 页脚底线 */
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 28px;
  padding-block:18px 30px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--muted);
}
.footer-legal{
  font-family:var(--font-mono);
  letter-spacing:.04em;
  color:var(--muted);
}
.footer-contact{
  flex:1 1 340px;
  line-height:1.65;
}
.footer-copy{
  font-family:var(--font-mono);
  letter-spacing:.04em;
  margin-left:auto;
  color:var(--line-strong);
}

/* ---------- 15. 返回页首 ---------- */
.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:90;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1;
  color:var(--cyan);
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:1px;
  visibility:hidden;
  opacity:0;
  transition:opacity .18s ease,visibility .18s ease,border-color .16s ease,color .16s ease;
}
.to-top[data-visible]{
  visibility:visible;
  opacity:1;
}
.to-top:hover{
  color:var(--orange);
  border-color:var(--orange);
}

/* ---------- 16. 进场微反馈 ---------- */
@keyframes reveal-flash{
  from{filter:brightness(1.75);}
  to{filter:brightness(1);}
}
[data-reveal].is-revealed{
  animation:reveal-flash 120ms ease-out;
}

/* ---------- 17. 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal].is-revealed{animation:none;}
}

/* ---------- 18. 响应式 ---------- */
@media (max-width:1000px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:36px;
    padding-block:44px 32px;
  }
}

@media (max-width:900px){
  .grid--3,
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--asym{grid-template-columns:1fr;}
  .section{padding-block:44px;}
  .section-num{font-size:36px;}
  .section-title{font-size:20px;}
}

@media (max-width:640px){
  :root{--gut:18px;}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .footer-bottom{gap:8px 16px;}
  .footer-copy{margin-left:0;}
  .to-top{right:12px;bottom:12px;width:40px;height:40px;}
}

@media (max-width:560px){
  .grid--2,
  .grid--3,
  .grid--4{grid-template-columns:1fr;}
  .section{padding-block:36px;}
  .lead{font-size:16px;}
}

@media (max-width:440px){
  .footer-cols{grid-template-columns:1fr;}
  .footer-meta-row{flex-direction:column;gap:2px;}
  .footer-meta dt{min-width:0;}
}