:root{
  --primary-deep-blue:#1E1B4B;
  --primary-violet:#4F46E5;
  --primary-light-violet:#818CF8;
  --accent-neon-green:#22C55E;
  --bg-soft-dark:#0F172A;
  --text-light:#E2E8F0;
  --text-muted:#94A3B8;
  --surface-glass:rgba(255,255,255,0.08);
  --gradient-primary:linear-gradient(135deg,#1E1B4B,#4F46E5);
  --font-headline:"Montserrat","Noto Sans SC",sans-serif;
  --font-body:"Inter","Noto Sans SC",sans-serif;
  --header-height:72px;
  --sidebar-width:280px;
  --container-width:1280px;
  --border-faint:rgba(255,255,255,0.14);
  --shadow-card:0 12px 32px rgba(2,6,23,0.35);
  --shadow-glow:0 0 0 1px rgba(34,197,94,0.4),0 0 20px rgba(34,197,94,0.12);
  --transition-fast:150ms ease;
  --transition-base:240ms ease;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
}

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}

body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--text-light);
  background:
    radial-gradient(circle at 85% 10%,rgba(79,70,229,0.22),transparent 40%),
    radial-gradient(circle at 15% 85%,rgba(34,197,94,0.08),transparent 45%),
    var(--bg-soft-dark);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

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

button{
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}

ul,ol{
  list-style:none;
}

:focus-visible{
  outline:3px solid var(--accent-neon-green);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  width:100%;
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px;
}

.main-content{
  min-height:60vh;
  position:relative;
}

.skip-link{
  position:fixed;
  top:-100px;
  left:16px;
  z-index:2000;
  padding:12px 20px;
  background:var(--accent-neon-green);
  color:#04120b;
  font-weight:800;
  font-size:14px;
  border-radius:0 0 8px 8px;
  box-shadow:var(--shadow-card);
  transition:top var(--transition-fast);
}

.skip-link:focus-visible{
  top:0;
}

/* ===== 滚动进度条 ===== */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:4px;
  width:100%;
  z-index:1500;
  pointer-events:none;
  background:linear-gradient(90deg,var(--accent-neon-green),var(--primary-light-violet));
  transform-origin:0 50%;
  transform:scaleX(0);
}

/* ===== 头部 ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(15,23,42,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-faint);
}

.site-header__inner{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:var(--header-height);
  position:relative;
}

.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.brand-logo__mark{
  width:18px;
  height:42px;
  background:linear-gradient(180deg,var(--accent-neon-green),var(--primary-light-violet));
  clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);
  box-shadow:0 0 12px rgba(34,197,94,0.5);
}

.brand-logo__text{
  font-family:var(--font-headline);
  font-weight:800;
  font-size:22px;
  letter-spacing:1px;
  color:var(--text-light);
  font-style:italic;
  transform:skewX(-2deg);
}

.brand-tagline{
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:2px;
  border-left:1px solid var(--border-faint);
  padding-left:14px;
  display:none;
  flex-shrink:0;
}

.site-nav{
  display:none;
  gap:6px;
  margin-left:auto;
  align-items:center;
}

.site-nav__link{
  position:relative;
  padding:8px 12px;
  font-size:14px;
  font-weight:600;
  color:var(--text-muted);
  transition:color var(--transition-fast),background var(--transition-fast);
  border-radius:6px;
}

.site-nav__link::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:2px;
  height:2px;
  background:linear-gradient(90deg,var(--accent-neon-green),transparent);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--transition-base);
}

.site-nav__link:hover{
  color:var(--text-light);
  background:var(--surface-glass);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after{
  transform:scaleX(1);
}

.site-nav__link[aria-current="page"]{
  color:var(--text-light);
}

.header-cta{
  margin-left:auto;
  flex-shrink:0;
}

.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:44px;
  height:44px;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border-faint);
  background:var(--surface-glass);
  align-items:center;
  flex-shrink:0;
  transition:background var(--transition-fast),border-color var(--transition-fast);
}

.nav-toggle:hover{
  background:rgba(255,255,255,0.15);
  border-color:var(--primary-light-violet);
}

.nav-toggle__bar{
  display:block;
  width:22px;
  height:2px;
  background:var(--text-light);
  border-radius:2px;
  transition:transform var(--transition-base),opacity var(--transition-fast);
}

[data-open] .nav-toggle__bar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

[data-open] .nav-toggle__bar:nth-child(2){
  opacity:0;
}

[data-open] .nav-toggle__bar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* 移动导航面板 */
.site-nav{
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  height:calc(100vh - var(--header-height));
  background:rgba(15,23,42,0.98);
  backdrop-filter:blur(10px);
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:20px 24px 40px;
  z-index:1100;
  transform:translateX(-105%);
  transition:transform var(--transition-base);
  overflow-y:auto;
  margin-left:0;
}

