/* =========================================================
   博鱼体育安装 · 共享样式表 /assets/site.css
   深海长卷 · 命令栏 · 切角面板 · 轨迹线
   ========================================================= */

/* 1. Reset ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
main{display:block}
[id]{scroll-margin-top:calc(var(--cmdbar-h) + 20px)}

/* 2. 设计变量 --------------------------------------------- */
:root{
  --abyss:#04141F;
  --deep:#0A2A3C;
  --teal:#10556B;
  --indigo:#2B2A6B;
  --wine:#7A1F3D;
  --cyan:#35F2D0;
  --cyan-soft:#9FF3E2;
  --coral:#FF6B4A;
  --coral-soft:#FFD5C9;
  --paper:#F2F7F8;
  --ink:#0B1B24;
  --steel:#8FA6B2;
  --sans:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --cmdbar-h:60px;
  --wrap:min(1240px,100% - 2.25rem);
  --line:rgba(53,242,208,.18);
  --hair:rgba(143,166,178,.22);
  --ease:cubic-bezier(.22,.68,.2,1);
}

/* 3. 基础排版 --------------------------------------------- */
body{
  background-color:var(--abyss);
  background-image:
    radial-gradient(120% 55% at 12% -12%,rgba(16,85,107,.55),transparent 62%),
    radial-gradient(90% 48% at 96% 4%,rgba(43,42,107,.38),transparent 66%);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.85;
  padding-top:var(--cmdbar-h);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.02em;line-height:1.16}
