/* ==========================================================================
   365升级版 · /assets/site.css
   共享层：重置 / 变量 / 中文排版 / 头部 / 页脚 / 通用组件
   ========================================================================== */

/* 1. 设计变量 ------------------------------------------------------------ */
:root{
  --ink-900:#06121E;
  --ink-800:#0B1B2B;
  --panel:#112B3F;
  --panel-hi:#16364D;
  --cyan:#00E5FF;
  --cyan-soft:#7FE9F5;
  --orange:#FF6B35;
  --mist:#C9D1D9;
  --muted:#8FA3B0;
  --gold:#B8975A;
  --line:#1F3A4D;
  --ok:#3DDC97;
  --warn:#F5C451;
  --text:#E6EEF4;

  --font-display:"Oswald","Barlow Condensed","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --shell:1320px;
  --gutter:clamp(16px,4vw,56px);
  --radius:4px;
  --ease:cubic-bezier(.4,.1,.2,1);
}

/* 2. 重置 ---------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dd,figure,blockquote,pre{
  margin:0;
}

ul[class],
ol[class]{
  list-style:none;
  padding:0;
  margin:0;
}

img,svg,picture,video{
  display:block;
  max-width:100%;
}

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
}

a{
  color:inherit;
  text-decoration:none;
}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

::selection{
  background:rgba(0,229,255,.28);
  color:#FFFFFF;
}

/* 3. 中文排版与页面底色 -------------------------------------------------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--text);
  background-color:var(--ink-800);
  background-image:
    radial-gradient(70% 46% at 6% 0%, rgba(0,229,255,.11), transparent 62%),
    radial-gradient(52% 38% at 98% 4%, rgba(255,107,53,.075), transparent 66%),
    linear-gradient(180deg, #0C1E30 0%, var(--ink-800) 42%, #0A1826 100%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

main{ display:block; }

#main-content{ scroll-margin-top:96px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.24;
  letter-spacing:.02em;
  color:var(--text);
}

p{ overflow-wrap:break-word; }

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.text-muted{ color:var(--muted); }

/* 4. 布局工具 ------------------------------------------------------------ */
.container{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding-block:clamp(44px,6.5vw,92px);
}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 32px;
  margin-bottom:clamp(22px,3vw,40px);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.section-title{
  font-size:clamp(24px,3vw,34px);
  letter-spacing:.03em;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cyan);
}

/* 5. 按钮体系 ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.2;
  text-align:center;
  color:var(--text);
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),box-shadow .22s var(--ease),
             transform .22s var(--ease);
}

.btn--primary{
  background:var(--orange);
  color:#1A0D06;
  box-shadow:0 0 0 rgba(255,107,53,0);
}

.btn--primary:hover{
  background:#FF8255;
  box-shadow:0 8px 24px rgba(255,107,53,.32);
  transform:translateY(-1px);
}

.btn--ghost{
  background:rgba(0,229,255,.06);
  border-color:rgba(0,229,255,.42);
  color:var(--cyan-soft);
}

.btn--ghost:hover{
  background:rgba(0,229,255,.15);
  border-color:var(--cyan);
  color:#FFFFFF;
}

.btn--quiet{
  background:transparent;
  border-color:var(--line);
  color:var(--mist);
}

.btn--quiet:hover{
  background:var(--panel);
  border-color:rgba(0,229,255,.35);
  color:var(--text);
}

.btn--sm{
  padding:8px 14px;
  font-size:13px;
}

/* 6. 头部：框架式导航 ---------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  color:var(--text);
  background:rgba(6,18,30,.94);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.skip-link{
  position:absolute;
  left:50%;
  top:0;
  z-index:300;
  padding:10px 20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:#04121C;
  background:var(--cyan);
  border-radius:0 0 var(--radius) var(--radius);
  transform:translate(-50%,-150%);
  transition:transform .2s var(--ease);
}

.skip-link:focus{
  transform:translate(-50%,0);
}

.header-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 28px;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:14px var(--gutter);
}

.brand-link{
  display:inline-flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:1px;
  padding:2px 0;
  line-height:1.15;
}

.brand-mark{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.32em;
  color:var(--cyan);
  text-transform:uppercase;
}

.brand-line{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--text);
  transition:color .22s var(--ease);
}

.brand-tagline{
  font-size:12px;
  letter-spacing:.09em;
  color:var(--muted);
}

.brand-link:hover .brand-line{ color:var(--cyan-soft); }

.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  margin-left:auto;
  padding:9px 14px;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--mist);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease);
}

.nav-toggle:hover{
  color:var(--cyan-soft);
  border-color:rgba(0,229,255,.4);
  background:rgba(22,54,77,.55);
}

.nav-toggle-bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:16px;
  height:14px;
}

.nav-toggle-bars span{
  display:block;
  height:1.5px;
  background:currentColor;
  border-radius:1px;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}

.site-header[data-open] .nav-toggle-bars span:nth-child(1){
  transform:translateY(5.5px) rotate(45deg);
}

.site-header[data-open] .nav-toggle-bars span:nth-child(2){
  opacity:0;
}

.site-header[data-open] .nav-toggle-bars span:nth-child(3){
  transform:translateY(-5.5px) rotate(-45deg);
}

.nav-toggle-text{
  font-weight:500;
}

.nav-panel{
  display:flex;
  align-items:center;
  gap:20px 26px;
  margin-left:auto;
}

.nav-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 4px;
}

.nav-link{
  position:relative;
  display:inline-block;
  padding:8px 12px;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--mist);
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:color .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease);
}

.nav-link:hover{
  color:var(--cyan-soft);
  background:rgba(22,54,77,.6);
  border-color:var(--line);
}

.nav-link[aria-current="page"]{
  color:var(--cyan);
  border-color:rgba(0,229,255,.42);
  background:rgba(0,229,255,.07);
}

.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:1px;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(0,229,255,.85);
}

.nav-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.version-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
}

.version-tag::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  animation:status-pulse 2.8s ease-out infinite;
}

.version-tag .mono{
  font-size:13px;
  color:var(--gold);
}

.header-rule{
  position:relative;
  height:1px;
  overflow:hidden;
  background:var(--line);
}

.header-rule::after{
  content:"";
  position:absolute;
  top:0;
  left:-32%;
  width:32%;
  height:100%;
  background:linear-gradient(90deg,transparent,var(--cyan),rgba(255,107,53,.85),transparent);
  animation:rule-scan 9s var(--ease) infinite;
}

@keyframes rule-scan{
  0%{ left:-32%; }
  55%,100%{ left:108%; }
}

@keyframes status-pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,151,.55); }
  70%{ box-shadow:0 0 0 7px rgba(61,220,151,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,151,0); }
}

/* 7. 页脚 ---------------------------------------------------------------- */
.site-footer{
  position:relative;
  color:var(--mist);
  background:var(--ink-900);
  border-top:1px solid var(--line);
}