.site-nav[data-open]{
  transform:translateX(0);
}

.site-nav__link{
  padding:16px 8px;
  font-size:18px;
  border-bottom:1px solid var(--border-faint);
  border-radius:0;
  display:block;
}

.site-nav__link::after{
  left:8px;
  right:auto;
  width:32px;
}

.header-cta{
  margin-left:0;
}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  border:1px solid transparent;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-base);
  white-space:nowrap;
}

.btn-primary{
  background:linear-gradient(135deg,var(--accent-neon-green),#16a34a);
  color:#04120b;
  box-shadow:0 6px 20px rgba(34,197,94,0.25);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(34,197,94,0.35);
}

/* ===== 页脚 ===== */
.site-footer{
  background:
    linear-gradient(140deg,var(--bg-soft-dark) 0%,var(--primary-deep-blue) 100%);
  border-top:1px solid var(--border-faint);
  color:var(--text-light);
  margin-top:60px;
}

.site-footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding-top:56px;
  padding-bottom:48px;
}

.brand-logo--footer .brand-logo__mark{
  height:36px;
}

.site-footer__desc{
  margin-top:18px;
  font-size:14px;
  color:var(--text-muted);
  max-width:420px;
  line-height:1.8;
}

.site-footer__trust{
  margin-top:12px;
  font-size:13px;
  color:var(--primary-light-violet);
  border-left:3px solid var(--accent-neon-green);
  padding-left:12px;
  line-height:1.7;
}

.site-footer__heading{
  font-family:var(--font-headline);
  font-size:13px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--accent-neon-green);
  margin-bottom:18px;
  transform:skewX(-2deg);
}

.site-footer__list li{
  margin-bottom:10px;
  font-size:14px;
  color:var(--text-muted);
}

.site-footer__list a{
  transition:color var(--transition-fast);
}

.site-footer__list a:hover{
  color:var(--text-light);
}

.site-footer__note{
  margin-top:14px;
  font-size:12px;
  color:var(--text-muted);
  opacity:0.7;
  line-height:1.6;
}

.site-footer__bottom{
  border-top:1px solid var(--border-faint);
  padding:20px 0;
}

.site-footer__bottom-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--text-muted);
  justify-content:space-between;
}

/* ===== 通用正文 ===== */
.page-hero{
  padding:64px 0 40px;
  position:relative;
  overflow:hidden;
}

.page-hero::before{
  content:"";
  position:absolute;
  top:-10%;
  right:-10%;
  width:60%;
  height:120%;
  background:linear-gradient(220deg,rgba(79,70,229,0.35),transparent 60%);
  clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);
  z-index:0;
  pointer-events:none;
}

.page-hero__content{
  position:relative;
  z-index:1;
  max-width:760px;
}

.page-hero__title{
  font-family:var(--font-headline);
  font-size:clamp(36px,7vw,72px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-1px;
  font-style:italic;
  transform:skewX(-2deg);
  background:linear-gradient(135deg,var(--text-light) 30%,var(--primary-light-violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:16px;
}

.page-hero__subtitle{
  font-size:16px;
  color:var(--text-muted);
  line-height:1.8;
  max-width:520px;
}

.section-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:4px;
  color:var(--accent-neon-green);
  text-transform:uppercase;
  margin-bottom:14px;
  transform:skewX(-2deg);
}

.section-label::after{
  content:"";
  width:32px;
  height:2px;
  background:var(--accent-neon-green);
  border-radius:2px;
}

.grid-card{
  background:var(--surface-glass);
  border:1px solid var(--border-faint);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}

.grid-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:var(--primary-light-violet);
}

.image-zone{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:
    linear-gradient(120deg,rgba(79,70,229,0.5),rgba(30,27,75,0.8)),
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,0.08) 14px 15px);
  min-height:180px;
  display:flex;
  align-items:flex-end;
  padding:16px;
  border:1px solid var(--border-faint);
}

