/* ============================================================
   龙8电子指南 · 共享站点样式 /assets/site.css
   版本档案室 · 更新控制室
   ============================================================ */

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

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

body{margin:0}

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

button,input,select,textarea{font:inherit;color:inherit}

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

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

p{margin:0 0 1em}

p:last-child{margin-bottom:0}

dl,dd,dt{margin:0}

/* ---------- 2. 变量 ---------- */
:root{
  --ink-900:#081826;
  --ink-800:#0E2A44;
  --ink-700:#174A6E;
  --paper:#F3F7FA;
  --mist:#C8D6E3;
  --cyan:#21D4C3;
  --orange:#FF7A3D;
  --amber:#F2B84B;
  --rose:#C94F7C;
  --teal:#0F5C63;

  --line:rgba(200,214,227,.18);
  --line-strong:rgba(200,214,227,.32);
  --dim:rgba(200,214,227,.66);

  --font-display:"Archivo Narrow","Oswald","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",Consolas,"Courier New",monospace;

  --wrap:1180px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --step:240ms;
}

/* ---------- 3. 基础排版 ---------- */
body{
  background:var(--ink-900);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{
  margin:0 0 .6em;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--paper);
}

h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.06}
h2{font-size:clamp(1.5rem,3.2vw,2.125rem)}
h3{font-size:1.25rem;line-height:1.3;font-weight:600}
h4{font-size:1rem;line-height:1.4;font-weight:600}

strong{color:var(--paper);font-weight:600}

code,kbd,samp{font-family:var(--font-mono);font-size:.9em}

/* ---------- 4. 工具类 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-5rem;
  z-index:200;
  padding:.7rem 1.1rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  background:var(--cyan);
  color:var(--ink-900);
  border:1px solid var(--cyan);
  transition:top 180ms var(--ease);
}

.skip-link:focus{
  top:.6rem;
}

.rule{
  height:1px;
  margin:0;
  border:0;
  background:var(--line-strong);
}

/* ---------- 5. 站点头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink-900);
  border-bottom:1px solid var(--line-strong);
}

/* 顶部刻度索引带 */
.header-rail{
  background-color:var(--ink-800);
  background-image:linear-gradient(90deg,rgba(33,212,195,.09) 1px,transparent 1px);
  background-size:28px 100%;
  border-bottom:1px solid var(--line);
}

.rail-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.35rem 1.25rem;
  padding-block:.42rem;
}

.rail-item{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.4;
  color:var(--mist);
  text-transform:uppercase;
}

.rail-item--mono{
  color:var(--dim);
}

.rail-dot{
  display:inline-block;
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(33,212,195,.16);
}

/* 主命令栏 */
.header-bar{
  position:relative;
  background:var(--ink-900);
}

.header-bar-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-block:.78rem;
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  flex:0 0 auto;
  color:var(--paper);
}

.brand-mark{
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--ink-900);
  background:var(--cyan);
  border:1px solid var(--cyan);
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);
  transition:background var(--step) var(--ease);
}

.brand:hover .brand-mark{
  background:var(--orange);
  border-color:var(--orange);
}

.brand-text{
  display:block;
  min-width:0;
}

.brand-name{
  display:block;
  font-family:var(--font-display);
  font-size:1.16rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
  white-space:nowrap;
}

.brand-sub{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.4;
  color:var(--dim);
  white-space:nowrap;
}

/* 导航 */
.nav{
  margin-inline:auto;
  min-width:0;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:.1rem;
}

.nav-item{
  display:block;
}

.nav-link{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
  padding:.5rem .55rem;
  font-size:.88rem;
  font-weight:400;
  line-height:1.4;
  color:var(--mist);
  border-bottom:2px solid transparent;
  transition:color 160ms var(--ease),border-color 160ms var(--ease),background-color 160ms var(--ease);
}

.nav-index{
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.06em;
  color:rgba(200,214,227,.42);
  transition:color 160ms var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible{
  color:var(--paper);
  background:rgba(33,212,195,.08);
  border-bottom-color:var(--ink-700);
}

.nav-link:hover .nav-index{
  color:var(--cyan);
}

.nav-link[aria-current="page"]{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

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

/* 操作区 */
.header-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex:0 0 auto;
}

.version-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem .55rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.4;
  color:var(--amber);
  background:rgba(242,184,75,.09);
  border:1px solid rgba(242,184,75,.38);
  white-space:nowrap;
}

.chip-dot{
  display:inline-block;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--orange);
}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.72rem 1.05rem;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:background-color var(--step) var(--ease),color var(--step) var(--ease),border-color var(--step) var(--ease),transform var(--step) var(--ease);
}

.btn:active{
  transform:translateY(1px);
}