h1{font-size:clamp(28px,6vw,64px)}
h2{font-size:clamp(24px,4.2vw,40px)}
h3{font-size:clamp(19px,2.4vw,28px)}
h4{font-size:20px;letter-spacing:-.01em}
p{max-width:68ch}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.muted{color:var(--steel)}
strong{font-weight:800}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* 4. 布局骨架 --------------------------------------------- */
.wrap{width:var(--wrap);margin-inline:auto}
.section{position:relative;padding:clamp(3rem,7vw,6.5rem) 0}
.section--deep{background:var(--deep)}
.section--indigo{background:linear-gradient(155deg,var(--indigo) 0%,var(--abyss) 78%)}
.section--wine{background:linear-gradient(155deg,var(--wine) 0%,var(--abyss) 78%)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--paper .chapter__label{color:var(--teal)}
.section--paper .chapter__lede,.section--paper .muted{color:#4E6673}
.section--paper .card{background:#fff;border-color:rgba(11,27,36,.10)}
.section--paper .acc,.section--paper .acc__item{border-color:rgba(11,27,36,.14)}
.section--paper .acc__body{color:#4E6673}
.section--paper .acc__summary::after{color:var(--teal)}
.section--paper .tabs{border-color:rgba(11,27,36,.14)}
.section--paper .tab{color:#4E6673}
.section--paper .tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:var(--paper)}

.grid{display:grid;gap:clamp(1rem,2.4vw,1.75rem)}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--12{grid-template-columns:1fr}
@media (min-width:900px){
  .grid--12{grid-template-columns:repeat(12,1fr)}
  .span-3{grid-column:span 3}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .start-6{grid-column-start:6}
  .start-7{grid-column-start:7}
}
.prose{max-width:68ch}
.prose p+p{margin-top:1.05em}
.prose h2,.prose h3{margin-top:1.7em;margin-bottom:.55em}
.prose ul{display:grid;gap:.5rem;margin:1em 0}
.prose li{padding-left:1.4rem;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.85em;width:12px;height:1px;background:var(--cyan)}

/* 5. 章节头 / 色带 / 面板 --------------------------------- */
.chapter{display:grid;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.6rem)}
.chapter__index{font-family:var(--mono);font-size:clamp(28px,4vw,40px);font-weight:500;letter-spacing:.04em;line-height:1;color:var(--cyan)}
.chapter__label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--steel)}
.chapter__title{font-size:clamp(24px,4.2vw,40px);font-weight:900;letter-spacing:-.02em}
.chapter__lede{color:var(--steel);max-width:60ch}

.band{height:clamp(10px,1.4vw,18px);transform:skewY(-2.4deg);background:linear-gradient(90deg,var(--teal),var(--cyan));opacity:.92}
.band--indigo{background:linear-gradient(90deg,var(--indigo),var(--teal))}
.band--wine{background:linear-gradient(90deg,var(--wine),var(--coral))}

.card{background:var(--deep);border:1px solid var(--line);padding:clamp(1.25rem,2.5vw,1.75rem)}
.card--cut{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}

.figure{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line);background:linear-gradient(140deg,#0A2A3C,#10556B 58%,#2B2A6B)}
.figure__img{width:100%;height:100%;object-fit:cover;opacity:.95}
.figure__cap{position:absolute;left:0;bottom:0;padding:.45rem .8rem;background:rgba(4,20,31,.74);color:var(--cyan-soft);font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.figure--wide{aspect-ratio:21/9}
.figure--tall{aspect-ratio:3/4}
.figure--square{aspect-ratio:1/1}
.figure--empty{background-image:radial-gradient(rgba(53,242,208,.20) 1px,transparent 1px);background-size:14px 14px;background-position:center}

/* 6. 按钮 / 标签 / 数据 / 面包屑 -------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.3rem;font-size:.95rem;font-weight:700;letter-spacing:.01em;
  background:var(--cyan);color:var(--abyss);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .2s,transform .2s,color .2s;
}
.btn:hover{background:var(--cyan-soft);transform:translateY(-2px)}
.btn--coral{background:var(--coral);color:#2A0D05}
.btn--coral:hover{background:var(--coral-soft)}
.btn--ghost{background:transparent;color:var(--paper);border:1px solid rgba(53,242,208,.42)}
.btn--ghost:hover{background:rgba(53,242,208,.12);color:var(--cyan)}

.chip{display:inline-flex;align-items:center;padding:.2rem .55rem;background:rgba(53,242,208,.06);border:1px solid var(--line);color:var(--cyan-soft);font-family:var(--mono);font-size:12px;letter-spacing:.08em}

.stat{display:grid;gap:.35rem}
.stat__num{font-family:var(--mono);font-size:clamp(28px,4vw,40px);font-weight:500;line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums}
.stat__label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--steel)}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--steel)}
.breadcrumb a{color:var(--cyan-soft);border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.breadcrumb__sep{color:rgba(143,166,178,.55)}

/* 7. 标签页 / 折叠面板 ------------------------------------ */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:.6rem;margin-bottom:1.2rem;border-bottom:1px solid var(--hair)}
.tab{padding:.45rem .8rem;border:1px solid transparent;color:var(--steel);font-family:var(--mono);font-size:12px;letter-spacing:.1em;transition:color .2s,background .2s}
.tab:hover{color:var(--paper)}
.tab[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--abyss)}
.tabpanel{padding-top:.4rem}
.tabpanel[hidden]{display:none}

.acc{border-top:1px solid var(--hair)}
.acc__item{border-bottom:1px solid var(--hair)}
.acc__summary{display:flex;justify-content:space-between;gap:1rem;padding:1.05rem 0;font-weight:600;list-style:none;cursor:pointer}
.acc__summary::-webkit-details-marker{display:none}
.acc__summary::after{content:"+";font-family:var(--mono);color:var(--cyan)}
.acc__item[open] .acc__summary::after{content:"–"}
.acc__body{padding:0 0 1.2rem;max-width:70ch;color:var(--steel)}

/* 8. 章节浮动目录 / 显现 / 返回顶部 ----------------------- */
.rail{position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:.6rem;z-index:40}
@media (min-width:1180px){.rail{display:flex}}
.rail__link{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--steel);transition:color .2s}
.rail__link::before{content:"";width:16px;height:1px;background:currentColor;transition:width .25s}
.rail__link:hover{color:var(--cyan-soft)}
.rail__link[aria-current="true"]{color:var(--cyan)}
.rail__link[aria-current="true"]::before{width:30px}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

