@charset "UTF-8";
/* ==========================================================================
   长征娱乐 · 峡谷战术终端 · system.css
   --------------------------------------------------------------------------
   本文件只放“系统层”：变量 / 重置 / 基础 / 骨架（顶栏·页脚）/ 通用组件。
   页面级区块全部写在 scenes.css，并以 @layer scenes 声明。
   视觉语言：直角、1px 描边、角标括号、坐标刻度、深浅双区；
             不使用圆角、不使用投影卡片堆叠。
   ========================================================================== */

@layer tokens, reset, base, layout, components, motion;

/* 01 变量 ------------------------------------------------------------------ */
@layer tokens {
  :root {
    /* 底色：冷灰绿屏 + 深林 */
    --cz-screen: #edf1eb;
    --cz-screen-2: #e2e8e0;
    --cz-surface: #f7faf5;
    --cz-white: #ffffff;
    --cz-forest: #0e221b;
    --cz-forest-2: #143028;
    --cz-forest-3: #1d4438;

    /* 信号色：峡谷橙 + 青玉 */
    --cz-signal: #e5501d;
    --cz-signal-2: #c23d10;
    --cz-jade: #2c6b58;
    --cz-mint: #a9e6d0;

    /* 文字 */
    --cz-text: #16241f;
    --cz-text-2: #46564f;
    --cz-text-3: #74847c;
    --cz-rev: #eaf2ec;
    --cz-rev-2: #a9c2b7;
    --cz-rev-3: #7b968b;

    /* 线 */
    --cz-line: #ccd7cf;
    --cz-line-2: #b7c6bb;
    --cz-line-dark: rgba(169, 230, 208, .16);
    --cz-line-dark-2: rgba(169, 230, 208, .32);

    --cz-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --cz-sans: "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

    --cz-shell: 1240px;
    --cz-gutter: clamp(18px, 4vw, 48px);
    --cz-top-h: 74px;
    --cz-ease: cubic-bezier(.2, .7, .3, 1);
  }
}

/* 02 重置 ------------------------------------------------------------------ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cz-top-h) + 22px);
  }

  body {
    margin: 0;
    background-color: var(--cz-screen);
    background-image:
      linear-gradient(to right, rgba(22, 36, 31, .042) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(22, 36, 31, .042) 1px, transparent 1px);
    background-size: 96px 96px;
    color: var(--cz-text);
    font-family: var(--cz-sans);
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .008em;
    overflow-x: hidden;
  }

  img, svg, video { display: block; max-width: 100%; height: auto; }
  [hidden] { display: none !important; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  p { margin: 0 0 1em; }
  p:last-child { margin-bottom: 0; }
  h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.018em;
    text-wrap: balance;
  }
  table { border-collapse: collapse; width: 100%; }
  ::selection { background: var(--cz-signal); color: #fff; }
  :focus-visible { outline: 2px solid var(--cz-signal); outline-offset: 3px; }
  body.is-locked { overflow: hidden; }
}

/* 03 基础 ------------------------------------------------------------------ */
@layer base {
  .cz-shell {
    width: min(var(--cz-shell), calc(100% - var(--cz-gutter) * 2));
    margin-inline: auto;
  }
  .cz-shell--slim { width: min(880px, calc(100% - var(--cz-gutter) * 2)); }

  .cz-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 200;
    padding: .7em 1.1em;
    background: var(--cz-forest);
    color: var(--cz-rev);
    font-family: var(--cz-mono);
    font-size: .78rem;
    transform: translateY(-160%);
    transition: transform .2s var(--cz-ease);
  }
  .cz-skip:focus { transform: none; }

  .cz-kicker {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin: 0 0 18px;
    font-family: var(--cz-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--cz-signal);
  }
  .cz-kicker::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
  }
  .cz-kicker--rev { color: var(--cz-mint); }

  .cz-lead {
    max-width: 56ch;
    color: var(--cz-text-2);
    font-size: clamp(.95rem, 1.1vw, 1.06rem);
    line-height: 1.92;
  }
  .cz-lead--rev { color: var(--cz-rev-2); }

  .cz-num {
    font-family: var(--cz-mono);
    font-variant-numeric: tabular-nums;
  }

  .cz-arw::after {
    content: "→";
    display: inline-block;
    margin-left: .55em;
    font-family: var(--cz-mono);
    transition: transform .24s var(--cz-ease);
  }
  a:hover .cz-arw::after, .cz-arw:hover::after { transform: translateX(4px); }

  .cz-band { padding: clamp(56px, 7vw, 104px) 0; }
  .cz-band--tight { padding: clamp(40px, 5vw, 70px) 0; }
  .cz-band--dark {
    position: relative;
    background: var(--cz-forest);
    color: var(--cz-rev);
    background-image:
      linear-gradient(to right, var(--cz-line-dark) 1px, transparent 1px),
      linear-gradient(to bottom, var(--cz-line-dark) 1px, transparent 1px);
    background-size: 96px 96px;
  }
  .cz-band--dark h2, .cz-band--dark h3 { color: var(--cz-rev); }
  .cz-band--dark .cz-lead { color: var(--cz-rev-2); }
  .cz-band--edge { border-top: 1px solid var(--cz-line); }
}