.btn-primary{
  background:var(--orange);
  color:#170B04;
  border-color:var(--orange);
  font-weight:600;
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background:#FF9260;
  border-color:#FF9260;
}

.btn-ghost{
  background:transparent;
  color:var(--paper);
  border-color:var(--line-strong);
}

.btn-ghost:hover,
.btn-ghost:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
}

/* ---------- 7. 移动菜单按钮 ---------- */
.nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  padding:.55rem .7rem;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:0;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  cursor:pointer;
  transition:border-color 160ms var(--ease),color 160ms var(--ease);
}

.nav-toggle:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

.nav-toggle-bars{
  position:relative;
  display:block;
  width:1rem;
  height:2px;
  background:currentColor;
  transition:background-color 160ms var(--ease);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:1rem;
  height:2px;
  background:currentColor;
  transition:transform 160ms var(--ease),top 160ms var(--ease);
}

.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}

.site-header[data-open] .nav-toggle-bars{background:transparent}
.site-header[data-open] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.site-header[data-open] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}

/* ---------- 8. 阅读进度 ---------- */
.header-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  pointer-events:none;
}

.header-progress-fill{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 55%,var(--orange) 100%);
}

/* ---------- 9. 站点页脚 ---------- */
.site-footer{
  background-color:var(--ink-900);
  background-image:
    linear-gradient(90deg,rgba(33,212,195,.05) 1px,transparent 1px),
    linear-gradient(rgba(33,212,195,.05) 1px,transparent 1px);
  background-size:56px 56px;
  color:var(--paper);
  border-top:1px solid var(--line-strong);
}

.footer-keyline{
  height:3px;
  background:linear-gradient(90deg,var(--amber) 0 50%,var(--rose) 50% 100%);
}

.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
  gap:2.5rem 3rem;
  padding-block:3rem 2.25rem;
}

.footer-brand{
  min-width:0;
}

.footer-statement{
  margin:1rem 0 .8rem;
  max-width:26ch;
  font-size:.95rem;
  line-height:1.7;
  color:var(--mist);
}

.footer-version{
  margin:0;
  color:var(--amber);
  border:1px solid rgba(242,184,75,.34);
  padding:.22rem .5rem;
  display:inline-block;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem 1.75rem;
}

.footer-col{
  min-width:0;
}

.footer-heading{
  margin:0 0 .85rem;
  padding-bottom:.55rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.4;
  color:var(--cyan);
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
}

.footer-list{
  display:grid;
  gap:.45rem;
}

.footer-list a{
  display:inline-block;
  font-size:.9rem;
  line-height:1.5;
  color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color 160ms var(--ease),border-color 160ms var(--ease);
}

.footer-list a:hover,
.footer-list a:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--cyan);
}

.footer-contact{
  display:grid;
  gap:.7rem;
}

.contact-row{
  display:grid;
  gap:.1rem;
}

.contact-label{
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.4;
  color:var(--dim);
  text-transform:uppercase;
}

.contact-value{
  font-size:.88rem;
  line-height:1.55;
  color:var(--paper);
  overflow-wrap:anywhere;
}

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

.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding-block:1.1rem 1.6rem;
}

.footer-meta{
  margin:0;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--dim);
}

.footer-icp{
  color:var(--mist);
}

/* ---------- 10. 主内容与章节 ---------- */
.main{
  display:block;
  min-height:40vh;
}

.section{
  padding-block:clamp(2.25rem,5vw,4.5rem);
}

.eyebrow{
  display:inline-block;
  margin:0 0 .75rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.5;
  color:var(--cyan);
  text-transform:uppercase;
}

.lede{
  max-width:60ch;
  font-size:1.05rem;
  line-height:1.8;
  color:var(--mist);
}

.prose{
  max-width:68ch;
  font-size:1rem;
  line-height:1.78;
  color:var(--mist);
}

.prose h2,
.prose h3{
  margin-top:1.8em;
  color:var(--paper);
}

.prose ul,
.prose ol{
  margin:0 0 1.2em;
  padding-left:1.15rem;
  list-style:disc;
}

.prose ol{list-style:decimal}

.prose li{
  margin-bottom:.45em;
}

.prose a{
  color:var(--cyan);
  border-bottom:1px solid rgba(33,212,195,.45);
}

.prose strong{color:var(--paper)}

/* ---------- 11. 面包屑 ---------- */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  padding-block:.9rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--dim);
}

.crumb-link{
  color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color 160ms var(--ease),border-color 160ms var(--ease);
}

.crumb-link:hover,
.crumb-link:focus-visible{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

.crumb-sep{
  color:rgba(200,214,227,.32);
}

.crumb-current{
  color:var(--paper);
}

/* ---------- 12. 网格与面板 ---------- */
.grid{
  display:grid;
  gap:1.15rem;
}

.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  padding:1.5rem;
  background:var(--ink-800);
  border:1px solid var(--line-strong);
  border-radius:0;
}