.totop{
  position:fixed;right:1rem;bottom:1.15rem;z-index:55;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem .95rem;background:var(--coral);color:#2A0D05;font-size:.85rem;font-weight:700;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.totop[data-visible]{opacity:1;visibility:visible;transform:none}

/* 9. 跳转链接 --------------------------------------------- */
.skip-link{position:fixed;left:1rem;top:-4.5rem;z-index:95;padding:.6rem 1rem;background:var(--cyan);color:var(--abyss);font-weight:700;transition:top .2s}
.skip-link:focus{top:.75rem}

/* 10. 顶部命令栏 ------------------------------------------ */
.cmdbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:rgba(4,20,31,.88);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.cmdbar__inner{
  width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(.7rem,2vw,1.5rem);
  height:var(--cmdbar-h);transition:height .3s var(--ease);
}
@media (min-width:1100px){.cmdbar[data-slim] .cmdbar__inner{height:52px}}
.cmdbar__progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--coral));transition:width .12s linear}

.brand{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;color:var(--paper)}
.brand__mark{width:14px;height:14px;background:var(--cyan);box-shadow:0 0 14px rgba(53,242,208,.55);clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);transition:background .2s}
.brand__name{font-size:1.1rem;font-weight:900;letter-spacing:-.02em}
.brand__sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--steel);padding-top:2px}
.brand:hover .brand__mark{background:var(--coral)}
.brand--foot .brand__name{font-size:1.25rem}

.cmdstatus{display:none;align-items:center;gap:.55rem;min-width:0}
@media (min-width:700px){.cmdstatus{display:flex}}
.cmdstatus__pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 2.4s ease-out infinite}
.cmdstatus__mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--steel)}
.cmdstatus__value{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:600;color:var(--cyan-soft)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(53,242,208,.5)}
  70%{box-shadow:0 0 0 9px rgba(53,242,208,0)}
  100%{box-shadow:0 0 0 0 rgba(53,242,208,0)}
}

.quicknav{display:none}
.quicknav__list{display:flex;align-items:center;gap:.4rem}
.quicklink{display:inline-block;padding:.4rem .7rem;border:1px solid transparent;color:var(--steel);font-family:var(--mono);font-size:12px;letter-spacing:.08em;transition:color .2s,border-color .2s,background .2s}
.quicklink:hover{color:var(--cyan);border-color:var(--line);background:rgba(53,242,208,.06)}
.quicklink--coral{color:var(--coral)}
.quicklink--coral:hover{color:var(--coral-soft);border-color:rgba(255,107,74,.45);background:rgba(255,107,74,.08)}

.navtoggle{
  display:inline-flex;align-items:center;gap:.55rem;margin-inline-start:auto;
  padding:.45rem .7rem;border:1px solid var(--line);background:rgba(10,42,60,.6);
  color:var(--cyan-soft);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  transition:background .2s;
}
.navtoggle:hover{background:rgba(53,242,208,.12)}
.navtoggle__bars{display:grid;gap:3px;width:16px}
.navtoggle__bars span{display:block;height:2px;background:currentColor;transition:transform .25s,opacity .25s}
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (min-width:820px){
  .quicknav{display:block;margin-inline-start:auto}
  .navtoggle{margin-inline-start:.25rem}
}
@media (min-width:1100px){.navtoggle{display:none}}

