/* ============================================================
   /assets/site.css — 必博体育BIBO 共享外壳样式
   深绿数据台 / 侧边轨道 / 堆叠面板 / 等宽数值
   ============================================================ */

/* ---------- 1. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
hr{border:0}

/* ---------- 2. tokens ---------- */
:root{
  --green-900:#0B2B22;
  --green-850:#123328;
  --green-700:#1C4437;
  --stone:#3A423E;
  --bone:#F2EFE6;
  --cyan:#35E0C8;
  --orange:#FF7A2F;
  --clay:#C2703F;
  --mono-gray:#8FA39B;
  --ink:#07100D;
  --mint:#A9C7BD;
  --hair:rgba(169,199,189,.24);
  --hair-soft:rgba(169,199,189,.14);
  --rail-w:104px;
  --page-max:1360px;
  --page-x:clamp(18px,4vw,72px);
  --gutter:24px;
  --shadow:0 20px 44px -34px rgba(7,16,13,.95);
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  --font-body:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  --font-editorial:"Source Han Serif SC","Noto Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

/* ---------- 3. base ---------- */
html{scroll-behavior:smooth}
body{
  min-height:100%;
  background-color:var(--green-900);
  background-image:
    linear-gradient(rgba(169,199,189,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(169,199,189,.05) 1px,transparent 1px);
  background-size:48px 48px,48px 48px;
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:800;line-height:1.2;letter-spacing:-.02em}
p,li{text-wrap:pretty}
::selection{background:var(--cyan);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:var(--stone) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(7,16,13,.4)}
*::-webkit-scrollbar-thumb{background:var(--stone);border:2px solid transparent;background-clip:padding-box}

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

.display{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,56px);line-height:1.08;letter-spacing:-.02em}
.editorial{font-family:var(--font-editorial);font-weight:500;font-size:15px;letter-spacing:.04em}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-inline:.08em}
.measure{max-width:34em}
.muted{color:var(--mono-gray)}
.accent{color:var(--cyan)}
.warn{color:var(--orange)}
.stack{display:flex;flex-direction:column;gap:clamp(12px,2vw,20px)}

/* ---------- 4. skip link ---------- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;
  background:var(--cyan);color:var(--ink);
  font-size:14px;font-weight:700;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:none}

/* ---------- 5. header ---------- */
.site-header{position:sticky;top:0;z-index:50}
.site-header__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:68px;
  padding-inline:var(--page-x);
  background:rgba(11,43,34,.94);
  border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{
  position:relative;flex:0 0 auto;
  display:grid;place-items:center;
  min-width:44px;height:38px;padding-inline:8px;
  border:1px solid var(--cyan);
  background:linear-gradient(150deg,rgba(53,224,200,.16),rgba(53,224,200,0) 72%);
  color:var(--cyan);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
}
.brand__mark::after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;background:var(--orange)}
.brand__text{display:block;min-width:0}
.brand__name{display:block;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--bone)}
.brand__line{display:block;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:var(--mono-gray);letter-spacing:.04em}
.site-header__tools{display:flex;align-items:center;gap:10px}

.nav-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid rgba(169,199,189,.35);
  color:var(--bone);font-size:13px;letter-spacing:.08em;
  transition:border-color .18s,color .18s;
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle__bars{display:grid;gap:3px;width:16px}
.nav-toggle__bars span{display:block;height:2px;background:currentColor}
.nav-toggle__label{font-family:var(--font-mono)}

/* ---------- 6. rail navigation ---------- */
.rail{
  position:fixed;top:0;bottom:0;left:0;z-index:60;
  width:min(300px,84vw);
  display:flex;flex-direction:column;
  padding:20px 16px 28px;
  background:linear-gradient(180deg,var(--green-850),var(--green-900) 62%);
  border-inline-end:1px solid var(--hair);
  overflow-y:auto;
  transform:translateX(-102%);
  visibility:hidden;
  transition:transform .3s var(--ease),visibility .3s linear;
}
body[data-nav="open"] .rail{transform:none;visibility:visible}
.rail__cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.4em;color:var(--mono-gray);margin-bottom:14px}
.rail__close{
  align-self:flex-start;margin-bottom:12px;padding:6px 12px;
  border:1px solid rgba(169,199,189,.35);color:var(--mint);
  font-size:12px;font-family:var(--font-mono);letter-spacing:.1em;
}
.rail__close:hover{border-color:var(--cyan);color:var(--cyan)}
.rail__list{display:flex;flex-direction:column;gap:4px}
.rail__link{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:12px 10px;
  border-inline-start:2px solid transparent;
  color:var(--mint);font-size:15px;line-height:1.2;
  transition:color .18s,background-color .18s,border-color .18s;
}
.rail__index{font-family:var(--font-mono);font-size:11px;color:var(--mono-gray);letter-spacing:.06em}
.rail__label{letter-spacing:.08em}
.rail__link:hover{color:var(--bone);background:rgba(53,224,200,.08)}
.rail__link[aria-current="page"]{
  color:var(--cyan);
  border-inline-start-color:var(--cyan);
  background:rgba(53,224,200,.1);
}

