/* ============================================================
   博万体育赛场 · /assets/site.css
   夜间赛场数据台外壳：深靛蓝底 + Bento 玻璃层 + 双色脉冲
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --ink-900:#0A0E27;
  --ink-800:#141A3D;
  --ink-700:#1D2450;
  --glass:rgba(29,36,80,.72);

  --cyan:#22F2D2;
  --orange:#FF7A2F;
  --bone:#F4F1E9;
  --mist:#A6AECD;
  --blue:#3E7BFA;
  --green:#35E08A;
  --violet:#8B6CFF;
  --red:#FF5470;

  --line:rgba(166,174,205,.16);
  --line-strong:rgba(34,242,210,.34);

  --shell:1240px;
  --gutter:clamp(16px,4vw,40px);
  --gap-s:16px;
  --gap-m:24px;
  --gap-l:40px;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-pill:999px;

  --sans:"Noto Sans SC","HarmonyOS Sans",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --shadow-1:0 12px 32px rgba(3,5,18,.45);
  --shadow-2:0 24px 60px rgba(3,5,18,.6);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  background:var(--ink-900);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:132px;
}
body,
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,li,dl,dt,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}
[hidden]{display:none !important;}

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

/* ---------- 3. 页面骨架与底色氛围 ---------- */
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--bone);
  background:transparent;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 4% -4%, rgba(62,123,250,.24), transparent 70%),
    radial-gradient(46% 36% at 98% 2%, rgba(34,242,210,.13), transparent 70%),
    radial-gradient(70% 48% at 50% 108%, rgba(139,108,255,.16), transparent 72%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(166,174,205,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166,174,205,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 14%, #000 0%, transparent 86%);
  mask-image:radial-gradient(78% 62% at 50% 14%, #000 0%, transparent 86%);
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:10px;left:12px;
  z-index:200;
  transform:translateY(-180%);
  padding:10px 18px;
  border-radius:10px;
  background:var(--cyan);
  color:#04121A;
  font-size:14px;
  font-weight:700;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

/* ---------- 5. 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(10,14,39,.74);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease, box-shadow .25s ease;
}
.site-header[data-scrolled="true"]{
  background:rgba(10,14,39,.93);
  box-shadow:var(--shadow-1);
}

.scroll-meter{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:90;
  pointer-events:none;
}
.scroll-meter__bar{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--orange));
  transition:width .12s linear;
}

/* 上层信息轨 */
.header-top{border-bottom:1px solid var(--line);}

.header-top__inner{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  grid-template-areas:"brand status tools";
  align-items:center;
  gap:clamp(12px,2vw,28px);
  padding-block:14px;
  min-height:66px;
}

/* 品牌 */
.brand{
  grid-area:brand;
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.brand__mark{
  position:relative;
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:10px;
  background:linear-gradient(140deg,var(--cyan),var(--blue) 58%,var(--violet));
  box-shadow:0 0 0 1px rgba(34,242,210,.34),0 8px 22px rgba(34,242,210,.22);
  display:grid;
  place-items:center;
}
.brand__mark::after{
  content:"";
  width:11px;height:11px;
  border-radius:3px;
  background:var(--ink-900);
  box-shadow:inset 0 0 0 1px rgba(34,242,210,.5);
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.16;
  min-width:0;
}
.brand__name{
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--bone);
  white-space:nowrap;
}
.brand__sub{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--mist);
  white-space:nowrap;
}

/* 版本状态胶囊 */
.header-status{
  grid-area:status;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(34,242,210,.08),rgba(20,26,61,.5));
  font-size:13px;
  white-space:nowrap;
}
.header-status__key{
  font-family:var(--mono);
  font-weight:600;
  color:var(--cyan);
}
.header-status__sep{color:rgba(166,174,205,.38);}
.header-status__val{color:var(--mist);}

.dot{
  flex:0 0 auto;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(53,224,138,.55);opacity:1;}
  50%{box-shadow:0 0 0 7px rgba(53,224,138,0);opacity:.68;}
}