.footer-pulse{
  position:relative;
  height:clamp(56px,8vw,92px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 150% at 50% 130%, rgba(0,229,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(6,18,30,0), rgba(0,229,255,.045));
}

.footer-pulse::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.7;
  background-image:repeating-linear-gradient(90deg, rgba(127,233,245,.42) 0 2px, transparent 2px 11px);
  -webkit-mask-image:linear-gradient(180deg, transparent 4%, #000 42%, #000 62%, transparent 96%);
  mask-image:linear-gradient(180deg, transparent 4%, #000 42%, #000 62%, transparent 96%);
  animation:pulse-drift 16s linear infinite;
}

.footer-pulse::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,107,53,.55) 42%,rgba(0,229,255,.6) 62%,transparent);
}

@keyframes pulse-drift{
  from{ background-position:0 0; }
  to{ background-position:220px 0; }
}

.footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr);
  gap:clamp(30px,5vw,72px);
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(38px,5.5vw,68px) var(--gutter) clamp(28px,4vw,48px);
}

.footer-brand{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text);
}

.footer-summary{
  max-width:36ch;
  margin-top:12px;
  font-size:14px;
  line-height:1.85;
  color:var(--mist);
}

.footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.footer-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
}

.footer-col-title{
  margin-bottom:14px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--muted);
  text-transform:uppercase;
}

.footer-list{
  display:grid;
  gap:4px;
}

.footer-link{
  display:inline-block;
  padding:5px 0;
  font-size:14px;
  color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}

.footer-link:hover{
  color:var(--cyan-soft);
  border-bottom-color:rgba(0,229,255,.5);
}

.footer-base{
  border-top:1px solid var(--line);
}

.footer-base-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 32px;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:20px var(--gutter) 32px;
}

.footer-contact{
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}

.footer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 22px;
  font-size:13px;
  color:var(--muted);
}

.footer-icp{
  font-family:var(--font-mono);
  letter-spacing:.04em;
  color:var(--gold);
}

.footer-copy{
  color:var(--muted);
}

/* 8. 面包屑与长文 -------------------------------------------------------- */
.breadcrumb{
  font-size:13px;
  color:var(--muted);
}

.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
}

.breadcrumb-list li{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.breadcrumb-list li + li::before{
  content:"/";
  color:var(--line);
}

.breadcrumb a{
  color:var(--mist);
  transition:color .2s var(--ease);
}

.breadcrumb a:hover{ color:var(--cyan-soft); }

.breadcrumb [aria-current="page"]{ color:var(--cyan); }

.prose{
  max-width:68ch;
  font-size:16px;
  line-height:1.9;
  color:var(--mist);
}

.prose > * + *{ margin-top:1em; }

.prose h2{
  margin-top:1.7em;
  font-size:clamp(21px,2.3vw,28px);
  letter-spacing:.03em;
}

.prose h3{
  margin-top:1.5em;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:600;
  color:var(--text);
}

.prose ul,
.prose ol{ padding-left:1.35em; }

.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }

