/* ============================================================
   浩瀚体育 · 中文专区  /assets/site.css
   共享外壳：reset / 变量 / 中文排版 / 头部 / 页脚 / 通用组件
   ============================================================ */

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

/* --- 变量 --- */
:root{
  --ink:#04121F;
  --deep:#0A2A43;
  --mid:#10405E;
  --ice:#6FE9E0;
  --yellow:#FFD23F;
  --orange:#FF5A1F;
  --mist:#C9E6EE;
  --paper:#F5FBFF;
  --chart:#F3EEE2;
  --tide:#7A98A8;

  --line:rgba(111,233,224,.22);
  --line-strong:rgba(111,233,224,.46);

  --font-display:"Source Han Sans SC Heavy","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","DIN Alternate","SFMono-Regular",Menlo,Consolas,ui-monospace,monospace;

  --frame-top:56px;
  --rail:0px;
  --wrap:1200px;
  --radius:3px;
}
@media (min-width:1024px){:root{--rail:214px}}

/* --- 基础排版 --- */
body{
  min-height:100vh;
  padding-top:var(--frame-top);
  padding-left:var(--rail);
  background:
    radial-gradient(120% 70% at 8% -8%, rgba(16,64,94,.88) 0%, rgba(4,18,31,0) 62%),
    radial-gradient(90% 55% at 100% 2%, rgba(111,233,224,.13) 0%, rgba(4,18,31,0) 58%),
    var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.85;
  font-weight:400;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.15;letter-spacing:-.02em;color:var(--paper)}
h1{font-size:clamp(30px,5.2vw,48px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:clamp(19px,2.2vw,24px)}
h4{font-size:18px;letter-spacing:-.01em}
p{max-width:38em}
::selection{background:var(--ice);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:2px}
#main-content{display:block}

.mono{font-family:var(--font-mono);font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lead{font-size:17px;line-height:1.85;color:var(--mist)}
.meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--tide)}

/* --- 跳转链接 --- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;border-radius:2px;
  background:var(--yellow);color:var(--ink);
  font-size:14px;font-weight:700;letter-spacing:.02em;
  transform:translateY(-200%);
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}

/* --- 头部框架 --- */
.site-header{position:relative;z-index:60}

.signature-bar{
  position:fixed;top:0;left:0;right:0;height:var(--frame-top);z-index:62;
  display:flex;align-items:center;gap:16px;
  padding:0 16px;
  background:linear-gradient(90deg, rgba(4,18,31,.99) 0%, rgba(10,42,67,.97) 48%, rgba(4,18,31,.99) 100%);
  border-bottom:1px solid var(--line-strong);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.brand-mark{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-right:auto}
.brand-glyph{
  width:15px;height:15px;flex:0 0 auto;
  border:2px solid var(--ice);
  border-right-color:transparent;
  border-bottom-color:var(--orange);
  transform:rotate(45deg);
}
.brand-name{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:-.01em;color:var(--paper);white-space:nowrap}
.brand-sep{color:var(--ice);font-weight:400}

.sig-version{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--tide);white-space:nowrap;max-width:none;
}
.sig-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ice);
  box-shadow:0 0 0 3px rgba(111,233,224,.16);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
.sig-status{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:12.5px;letter-spacing:.04em;color:var(--mist);
  white-space:nowrap;max-width:none;
}
.sig-status .mono{color:var(--yellow)}
.tick-mark{
  display:inline-block;width:22px;height:9px;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 2px, transparent 2px 5px);
  opacity:.85;
}

.scroll-progress{
  position:fixed;left:0;right:0;top:calc(var(--frame-top) - 2px);height:2px;z-index:63;
  background:linear-gradient(90deg,var(--ice),var(--yellow));
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  transition:transform .1s linear;
  pointer-events:none;
}

/* 移动导航按钮 */
.nav-toggle{
  display:none;align-items:center;gap:8px;flex:0 0 auto;
  height:34px;padding:0 12px;border-radius:2px;
  border:1px solid var(--line-strong);
  color:var(--ice);
  font-size:13px;font-weight:600;letter-spacing:.08em;
  transition:background .16s ease,color .16s ease;
}
.nav-toggle:hover{background:rgba(111,233,224,.12);color:var(--paper)}
.nav-toggle-bars{position:relative;display:block;width:16px;height:10px}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
  transition:transform .2s ease;
}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1023px){.nav-toggle{display:inline-flex}}

