/* ==========================================================================
   威客电竞官网 · 共享样式表 /assets/site.css
   技术蓝图网格 · 夜场配色 · 等宽数据 · 紧凑命令栏
   ========================================================================== */

/* ---------- 01 变量 ---------- */
:root{
  --bg-0:#060A14;
  --bg-1:#0D1730;
  --line:#1E2E55;
  --line-soft:rgba(30,46,85,.5);
  --grid-strong:rgba(30,46,85,.55);
  --grid-weak:rgba(30,46,85,.22);
  --neon:#C6FF4A;
  --moss:#2F7A5B;
  --ember:#FF5A2B;
  --amber:#F0C04A;
  --clay:#B87B54;
  --stone:#8C94A6;
  --paper:#EEF1F6;

  --font-sans:"PingFang SC","Noto Sans SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --fs-12:12px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-18:18px;

  --shell:1280px;
  --gutter:clamp(16px,4vw,48px);
  --rail:clamp(52px,6vw,88px);
  --block:clamp(48px,7vw,96px);
  --band:clamp(40px,6vw,96px);
  --radius:4px;
  --t:120ms;
  --header-z:60;
}

/* ---------- 02 重置与基底 ---------- */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  color:var(--paper);
  background-color:var(--bg-0);
  background-image:
    linear-gradient(to right,var(--grid-strong) 0 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-strong) 0 1px,transparent 1px),
    linear-gradient(to right,var(--grid-weak) 0 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-weak) 0 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:50% 0;
  font-family:var(--font-sans);
  font-size:var(--fs-16);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--paper);
  margin:0;
}
h1{font-size:clamp(34px,5.4vw,96px)}
h2{font-size:clamp(24px,3.2vw,48px)}
h3{font-size:clamp(18px,1.8vw,32px)}
h4{font-size:var(--fs-18)}

p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0}

:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
::selection{background:var(--neon);color:var(--bg-0)}

/* ---------- 03 工具与排版 ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.canvas{position:relative;padding-block:var(--block)}
.band{
  position:relative;
  padding-block:var(--band);
  background:var(--bg-1);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.band--dark{background:var(--bg-0)}
.band--tall{padding-block:clamp(56px,8vw,96px)}

.rule{width:100%;height:1px;border:0;background:var(--line)}
.rule--neon{width:56px;height:2px;background:var(--neon)}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.thin{font-weight:200}
.paper{color:var(--paper)}
.stone{color:var(--stone)}
.neon{color:var(--neon)}
.ember{color:var(--ember)}

.idx{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone);
}
.idx--neon{color:var(--neon)}
.idx--moss{color:var(--moss)}
.idx--clay{color:var(--clay)}

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

.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (min-width:960px){
  .split{grid-template-columns:5fr 7fr}
  .split--wide-left{grid-template-columns:7fr 5fr}
  .split--even{grid-template-columns:6fr 6fr}
}

.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.8vw,28px)}
.c-3{grid-column:span 3}
.c-4{grid-column:span 4}
.c-5{grid-column:span 5}
.c-6{grid-column:span 6}
.c-7{grid-column:span 7}
.c-8{grid-column:span 8}
.c-9{grid-column:span 9}
.c-12{grid-column:span 12}

.rail{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(12px,2vw,32px);
  align-items:start;
}
.rail__index{
  position:sticky;
  top:132px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.18em;
  color:var(--moss);
}

@media (max-width:860px){
  .c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-9{grid-column:span 12}
  .rail{grid-template-columns:minmax(0,1fr)}
  .rail__index{position:static}
}

/* ---------- 04 按钮与链接 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--paper);
  font-size:var(--fs-14);
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color var(--t) linear,color var(--t) linear,border-color var(--t) linear,transform var(--t) linear;
}
.btn:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-2px)}
.btn--neon{background:var(--neon);border-color:var(--neon);color:var(--bg-0)}
.btn--neon:hover{background:#D9FF7A;border-color:#D9FF7A;color:var(--bg-0)}
.btn--ember{border-color:var(--ember);color:var(--ember)}
.btn--ember:hover{background:var(--ember);border-color:var(--ember);color:var(--bg-0)}
.btn--ghost{color:var(--stone)}
.btn--ghost:hover{color:var(--paper);border-color:var(--stone)}
.btn--sm{padding:7px 14px;font-size:var(--fs-12)}

.linkline{
  display:inline-block;
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  transition:border-color var(--t) linear,color var(--t) linear;
}
.linkline:hover{border-color:var(--neon);color:var(--neon)}

/* ---------- 05 数据读数 ---------- */
.metric{display:flex;flex-direction:column;gap:6px}
.metric__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4.4vw,72px);
  font-weight:600;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--neon);
}
.metric__value--ember{color:var(--ember)}
.metric__value--paper{color:var(--paper)}
.metric__key{font-size:var(--fs-12);letter-spacing:.08em;color:var(--stone)}
.metric--inline{flex-direction:row;align-items:baseline;gap:12px}
.metric--inline .metric__value{font-size:clamp(24px,2.6vw,40px)}

