/* =========================================================
   浩瀚体育主站 · 共享 Site Kit
   深海控制台 / 珠宝色分区 / 极细边界
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #2FE3D6;outline-offset:3px}

:root{
  --deep:#05121F;
  --deep-2:#0A2036;
  --zone-teal:#0C2E30;
  --zone-indigo:#171340;
  --zone-wine:#3B1024;
  --cyan:#2FE3D6;
  --cyan-soft:#8FF3EC;
  --lava:#FF6A2B;
  --ink:#E6F2F7;
  --mist:#9DB6C4;
  --line:#1D3A50;
  --ok:#3FD68A;

  --cyan-08:rgba(47,227,214,.08);
  --cyan-10:rgba(47,227,214,.10);
  --cyan-16:rgba(47,227,214,.16);
  --cyan-24:rgba(47,227,214,.24);

  --shadow-soft:0 20px 48px -32px rgba(0,0,0,.95);
  --shadow-float:0 26px 60px -34px #000, inset 0 1px 0 rgba(255,255,255,.04);

  --font-display:"Arial Narrow","Helvetica Neue","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --fs-100:.8125rem;
  --fs-200:.9375rem;
  --fs-300:clamp(1rem,.96rem + .18vw,1.0625rem);
  --fs-400:1.3125rem;
  --fs-500:clamp(1.3rem,1.18rem + .6vw,1.625rem);
  --fs-hero:clamp(2.1rem,1.2rem + 4.4vw,3.6rem);
  --fs-num:clamp(2.35rem,1.4rem + 4.4vw,4.15rem);

  --shell:1240px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:120ms;
  --t-mid:200ms;
  --t-slow:240ms;

  --progress:0;
}

/* ---------- 基础画布与中文排版 ---------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--fs-300);
  line-height:1.75;
  color:var(--ink);
  background-color:var(--deep);
  background-image:
    linear-gradient(rgba(47,227,214,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,227,214,.045) 1px,transparent 1px),
    radial-gradient(1100px 620px at 8% -12%,rgba(12,46,48,.85),transparent 68%),
    radial-gradient(900px 540px at 94% 2%,rgba(23,19,64,.72),transparent 70%);
  background-size:88px 88px,88px 88px,100% 100%,100% 100%;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.2;letter-spacing:.05em;color:var(--ink)}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-500)}
h3{font-size:var(--fs-400)}
p{max-width:74ch}
::selection{background:var(--cyan);color:#04211F}

/* ---------- 通用容器 ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(2.25rem,4.6vw,4rem)}
.rule{height:1px;border:0;background:var(--line);margin-block:clamp(1.25rem,2.5vw,2rem)}

.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:var(--fs-100);
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan);flex:none}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--mist)}
.lead{font-size:var(--fs-400);line-height:1.62;color:var(--ink);max-width:60ch}
.prose{max-width:72ch}
.prose p + p{margin-top:1rem}
.prose a{color:var(--cyan);border-bottom:1px solid var(--cyan-24)}
.prose a:hover{color:var(--cyan-soft);border-color:var(--cyan)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.66rem 1.2rem;border:1px solid transparent;border-radius:var(--r-pill);
  font-size:var(--fs-200);font-weight:700;letter-spacing:.02em;line-height:1.4;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lava{background:var(--lava);color:#170700;box-shadow:0 14px 28px -18px rgba(255,106,43,.95)}
.btn--lava:hover{background:#ff8049}
.btn--ghost{background:rgba(10,32,54,.5);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--cyan-24);background:var(--cyan-10);color:var(--cyan-soft)}
.btn--cyan{background:var(--cyan);color:#04211F}
.btn--cyan:hover{background:var(--cyan-soft)}
.btn--block{display:flex;width:100%}

.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.16rem .6rem;border:1px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.08em;color:var(--mist);
}
.tag--cyan{color:var(--cyan);border-color:var(--cyan-24);background:var(--cyan-10)}

/* ---------- 面包屑 ---------- */
.breadcrumbs{padding-block:1.1rem .25rem}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.07em;color:var(--mist)}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:.35rem}
.breadcrumbs__item::after{content:"/";color:var(--line)}
.breadcrumbs__item:last-child::after{content:none}
.breadcrumbs__link{color:var(--mist);transition:color var(--t-fast) var(--ease)}
.breadcrumbs__link:hover{color:var(--cyan)}
.breadcrumbs__item[aria-current="page"]{color:var(--ink)}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.grid--aside{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}