/* 纵向轨道导航 */
.rail-nav{
  position:fixed;top:var(--frame-top);left:0;z-index:58;
  width:min(82vw,320px);
  max-height:calc(100vh - var(--frame-top));
  display:flex;flex-direction:column;
  padding:22px 0 18px;
  background:linear-gradient(180deg, rgba(10,42,67,.99), rgba(4,18,31,.99));
  border-right:1px solid var(--line-strong);
  box-shadow:24px 0 60px rgba(4,18,31,.55);
  overflow-y:auto;
  transform:translateX(-102%);
  visibility:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1), visibility .26s;
}
.rail-nav[data-open]{transform:translateX(0);visibility:visible}
@media (min-width:1024px){
  .rail-nav{
    width:var(--rail);height:calc(100vh - var(--frame-top));max-height:none;
    transform:none;visibility:visible;box-shadow:none;transition:none;
  }
}
.rail-head{
  padding:0 20px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  color:var(--tide);max-width:none;
}
.rail-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rail-link{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;
  padding:13px 20px;
  border-left:3px solid transparent;
  border-bottom:1px solid rgba(111,233,224,.10);
  color:var(--mist);font-size:15px;font-weight:500;
  transition:background .16s ease,color .16s ease,border-color .16s ease,padding-left .16s ease;
}
.rail-link:hover{background:rgba(111,233,224,.08);color:var(--paper);padding-left:24px}
.rail-link[aria-current="page"]{
  border-left-color:var(--ice);
  background:linear-gradient(90deg, rgba(111,233,224,.17), rgba(111,233,224,0) 88%);
  color:var(--paper);
}
.rail-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--tide)}
.rail-link[aria-current="page"] .rail-num{color:var(--yellow)}
.rail-label{font-family:var(--font-display);font-weight:700;letter-spacing:.01em}
.rail-foot{
  margin-top:auto;padding:18px 20px 0;
  border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.04em;color:var(--tide);max-width:none;
}
@media (max-width:560px){
  .brand-name{font-size:13px}
  .nav-toggle{padding:0 10px}
  .nav-toggle-text{display:none}
  .signature-bar{gap:10px;padding:0 12px}
}