.breath{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 06 专题研究板 ---------- */
.board{
  position:relative;
  padding:clamp(20px,2.6vw,32px);
  background:var(--bg-1);
  border-left:2px solid var(--moss);
  border-radius:0 var(--radius) var(--radius) 0;
}
.board--clay{background:rgba(184,123,84,.10);border-left-color:var(--clay)}
.board--neon{background:rgba(198,255,74,.06);border-left-color:var(--neon)}
.board--ember{background:rgba(255,90,43,.08);border-left-color:var(--ember)}
.board__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:14px;
}
.board__title{font-size:var(--fs-18);font-weight:700;letter-spacing:-0.01em;color:var(--paper)}
.board__meta{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.12em;color:var(--stone)}
.board__body{color:var(--stone);font-size:var(--fs-16)}
.board__note{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-14);
  color:var(--stone);
}

/* ---------- 07 标签过滤 ---------- */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--stone);
  font-size:var(--fs-14);
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color var(--t) linear,color var(--t) linear,border-color var(--t) linear;
}
.filter:hover{color:var(--paper);border-color:var(--stone)}
.filter[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--bg-0);font-weight:700}
.filter__count{font-family:var(--font-mono);font-size:var(--fs-12);opacity:.75}
.filterable[hidden]{display:none}

/* ---------- 08 面包屑 ---------- */
.crumbs{padding-block:14px;border-bottom:1px solid var(--line-soft)}
.crumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.12em;
  color:var(--stone);
}
.crumbs__list li{display:flex;align-items:center;gap:10px}
.crumbs__list li+li::before{content:"/";color:var(--line)}
.crumbs__link{color:var(--stone);transition:color var(--t) linear}
.crumbs__link:hover{color:var(--neon)}

/* ---------- 09 正文容器 ---------- */
.prose{max-width:64ch;font-size:var(--fs-18);line-height:1.75;color:var(--stone)}
.prose p+p{margin-top:1.1em}
.prose strong{color:var(--paper);font-weight:700}
.prose a{border-bottom:1px solid var(--line);transition:border-color var(--t) linear,color var(--t) linear}
.prose a:hover{border-color:var(--neon);color:var(--neon)}
.prose--paper{color:var(--paper)}

/* ---------- 10 数据表 ---------- */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.table th,.table td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.table th{
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone);
}
.table td{color:var(--paper)}
.table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--neon)}
.table tbody tr:hover{background:rgba(30,46,85,.28)}

/* ---------- 11 图像容器（页面阶段投放素材） ---------- */
.media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--bg-1);
}
.media>img,.media>svg{display:block;width:100%;height:100%;object-fit:cover}
.media--square{aspect-ratio:1/1}
.media--wide{aspect-ratio:16/9}
.media--banner{aspect-ratio:24/9}
.media--tall{aspect-ratio:3/4}
.media--full{aspect-ratio:auto;min-height:100%}
.media__tag{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:4px 8px;
  border:1px solid var(--line);
  background:rgba(6,10,20,.78);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.18em;
  color:var(--neon);
}
.media__cap{
  padding:10px 12px;
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-12);
  letter-spacing:.06em;
  color:var(--stone);
}
.media--empty{background:linear-gradient(180deg,rgba(13,23,48,.92),rgba(6,10,20,.92))}
.media--empty::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background-image:
    linear-gradient(135deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),
    linear-gradient(45deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px));
}
@media (max-width:600px){
  .media--banner{aspect-ratio:16/9}
}