.nav-scrim{
  position:fixed;inset:0;z-index:55;
  background:rgba(7,16,13,.66);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
body[data-nav="open"] .nav-scrim{opacity:1;pointer-events:auto}

@media (max-width:1023px){
  body[data-nav="open"]{overflow:hidden}
  .site-header__cta{display:none}
}
@media (min-width:640px) and (max-width:1023px){
  .site-header__cta{display:inline-flex}
}
@media (max-width:719px){
  .brand__line{display:none}
}
@media (min-width:1024px){
  body{padding-inline-start:var(--rail-w)}
  .nav-scrim{display:none}
  .nav-toggle{display:none}
  .rail{
    width:var(--rail-w);
    padding:96px 0 32px;
    justify-content:center;
    transform:none;visibility:visible;
  }
  .rail__cap{text-align:center;margin-bottom:18px}
  .rail__close{display:none}
  .rail__list{gap:2px}
  .rail__link{
    flex-direction:column;align-items:center;gap:7px;
    padding:12px 6px;
    border-inline-start:0;
    border-inline-end:2px solid transparent;
    font-size:13px;
  }
  .rail__link[aria-current="page"]{
    border-inline-start-color:transparent;
    border-inline-end-color:var(--cyan);
  }
  .rail__label{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.18em}
  .rail__index{letter-spacing:.1em}
}

/* ---------- 7. buttons / chips / tags ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:11px 20px;
  border:1px solid transparent;
  font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.04em;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#1B0D04}
.btn--primary:hover{background:#FF8F4D;border-color:#FF8F4D}
.btn--ghost{border-color:rgba(53,224,200,.5);background:rgba(53,224,200,.07);color:var(--cyan)}
.btn--ghost:hover{background:rgba(53,224,200,.16);color:var(--bone)}
.btn--sm{padding:8px 14px;font-size:13px}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  padding:7px 14px;
  border:1px solid rgba(169,199,189,.35);
  background:rgba(11,43,34,.6);
  color:var(--mint);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;
  transition:background-color .18s,color .18s,border-color .18s;
}
.chip:hover{border-color:var(--cyan);color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#1B0D04}

.tag{
  display:inline-block;padding:2px 8px;
  border-inline-start:2px solid var(--clay);
  background:rgba(194,112,63,.16);
  color:#E3A67D;
  font-family:var(--font-editorial);font-size:13px;letter-spacing:.04em;
}
.note{
  padding-inline-start:12px;
  border-inline-start:2px solid var(--stone);
  color:var(--mono-gray);font-size:13px;line-height:1.7;
}

/* ---------- 8. layout ---------- */
.shell{
  width:100%;max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--page-x);
}
.section{padding-block:clamp(36px,6vw,88px)}
.section__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:clamp(18px,2.5vw,28px);
}
.grid{display:grid;gap:var(--gutter);grid-template-columns:repeat(12,minmax(0,1fr))}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-10{grid-column:span 10}
.span-12{grid-column:span 12}
@media (max-width:1023px){
  .span-3,.span-4{grid-column:span 6}
  .span-8,.span-10{grid-column:span 12}
}
@media (max-width:639px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .span-3,.span-4,.span-6,.span-8,.span-10,.span-12{grid-column:1/-1}
}

.tick-rule{
  height:6px;
  background-image:repeating-linear-gradient(90deg,rgba(169,199,189,.45) 0 1px,transparent 1px 12px);
  opacity:.8;
}

