/* =========================================================
   /assets/site.css — 必博服务 · 官方中文站 共享样式
   深空底色 / 霓虹青路径 / 暖橙单点行动 / 切角面板
   ========================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --ink:#070C1A;
  --panel:#0E1830;
  --layer:#17284C;
  --cyan:#1FE0C8;
  --cyan-hi:#7CF3E4;
  --orange:#FF8A3D;
  --orange-soft:#FFC08A;
  --blue:#33D6FF;
  --text:#EAF1FA;
  --muted:#9DB0CB;
  --dim:#6F86A8;

  --shell-w:1280px;
  --gutter:clamp(18px,4vw,40px);
  --cut:22px;
  --notch:var(--ink);

  --ease:cubic-bezier(.22,.68,.28,1);
  --font-sans:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-geo:"Helvetica Neue",Helvetica,Arial,var(--font-sans);
  --num:tabular-nums;
}

/* ---------- 2. Reset 与中文排版 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(1200px 620px at 88% -12%, rgba(31,224,200,.10), transparent 62%),
    radial-gradient(900px 520px at 4% 6%, rgba(51,214,255,.07), transparent 58%),
    var(--ink);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16.5px;
  font-weight:450;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;letter-spacing:.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--cyan-hi)}
strong{font-weight:700;color:var(--text)}
::selection{background:rgba(31,224,200,.28);color:#fff}
:focus-visible{outline:2px solid var(--cyan-hi);outline-offset:3px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:14px;top:-80px;z-index:300;
  padding:10px 18px;background:var(--cyan);color:#04121C;
  font:700 13px/1 var(--font-geo);letter-spacing:.12em;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;color:#04121C}
.node-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  margin-right:9px;vertical-align:middle;
}

/* ---------- 3. 容器与栅格 ---------- */
.shell{width:100%;max-width:var(--shell-w);margin-inline:auto;padding-inline:var(--gutter)}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.7;color:#CFDCEE;max-width:46ch}
.prose{max-width:68ch;font-size:16.5px;line-height:1.85;color:#D5E0F0}
.prose p+p{margin-top:1em}
.muted{color:var(--muted)}
.index-label{
  display:inline-block;font:700 11px/1.4 var(--font-geo);
  letter-spacing:.2em;color:var(--muted);text-transform:uppercase;
}
.grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px);
}
.grid>*{min-width:0}
.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}
.span-12{grid-column:span 12}

/* ---------- 4. 页头：居中刊头 ---------- */
.site-header{position:relative;z-index:60;background:rgba(7,12,26,.9);border-bottom:1px solid var(--layer)}
.site-header__rail{border-bottom:1px solid rgba(23,40,76,.75)}
.header-rail{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-block:9px;
}
.header-rail__index{
  margin:0;font:700 11px/1 var(--font-geo);letter-spacing:.18em;
  color:var(--muted);white-space:nowrap;
}