/* ---------- 12 头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--header-z);
  background:rgba(6,10,20,.94);
  border-bottom:1px solid var(--line);
}
.skip-link{
  position:absolute;
  left:16px;
  top:-90px;
  z-index:90;
  padding:10px 18px;
  background:var(--neon);
  color:var(--bg-0);
  font-size:var(--fs-14);
  font-weight:700;
  border-radius:var(--radius);
  transition:top var(--t) linear;
}
.skip-link:focus{top:10px}

.datastrip{position:relative;background:var(--bg-1);border-bottom:1px solid var(--line-soft)}
.datastrip__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 20px;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:6px var(--gutter);
  font-size:var(--fs-12);
}
.datastrip__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone);
}
.datastrip__tag::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--neon);
  animation:breathe 2.4s ease-in-out infinite;
}
.datastrip__list{display:flex;flex-wrap:wrap;gap:6px 20px}
.datastrip__item{display:inline-flex;align-items:baseline;gap:8px}
.datastrip__key{color:var(--stone);letter-spacing:.08em}
.datastrip__val{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  color:var(--paper);
}
.datastrip__val--ok{color:var(--neon)}
.datastrip__val--warn{color:var(--amber)}
.datastrip__val--alert{color:var(--ember)}
.datastrip__progress{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:var(--neon);
  opacity:.85;
  transform:scaleX(0);
  transform-origin:left center;
}

.commandbar{width:100%}
.commandbar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  max-width:var(--shell);
  min-height:66px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.brand{display:inline-flex;align-items:center;gap:12px;padding-block:8px}
.brand__mark{
  position:relative;
  flex:0 0 auto;
  width:28px;
  height:28px;
  border:1px solid var(--neon);
  background-image:linear-gradient(135deg,transparent calc(50% - 1px),var(--neon) 50%,transparent calc(50% + 1px));
  transition:border-color var(--t) linear;
}
.brand:hover .brand__mark{border-color:var(--paper)}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__name{font-size:15px;font-weight:800;letter-spacing:-0.01em;color:var(--paper)}
.brand__line{font-size:var(--fs-12);letter-spacing:.14em;color:var(--stone)}

.nav{flex:0 1 auto}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 11px;
  border-bottom:2px solid transparent;
  border-radius:2px 2px 0 0;
  color:var(--stone);
  transition:color var(--t) linear,border-color var(--t) linear,background-color var(--t) linear;
}
.nav__link:hover{color:var(--paper);border-bottom-color:var(--line);background:rgba(30,46,85,.35)}
.nav__link[aria-current="page"]{color:var(--paper);border-bottom-color:var(--neon)}
.nav__link[aria-current="page"] .nav__idx{color:var(--neon)}
.nav__link:focus-visible{outline:2px solid var(--neon);outline-offset:2px;box-shadow:inset 2px 0 0 var(--neon)}
.nav__idx{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--moss)}
.nav__label{font-size:var(--fs-14);font-weight:500}

.navtoggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--stone);
  font-size:var(--fs-12);
  letter-spacing:.18em;
  cursor:pointer;
  transition:color var(--t) linear,border-color var(--t) linear,background-color var(--t) linear;
}
.navtoggle:hover{color:var(--paper);border-color:var(--stone)}
.navtoggle__bar{position:relative;display:block;width:15px;height:2px;background:currentColor;transition:background-color var(--t) linear}
.navtoggle__bar::before,
.navtoggle__bar::after{
  content:"";
  position:absolute;
  left:0;
  width:15px;
  height:2px;
  background:currentColor;
  transition:transform var(--t) linear,top var(--t) linear;
}
.navtoggle__bar::before{top:-5px}
.navtoggle__bar::after{top:5px}
.navtoggle__label{font-family:var(--font-mono)}
.navtoggle[aria-expanded="true"]{color:var(--neon);border-color:var(--neon);background:var(--bg-1)}
.navtoggle[aria-expanded="true"] .navtoggle__bar{background:transparent}
.navtoggle[aria-expanded="true"] .navtoggle__bar::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bar::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .navtoggle{display:inline-flex}
  .brand__line{display:none}
  .nav{
    display:none;
    flex:1 1 100%;
    order:3;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    background:var(--bg-1);
    border-top:1px solid var(--line);
  }
  .nav[data-open]{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding-block:6px 12px}
  .nav__item{border-bottom:1px solid var(--line-soft)}
  .nav__item:last-child{border-bottom:0}
  .nav__link{
    width:100%;
    justify-content:flex-start;
    padding:14px 6px;
    border-bottom:0;
    border-left:2px solid transparent;
    border-radius:0;
  }
  .nav__link:hover{background:rgba(30,46,85,.4);border-left-color:var(--line)}
  .nav__link[aria-current="page"]{
    color:var(--neon);
    border-left-color:var(--neon);
    background:rgba(198,255,74,.06);
  }
  .nav__label{font-size:var(--fs-16)}
}
@media (max-width:600px){
  .commandbar__inner{min-height:58px}
  .datastrip__inner{gap:4px 14px}
}

/* ---------- 13 页脚 ---------- */
.site-footer{background:var(--bg-1);border-top:1px solid var(--line)}
.footer__inner{padding-block:clamp(40px,6vw,72px)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px)}
@media (min-width:760px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}

.footer__brand{min-width:0}
.brand--footer{padding-block:0;margin-bottom:6px}
.brand--footer .brand__mark{width:32px;height:32px}
.footer__tagline{margin-top:14px;max-width:34ch;font-size:var(--fs-14);color:var(--stone)}
.footer__row{display:flex;gap:12px;margin-top:10px;font-size:var(--fs-14)}
.footer__key{
  flex:0 0 auto;
  min-width:52px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--moss);
}
.footer__value{color:var(--stone);word-break:break-word}
.footer__note{
  margin-top:16px;
  max-width:38ch;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-12);
  letter-spacing:.04em;
  color:var(--stone);
}
.footer__col{min-width:0}
.footer__coltitle{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone);
}
.footer__list{display:flex;flex-direction:column;gap:10px}
.footer__link{
  display:inline-block;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  font-size:var(--fs-14);
  color:var(--stone);
  transition:color var(--t) linear,border-color var(--t) linear;
}
.footer__link:hover{color:var(--neon);border-bottom-color:var(--neon)}

.footer__legal{background:var(--bg-0);border-top:1px solid var(--line)}
.footer__legal-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  padding-block:16px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.08em;
  color:var(--stone);
}
.footer__copy{color:var(--stone)}
.footer__icp{color:var(--moss)}

/* ---------- 14 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:0ms !important;
    animation-duration:0ms !important;
    animation-iteration-count:1 !important;
  }
  .breath,.datastrip__tag::before{animation:none}
}