.prose li + li{ margin-top:.4em; }

.prose strong{ color:var(--text); font-weight:600; }

.prose a{
  color:var(--cyan-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(0,229,255,.42);
}

.prose a:hover{ color:var(--cyan); }

/* 9. 面板 / 卡片 / 网格 -------------------------------------------------- */
.panel{
  padding:clamp(20px,2.6vw,30px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.card{
  padding:clamp(20px,2.6vw,30px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}

.card:hover{
  background:var(--panel-hi);
  border-color:rgba(0,229,255,.4);
  box-shadow:0 12px 34px rgba(3,10,18,.55);
}

.grid{
  display:grid;
  gap:clamp(16px,2.2vw,28px);
}

.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }

/* 10. 图片容器基础规则 --------------------------------------------------- */
.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(135deg,#0E2436 0%,#16364D 52%,#0B1B2B 100%);
}

.media > img,
.media > svg,
.media > picture,
.media > picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.media--wide{ aspect-ratio:21 / 9; }
.media--square{ aspect-ratio:1 / 1; }

.media--bleed{
  margin-inline-end:calc(var(--gutter) * -1);
  border-radius:var(--radius) 0 0 var(--radius);
  border-right:0;
}

.media__caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:12px 16px;
  font-size:12px;
  letter-spacing:.07em;
  color:var(--mist);
  background:linear-gradient(180deg,transparent,rgba(6,18,30,.9));
}

/* 11. 状态标记 ----------------------------------------------------------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mist);
  background:rgba(22,54,77,.55);
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
}

.tag--ok{
  color:var(--ok);
  border-color:rgba(61,220,151,.42);
  background:rgba(61,220,151,.08);
}

.tag--warn{
  color:var(--warn);
  border-color:rgba(245,196,81,.42);
  background:rgba(245,196,81,.08);
}

.tag--gold{
  color:var(--gold);
  border-color:rgba(184,151,90,.46);
  background:rgba(184,151,90,.08);
}

/* 12. 滚动进度与返回顶部（由 JS 注入） ---------------------------------- */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:200;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  box-shadow:0 0 12px rgba(0,229,255,.6);
  pointer-events:none;
}

.to-top{
  position:fixed;
  right:clamp(12px,3vw,28px);
  bottom:clamp(12px,3vw,28px);
  z-index:190;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  color:var(--cyan);
  background:rgba(6,18,30,.92);
  border:1px solid rgba(0,229,255,.5);
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  box-shadow:0 10px 26px rgba(3,10,18,.6);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),
             visibility .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}

.to-top[data-visible]{
  opacity:1;
  visibility:visible;
  transform:none;
}

.to-top:hover{
  color:#FFFFFF;
  background:rgba(0,229,255,.18);
}

.to-top svg{
  width:18px;
  height:18px;
}

/* 13. 响应式 ------------------------------------------------------------- */
@media (max-width:1100px){
  .nav-panel{ gap:16px; }
  .nav-link{ padding:8px 10px; font-size:14px; }
  .brand-tagline{ display:none; }
}

@media (max-width:940px){
  .header-inner{ gap:12px 16px; }

  .nav-toggle{ display:inline-flex; }

  .nav-panel{
    display:none;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-left:0;
    padding-top:14px;
    border-top:1px solid var(--line);
  }

  .site-header[data-open] .nav-panel{ display:flex; }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }

  .nav-link{
    display:block;
    padding:12px 14px;
    border-color:rgba(31,58,77,.6);
  }

  .nav-link[aria-current="page"]::after{ left:14px; right:14px; bottom:8px; }

  .nav-meta{
    justify-content:space-between;
    padding-top:6px;
  }

  .footer-inner{ grid-template-columns:1fr; }

  .footer-summary{ max-width:none; }
}

@media (max-width:720px){
  .footer-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .footer-base-inner{ flex-direction:column; align-items:flex-start; }

  .section-head{ align-items:flex-start; }
}

@media (max-width:520px){
  .brand-line{ font-size:18px; }
  .brand-mark{ font-size:11px; letter-spacing:.26em; }

  .footer-nav{ grid-template-columns:1fr; }
  .footer-actions .btn{ flex:1 1 auto; }
  .media--bleed{ margin-inline-end:0; border-right:1px solid var(--line); border-radius:var(--radius); }
}

/* 14. 减弱动效 ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .header-rule::after{ display:none; }
  .footer-pulse::before{ animation:none; }
}