.panel-paper{
  background:var(--paper);
  color:var(--ink-900);
}

.panel-paper h1,
.panel-paper h2,
.panel-paper h3,
.panel-paper h4{
  color:var(--ink-900);
}

.panel-paper .lede,
.panel-paper .prose{
  color:var(--ink-700);
}

/* ---------- 13. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.2rem .5rem;
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.5;
  border:1px solid currentColor;
  white-space:nowrap;
}

.tag--cyan{color:var(--cyan)}
.tag--amber{color:var(--amber)}
.tag--rose{color:var(--rose)}

/* ---------- 14. 双色版本对照条 ---------- */
.compare-bar{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line-strong);
  background:var(--ink-800);
}

.compare-a,
.compare-b{
  padding:.9rem 1.1rem;
  font-size:.92rem;
  line-height:1.7;
}

.compare-a{
  border-left:3px solid var(--amber);
  color:var(--mist);
}

.compare-b{
  border-left:3px solid var(--rose);
  color:var(--mist);
  border-top:1px solid var(--line);
}

/* ---------- 15. 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--ink-800);
  border:1px solid var(--line-strong);
}

.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(33,212,195,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(33,212,195,.09) 1px,transparent 1px);
  background-size:22px 22px;
}

.media-frame img,
.media-frame svg,
.media-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-16x9{aspect-ratio:16/9}
.media-4x3{aspect-ratio:4/3}
.media-1x1{aspect-ratio:1/1}

.figure{
  margin:0;
}

.figure-caption{
  margin-top:.6rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.6;
  color:var(--dim);
}

/* ---------- 16. 长页目录 ---------- */
.toc{
  padding:1.1rem 1.2rem;
  background:var(--ink-800);
  border:1px solid var(--line-strong);
}

.toc-list{
  display:grid;
  gap:.3rem;
}

.toc-link{
  display:block;
  padding:.3rem .5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--mist);
  border-left:2px solid transparent;
  transition:color 160ms var(--ease),border-color 160ms var(--ease),background-color 160ms var(--ease);
}

.toc-link:hover,
.toc-link:focus-visible{
  color:var(--paper);
  background:rgba(33,212,195,.08);
}

.toc-link[aria-current="true"]{
  color:var(--cyan);
  border-left-color:var(--cyan);
}

/* ---------- 17. 显现动效 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--step) var(--ease),transform var(--step) var(--ease);
}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* ---------- 18. 焦点可见 ---------- */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.btn:focus-visible,
.nav-toggle:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
}

/* ---------- 19. 响应式 ---------- */
@media (max-width:78rem){
  .version-chip{display:none}
  .nav-link{padding:.5rem .45rem;font-size:.84rem}
}

@media (max-width:70rem){
  .brand-sub{display:none}
  .nav-index{display:none}
}

@media (max-width:60rem){
  .rail-item--mono{display:none}

  .header-bar-inner{
    gap:.6rem;
    padding-block:.7rem;
  }

  .header-actions{
    margin-left:auto;
  }

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

  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin:0;
    padding:.5rem var(--gutter) 1.1rem;
    background:var(--ink-800);
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 18px 32px rgba(3,10,18,.55);
  }

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

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

  .nav-link{
    width:100%;
    justify-content:flex-start;
    padding:.78rem .35rem;
    font-size:.98rem;
    border-bottom:1px solid var(--line);
  }

  .nav-link[aria-current="page"]{
    border-bottom-color:var(--cyan);
  }

  .nav-index{
    display:inline;
    font-size:.66rem;
  }

  .footer-top{
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    padding-block:2.4rem 1.8rem;
  }

  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-statement{max-width:none}
}

@media (max-width:46rem){
  .grid-2,
  .grid-3,
  .compare-bar{
    grid-template-columns:minmax(0,1fr);
  }

  .compare-b{
    border-top:1px solid var(--line-strong);
  }

  h1{font-size:clamp(1.75rem,7vw,2.5rem)}
}

@media (max-width:34rem){
  .brand-name{font-size:1.02rem}

  .btn{
    padding:.66rem .8rem;
    font-size:.8rem;
  }

  .btn-primary{
    padding:.66rem .8rem;
  }

  .footer-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .footer-bottom-inner{
    justify-content:flex-start;
  }
}

@media (max-width:26rem){
  .nav-toggle-label{display:none}
}

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

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

  [data-reveal]{
    opacity:1;
    transform:none;
  }

  .header-progress-fill{
    transition:none;
  }

  .btn:active{
    transform:none;
  }
}