/* --- 通用按钮 --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 16px;border-radius:2px;
  border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn-cta{
  background:var(--orange);color:#0B0F14;font-weight:700;
  animation:pulse-cta 2.4s ease-in-out infinite;
}
.btn-cta:hover{background:#ff7038;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ice);background:rgba(111,233,224,.05)}
.btn-ghost:hover{background:rgba(111,233,224,.15);color:var(--paper)}
.btn-quiet{border-color:transparent;color:var(--tide);padding:0 8px}
.btn-quiet:hover{color:var(--paper)}

@keyframes pulse-cta{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,.42)}
  50%{box-shadow:0 0 0 9px rgba(255,90,31,0)}
}
@keyframes pulse-dot{
  0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(111,233,224,.16)}
  50%{opacity:.7;box-shadow:0 0 0 6px rgba(111,233,224,.05)}
}

/* --- 页脚 --- */
.site-footer{
  position:relative;
  margin-top:80px;
  border-top:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(10,42,67,.88), rgba(4,18,31,.99) 72%);
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:repeating-linear-gradient(90deg, rgba(111,233,224,.5) 0 1px, transparent 1px 16px);
  opacity:.55;pointer-events:none;
}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;
  padding:56px 20px 32px;
  display:grid;gap:34px;grid-template-columns:1fr;
}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .footer-grid{grid-template-columns:1.35fr 1fr 1.45fr 1fr;gap:32px;padding:64px 40px 36px}
}
.footer-col{min-width:0}
.footer-logo{
  font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.01em;
  color:var(--paper);margin-bottom:12px;max-width:none;
}
.footer-desc{font-size:14px;line-height:1.8;color:var(--mist);margin-bottom:12px}
.footer-hours{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--tide);max-width:none}
.footer-title{
  font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.16em;
  color:var(--ice);margin-bottom:16px;
}
.footer-list{display:flex;flex-direction:column;gap:9px}
.footer-list a{
  font-size:14px;color:var(--mist);
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .16s ease,border-color .16s ease;
  display:inline-block;
}
.footer-list a:hover{color:var(--paper);border-color:var(--ice)}
.footer-legal{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;color:var(--mist)}
.footer-contact{display:flex;flex-direction:column;gap:14px}
.fc-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fc-label{width:100%;font-size:11.5px;letter-spacing:.14em;color:var(--tide)}
.fc-value{font-family:var(--font-mono);font-size:13px;color:var(--paper);word-break:break-all;line-height:1.6}
.copy-btn{
  flex:0 0 auto;padding:3px 9px;border-radius:2px;
  border:1px solid var(--line-strong);
  font-size:11.5px;letter-spacing:.08em;color:var(--ice);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.copy-btn:hover{background:rgba(111,233,224,.15);color:var(--paper)}
.copy-btn.is-copied{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.footer-note{font-size:12.5px;line-height:1.75;color:var(--tide);margin-top:16px}
.footer-bottom{
  max-width:var(--wrap);margin:0 auto;
  padding:18px 20px 30px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  font-size:12.5px;color:var(--tide);
}
@media (min-width:1024px){.footer-bottom{padding:18px 40px 30px}}
.footer-copy{margin-right:auto}

/* 返回顶部刻度 */
.to-top{
  position:fixed;right:14px;bottom:22px;z-index:59;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 9px;border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(10,42,67,.95), rgba(4,18,31,.97));
  border:1px solid var(--line-strong);
  color:var(--ice);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--yellow);color:var(--paper)}
.to-top-arrow{
  width:10px;height:10px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
}
.to-top-rule{
  position:relative;display:block;width:2px;height:56px;
  background:rgba(111,233,224,.2);overflow:hidden;
}
.to-top-fill{
  position:absolute;left:0;bottom:0;width:100%;
  height:calc(var(--p,0) * 56px);
  background:linear-gradient(180deg,var(--yellow),var(--ice));
  transition:height .12s linear;
}
@media (max-width:640px){
  .to-top{right:10px;bottom:14px;padding:9px 7px}
  .to-top-rule{height:42px}
  .to-top-fill{height:calc(var(--p,0) * 42px)}
}

/* --- 布局容器 --- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media (min-width:1024px){.wrap{padding:0 40px}}
.section{padding:56px 0}
@media (min-width:1024px){.section{padding:72px 0}}
.rule{height:1px;background:repeating-linear-gradient(90deg, rgba(111,233,224,.45) 0 1px, transparent 1px 14px)}

.section-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  margin-bottom:26px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sec-num{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--yellow)}
.sec-title{
  font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;
  color:var(--paper);margin-right:auto;
}
.sec-note{font-size:12.5px;letter-spacing:.06em;color:var(--tide);max-width:none}

.layout-split{display:grid;grid-template-columns:1fr;gap:32px}
.split-main{min-width:0}
.split-side{min-width:0}
@media (min-width:1024px){
  .layout-split{grid-template-columns:8fr 4fr;gap:40px}
  .split-side{position:sticky;top:calc(var(--frame-top) + 28px);align-self:start}
}

.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}

/* --- 卡片与数据 --- */
.card{
  position:relative;padding:20px;border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(16,64,94,.55), rgba(4,18,31,.74));
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--paper);margin-bottom:8px}
.card-meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--tide);margin-bottom:10px}
.card-text{font-size:14.5px;line-height:1.8;color:var(--mist)}

.stat{
  padding:18px;border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(16,64,94,.5), rgba(4,18,31,.82));
}
.stat-value{
  font-family:var(--font-mono);font-weight:700;line-height:1.1;letter-spacing:.02em;
  font-size:clamp(26px,4vw,38px);color:var(--yellow);
  font-variant-numeric:tabular-nums;
}
.stat-label{margin-top:8px;font-size:12.5px;letter-spacing:.1em;color:var(--tide)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:2px;
  border:1px solid var(--line-strong);
  font-size:11.5px;letter-spacing:.1em;color:var(--ice);
}
.tag-hot{border-color:var(--orange);color:var(--orange)}
.tag-yellow{border-color:var(--yellow);color:var(--yellow)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}