/* ---------- 9. panel ---------- */
.panel{
  position:relative;
  padding:clamp(18px,2.6vw,32px);
  background:var(--green-700);
  border:1px solid var(--hair);
  box-shadow:var(--shadow);
}
.panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background-image:repeating-linear-gradient(90deg,rgba(169,199,189,.5) 0 1px,transparent 1px 12px);
  pointer-events:none;
}
.panel--tint{background:linear-gradient(160deg,var(--green-700),#153529)}
.panel--bone{background:var(--bone);border-color:rgba(58,66,62,.3);color:var(--ink)}
.panel--bone .panel__count,.panel--bone .panel__foot{color:#5C645F}
.panel__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}
.panel__index{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--cyan)}
.panel__title{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.01em}
.panel__count{font-family:var(--font-mono);font-size:12px;color:var(--mono-gray)}
.panel__body{min-height:1px}
.panel__foot{
  margin-top:16px;padding-top:10px;
  border-top:1px dashed var(--hair);
  font-family:var(--font-mono);font-size:12px;color:var(--mono-gray);
}

/* ---------- 10. band ---------- */
.band{
  position:relative;
  min-height:120px;
  display:flex;align-items:center;
  padding-block:16px;
  background:linear-gradient(90deg,rgba(28,68,55,.94),rgba(11,43,34,.94));
  border-block:1px solid var(--hair);
  overflow:hidden;
}
.band__track{
  display:flex;gap:var(--gutter);
  width:100%;
  padding-inline:var(--page-x);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-color:var(--stone) transparent;
}
.band__item{flex:0 0 auto;min-width:180px;scroll-snap-align:start}

/* ---------- 11. figure ---------- */
.figure{
  position:relative;overflow:hidden;
  border:1px solid var(--hair);
  background:linear-gradient(135deg,var(--green-700),var(--stone) 78%);
}
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(122deg,transparent 42%,rgba(53,224,200,.14) 62%,transparent 82%);
}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--wide{aspect-ratio:16/9}
.figure--tall{aspect-ratio:3/4}
.figure--square{aspect-ratio:1/1}
.figure--band{aspect-ratio:21/9}
.figure__cap{
  position:absolute;z-index:1;left:0;right:0;bottom:0;
  padding:8px 12px;
  background:linear-gradient(0deg,rgba(7,16,13,.88),transparent);
  font-family:var(--font-mono);font-size:11px;color:var(--mint);letter-spacing:.04em;
}

/* ---------- 12. crumbs / table ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--mono-gray);
}
.crumbs li{display:flex;align-items:center;gap:.5em}
.crumbs li+li::before{content:"/";color:var(--stone)}
.crumbs a:hover{color:var(--cyan)}
.crumbs [aria-current="page"]{color:var(--bone)}

.data-table{font-size:14px;line-height:1.5}
.data-table th,.data-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--hair-soft)}
.data-table thead th{
  background:var(--stone);color:var(--bone);
  font-size:13px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
}
.data-table tbody tr:nth-child(even){background:rgba(7,16,13,.35)}
.data-table td.num,.data-table th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- 13. footer ---------- */
.site-footer{
  margin-top:clamp(48px,8vw,120px);
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(11,43,34,0),var(--ink) 42%);
}
.site-footer__frame{
  width:100%;max-width:var(--page-max);
  margin-inline:auto;
  padding:clamp(32px,5vw,64px) var(--page-x) 28px;
}
.site-footer__top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  padding-bottom:clamp(24px,3vw,36px);
  margin-bottom:clamp(24px,3vw,36px);
  border-bottom:1px dashed var(--hair);
}
.footer-brand{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.footer-brand__mark{
  display:inline-block;padding:5px 12px;
  border-inline-start:3px solid var(--cyan);
  background:rgba(53,224,200,.08);
  color:var(--cyan);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;
}
.footer-brand__name{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.01em}
.footer-brand__line{max-width:32em;color:var(--mono-gray);font-size:14px;line-height:1.7}

.footer-contact__label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;color:var(--clay);
  margin-bottom:12px;
}
.footer-contact__list{display:flex;flex-direction:column;gap:8px}
.footer-contact__list li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.footer-contact__list .k{
  flex:0 0 auto;min-width:3.5em;
  font-family:var(--font-mono);font-size:12px;line-height:1.9;color:var(--mono-gray);letter-spacing:.08em;
}
.footer-contact__list .v{color:var(--bone);word-break:break-word}
.footer-contact__note{margin-top:12px;max-width:34em;color:var(--mono-gray);font-size:12px;line-height:1.7}

.site-footer__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  padding-bottom:clamp(24px,3vw,36px);
}
.footer-col__title{
  margin-bottom:12px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--mint);
  padding-bottom:8px;border-bottom:1px solid var(--hair);
}
.footer-list{display:flex;flex-direction:column;gap:8px}
.footer-list a{
  color:var(--mono-gray);font-size:14px;
  border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.footer-list a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.footer-col__text{color:var(--mono-gray);font-size:13px;line-height:1.75}

.site-footer__base{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  padding-top:20px;
  border-top:1px solid var(--hair-soft);
  font-family:var(--font-mono);font-size:12px;color:var(--mono-gray);letter-spacing:.04em;
}
.footer-icp{color:var(--mint)}
.footer-domain{margin-inline-start:auto;color:var(--mono-gray)}

@media (max-width:899px){
  .site-footer__top{grid-template-columns:minmax(0,1fr)}
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:559px){
  .site-footer__grid{grid-template-columns:minmax(0,1fr)}
  .footer-domain{margin-inline-start:0}
}

/* ---------- 14. motion ---------- */
html.has-js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
html.has-js [data-reveal].is-in{opacity:1;transform:none}

.scroll-progress{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  transform:scaleX(0);transform-origin:0 50%;
}

@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;
  }
  html.has-js [data-reveal]{opacity:1;transform:none;transition:none;transition-delay:0ms}
  .btn:hover{transform:none}
  .scroll-progress{display:none}
}