/* 工具区 */
.headertools{
  grid-area:tools;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.searchbox{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  width:clamp(196px,26vw,340px);
  padding:5px 6px 5px 34px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(20,26,61,.72);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.searchbox:focus-within{
  border-color:var(--cyan);
  background:rgba(20,26,61,.96);
  box-shadow:0 0 0 3px rgba(34,242,210,.15);
}
.searchbox__icon{
  position:absolute;
  left:12px;top:50%;
  transform:translateY(-50%);
  width:12px;height:12px;
  border:1.6px solid var(--mist);
  border-radius:50%;
}
.searchbox__icon::after{
  content:"";
  position:absolute;
  right:-5px;bottom:-3px;
  width:7px;height:1.6px;
  border-radius:2px;
  background:var(--mist);
  transform:rotate(45deg);
}
.searchbox__input{
  flex:1 1 auto;
  min-width:0;
  padding:7px 4px;
  border:0;
  background:transparent;
  outline:none;
  font-size:14px;
  color:var(--bone);
}
.searchbox__input::placeholder{color:rgba(166,174,205,.62);}
.searchbox__input::-webkit-search-cancel-button{display:none;}
.searchbox__clear{
  padding:5px 9px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  font-size:12px;
  color:var(--mist);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.searchbox__clear:hover{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#04121A;
}
.searchbox__hint{
  position:absolute;
  top:calc(100% + 8px);
  left:0;right:0;
  z-index:30;
  padding:10px 14px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(10,14,39,.97);
  box-shadow:var(--shadow-2);
  font-size:12.5px;
  color:var(--mist);
  font-family:var(--mono);
}
.searchbox__hint .num{color:var(--cyan);}

.savedlink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  border:1px solid rgba(139,108,255,.42);
  background:rgba(139,108,255,.12);
  color:#C9BBFF;
  font-size:13.5px;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.savedlink::before{
  content:"★";
  font-size:12px;
  color:var(--violet);
}
.savedlink:hover{
  background:rgba(139,108,255,.26);
  border-color:var(--violet);
  color:var(--bone);
}

/* 汉堡按钮 */
.navtoggle{
  grid-area:toggle;
  display:none;
  width:44px;height:40px;
  place-items:center;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(20,26,61,.7);
}
.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after{
  display:block;
  width:18px;height:2px;
  border-radius:2px;
  background:var(--bone);
  transition:transform .25s ease,opacity .2s ease,background-color .2s ease;
}
.navtoggle__bars{position:relative;}
.navtoggle__bars::before,
.navtoggle__bars::after{
  content:"";
  position:absolute;
  left:0;
}
.navtoggle__bars::before{top:-6px;}
.navtoggle__bars::after{top:6px;}
.navtoggle[aria-expanded="true"] .navtoggle__bars{background:transparent;}
.navtoggle[aria-expanded="true"] .navtoggle__bars::before{top:0;transform:rotate(45deg);}
.navtoggle[aria-expanded="true"] .navtoggle__bars::after{top:0;transform:rotate(-45deg);}

/* 下层栏目带 */
.header-nav{
  background:linear-gradient(180deg,rgba(20,26,61,.55),rgba(10,14,39,.32));
}
.header-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:6px;
}
.primary-nav{min-width:0;}
.primary-nav__list{
  display:flex;
  align-items:center;
  gap:4px;
}
.primary-nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:11px 16px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:500;
  color:var(--mist);
  transition:color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.primary-nav__link:hover{
  color:var(--bone);
  background:rgba(34,242,210,.08);
}
.primary-nav__link[aria-current="page"]{
  color:#04121A;
  font-weight:700;
  background:var(--cyan);
  box-shadow:0 6px 18px rgba(34,242,210,.26);
}
.header-nav__hint{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:rgba(166,174,205,.55);
  white-space:nowrap;
}

/* ---------- 6. 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,8vw,96px);
  border-top:1px solid var(--line);
  background:
    radial-gradient(88% 120% at 10% 0%, rgba(62,123,250,.17), transparent 62%),
    linear-gradient(180deg,rgba(20,26,61,.9),rgba(10,14,39,1));
}
.footer__inner{
  display:grid;
  grid-template-columns:minmax(230px,1.15fr) minmax(0,2fr) minmax(220px,1.05fr);
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(40px,6vw,72px);
}
.footer__brand{min-width:0;}
.brand--footer{margin-bottom:16px;}
.footer__lede{
  font-size:14px;
  color:rgba(244,241,233,.78);
  max-width:30ch;
}
.footer__meta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  font-size:12.5px;
  color:var(--mist);
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,3vw,40px);
}
.footer__col{min-width:0;}
.footer__title{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.18em;
  color:var(--cyan);
  margin-bottom:16px;
}
.footer__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer__list a{
  font-size:14px;
  color:var(--mist);
  transition:color .18s ease;
}
.footer__list a:hover{color:var(--cyan);}
.footer__list--contact{gap:12px;}

.copybtn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  width:100%;
  padding:10px 13px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(20,26,61,.62);
  text-align:left;
  transition:border-color .2s ease, background-color .2s ease;
}
.copybtn:hover{
  border-color:rgba(34,242,210,.5);
  background:rgba(34,242,210,.08);
}
.copybtn[data-copied="true"]{
  border-color:var(--orange);
  background:rgba(255,122,47,.12);
}
.copybtn__label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--mist);
}
.copybtn__value{
  font-family:var(--mono);
  font-size:13px;
  color:var(--bone);
  word-break:break-all;
}
.footer__addr{
  font-size:13px;
  line-height:1.65;
  color:var(--mist);
}
.footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  padding-block:20px 30px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:rgba(166,174,205,.74);
}
.footer__copy{font-family:var(--mono);}
.footer__icp{
  font-family:var(--mono);
  color:var(--mist);
}
.footer__note{margin-left:auto;}
.footer__legal a{color:var(--cyan);}

/* ---------- 7. 通用按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .18s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{
  background:var(--cyan);
  color:#04121A;
  box-shadow:0 10px 26px rgba(34,242,210,.26);
}
.btn--primary:hover{box-shadow:0 16px 34px rgba(34,242,210,.4);}
.btn--accent{
  background:var(--orange);
  color:#1B0A00;
  box-shadow:0 10px 26px rgba(255,122,47,.28);
}
.btn--accent:hover{box-shadow:0 16px 34px rgba(255,122,47,.42);}
.btn--ghost{
  border-color:var(--line-strong);
  background:rgba(20,26,61,.5);
  color:var(--bone);
}
.btn--ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

/* ---------- 8. 面包屑 ---------- */
.crumbs{padding-block:18px 4px;}
.crumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--mist);
}
.crumbs__item{display:inline-flex;align-items:center;gap:8px;}
.crumbs__item::after{
  content:"/";
  color:rgba(166,174,205,.32);
}
.crumbs__item:last-child::after{content:"";}
.crumbs__list a{color:var(--mist);transition:color .18s ease;}
.crumbs__list a:hover{color:var(--cyan);}
.crumbs__list [aria-current="page"]{color:var(--bone);}