/* 站内检索 */
.quickfind{display:flex;align-items:center;gap:10px;width:min(340px,52vw)}
.quickfind__label{
  font:700 11px/1 var(--font-geo);letter-spacing:.18em;
  color:var(--muted);white-space:nowrap;
}
.quickfind__field{position:relative;flex:1 1 auto;min-width:0}
.quickfind__input{
  width:100%;height:34px;padding:0 12px;
  background:var(--panel);color:var(--text);
  border:1px solid var(--layer);border-left:2px solid var(--cyan);
  font:600 12px/1 var(--font-geo);letter-spacing:.06em;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.quickfind__input::placeholder{color:#5E7396;font-weight:500;letter-spacing:.04em}
.quickfind__input:focus{outline:none;background:#101E3A;border-color:var(--cyan)}
.quickfind__list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:140;
  padding:6px;background:var(--panel);border:1px solid var(--cyan);
  box-shadow:0 26px 48px rgba(0,0,0,.55);
}
.quickfind__list[hidden]{display:none}
.quickfind__item{margin:0}
.quickfind__link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px;color:var(--text);font-size:13px;font-weight:600;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.quickfind__link:hover,.quickfind__link:focus-visible{background:var(--layer);color:var(--cyan-hi)}
.quickfind__meta{font:600 11px/1 var(--font-geo);letter-spacing:.12em;color:var(--muted)}
.quickfind__empty{padding:10px;font-size:12.5px;color:var(--muted)}

/* 报头 */
.masthead{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:22px var(--gutter) 0;text-align:center;
}
.masthead__brand{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--text)}
.masthead__brand:hover{color:var(--text)}
.masthead__name{
  font-family:var(--font-geo);font-size:clamp(22px,3vw,34px);
  font-weight:600;letter-spacing:.16em;line-height:1;
}
.masthead__sub{
  font:600 10.5px/1 var(--font-geo);letter-spacing:.32em;color:var(--muted);
}
.masthead__tagline{
  margin:0;font-size:12.5px;letter-spacing:.22em;color:var(--dim);
}
.masthead::after{
  content:"";display:block;width:min(620px,84%);height:1px;margin-top:12px;
  background:linear-gradient(90deg,transparent,var(--cyan) 22%,var(--cyan) 78%,transparent);
  opacity:.75;
}

/* 栏目导航 */
.site-header__navwrap{padding-bottom:2px}
.nav-toggle{display:none}
.site-nav__list{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(8px,2.4vw,32px);padding:6px 0 12px;
}
.site-nav__item{margin:0}
.site-nav__link{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:10px 2px;color:var(--muted);
  font:600 13.5px/1.2 var(--font-sans);letter-spacing:.1em;
  transition:color .22s var(--ease);
}
.site-nav__link::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--layer);transition:background .22s var(--ease),box-shadow .22s var(--ease);
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.site-nav__link:hover{color:var(--text)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--cyan-hi)}
.site-nav__link[aria-current="page"]::before{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--cyan-hi)}

/* ---------- 5. 页脚 ---------- */
.site-footer{
  position:relative;margin-top:clamp(48px,8vw,96px);
  border-top:1px solid var(--layer);
  background:linear-gradient(180deg,rgba(14,24,48,.42),rgba(7,12,26,0) 46%),var(--ink);
}
.footer-track{display:flex;align-items:center;padding-top:clamp(24px,4vw,44px)}
.footer-track__seg{
  flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(31,224,200,.18),rgba(31,224,200,.6));
}
.footer-track__node{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--cyan);background:var(--ink);
}
.footer-track__node--on{background:var(--cyan);box-shadow:0 0 14px rgba(31,224,200,.85)}

.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(22px,3vw,44px);padding-block:clamp(30px,5vw,54px);
}
.footer-brand__name{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:.1em}
.footer-brand__domain{
  margin:0 0 12px;font:600 12px/1.4 var(--font-geo);
  letter-spacing:.16em;color:var(--blue);
}
.footer-brand__note{margin:0;max-width:34ch;font-size:12.5px;line-height:1.9;color:var(--muted)}
.footer-col__title{
  margin:0 0 14px;font:700 11px/1 var(--font-geo);
  letter-spacing:.2em;color:var(--cyan);
}
.footer-col__list{display:grid;gap:9px}
.footer-col__item{margin:0}
.footer-col__link{
  position:relative;display:inline-block;padding-left:15px;
  color:var(--muted);font-size:13.5px;
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.footer-col__link::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;
  background:var(--layer);transition:background .2s var(--ease),width .2s var(--ease);
}
.footer-col__link:hover{color:var(--cyan-hi);padding-left:18px}
.footer-col__link:hover::before{background:var(--cyan);width:11px}

.footer-contact{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  padding-block:16px;border-top:1px solid var(--layer);
  font-size:12.5px;color:var(--muted);
}
.footer-contact__item{margin:0}
.footer-contact__value{color:var(--text);font-weight:600;font-variant-numeric:var(--num);letter-spacing:.02em}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
  padding-block:14px 26px;border-top:1px solid var(--layer);
  font:600 11.5px/1.6 var(--font-geo);letter-spacing:.08em;color:var(--dim);
}
.footer-base p{margin:0}
.footer-base__region{color:var(--muted)}