/* 04 骨架：顶栏 / 页脚 / 移动抽屉 ------------------------------------------ */
@layer layout {
  .cz-top {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(237, 241, 235, .94);
    border-bottom: 1px solid var(--cz-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .24s var(--cz-ease);
  }
  .cz-top.is-stuck { box-shadow: 0 14px 30px -22px rgba(14, 34, 27, .55); }

  .cz-top__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: var(--cz-top-h);
  }

  .cz-brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
  .cz-brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--cz-forest);
    color: var(--cz-mint);
    font-family: var(--cz-mono);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    position: relative;
  }
  .cz-brand__mark::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    background: var(--cz-signal);
  }
  .cz-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
  .cz-brand__text b { font-size: 1.06rem; letter-spacing: .04em; }
  .cz-brand__text i {
    margin-top: 4px;
    font-family: var(--cz-mono);
    font-size: .58rem;
    font-style: normal;
    letter-spacing: .2em;
    color: var(--cz-text-3);
  }

  .cz-nav { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px); }
  .cz-nav a {
    position: relative;
    padding: 6px 0;
    font-size: .86rem;
    color: var(--cz-text-2);
    white-space: nowrap;
    transition: color .2s var(--cz-ease);
  }
  .cz-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--cz-signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .24s var(--cz-ease);
  }
  .cz-nav a:hover { color: var(--cz-text); }
  .cz-nav a:hover::after, .cz-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .cz-nav a[aria-current="page"] { color: var(--cz-signal); }

  .cz-top__act { display: flex; align-items: center; gap: 10px; flex: none; }
  .cz-top__act .cz-btn { padding: .62em 1.05em; font-size: .78rem; }

  .cz-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--cz-line-2);
    position: relative;
  }
  .cz-burger span {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 1px;
    background: var(--cz-text);
    transition: transform .22s var(--cz-ease), opacity .18s linear;
  }
  .cz-burger span:nth-child(1) { top: 15px; }
  .cz-burger span:nth-child(2) { top: 20px; }
  .cz-burger span:nth-child(3) { top: 25px; }
  .cz-top.is-open .cz-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .cz-top.is-open .cz-burger span:nth-child(2) { opacity: 0; }
  .cz-top.is-open .cz-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .cz-ticker {
    border-top: 1px solid rgba(169, 230, 208, .12);
    background: var(--cz-forest);
    color: var(--cz-rev-3);
    overflow: hidden;
  }
  .cz-ticker__track {
    display: flex;
    gap: 46px;
    width: max-content;
    padding: 7px 0;
    font-family: var(--cz-mono);
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: cz-tick 52s linear infinite;
  }
  .cz-ticker__track b { color: var(--cz-mint); font-weight: 500; }
  .cz-ticker__track i { font-style: normal; color: var(--cz-signal); }

  .cz-foot {
    position: relative;
    background: var(--cz-forest);
    color: var(--cz-rev-2);
    border-top: 3px solid var(--cz-signal);
    background-image:
      linear-gradient(to right, var(--cz-line-dark) 1px, transparent 1px),
      linear-gradient(to bottom, var(--cz-line-dark) 1px, transparent 1px);
    background-size: 96px 96px;
  }
  .cz-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .7fr)) minmax(0, 1.05fr);
    gap: clamp(24px, 3.4vw, 50px);
    padding: clamp(44px, 5vw, 66px) 0 clamp(30px, 4vw, 46px);
  }
  .cz-foot__brand b {
    display: block;
    margin-bottom: 12px;
    font-size: 1.14rem;
    color: var(--cz-rev);
    letter-spacing: .05em;
  }
  .cz-foot__brand p { font-size: .84rem; line-height: 1.86; color: var(--cz-rev-2); }
  .cz-foot h2 {
    margin: 4px 0 16px;
    font-family: var(--cz-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--cz-rev-3);
  }
  .cz-foot__links { display: grid; gap: 9px; }
  .cz-foot__links a { font-size: .85rem; color: var(--cz-rev-2); transition: color .2s var(--cz-ease); }
  .cz-foot__links a:hover { color: var(--cz-mint); }
  .cz-foot__sig { display: grid; gap: 10px; font-size: .84rem; }
  .cz-foot__sig span {
    display: block;
    font-family: var(--cz-mono);
    font-size: .6rem;
    letter-spacing: .22em;
    color: var(--cz-rev-3);
    text-transform: uppercase;
  }
  .cz-foot__sig a { color: var(--cz-rev); border-bottom: 1px solid var(--cz-line-dark-2); }
  .cz-foot__legal {
    display: grid;
    gap: 8px;
    padding: 22px 0 30px;
    border-top: 1px solid var(--cz-line-dark);
    font-size: .74rem;
    line-height: 1.8;
    color: var(--cz-rev-3);
  }
  .cz-foot__legal p { margin: 0; }
  .cz-foot__legal a { color: var(--cz-rev-2); }

  @media (max-width: 1080px) {
    .cz-nav { gap: 14px; }
    .cz-nav a { font-size: .8rem; }
    .cz-top__act .cz-btn--ghost { display: none; }
  }

  @media (max-width: 900px) {
    .cz-burger { display: block; }
    .cz-nav {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 88;
      display: grid;
      gap: 0;
      padding: 10px var(--cz-gutter) 22px;
      background: var(--cz-screen);
      border-bottom: 1px solid var(--cz-line-2);
      max-height: calc(100dvh - var(--cz-top-h) - 34px);
      overflow-y: auto;
      transform: translateY(-12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s var(--cz-ease), transform .22s var(--cz-ease), visibility .22s;
    }
    .cz-nav a {
      padding: 15px 0;
      border-bottom: 1px solid var(--cz-line);
      font-size: .95rem;
    }
    .cz-nav a::after { display: none; }
    .cz-top.is-open .cz-nav {
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .cz-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 600px) {
    .cz-top__act .cz-btn--solid { display: none; }
    .cz-foot__grid { grid-template-columns: 1fr; gap: 30px; }
    .cz-brand__text i { display: none; }
  }
}

/* 05 组件 ------------------------------------------------------------------ */
@layer components {
  /* 按钮 ---------------------------------------------------------------- */
  .cz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .86em 1.5em;
    border: 1px solid transparent;
    font-family: var(--cz-mono);
    font-size: .8rem;
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s var(--cz-ease), color .2s var(--cz-ease), border-color .2s var(--cz-ease);
  }
  .cz-btn--solid { background: var(--cz-signal); border-color: var(--cz-signal); color: #fff; }
  .cz-btn--solid:hover { background: var(--cz-forest); border-color: var(--cz-forest); }
  .cz-btn--ghost { border-color: var(--cz-line-2); color: var(--cz-text); }
  .cz-btn--ghost:hover { border-color: var(--cz-signal); color: var(--cz-signal); }
  .cz-btn--dark { border-color: var(--cz-line-dark-2); color: var(--cz-rev); }
  .cz-btn--dark:hover { background: var(--cz-mint); border-color: var(--cz-mint); color: var(--cz-forest); }
  .cz-btn--block { width: 100%; }

  /* 标签 ---------------------------------------------------------------- */
  .cz-tag {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .32em .68em;
    border: 1px solid var(--cz-line-2);
    font-family: var(--cz-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cz-text-2);
  }
  .cz-tag--signal { border-color: var(--cz-signal); color: var(--cz-signal); }
  .cz-tag--jade { border-color: var(--cz-jade); color: var(--cz-jade); }
  .cz-tag--rev { border-color: var(--cz-line-dark-2); color: var(--cz-mint); }

  /* 小节头 -------------------------------------------------------------- */
  .cz-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: end;
    gap: 12px 40px;
    margin-bottom: clamp(28px, 3.6vw, 46px);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cz-line);
  }
  .cz-head__no {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--cz-mono);
    font-size: .66rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--cz-signal);
  }
  .cz-head__title { font-size: clamp(1.5rem, 2.9vw, 2.35rem); max-width: 26ch; }
  .cz-head__meta {
    margin: 0;
    max-width: 28ch;
    text-align: right;
    font-size: .82rem;
    line-height: 1.8;
    color: var(--cz-text-3);
  }
  .cz-band--dark .cz-head { border-color: var(--cz-line-dark); }
  .cz-band--dark .cz-head__no { color: var(--cz-mint); }
  .cz-band--dark .cz-head__meta { color: var(--cz-rev-3); }

  /* 战术卡 -------------------------------------------------------------- */
  .cz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2.2vw, 30px);
    background: var(--cz-surface);
    border: 1px solid var(--cz-line);
    transition: border-color .22s var(--cz-ease), background .22s var(--cz-ease);
  }
  .cz-card::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    opacity: .35;
    transition: opacity .22s var(--cz-ease);
    background:
      linear-gradient(var(--cz-signal), var(--cz-signal)) left top / 13px 1px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) left top / 1px 13px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) right top / 13px 1px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) right top / 1px 13px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) left bottom / 13px 1px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) left bottom / 1px 13px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) right bottom / 13px 1px no-repeat,
      linear-gradient(var(--cz-signal), var(--cz-signal)) right bottom / 1px 13px no-repeat;
  }
  .cz-card:hover { border-color: var(--cz-line-2); background: var(--cz-white); }
  .cz-card:hover::before { opacity: 1; }
  .cz-card__no {
    margin: 0;
    font-family: var(--cz-mono);
    font-size: .64rem;
    letter-spacing: .26em;
    color: var(--cz-text-3);
  }
  .cz-card h3 { font-size: clamp(1.08rem, 1.4vw, 1.24rem); }
  .cz-card p { font-size: .88rem; line-height: 1.85; color: var(--cz-text-2); }
  .cz-card__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--cz-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--cz-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    color: var(--cz-signal);
  }
  .cz-card--dark { background: var(--cz-forest-2); border-color: var(--cz-line-dark); }
  .cz-card--dark p { color: var(--cz-rev-2); }
  .cz-card--dark .cz-card__no { color: var(--cz-rev-3); }
  .cz-card--dark .cz-card__foot { border-color: var(--cz-line-dark); color: var(--cz-mint); }

  /* 数据跑道 ------------------------------------------------------------ */
  .cz-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--cz-line-dark);
    background: rgba(9, 27, 22, .55);
  }
  .cz-metrics__item {
    padding: clamp(20px, 2.4vw, 32px);
    border-left: 1px solid var(--cz-line-dark);
  }
  .cz-metrics__item:first-child { border-left: 0; }
  .cz-metrics__val {
    display: block;
    margin-bottom: 6px;
    font-family: var(--cz-mono);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    line-height: 1;
    color: var(--cz-rev);
  }
  .cz-metrics__val em { font-style: normal; font-size: .48em; color: var(--cz-mint); margin-left: 4px; }
  .cz-metrics__lab {
    font-family: var(--cz-mono);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cz-rev-3);
  }
  .cz-metrics__note { margin-top: 8px; font-size: .76rem; color: var(--cz-rev-2); }

  /* 折叠问答 ------------------------------------------------------------ */
  .cz-faq { border-top: 1px solid var(--cz-line); }
  .cz-faq details { border-bottom: 1px solid var(--cz-line); }
  .cz-faq summary {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 600;
  }
  .cz-faq summary::-webkit-details-marker { display: none; }
  .cz-faq summary::before {
    content: "+";
    flex: none;
    font-family: var(--cz-mono);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cz-signal);
  }
  .cz-faq details[open] summary::before { content: "−"; }
  .cz-faq summary:hover { color: var(--cz-signal); }
  .cz-faq .cz-faq__body { padding: 0 0 22px 30px; font-size: .9rem; color: var(--cz-text-2); }
  .cz-faq .cz-faq__body p { margin-bottom: .7em; }

  /* 日志行 -------------------------------------------------------------- */
  .cz-log { border-top: 1px solid var(--cz-line); }
  .cz-log__row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) auto;
    gap: 10px 26px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--cz-line);
    transition: background .2s var(--cz-ease), padding-left .2s var(--cz-ease);
  }
  .cz-log__row:hover { background: rgba(255, 255, 255, .5); padding-left: 10px; }
  .cz-log__date {
    font-family: var(--cz-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--cz-text-3);
  }
  .cz-log__title { font-size: 1rem; font-weight: 600; }
  .cz-log__title span { display: block; margin-top: 5px; font-size: .8rem; font-weight: 400; color: var(--cz-text-3); }
  .cz-log__go { font-family: var(--cz-mono); font-size: .9rem; color: var(--cz-signal); }

  /* 提示块 -------------------------------------------------------------- */
  .cz-note {
    border-left: 2px solid var(--cz-signal);
    background: rgba(229, 80, 29, .05);
    padding: 18px 22px;
    font-size: .85rem;
    line-height: 1.86;
    color: var(--cz-text-2);
  }
  .cz-note b { color: var(--cz-text); }
  .cz-note--dark {
    border-color: var(--cz-mint);
    background: rgba(169, 230, 208, .07);
    color: var(--cz-rev-2);
  }
  .cz-note--dark b { color: var(--cz-rev); }

  /* 表单 ---------------------------------------------------------------- */
  .cz-form { display: grid; gap: 16px; }
  .cz-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cz-field { display: grid; gap: 7px; }
  .cz-field label {
    font-family: var(--cz-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cz-text-3);
  }
  .cz-field input, .cz-field select, .cz-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--cz-line-2);
    border-radius: 0;
    background: var(--cz-white);
    color: var(--cz-text);
    font: inherit;
    font-size: .9rem;
    transition: border-color .18s var(--cz-ease);
  }
  .cz-field input:focus, .cz-field select:focus, .cz-field textarea:focus {
    border-color: var(--cz-signal);
    outline: none;
  }
  .cz-field textarea { min-height: 118px; resize: vertical; }
  .cz-form__hint { font-size: .74rem; color: var(--cz-text-3); }

  /* 筛选按钮 ------------------------------------------------------------ */
  .cz-filter { display: flex; flex-wrap: wrap; gap: 8px; }
  .cz-filter button {
    padding: .5em .95em;
    border: 1px solid var(--cz-line-2);
    font-family: var(--cz-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--cz-text-2);
    transition: background .18s var(--cz-ease), color .18s var(--cz-ease), border-color .18s var(--cz-ease);
  }
  .cz-filter button:hover { border-color: var(--cz-signal); color: var(--cz-signal); }
  .cz-filter button[aria-pressed="true"] { background: var(--cz-forest); border-color: var(--cz-forest); color: var(--cz-rev); }

  /* 面包屑 -------------------------------------------------------------- */
  .cz-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--cz-mono);
    font-size: .66rem;
    letter-spacing: .12em;
    color: var(--cz-text-3);
  }
  .cz-crumb a { color: var(--cz-text-2); }
  .cz-crumb a:hover { color: var(--cz-signal); }
  .cz-crumb span[aria-current] { color: var(--cz-text); }

  /* 文章排版 ------------------------------------------------------------ */
  .cz-article { font-size: 1rem; line-height: 1.95; color: var(--cz-text-2); }
  .cz-article > p:first-of-type { color: var(--cz-text); font-size: 1.04rem; }
  .cz-article h2 {
    margin: 42px 0 14px;
    padding-left: 14px;
    border-left: 3px solid var(--cz-signal);
    font-size: clamp(1.18rem, 1.8vw, 1.45rem);
    color: var(--cz-text);
  }
  .cz-article h3 { margin: 30px 0 10px; font-size: 1.06rem; color: var(--cz-text); }
  .cz-article ul, .cz-article ol { display: grid; gap: 8px; margin: 0 0 20px; padding-left: 20px; }
  .cz-article ul li { list-style: none; position: relative; padding-left: 16px; }
  .cz-article ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: 7px;
    height: 1px;
    background: var(--cz-signal);
  }
  .cz-article ol { list-style: decimal; }
  .cz-article ol li { padding-left: 4px; }
  .cz-article ol li::marker { color: var(--cz-signal); font-family: var(--cz-mono); }
  .cz-article strong { color: var(--cz-text); }
  .cz-article blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    border: 1px solid var(--cz-line);
    border-left: 3px solid var(--cz-jade);
    background: var(--cz-surface);
    color: var(--cz-text-2);
    font-size: .93rem;
  }
  .cz-article table { margin: 24px 0; font-size: .86rem; }
  .cz-article th, .cz-article td { border: 1px solid var(--cz-line); padding: 10px 12px; text-align: left; }
  .cz-article th { background: var(--cz-screen-2); font-family: var(--cz-mono); font-size: .72rem; letter-spacing: .1em; }

  .cz-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 16px;
    font-family: var(--cz-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    color: var(--cz-text-3);
  }

  /* 页内导航（上一页/返回） -------------------------------------------- */
  .cz-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cz-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--cz-signal);
  }
  .cz-back::before { content: "←"; }

  /* 双栏与网格工具类 ---------------------------------------------------- */
  .cz-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 60px); align-items: start; }
  .cz-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
  .cz-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
  .cz-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
  .cz-stack { display: grid; gap: 16px; }
  .cz-mt { margin-top: clamp(28px, 3.6vw, 44px); }

  @media (max-width: 1000px) {
    .cz-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .cz-split { grid-template-columns: 1fr; }
    .cz-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cz-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cz-metrics__item:nth-child(3) { border-left: 0; border-top: 1px solid var(--cz-line-dark); }
    .cz-metrics__item:nth-child(4) { border-top: 1px solid var(--cz-line-dark); }
  }
  @media (max-width: 700px) {
    .cz-head { grid-template-columns: 1fr; }
    .cz-head__meta { text-align: left; max-width: none; }
    .cz-grid-3, .cz-grid-2 { grid-template-columns: 1fr; }
    .cz-log__row { grid-template-columns: 1fr auto; }
    .cz-log__date { grid-column: 1 / -1; }
    .cz-form__row { grid-template-columns: 1fr; }
    .cz-faq .cz-faq__body { padding-left: 0; }
  }
}

/* 06 动效 ------------------------------------------------------------------ */
@layer motion {
  @keyframes cz-tick {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--cz-ease), transform .6s var(--cz-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  .cz-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--cz-signal);
    animation: cz-blink 2.4s var(--cz-ease) infinite;
  }
  @keyframes cz-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cz-ticker__track { animation: none; }
    .cz-pulse { animation: none; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    * { transition-duration: .01ms !important; }
  }
}