/* ---------- 9. 正文与节奏 ---------- */
.section{padding-block:clamp(36px,6vw,72px);}
.section--tight{padding-block:clamp(20px,3vw,36px);}
.section__title{
  font-size:clamp(24px,3.4vw,40px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
}

.prose{max-width:68ch;}
.prose > * + *{margin-top:1.05em;}
.prose h2{
  font-size:clamp(22px,3vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.28;
}
.prose h3{
  font-size:clamp(18px,2.2vw,22px);
  font-weight:700;
  letter-spacing:-.015em;
}
.prose p{
  font-size:16.5px;
  color:rgba(244,241,233,.86);
}
.prose a{
  color:var(--cyan);
  border-bottom:1px solid rgba(34,242,210,.35);
  transition:border-color .18s ease;
}
.prose a:hover{border-bottom-color:var(--cyan);}
.prose ul{display:grid;gap:10px;}
.prose ul li{position:relative;padding-left:20px;font-size:16px;color:rgba(244,241,233,.86);}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:8px;height:2px;
  border-radius:2px;
  background:var(--cyan);
}
.prose strong{color:var(--bone);font-weight:700;}

/* ---------- 10. 网格与 Bento ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.grid--bento{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap-m);
}

/* ---------- 11. 图片容器 ---------- */
.figure{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(155deg,rgba(29,36,80,.92),rgba(10,14,39,.96));
  isolation:isolate;
}
.figure img{
  width:100%;height:100%;
  object-fit:cover;
}
.figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,39,0) 38%,rgba(10,14,39,.74) 100%);
}
.figure--wide{aspect-ratio:21/9;}
.figure--16x9{aspect-ratio:16/9;}
.figure--4x3{aspect-ratio:4/3;}
.figure--3x4{aspect-ratio:3/4;}
.figure--1x1{aspect-ratio:1/1;}
.figure--ph::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(34,242,210,.06) 0 2px,transparent 2px 14px);
}
.figure__glow{
  position:absolute;
  right:-12%;bottom:-32%;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,242,210,.34),transparent 66%);
  filter:blur(6px);
  pointer-events:none;
}