/* ---------- 6. 按钮 ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;isolation:isolate;overflow:hidden;
  background:var(--panel);border:1px solid var(--layer);color:var(--text);
  font:600 13px/1 var(--font-geo);letter-spacing:.12em;
  cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:-20% -10%;z-index:-1;
  background:var(--orange);
  transform:translateX(-105%) skewX(-14deg);
  transition:transform .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;
  background:currentColor;opacity:.22;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.btn:hover,.btn:focus-visible{color:#081222;border-color:var(--orange)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0) skewX(-14deg)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#081222}
.btn--primary::before{background:var(--orange-soft)}
.btn--ghost{background:transparent;border-color:var(--cyan);color:var(--cyan-hi)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--orange)}
.btn--quiet{
  padding:10px 0;background:none;border:0;border-bottom:1px solid var(--layer);
  color:var(--cyan);letter-spacing:.14em;
}
.btn--quiet::before{display:none}
.btn--quiet::after{display:none}
.btn--quiet:hover,.btn--quiet:focus-visible{color:var(--cyan-hi);border-bottom-color:var(--cyan)}

/* ---------- 7. 面板 / 卡片 ---------- */
.panel{
  position:relative;
  background:var(--panel);border:1px solid var(--layer);
  padding:clamp(18px,3vw,30px);
}
.panel--cut::after{
  content:"";position:absolute;right:0;bottom:0;width:var(--cut);height:var(--cut);
  background:var(--notch);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.panel--link{
  display:block;color:var(--text);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.panel--link:hover,.panel--link:focus-visible{
  transform:translateY(-4px);border-color:var(--cyan);
  box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 0 1px rgba(31,224,200,.35);
}

/* ---------- 8. 标签与索引 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;font:700 11px/1.5 var(--font-geo);letter-spacing:.16em;
  color:var(--cyan);background:rgba(31,224,200,.08);border:1px solid rgba(31,224,200,.4);
}
.tag--orange{color:var(--orange-soft);background:rgba(255,138,61,.1);border-color:rgba(255,138,61,.45)}
.tag--blue{color:var(--blue);background:rgba(51,214,255,.09);border-color:rgba(51,214,255,.4)}
.tag--muted{color:var(--muted);background:rgba(157,176,203,.07);border-color:var(--layer)}

/* ---------- 9. 图片容器基础规则 ---------- */
.media-frame{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(23,40,76,.92),rgba(14,24,48,.55)),
    var(--panel);
  border:1px solid var(--layer);aspect-ratio:16/9;
}
.media-frame[data-ratio="4:3"]{aspect-ratio:4/3}
.media-frame[data-ratio="1:1"]{aspect-ratio:1/1}
.media-frame[data-ratio="3:4"]{aspect-ratio:3/4}
.media-frame[data-ratio="21:9"]{aspect-ratio:21/9}
.media-frame img,.media-frame svg{width:100%;height:100%;object-fit:cover}
.media-frame__cap{
  position:absolute;left:0;bottom:0;
  padding:8px 14px;background:rgba(7,12,26,.84);
  border-top:1px solid var(--layer);border-right:1px solid var(--layer);
  font:600 11px/1.5 var(--font-geo);letter-spacing:.14em;color:var(--muted);
}

/* ---------- 10. 面包屑 / 路径条 / 编号章节 / 窄栏注释 ---------- */
.crumbs{font:600 11.5px/1.6 var(--font-geo);letter-spacing:.16em;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{
  content:"";width:16px;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--cyan-hi)}
.crumbs [aria-current="page"]{color:var(--cyan)}

.pathbar{display:flex;flex-wrap:wrap;align-items:center}
.pathbar__step{
  display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1.6 var(--font-geo);letter-spacing:.16em;color:var(--muted);
}
.pathbar__step::after{
  content:"";width:clamp(18px,4vw,54px);height:1px;
  margin-inline:10px;background:var(--layer);
}
.pathbar__step:last-child::after{display:none}
.pathbar__node{
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--cyan);background:transparent;flex:0 0 auto;
}
.pathbar__step--on{color:var(--text)}
.pathbar__step--on .pathbar__node{background:var(--cyan);box-shadow:0 0 12px rgba(31,224,200,.75)}