.mainnav{
  position:fixed;top:var(--cmdbar-h);right:0;z-index:69;
  width:min(340px,86vw);height:calc(100vh - var(--cmdbar-h));height:calc(100dvh - var(--cmdbar-h));
  padding:1rem 0 2.5rem;overflow-y:auto;
  background:linear-gradient(180deg,#0A2A3C,#04141F);
  border-left:1px solid var(--line);
  transform:translateX(102%);visibility:hidden;
  transition:transform .34s var(--ease),visibility .34s;
}
.mainnav[data-open="true"]{transform:translateX(0);visibility:visible}
.mainnav__list{display:flex;flex-direction:column}
.mainnav__link{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.95rem 1.4rem;font-size:.98rem;font-weight:600;color:var(--paper);
  border-bottom:1px dashed rgba(143,166,178,.18);
  transition:color .2s,background .2s;
}
.mainnav__index{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--steel)}
.mainnav__link:hover{color:var(--cyan);background:rgba(53,242,208,.06)}
.mainnav__link[aria-current="page"]{color:var(--cyan);background:rgba(53,242,208,.10)}
.mainnav__link[aria-current="page"] .mainnav__index{color:var(--coral)}
@media (min-width:1100px){
  .mainnav{
    position:static;width:auto;height:auto;padding:0;border:0;overflow:visible;
    background:none;transform:none;visibility:visible;
  }
  .mainnav__list{flex-direction:row;align-items:center;gap:.1rem}
  .mainnav__link{padding:.4rem .55rem;font-size:.9rem;gap:.3rem;border-bottom:1px solid transparent}
  .mainnav__index{font-size:10px}
  .mainnav__link[aria-current="page"]{background:transparent;box-shadow:inset 0 -2px 0 var(--cyan)}
}
html.nav-open{overflow:hidden}

/* 11. 页脚 ------------------------------------------------- */
.sitefoot{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,#04141F 0%,#0A2A3C 55%,#0A2A3C 100%);color:var(--paper)}
.foot__trace{width:var(--wrap);height:2px;margin:0 auto;opacity:.55;background-image:repeating-linear-gradient(90deg,var(--cyan) 0 16px,rgba(53,242,208,0) 16px 34px)}
.foot__grid{display:grid;gap:clamp(2rem,4vw,3rem);padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.2rem)}
@media (min-width:860px){.foot__grid{grid-template-columns:minmax(210px,1fr) 2.4fr}}
.foot__layer--brand{display:grid;gap:.9rem;align-content:start}
.foot__line{font-size:.98rem;font-weight:600;color:var(--cyan-soft)}
.foot__hours{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--steel)}
.foot__layer--index{display:grid;gap:1.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.foot__layer--index{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot__group{min-width:0}
.foot__grouptitle{margin-bottom:.85rem;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.foot__links{display:grid;gap:.15rem}
.foot__link{display:inline-block;padding:.3rem 0;font-size:.93rem;color:var(--steel);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot__link:hover{color:var(--paper);border-bottom-color:var(--cyan)}
.foot__layer--legal{
  display:grid;gap:1.4rem;
  padding:1.6rem 0 3.8rem;border-top:1px solid var(--hair);
}
@media (min-width:860px){.foot__layer--legal{grid-template-columns:2.4fr 1fr;gap:2rem;align-items:start}}
.footcontact{display:grid;gap:.9rem}
@media (min-width:720px){.footcontact{grid-template-columns:repeat(3,minmax(0,1fr))}}
.footcontact__row{display:grid;gap:.25rem;min-width:0}
.footcontact__key{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--steel)}
.footcontact__val{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.95rem;color:var(--paper);overflow-wrap:anywhere}
.foot__notes{display:grid;gap:.35rem;justify-items:start}
.foot__meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--steel)}
.copybtn{
  padding:.22rem .6rem;border:1px solid var(--line);
  color:var(--cyan);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  transition:background .2s,color .2s,border-color .2s;
}
.copybtn:hover{background:rgba(53,242,208,.12)}
.copybtn[data-copied]{color:var(--coral);border-color:rgba(255,107,74,.5)}

/* 12. 动效降级 -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .cmdstatus__pulse{animation:none;box-shadow:0 0 0 3px rgba(53,242,208,.25)}
}