.image-zone::after{
  content:""; 
  position:absolute;
  top:0;
  left:-30%;
  width:50%;
  height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.12),transparent);
  transform:skewX(-15deg);
}

.image-zone[data-image-label]::before{
  content:attr(data-image-label);
  font-size:12px;
  color:var(--text-light);
  font-weight:600;
  letter-spacing:1px;
  position:relative;
  z-index:1;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
  padding:16px 0;
}

.breadcrumb a:hover{
  color:var(--text-light);
}

.content-body{
  max-width:820px;
  margin:0 auto;
  font-size:16px;
  line-height:1.85;
  color:var(--text-light);
}

.content-body p{
  margin-bottom:1em;
}

.content-body h2{
  font-family:var(--font-headline);
  font-size:28px;
  font-weight:800;
  transform:skewX(-2deg);
  margin-top:2em;
  margin-bottom:0.6em;
}

.content-body h3{
  font-family:var(--font-headline);
  font-size:20px;
  font-weight:700;
  margin-top:1.6em;
}

.toc-index{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:32px 0;
}

.toc-index__item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:var(--surface-glass);
  border:1px solid var(--border-faint);
  border-radius:var(--radius-md);
  transition:border-color var(--transition-fast),transform var(--transition-fast);
}

.toc-index__item:hover{
  border-color:var(--accent-neon-green);
  transform:translateX(4px);
}

.toc-index__num{
  font-family:var(--font-headline);
  font-size:20px;
  font-weight:800;
  font-style:italic;
  color:var(--accent-neon-green);
  width:44px;
  flex-shrink:0;
}

.toc-index__name{
  font-weight:600;
  color:var(--text-light);
}

.toc-index__arrow{
  margin-left:auto;
  color:var(--primary-light-violet);
  font-size:20px;
  transition:transform var(--transition-base);
}

.toc-index__item:hover .toc-index__arrow{
  transform:translateX(4px);
}

/* ===== 滚动显现 ===== */
[data-observe]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 600ms ease,transform 600ms ease;
}

[data-observe].is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  [data-observe]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ===== 平板适配 ===== */
@media (min-width:640px){
  .brand-tagline{
    display:inline-block;
  }

  .site-footer__grid{
    grid-template-columns:1fr 1fr;
  }

  .toc-index{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ===== 桌面 ===== */
@media (min-width:992px){
  :root{
    --header-height:80px;
  }

  .site-header__inner{
    gap:24px;
  }

  .nav-toggle{
    display:none;
  }

  .site-nav{
    position:static;
    height:auto;
    transform:none;
    transition:none;
    background:transparent;
    backdrop-filter:none;
    flex-direction:row;
    gap:6px;
    padding:0;
    overflow:visible;
    margin-left:auto;
    display:flex;
  }

  .site-nav[data-open]{
    transform:none;
  }
  
  .site-nav__link{
    padding:10px 14px;
    font-size:14px;
    border-bottom:none;
    display:inline-block;
  }

  .site-nav__link::after{
    left:14px;
    right:14px;
    width:auto;
  }

  .header-cta{
    margin-left:0;
  }

  .site-footer__grid{
    grid-template-columns:1.4fr 1fr 0.8fr;
    gap:56px;
  }

  .site-footer__bottom-inner{
    flex-direction:row;
    align-items:center;
  }

  .page-hero{
    padding:96px 0 56px;
  }

  .content-body{
    font-size:17px;
  }
}

/* ===== 宽屏增强 ===== */
@media (min-width:1440px){
  .site-header__inner,
  .site-footer__grid,
  .site-footer__bottom-inner{
    max-width:var(--container-width);
    margin-left:auto;
    margin-right:auto;
  }
}

/* ===== 打印与基础内容安全 ===== */
@media print{
  .site-header,.site-footer,.scroll-progress,.skip-link{
    display:none !important;
  }
  body{
    background:#ffffff;
    color:#111827;
  }
}