.paper-note{
  position:relative;padding:18px 20px;border-radius:2px;
  background:var(--chart);color:#12202B;
  border:1px solid rgba(4,18,31,.18);
  box-shadow:0 12px 28px rgba(4,18,31,.45);
  font-size:14px;line-height:1.85;
  transform:rotate(-.6deg);
}
.paper-label{
  display:block;margin-bottom:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#5A6B76;
}

.cut{
  position:relative;padding:20px 24px;
  background:linear-gradient(100deg, rgba(111,233,224,.15), rgba(16,64,94,.62));
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  transform:skewY(-1.4deg);
}
.cut > *{transform:skewY(1.4deg)}

.track{position:relative;overflow-x:auto;padding:14px 0 4px}
.track-line{position:relative;height:2px;min-width:520px;
  background:linear-gradient(90deg, rgba(111,233,224,.15), rgba(111,233,224,.8) 55%, rgba(255,210,63,.75));
}
.track-node{
  position:absolute;top:50%;width:9px;height:9px;margin-left:-4.5px;
  transform:translateY(-50%);border-radius:50%;background:var(--ice);
}
.track-node.is-live{
  background:var(--orange);
  animation:pulse-cta 2.4s ease-in-out infinite;
}

/* --- 目录 / 问答 / 面包屑 --- */
.toc-list{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.toc-link{
  display:block;padding:9px 0 9px 14px;margin-left:-1px;
  border-left:2px solid transparent;
  font-size:14px;color:var(--tide);
  transition:color .16s ease,border-color .16s ease,padding-left .16s ease,background .16s ease;
}
.toc-link:hover{color:var(--paper);border-color:var(--line-strong);padding-left:18px}
.toc-link[aria-current="true"]{
  color:var(--paper);border-left-color:var(--ice);
  background:linear-gradient(90deg, rgba(111,233,224,.13), transparent);
}

.qa-item{
  margin-bottom:12px;border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(16,64,94,.42), rgba(4,18,31,.72));
}
.qa-item summary{
  position:relative;list-style:none;
  padding:16px 48px 16px 20px;
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--paper);
}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:18px;color:var(--ice);
}
.qa-item[open] summary::after{content:"–"}
.qa-body{padding:0 20px 18px;font-size:14.5px;line-height:1.85;color:var(--mist)}

.breadcrumbs{padding:18px 0 0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.06em;color:var(--tide)}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li + li::before{content:"/";font-family:var(--font-mono);color:var(--line-strong)}
.breadcrumbs a{color:var(--mist);transition:color .16s ease}
.breadcrumbs a:hover{color:var(--ice)}
.breadcrumbs [aria-current="page"]{color:var(--paper)}

/* --- 图片容器基础规则（页面阶段放 img） --- */
.media-frame{
  position:relative;display:block;width:100%;overflow:hidden;border-radius:2px;
  border:1px solid var(--line);
  background:linear-gradient(150deg, var(--deep), var(--ink) 58%, rgba(16,64,94,.9));
}
.media-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(111,233,224,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,233,224,.07) 1px, transparent 1px);
  background-size:28px 28px;
}
.media-frame::after{
  content:"";position:absolute;left:10px;bottom:10px;width:34px;height:8px;z-index:2;
  background:repeating-linear-gradient(90deg, rgba(255,210,63,.85) 0 2px, transparent 2px 6px);
}
.media-frame > img,
.media-frame > svg,
.media-frame > video{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;
}
.media-16x9{aspect-ratio:16/9}
.media-21x9{aspect-ratio:21/9}
.media-4x5{aspect-ratio:4/5}
.media-1x1{aspect-ratio:1/1}
.media-caption{margin-top:10px;font-size:12.5px;letter-spacing:.06em;color:var(--tide)}

/* --- 入场显现 --- */
[data-reveal]{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* --- 降低动态偏好 --- */
@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]{opacity:1;transform:none}
  .to-top{transform:none}
}