/* ---------- 分区面板 ---------- */
.panel{
  position:relative;padding:clamp(1.05rem,2vw,1.7rem);
  border:1px solid var(--line);border-radius:var(--r-m);
  background:linear-gradient(160deg,rgba(10,32,54,.92),rgba(5,18,31,.74));
  box-shadow:var(--shadow-soft);
}
.panel--teal{background:linear-gradient(160deg,rgba(12,46,48,.94),rgba(5,18,31,.72));border-color:rgba(47,227,214,.18)}
.panel--indigo{background:linear-gradient(160deg,rgba(23,19,64,.94),rgba(5,18,31,.72));border-color:rgba(143,243,236,.16)}
.panel--wine{background:linear-gradient(160deg,rgba(59,16,36,.92),rgba(5,18,31,.72));border-color:rgba(255,106,43,.2)}
.panel__title{font-family:var(--font-display);font-size:var(--fs-400);letter-spacing:.08em;color:var(--ink)}
.panel__body{margin-top:.55rem;font-size:var(--fs-200);color:var(--mist)}

/* ---------- 折叠组 ---------- */
.fold{
  border:1px solid var(--line);border-radius:var(--r-m);
  background:rgba(10,32,54,.55);overflow:hidden;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.fold + .fold{margin-top:.6rem}
.fold:hover{border-color:var(--cyan-16)}
.fold__summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.15rem;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.fold__summary::-webkit-details-marker{display:none}
.fold__summary::after{content:"+";font-family:var(--font-mono);font-size:1.1rem;line-height:1;color:var(--cyan);flex:none}
.fold[open] .fold__summary::after{content:"–"}
.fold__summary:hover{background:var(--cyan-08);color:var(--cyan-soft)}
.fold__body{padding:1rem 1.15rem 1.15rem;border-top:1px solid var(--line);font-size:var(--fs-200);color:var(--mist)}
.fold__body p + p{margin-top:.6rem}

/* ---------- 数字锚点 ---------- */
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat__num{font-family:var(--font-mono);font-size:var(--fs-num);line-height:1;letter-spacing:-.02em;color:var(--cyan);font-variant-numeric:tabular-nums}
.stat__label{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.14em;color:var(--mist)}

/* ---------- 索引列表 ---------- */
.index-list{display:flex;flex-direction:column}
.index-list__item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--line);
}
.index-list__item:first-child{border-top:1px solid var(--line)}
.index-list__num{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.1em;color:var(--cyan)}
.index-list__link{font-weight:600;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.index-list__link:hover{color:var(--cyan)}
.index-list__meta{font-family:var(--font-mono);font-size:var(--fs-100);color:var(--mist);white-space:nowrap}

/* ---------- 图片容器（页面阶段放置占位） ---------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--line);
  background:linear-gradient(150deg,#0A2036,#05121F 58%,#0C2E30);
  isolation:isolate;
}
.media__img{width:100%;height:100%;object-fit:cover}
.media__overlay{position:absolute;inset:0;background:linear-gradient(190deg,rgba(5,18,31,.05) 28%,rgba(5,18,31,.88));pointer-events:none;z-index:1}
.media__caption{position:absolute;left:1rem;right:1rem;bottom:.85rem;z-index:2;font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.1em;color:var(--cyan-soft)}
.media--wide{aspect-ratio:16/9}
.media--tall{aspect-ratio:3/4}
.media--square{aspect-ratio:1/1}
.media--banner{aspect-ratio:21/9}
.media--placeholder::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(135deg,rgba(47,227,214,.09) 0 1px,transparent 1px 13px);
}

/* ---------- 顶部站点头部 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(5,18,31,.96);
  border-bottom:1px solid var(--line);
  box-shadow:0 24px 44px -38px #000;
}
.skip-link{
  position:absolute;left:var(--gutter);top:-120px;z-index:120;
  padding:.55rem 1rem;border-radius:var(--r-s);
  background:var(--cyan);color:#04211F;font-weight:700;font-size:var(--fs-200);
  transition:top var(--t-mid) var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{top:.5rem}

.status-bar{
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(12,46,48,.82),rgba(5,18,31,.5) 46%,rgba(23,19,64,.78));
}
.status-bar__inner{
  display:flex;align-items:center;gap:1rem;
  max-width:var(--shell);margin-inline:auto;padding:.32rem var(--gutter);
  min-height:34px;overflow-x:auto;scrollbar-width:none;
}
.status-bar__inner::-webkit-scrollbar{display:none}
.status-bar__label{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);white-space:nowrap;
}
.status-list{display:flex;align-items:center;gap:.35rem .95rem;flex-wrap:nowrap}
.status-list__item{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;letter-spacing:.03em;color:var(--mist);white-space:nowrap}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,214,138,.14);flex:none}
.status-list__item:first-child .status-dot{background:var(--cyan);box-shadow:0 0 0 3px var(--cyan-10)}

.nav-shell{position:relative}
.nav-shell__inner{
  position:relative;display:flex;align-items:center;gap:.85rem;
  max-width:var(--shell);margin-inline:auto;padding:.68rem var(--gutter);
}

.brand{display:inline-flex;align-items:center;gap:.7rem;min-width:0}
.brand__mark{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid var(--cyan-24);border-radius:12px;
  background:linear-gradient(150deg,rgba(47,227,214,.2),rgba(5,18,31,.92));
  color:var(--cyan-soft);font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  clip-path:polygon(0 14%,14% 0,100% 0,100% 86%,86% 100%,0 100%);
}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;line-height:1.2;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.brand__sub{font-family:var(--font-mono);font-size:.6875rem;line-height:1.4;letter-spacing:.14em;color:var(--mist);white-space:nowrap}

.capsule-nav{margin-left:auto}
.capsule-nav__list{
  display:flex;align-items:center;gap:2px;padding:5px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(10,32,54,.96),rgba(10,32,54,.62));
  box-shadow:var(--shadow-float);
}
.capsule-nav__link{
  display:block;padding:.5rem .9rem;border-radius:var(--r-pill);
  font-size:var(--fs-200);font-weight:600;color:var(--mist);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.capsule-nav__link:hover{color:var(--ink);background:var(--cyan-10);transform:translateY(-1px)}
.capsule-nav__link[aria-current="page"]{
  color:var(--cyan);background:rgba(47,227,214,.12);
  box-shadow:inset 0 0 0 1px var(--cyan-24);
}

.nav-shell__actions{display:flex;align-items:center;gap:.6rem;margin-left:.5rem}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(10,32,54,.9);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.nav-toggle:hover{border-color:var(--cyan-24);background:var(--cyan-10)}
.nav-toggle__bars{display:grid;gap:4px;width:18px}
.nav-toggle__bars span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:5;
  transform:scaleX(var(--progress));transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan),var(--lava));
  pointer-events:none;
}

.rail{display:none}
.rail__label{writing-mode:vertical-rl;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.32em;color:var(--mist)}
.rail__track{position:relative;display:block;width:2px;height:180px;border-radius:2px;background:rgba(157,182,196,.22);overflow:hidden}
.rail__fill{position:absolute;left:0;right:0;top:0;display:block;height:calc(var(--progress) * 100%);background:linear-gradient(180deg,var(--cyan),var(--lava));transition:height var(--t-fast) linear}
.rail__ticks{display:grid;gap:9px}
.rail__ticks i{display:block;width:8px;height:1px;background:var(--line)}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;margin-top:clamp(2rem,5vw,4rem);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,32,54,.78),rgba(5,18,31,.99) 62%),var(--deep);
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(47,227,214,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,227,214,.05) 1px,transparent 1px);
  background-size:80px 80px;
}
.site-footer > .shell{position:relative;z-index:1}

.footer-top{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.15fr);
  align-items:start;
  padding-block:clamp(2rem,4vw,3.2rem) clamp(1.5rem,3vw,2.25rem);
}
.footer-brand{display:flex;flex-direction:column;gap:.85rem}
.footer-brand__meta{max-width:32ch;font-size:var(--fs-200);color:var(--mist)}
.brand--footer .brand__mark{width:36px;height:36px;font-size:.95rem}

.footer-col{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.footer-col__title{
  display:flex;align-items:baseline;gap:.5rem;
  font-family:var(--font-display);font-size:var(--fs-200);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
}
.footer-col__index{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;color:var(--cyan)}
.footer-list{display:flex;flex-direction:column;gap:.45rem}
.footer-list__link{
  width:fit-content;font-size:var(--fs-200);color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.footer-list__link:hover{color:var(--cyan);border-bottom-color:var(--cyan-24)}

.footer-service{display:flex;flex-direction:column;gap:.6rem}
.footer-service__item{display:flex;flex-direction:column;gap:.1rem;font-size:var(--fs-200);color:var(--ink);overflow-wrap:anywhere}
.footer-service__key{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.footer-service__item--note{font-size:var(--fs-100);line-height:1.7;color:var(--mist)}

.footer-legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.15rem;
  padding-block:1.2rem 1.4rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.05em;color:var(--mist);
}
.footer-copy{margin-right:auto;max-width:none}
.footer-icp{padding:.14rem .55rem;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--mist);white-space:nowrap}
.footer-legal__links{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.footer-legal__link{color:var(--mist);transition:color var(--t-fast) var(--ease)}
.footer-legal__link:hover{color:var(--cyan)}

/* ---------- 显现协议 ---------- */
.has-js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.has-js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1400px){
  .rail{
    display:flex;flex-direction:column;align-items:center;gap:.8rem;
    position:fixed;left:18px;top:50%;transform:translateY(-50%);
    z-index:70;pointer-events:none;
  }
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;margin-left:auto}
  .capsule-nav{
    position:absolute;top:calc(100% + .5rem);left:var(--gutter);right:var(--gutter);
    display:none;margin-left:0;z-index:6;
  }
  .capsule-nav[data-open]{display:block;animation:nav-in var(--t-mid) var(--ease)}
  .capsule-nav__list{
    flex-direction:column;align-items:stretch;gap:2px;padding:.5rem;
    border-radius:var(--r-m);background:rgba(7,24,40,.99);
    box-shadow:0 30px 60px -30px #000;
  }
  .capsule-nav__link{padding:.72rem .9rem;border-radius:var(--r-s)}
  .nav-shell__actions{margin-left:0}
  .grid--2,.grid--3,.grid--split,.grid--aside{grid-template-columns:minmax(0,1fr)}
  .brand__name{font-size:1rem}
}

@keyframes nav-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:640px){
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .status-bar__label{display:none}
  .footer-copy{width:100%;margin-right:0}
}

@media (max-width:560px){
  .nav-shell__actions{display:none}
  .brand__sub{display:none}
  .status-list{gap:.3rem .7rem}
  .status-list__item{font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .has-js [data-reveal]{opacity:1 !important;transform:none !important}
  .capsule-nav[data-open]{animation:none}
  .rail__fill{transition:none}
}