.section{position:relative}
.section__num{
  display:block;margin-bottom:10px;
  font-family:var(--font-geo);font-weight:300;
  font-size:clamp(38px,6vw,84px);line-height:.9;letter-spacing:-.02em;
  font-variant-numeric:var(--num);
  color:transparent;-webkit-text-stroke:1px var(--cyan);
}
@supports not (-webkit-text-stroke:1px red){
  .section__num{color:var(--cyan)}
}
.section__title{font-size:clamp(24px,3.2vw,40px);font-weight:600;letter-spacing:.01em}
.note-rail{
  padding-left:16px;border-left:1px solid var(--layer);
  font-size:12.5px;line-height:1.95;color:var(--muted);
}
.note-rail strong{color:var(--cyan)}

/* ---------- 11. 脚本注入的界面元素 ---------- */
.scroll-path{
  position:fixed;top:0;left:0;z-index:260;height:2px;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-hi) 62%,var(--orange));
  box-shadow:0 0 14px rgba(31,224,200,.6);
  pointer-events:none;transition:width .1s linear;
}
.to-top{
  position:fixed;right:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);z-index:250;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border-radius:50%;
  background:rgba(14,24,48,.94);border:1px solid var(--cyan);color:var(--cyan-hi);
  font:700 16px/1 var(--font-geo);cursor:pointer;
  opacity:0;transform:translateY(10px);pointer-events:none;
  box-shadow:0 0 0 6px rgba(31,224,200,.06);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--cyan);color:#04121C}

/* 进入视口显现（无 JS 时默认可见） */
.js [data-section]{
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js [data-section].is-visible{opacity:1;transform:none}

/* ---------- 12. 响应式 ---------- */
@media (max-width:1080px){
  .span-3,.span-4,.span-5{grid-column:span 6}
  .span-7,.span-8{grid-column:span 12}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:30px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  body{font-size:16px}
  .header-rail{flex-direction:column;align-items:stretch;gap:8px;padding-block:10px}
  .header-rail__index{font-size:10.5px;letter-spacing:.14em}
  .quickfind{width:100%}
  .masthead{padding-top:18px}
  .site-header__navwrap .shell{display:flex;flex-direction:column;align-items:center;padding-inline:var(--gutter)}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:10px;
    margin:4px 0 12px;padding:11px 16px;
    background:var(--panel);border:1px solid var(--layer);color:var(--text);
    font:600 12px/1 var(--font-geo);letter-spacing:.18em;cursor:pointer;
    transition:border-color .22s var(--ease),color .22s var(--ease);
  }
  .nav-toggle[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan-hi)}
  .nav-toggle__bars{
    position:relative;display:block;width:18px;height:10px;
    border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  }
  .nav-toggle__bars::after{
    content:"";position:absolute;left:0;top:calc(50% - .5px);
    width:11px;height:1px;background:currentColor;
    transition:width .25s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{width:18px}
  .site-nav{
    width:100%;max-height:0;overflow:hidden;
    transition:max-height .38s var(--ease);
  }
  .site-nav[data-open="true"]{max-height:520px}
  .site-nav__list{
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    gap:0;padding:0 0 14px;
  }
  .site-nav__link{
    width:100%;justify-content:flex-start;
    padding:15px 4px;font-size:15px;letter-spacing:.08em;
    border-bottom:1px solid rgba(23,40,76,.9);
  }
  .site-nav__link::after{display:none}
  .site-nav__link[aria-current="page"]::before{box-shadow:0 0 10px var(--cyan)}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:1 / -1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .footer-base{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .masthead__name{letter-spacing:.12em}
  .masthead__sub{letter-spacing:.2em}
  .quickfind__label{display:none}
  .footer-contact{flex-direction:column;gap:6px}
}

/* ---------- 13. 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js [data-section]{opacity:1;transform:none}
  .panel--link:hover{transform:none}
  .btn::before{display:none}
}