/* ---------- 12. 信息标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--mist);
}
.tag--schedule{color:var(--blue);border-color:rgba(62,123,250,.42);background:rgba(62,123,250,.1);}
.tag--record{color:var(--green);border-color:rgba(53,224,138,.42);background:rgba(53,224,138,.1);}
.tag--saved{color:var(--violet);border-color:rgba(139,108,255,.42);background:rgba(139,108,255,.1);}
.tag--alert{color:var(--red);border-color:rgba(255,84,112,.42);background:rgba(255,84,112,.1);}

/* ---------- 13. 响应式 ---------- */
@media (max-width:1080px){
  .header-status__val{display:none;}
  .searchbox{width:clamp(180px,24vw,280px);}
}

@media (max-width:960px){
  .footer__inner{
    grid-template-columns:minmax(210px,1fr) minmax(0,1.7fr);
  }
  .footer__contact{grid-column:1 / -1;}
}

@media (max-width:900px){
  .header-top__inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "brand status toggle"
      "tools tools tools";
    row-gap:12px;
    padding-block:12px;
  }
  .navtoggle{display:grid;justify-self:end;}
  .header-status{justify-self:end;}
  .headertools{
    justify-self:stretch;
    gap:10px;
  }
  .searchbox{width:100%;}
  .header-nav__inner{
    display:block;
    padding-block:0;
  }
  .header-nav__hint{display:none;}
  .primary-nav{
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .32s cubic-bezier(.22,.7,.3,1);
  }
  .primary-nav[data-open]{max-height:520px;}
  .primary-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:6px 0 18px;
  }
  .primary-nav__link{
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:rgba(20,26,61,.62);
    font-size:15px;
  }
  .primary-nav__link[aria-current="page"]{border-color:transparent;}
  .grid--bento{grid-template-columns:repeat(6,minmax(0,1fr));}
}

@media (max-width:760px){
  .footer__inner{grid-template-columns:1fr;}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer__note{margin-left:0;flex-basis:100%;}
}

@media (max-width:560px){
  .brand__sub{display:none;}
  .footer__cols{grid-template-columns:1fr;}
  .grid--bento{grid-template-columns:1fr;}
  .grid--bento > *{grid-column:1 / -1 !important;}
  .savedlink{padding:8px 12px;font-size:13px;}
}

/* ---------- 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;
  }
  .scroll-meter__bar{transition:none;}
  .btn:hover{transform:none;}
}