/* ============================================================
   CyberWave v2.1.0 · 后赛博终端 / Neo-Terminal
   六零导航页 (lylme spage) 主题样式
   ------------------------------------------------------------
   设计定调：2030 年代指令甲板 HUD
   - 字：压缩技术体展示字（Bahnschrift/DIN）+ 等宽数据体 + 中文正文
   - 色：深空黑 60% / 结构与面板 30% / 霓虹 10%
   - 质：流动透视网格 + 胶片颗粒 + CRT 扫描线 + 暗角 + 渐变光晕
   - 动：system boot 入场序列 + 滚动揭示
   - DIY：35 项后台配置 → body class + CSS 变量驱动
   - 零依赖：无外部字体/CDN，可离线使用
   ============================================================ */

/* ============================ 0. Reset ============================ */
*, *::before, *::after { box-sizing: border-box; }

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

html, body { margin: 0; padding: 0; }

img { max-width: 100%; border: 0; }

/* ============================ 1. Design Tokens ============================ */
:root {
    /* ---- 色彩：60 深空 / 30 结构 / 10 霓虹 ---- */
    --cy-void:        #04050a;   /* 基底 60% */
    --cy-abyss:       #070b14;
    --cy-panel:       rgba(9, 14, 26, 0.62);
    --cy-panel-solid: #0a1020;
    --cy-ink:         #e6f7ff;   /* 主文字，对比度 >14:1 */
    --cy-muted:       #8ba0b8;   /* 次级文字，对比度 ≈7.5:1 */

    --cy-cyan:    #00f0ff;   /* 主色（config: color） */
    --cy-magenta: #ff2e97;   /* 强调色（config: accent） */
    --cy-signal:  #9dff00;   /* 信号色（config: signal） */
    --cy-edge:    var(--cy-cyan);

    --cy-line:      rgba(0, 240, 255, 0.22);
    --cy-line-soft: rgba(0, 240, 255, 0.10);

    /* ---- 字体 ---- */
    --cy-font-display: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Alternate",
                       "Oswald", "PingFang SC", "Microsoft YaHei", sans-serif;
    --cy-font-mono:    "SF Mono", "Cascadia Mono", "Consolas", "Menlo",
                       "DejaVu Sans Mono", "Courier New", monospace;
    --cy-font-body:    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
                       "Segoe UI", system-ui, sans-serif;

    /* ---- 字阶 ---- */
    --cy-fs-hero:   clamp(38px, 6.4vw, 86px);
    --cy-fs-brand:  clamp(24px, 2.2vw, 30px);
    --cy-fs-clock:  clamp(30px, 3.2vw, 40px);
    --cy-fs-h2:     17px;
    --cy-fs-body:   14px;
    --cy-fs-small:  12px;
    --cy-fs-micro:  11px;

    /* ---- 间距 / 圆角（config: density / radius） ---- */
    --cy-gap:       18px;
    --cy-board-gap: 42px;
    --cy-pad:       15px 17px;
    --cy-radius:    2px;
    --cy-rail-w:    300px;

    /* ---- 阴影三级 ---- */
    --cy-sh-1: 0 2px 8px rgba(0, 0, 0, 0.55);
    --cy-sh-2: 0 8px 28px rgba(0, 0, 0, 0.60);
    --cy-sh-3: 0 24px 70px rgba(0, 0, 0, 0.70);

    /* ---- 动效 ---- */
    --cy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cy-t-fast:   180ms;
    --cy-t-base:   320ms;
    --cy-t-slow:   620ms;

    /* ---- 辉光强度（config: glow） ---- */
    --cy-glow: 10px;

    /* ---- 链接列数（config: link_cols） ---- */
    --cy-cols: 3;
}

/* ============================ 2. DIY 变体（body class 驱动） ============================ */

/* 2.1 辉光强度 */
.cw-glow-low  { --cy-glow: 4px;  }
.cw-glow-mid  { --cy-glow: 10px; }
.cw-glow-high { --cy-glow: 20px; }

/* 2.2 颗粒强度（config: grain_level） */
.cw-grain-lv1 .cw-grain { opacity: 0.022; }
.cw-grain-lv2 .cw-grain { opacity: 0.038; }
.cw-grain-lv3 .cw-grain { opacity: 0.062; }

/* 2.3 故障字开关（config: glitch） */
.cw-glitch-off .cw-brand-name::before,
.cw-glitch-off .cw-brand-name::after,
.cw-glitch-off .cw-hero-title::before,
.cw-glitch-off .cw-hero-title::after { display: none; }

/* 2.4 布局密度（config: density） */
.cw-density-tight  { --cy-gap: 12px; --cy-board-gap: 28px; --cy-pad: 12px 14px; }
.cw-density-normal { --cy-gap: 18px; --cy-board-gap: 42px; --cy-pad: 15px 17px; }
.cw-density-loose  { --cy-gap: 26px; --cy-board-gap: 56px; --cy-pad: 18px 20px; }

/* 2.5 侧栏位置（config: rail_pos） */
.cw-rail-right .cw-shell { flex-direction: row-reverse; }
.cw-rail-right .cw-rail {
    border-right: none;
    border-left: 1px solid var(--cy-line);
    box-shadow: inset 1px 0 0 rgba(0, 240, 255, 0.14), -8px 0 34px rgba(0, 0, 0, 0.55);
}

/* 2.6 卡片样式（config: card_style） */
/* outline：纯描边，去掉 HUD 角标 */
.cw-card-outline .cw-node { border-color: var(--cy-line); }
.cw-card-outline .cw-node::before,
.cw-card-outline .cw-node::after { display: none; }

/* plain：极简无框，仅靠背景区分 */
.cw-card-plain .cw-node {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.032);
    box-shadow: none;
}
.cw-card-plain .cw-node::before,
.cw-card-plain .cw-node::after { display: none; }
.cw-card-plain .cw-node:hover,
.cw-card-plain .cw-node:focus-visible {
    background: rgba(0, 240, 255, 0.07);
    border-color: var(--cy-line);
    box-shadow: var(--cy-sh-1);
}

/* 2.7 英雄区对齐（config: hero_align） */
.cw-hero-center .cw-hero { text-align: center; }
.cw-hero-center .cw-hero-rule { margin-left: auto; margin-right: auto; }
.cw-hero-center .cw-engines { justify-content: center; }

/* 2.8 页脚对齐（config: footer_align） */
.cw-foot-left   .cw-foot { justify-content: flex-start; }
.cw-foot-center .cw-foot { justify-content: center; }
.cw-foot-right  .cw-foot { justify-content: flex-end; }

/* ============================ 3. Base ============================ */
body {
    font-family: var(--cy-font-body);
    font-size: var(--cy-fs-body);
    line-height: 1.65;
    color: var(--cy-ink);
    background-color: var(--cy-void);
    background-image: linear-gradient(180deg, #04050a 0%, #070b14 55%, #04050a 100%);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--cy-cyan); color: #02141a; }

/* 可见焦点环 —— 可访问性底线 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
    outline: 2px solid var(--cy-cyan);
    outline-offset: 3px;
    border-radius: var(--cy-radius);
}

/* 滚动条 */
.cw-rail::-webkit-scrollbar { width: 6px; }
.cw-rail::-webkit-scrollbar-track { background: transparent; }
.cw-rail::-webkit-scrollbar-thumb { background: var(--cy-line); border-radius: 3px; }
.cw-rail { scrollbar-width: thin; scrollbar-color: var(--cy-line) transparent; }

/* ============================ 4. Atmosphere 氛围层 ============================ */

/* 4.1 渐变光晕（config: mesh）—— 缓慢呼吸的多色径向光 */
.cw-mesh {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1100px 620px at 84% -14%, var(--cy-magenta), transparent 62%),
        radial-gradient(980px 700px at -6% 110%, var(--cy-cyan), transparent 62%),
        radial-gradient(760px 520px at 50% 42%, var(--cy-signal), transparent 70%);
    opacity: 0.16;
    filter: blur(30px);
    animation: cw-mesh-breathe 18s ease-in-out infinite alternate;
}
@keyframes cw-mesh-breathe {
    from { transform: scale(1)    translate3d(0, 0, 0);      opacity: 0.13; }
    to   { transform: scale(1.06) translate3d(-1.5%, -1%, 0); opacity: 0.19; }
}

/* 4.2 自定义背景图（平台 background()） */
.cw-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-size: cover; background-position: center;
    opacity: 0.20;
    filter: saturate(0.75) contrast(1.1);
}

/* 4.3 透视网格地平线（config: horizon） */
.cw-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 平面网格（上半部淡出） */
.cw-grid::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
}

/* 底部透视地平线 —— 向前流动 */
.cw-grid::after {
    content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 54vh;
    background-image:
        repeating-linear-gradient(90deg, rgba(0, 240, 255, 0.20) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg,  rgba(0, 240, 255, 0.13) 0 1px, transparent 1px 64px);
    background-position: 0 0, 0 0;
    transform: perspective(340px) rotateX(70deg);
    transform-origin: bottom center;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(transparent, #000 58%);
            mask-image: linear-gradient(transparent, #000 58%);
    animation: cw-grid-flow 7s linear infinite;
}
@keyframes cw-grid-flow {
    from { background-position: 0 0,    0 0; }
    to   { background-position: 0 64px, 0 64px; }
}

/* 4.4 胶片颗粒（config: grain；纯内联 SVG，无外链） */
.cw-grain {
    position: fixed; inset: -50%; z-index: 55; pointer-events: none;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: cw-grain-shift 900ms steps(3) infinite;
}
@keyframes cw-grain-shift {
    0%   { transform: translate3d(0, 0, 0); }
    33%  { transform: translate3d(-2%, 1.5%, 0); }
    66%  { transform: translate3d(1.5%, -2%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* 4.5 CRT 扫描线 + 缓慢下扫光束（config: scanline） */
.cw-scan { position: fixed; inset: 0; z-index: 58; pointer-events: none; overflow: hidden; }

.cw-scan::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    animation: cw-scan-drift 8s linear infinite;
}
@keyframes cw-scan-drift {
    from { background-position: 0 0; }
    to   { background-position: 0 120px; }
}

.cw-scan::after {
    content: ""; position: absolute; left: 0; right: 0; height: 26vh; top: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.055), transparent);
    animation: cw-beam 9s linear infinite;
}
@keyframes cw-beam {
    from { transform: translateY(-30vh); }
    to   { transform: translateY(118vh); }
}

/* 4.6 暗角（config: vignette） */
.cw-vignette {
    position: fixed; inset: 0; z-index: 56; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
}

/* ============================ 5. Shell 外壳 ============================ */
.cw-shell {
    position: relative; z-index: 1;
    display: flex; align-items: stretch; min-height: 100vh;
}

/* ---------------- 5.1 左侧指令栏 ---------------- */
.cw-rail {
    position: sticky; top: 0; align-self: flex-start;
    width: var(--cy-rail-w); min-width: var(--cy-rail-w);
    height: 100vh; overflow-y: auto;
    padding: 30px 24px 34px;
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.94), rgba(5, 8, 15, 0.94));
    border-right: 1px solid var(--cy-line);
    box-shadow: inset -1px 0 0 rgba(0, 240, 255, 0.14), 8px 0 34px rgba(0, 0, 0, 0.55);
}

/* 品牌区 + 故障字 */
.cw-brand { margin-bottom: 28px; }

.cw-brand-mark {
    color: var(--cy-magenta); font-size: 18px; line-height: 1;
    text-shadow: 0 0 var(--cy-glow) var(--cy-magenta);
}

.cw-brand-name {
    display: block; position: relative; margin-top: 8px;
    font-family: var(--cy-font-display);
    font-size: var(--cy-fs-brand); font-weight: 700;
    letter-spacing: 0.01em; line-height: 1.06;
    color: var(--cy-cyan);
    text-shadow: 0 0 var(--cy-glow) var(--cy-cyan);
}

/* 色差故障层 */
.cw-brand-name::before,
.cw-brand-name::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; width: 100%;
    opacity: 0.85; clip-path: inset(0 0 100% 0); pointer-events: none;
}
.cw-brand-name::before { color: var(--cy-magenta); transform: translate(-2px, 0); animation: cw-glitch 3.6s infinite steps(2); }
.cw-brand-name::after  { color: var(--cy-signal);  transform: translate(2px, 0);  animation: cw-glitch 2.6s infinite reverse steps(2); }

@keyframes cw-glitch {
    0%, 90%, 100% { clip-path: inset(0 0 100% 0); }
    91% { clip-path: inset(8% 0 62% 0);  }
    94% { clip-path: inset(48% 0 22% 0); }
    97% { clip-path: inset(74% 0 6% 0);  }
}

.cw-brand-sub {
    display: block; margin-top: 10px;
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-micro);
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--cy-muted);
}

/* 侧栏分类导航 */
.cw-rail-nav {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px;
    border-top: 1px solid var(--cy-line-soft); padding-top: 18px;
}

.cw-rail-link {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 12px;
    color: var(--cy-ink); text-decoration: none;
    font-size: var(--cy-fs-body); letter-spacing: 0.04em;
    border-left: 2px solid transparent;
    transition: color var(--cy-t-fast) var(--cy-ease-out),
                background-color var(--cy-t-fast) var(--cy-ease-out),
                border-color var(--cy-t-fast) var(--cy-ease-out),
                padding-left var(--cy-t-base) var(--cy-ease-out);
}

/* 左→右扫光 */
.cw-rail-link::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.16), transparent 72%);
    transform: translateX(-100%);
    transition: transform var(--cy-t-base) var(--cy-ease-out);
}
.cw-rail-link:hover::before,
.cw-rail-link:focus-visible::before { transform: translateX(0); }

.cw-rail-link:hover,
.cw-rail-link:focus-visible {
    color: var(--cy-cyan);
    border-left-color: var(--cy-cyan);
    padding-left: 16px;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.55);
}

.cw-rail-tick {
    color: var(--cy-magenta); font-size: 11px; line-height: 1;
    transition: transform var(--cy-t-base) var(--cy-ease-out);
}
.cw-rail-link:hover .cw-rail-tick { transform: translateX(3px); }
.cw-rail-text { flex: 1; position: relative; }

.cw-rail-idx {
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-micro);
    color: var(--cy-muted); letter-spacing: 0.08em;
}

/* 控制台：时钟 / 一言 / 公告 */
.cw-console { border-top: 1px solid var(--cy-line-soft); padding-top: 20px; }

.cw-time {
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-clock);
    font-weight: 700; line-height: 1.05; letter-spacing: 0.02em;
    color: var(--cy-cyan); text-shadow: 0 0 var(--cy-glow) var(--cy-cyan);
    font-variant-numeric: tabular-nums;
}
.cw-date {
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-small);
    color: var(--cy-muted); margin-top: 6px; letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.cw-yan {
    margin: 18px 0 0; padding: 13px 15px;
    font-size: 13px; line-height: 1.75; color: #cfefff;
    border: 1px solid var(--cy-line-soft); border-left: 2px solid var(--cy-magenta);
    background: rgba(255, 46, 151, 0.055);
    border-radius: var(--cy-radius);
}

.cw-notice {
    margin-top: 16px; padding: 13px 15px;
    font-size: var(--cy-fs-small); line-height: 1.75; color: var(--cy-ink);
    border: 1px solid var(--cy-line-soft);
    background: rgba(0, 240, 255, 0.045);
    border-radius: var(--cy-radius);
}

/* ---------------- 5.2 右侧画布 ---------------- */
.cw-stage { flex: 1; min-width: 0; padding: 52px 52px 68px; }

.cw-hero { margin-bottom: 46px; }

.cw-hero-title {
    margin: 0 0 20px; position: relative;
    font-family: var(--cy-font-display);
    font-size: var(--cy-fs-hero); font-weight: 700;
    letter-spacing: -0.02em; line-height: 0.98;
    color: var(--cy-ink);
    text-shadow: 0 0 calc(var(--cy-glow) * 2.2) rgba(0, 240, 255, 0.25);
}

/* 标题色差副层 */
.cw-hero-title::before,
.cw-hero-title::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; width: 100%;
    pointer-events: none; clip-path: inset(0 0 100% 0); opacity: 0.8;
}
.cw-hero-title::before { color: var(--cy-cyan);    transform: translate(-2px, 0); animation: cw-glitch 5.2s infinite steps(2); }
.cw-hero-title::after  { color: var(--cy-magenta); transform: translate(2px, 0);  animation: cw-glitch 4.1s infinite reverse steps(2); }

.cw-hero-rule {
    width: 132px; height: 2px; margin: 14px 0 0;
    background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta) 55%, transparent);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* 副标题（config: hero_sub） */
.cw-hero-sub {
    margin: 16px 0 0;
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-small);
    letter-spacing: 0.18em; color: var(--cy-muted); text-transform: uppercase;
}

/* ============================ 6. 搜索控制台 ============================ */
.cw-finder {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    margin-top: 22px; padding: 13px 16px;
    background: var(--cy-panel);
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-radius);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: var(--cy-sh-1);
    transition: border-color var(--cy-t-base) var(--cy-ease-out),
                box-shadow var(--cy-t-base) var(--cy-ease-out);
}

/* 顶部发光发丝线（聚焦时展开） */
.cw-finder::after {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta));
    box-shadow: 0 0 10px var(--cy-cyan);
    transition: width var(--cy-t-slow) var(--cy-ease-out);
}
.cw-finder:focus-within {
    border-color: var(--cy-cyan);
    box-shadow: var(--cy-sh-2), 0 0 var(--cy-glow) rgba(0, 240, 255, 0.28);
}
.cw-finder:focus-within::after { width: 100%; }

.cw-finder-prompt {
    color: var(--cy-magenta);
    font-family: var(--cy-font-mono); font-size: 13px; white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 46, 151, 0.6);
}

.cw-finder-input {
    flex: 1; min-width: 0; padding: 6px 0;
    background: transparent; border: none; outline: none;
    color: var(--cy-ink); caret-color: var(--cy-cyan);
    font-family: var(--cy-font-body); font-size: 15px; letter-spacing: 0.02em;
}
.cw-finder-input::placeholder { color: var(--cy-muted); }

.cw-finder-go {
    flex: 0 0 auto;
    padding: 10px 20px; min-height: 44px;
    font-family: var(--cy-font-display); font-weight: 700;
    font-size: 14px; letter-spacing: 0.16em;
    color: #02141a; background: var(--cy-cyan);
    border: 1px solid var(--cy-cyan); border-radius: var(--cy-radius);
    cursor: pointer;
    box-shadow: 0 0 var(--cy-glow) rgba(0, 240, 255, 0.5);
    transition: background-color var(--cy-t-fast) var(--cy-ease-out),
                color var(--cy-t-fast) var(--cy-ease-out),
                box-shadow var(--cy-t-fast) var(--cy-ease-out);
}
.cw-finder-go:hover {
    background: var(--cy-magenta); border-color: var(--cy-magenta); color: #1a0010;
    box-shadow: 0 0 var(--cy-glow) rgba(255, 46, 151, 0.6);
}

/* ---------------- 6.1 搜索引擎胶囊 ---------------- */
.cw-engines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.cw-engine {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 8px 15px; cursor: pointer;
    font-size: 13px; color: var(--cy-muted);
    border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius);
    background: rgba(10, 15, 28, 0.5);
    transition: color var(--cy-t-fast) var(--cy-ease-out),
                border-color var(--cy-t-fast) var(--cy-ease-out),
                background-color var(--cy-t-fast) var(--cy-ease-out),
                box-shadow var(--cy-t-fast) var(--cy-ease-out);
    -webkit-user-select: none; user-select: none;
}
.cw-engine input { position: absolute; opacity: 0; width: 0; height: 0; }
.cw-engine:hover { color: var(--cy-ink); border-color: var(--cy-edge); }

.cw-engine.is-active {
    color: #02141a; font-weight: 700;
    background: var(--cy-edge); border-color: var(--cy-edge);
    box-shadow: 0 0 var(--cy-glow) var(--cy-edge);
}

.cw-engine-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; }
.cw-engine-icon img { width: 16px; height: 16px; }
.cw-engine-label { white-space: nowrap; }

/* ============================ 7. 链接区 ============================ */
.cw-board { display: flex; flex-direction: column; gap: var(--cy-board-gap); }

.cw-zone { display: grid; grid-template-columns: repeat(var(--cy-cols), 1fr); gap: var(--cy-gap); align-content: start; }

.cw-zone-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; margin-bottom: 6px;
    border-bottom: 1px solid var(--cy-line-soft);
    position: relative;
}
/* 分组标题左侧霓虹短杠 */
.cw-zone-head::before {
    content: ""; width: 3px; height: 16px; flex: 0 0 3px;
    background: var(--cy-magenta); box-shadow: 0 0 10px var(--cy-magenta);
}

.cw-zone-ico {
    display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px;
    align-items: center; justify-content: center;
    color: var(--cy-magenta); font-size: 16px; line-height: 1; overflow: hidden;
}
.cw-zone-ico img { width: 18px; height: 18px; object-fit: contain; }

.cw-zone-name {
    margin: 0; font-family: var(--cy-font-display);
    font-size: var(--cy-fs-h2); font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--cy-ink);
}

.cw-zone-id {
    margin-left: auto;
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-micro);
    letter-spacing: 0.16em; color: var(--cy-muted);
}

/* ---------------- 7.1 链接节点（HUD 面板） ---------------- */
.cw-node {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 13px;
    padding: var(--cy-pad);
    text-decoration: none; color: var(--cy-ink);
    background: var(--cy-panel);
    border: 1px solid var(--cy-line-soft);
    border-radius: var(--cy-radius);
    transition: transform var(--cy-t-base) var(--cy-ease-out),
                border-color var(--cy-t-base) var(--cy-ease-out),
                box-shadow var(--cy-t-base) var(--cy-ease-out),
                background-color var(--cy-t-base) var(--cy-ease-out);
}

/* HUD 角标：左上 + 右下（非对称，指令面板感） */
.cw-node::before,
.cw-node::after {
    content: ""; position: absolute; width: 13px; height: 13px;
    border: 0 solid var(--cy-cyan); opacity: 0.5; pointer-events: none;
    transition: width var(--cy-t-base) var(--cy-ease-out),
                height var(--cy-t-base) var(--cy-ease-out),
                opacity var(--cy-t-base) var(--cy-ease-out);
}
.cw-node::before { top: 5px;    left: 5px;  border-top-width: 1px; border-left-width: 1px; }
.cw-node::after  { bottom: 5px; right: 5px; border-bottom-width: 1px; border-right-width: 1px; }

.cw-node:hover,
.cw-node:focus-visible {
    transform: translateY(-4px);
    border-color: var(--cy-cyan);
    background: rgba(0, 240, 255, 0.05);
    box-shadow: var(--cy-sh-2), 0 0 var(--cy-glow) rgba(0, 240, 255, 0.32);
}
.cw-node:hover::before, .cw-node:focus-visible::before,
.cw-node:hover::after,  .cw-node:focus-visible::after {
    width: 26px; height: 26px; opacity: 1;
}

/* 悬停竖向扫描光带 */
.cw-node-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cw-node-fx::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44%;
    background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.16), transparent);
    transform: translateY(-130%);
}
.cw-node:hover .cw-node-fx::before,
.cw-node:focus-visible .cw-node-fx::before { animation: cw-node-scan 820ms ease-out; }
@keyframes cw-node-scan {
    from { transform: translateY(-130%); }
    to   { transform: translateY(270%); }
}

.cw-node-glyph {
    position: relative;
    display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px;
    align-items: center; justify-content: center;
    border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius);
    color: var(--cy-cyan); background: rgba(0, 240, 255, 0.06);
    font-size: 16px;
    transition: box-shadow var(--cy-t-base) var(--cy-ease-out),
                border-color var(--cy-t-base) var(--cy-ease-out),
                transform var(--cy-t-base) var(--cy-ease-out);
}
.cw-node-glyph img { width: 20px; height: 20px; }
.cw-node:hover .cw-node-glyph {
    border-color: var(--cy-cyan);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
    transform: scale(1.06);
}

.cw-node-body { display: flex; flex-direction: column; min-width: 0; }
.cw-node-label {
    font-size: var(--cy-fs-body); letter-spacing: 0.03em; color: var(--cy-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-node-desc {
    font-size: var(--cy-fs-small); color: var(--cy-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================ 8. 页脚 ============================ */
.cw-foot {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 20px 52px;
    border-top: 1px solid var(--cy-line-soft);
    background: rgba(5, 8, 15, 0.82);
    color: var(--cy-muted);
    font-family: var(--cy-font-mono); font-size: var(--cy-fs-small); letter-spacing: 0.08em;
}
.cw-foot .icp, .cw-foot .gonganbei {
    color: var(--cy-muted); text-decoration: none;
    border: 1px solid var(--cy-line-soft); padding: 4px 9px; border-radius: var(--cy-radius);
    transition: color var(--cy-t-fast) var(--cy-ease-out), border-color var(--cy-t-fast) var(--cy-ease-out);
}
.cw-foot .icp:hover, .cw-foot .gonganbei:hover { color: var(--cy-cyan); border-color: var(--cy-cyan); }

/* 页脚自定义内容（config: footer_extra） */
.cw-foot-extra { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cw-foot-extra a { color: var(--cy-muted); text-decoration: none; }
.cw-foot-extra a:hover { color: var(--cy-cyan); }
.cw-foot-extra img { height: 16px; width: auto; vertical-align: middle; }

/* ============================ 9. Motion 动效编排 ============================ */

/* 9.1 system boot 入场序列（config: boot） */
@keyframes cw-boot {
    from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: none;                    filter: blur(0);   }
}
.cw-boot [data-boot] {
    animation: cw-boot 760ms var(--cy-ease-out) both;
    animation-delay: var(--cy-d, 0ms);
}

/* 9.2 滚动揭示（config: reveal；JS 添加 .is-in；无 JS 时默认可见） */
.cw-js .cw-reveal-on [data-reveal] {
    opacity: 0; transform: translate3d(0, 22px, 0);
    transition: opacity var(--cy-t-slow) var(--cy-ease-out),
                transform var(--cy-t-slow) var(--cy-ease-out);
    transition-delay: var(--cy-d, 0ms);
}
.cw-js .cw-reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* 9.3 尊重系统的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .cw-boot [data-boot] { opacity: 1; transform: none; filter: none; }
    .cw-js .cw-reveal-on [data-reveal] { opacity: 1; transform: none; }
    .cw-grain, .cw-scan::after { display: none; }
}

/* ============================ 9.4 主题模式：亮色白天（config: theme_mode） ============================ */
/* 暗色为默认基线，仅需为亮色覆盖令牌与少数组件表面 */
body.cw-mode-light {
    --cy-void:        #e9eef5;
    --cy-abyss:       #dde6f0;
    --cy-panel:       rgba(255, 255, 255, 0.78);
    --cy-panel-solid: #ffffff;
    --cy-ink:         #0c1622;
    --cy-muted:       #51637a;
    --cy-line:        rgba(10, 140, 170, 0.30);
    --cy-line-soft:   rgba(10, 140, 170, 0.16);
    --cy-glow:        7px;
    background-color: var(--cy-void);
    background-image: linear-gradient(180deg, #eef3f9 0%, #e2ebf3 55%, #eef3f9 100%);
}

/* 亮色下若干表面与描边微调 */
.cw-mode-light .cw-rail {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 252, 0.96));
    border-color: var(--cy-line);
    box-shadow: inset -1px 0 0 rgba(10, 140, 170, 0.18), 8px 0 30px rgba(20, 40, 70, 0.10);
}
.cw-mode-light.cw-rail-right .cw-rail {
    box-shadow: inset 1px 0 0 rgba(10, 140, 170, 0.18), -8px 0 30px rgba(20, 40, 70, 0.10);
}
.cw-mode-light .cw-foot { background: rgba(244, 248, 252, 0.90); }
.cw-mode-light .cw-engine { background: rgba(255, 255, 255, 0.70); border-color: var(--cy-line-soft); }
.cw-mode-light .cw-yan { background: rgba(255, 46, 151, 0.08); border-color: rgba(255, 46, 151, 0.28); }
.cw-mode-light .cw-notice { background: rgba(10, 140, 170, 0.08); }
.cw-mode-light .cw-node { background: rgba(255, 255, 255, 0.70); }
.cw-mode-light .cw-card-plain .cw-node { background: rgba(20, 40, 70, 0.04); }
.cw-mode-light .cw-grid::before {
    background-image:
        linear-gradient(rgba(10, 140, 170, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 140, 170, 0.14) 1px, transparent 1px);
}
.cw-mode-light .cw-grid::after { opacity: 0.40; }
.cw-mode-light .cw-mesh { opacity: 0.10; }
.cw-mode-light .cw-scan::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px); }
.cw-mode-light .cw-vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(20, 30, 50, 0.18) 100%); }

/* ============================ 9.5 极光流光背景（config: aurora） ============================ */
.cw-aurora {
    position: fixed; inset: -20%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(40% 38% at 18% 22%, var(--cy-magenta), transparent 60%),
        radial-gradient(46% 40% at 82% 30%, var(--cy-cyan),    transparent 62%),
        radial-gradient(50% 44% at 50% 82%, var(--cy-signal),  transparent 64%);
    filter: blur(70px);
    opacity: 0.20;
    mix-blend-mode: screen;
    animation: cw-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes cw-aurora-drift {
    0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)  scale(1.05); }
    50%  { transform: translate3d(4%, 3%, 0)  rotate(8deg)  scale(1.12); }
    100% { transform: translate3d(-2%, 4%, 0) rotate(-6deg) scale(1.05); }
}
.cw-mode-light .cw-aurora { mix-blend-mode: multiply; opacity: 0.16; }

/* ============================ 9.6 光标辉光（config: cursor_glow） ============================ */
.cw-cursor {
    position: fixed; inset: 0; z-index: 54; pointer-events: none;
    background: radial-gradient(420px circle at var(--cy-mx, 50%) var(--cy-my, 50%),
                rgba(0, 240, 255, 0.10), transparent 60%);
    opacity: 0; mix-blend-mode: screen;
    transition: opacity var(--cy-t-base) var(--cy-ease-out);
}
.cw-cursor.is-ready { opacity: 1; }
.cw-mode-light .cw-cursor {
    background: radial-gradient(440px circle at var(--cy-mx, 50%) var(--cy-my, 50%),
                rgba(10, 140, 170, 0.14), transparent 62%);
    mix-blend-mode: multiply;
}

/* ============================ 9.7 右上角工具甲板 ============================ */
.cw-deck {
    position: fixed; top: 16px; right: 16px; z-index: 70;
    display: flex; gap: 10px;
}
.cw-deck-btn {
    width: 42px; height: 42px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; cursor: pointer;
    color: var(--cy-ink); background: var(--cy-panel);
    border: 1px solid var(--cy-line); border-radius: var(--cy-radius);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: var(--cy-sh-1);
    transition: color var(--cy-t-fast) var(--cy-ease-out),
                border-color var(--cy-t-fast) var(--cy-ease-out),
                box-shadow var(--cy-t-fast) var(--cy-ease-out),
                transform var(--cy-t-base) var(--cy-ease-out);
}
.cw-deck-btn:hover, .cw-deck-btn:focus-visible {
    color: var(--cy-cyan); border-color: var(--cy-cyan);
    box-shadow: var(--cy-sh-1), 0 0 var(--cy-glow) rgba(0, 240, 255, 0.30);
    transform: translateY(-2px);
}
.cw-mode-ico { font-size: 19px; }

/* ============================ 9.8 开机日志打字机（config: boot_log） ============================ */
.cw-bootlog {
    margin: 18px 0 0; padding: 13px 15px 0; overflow: hidden;
    font-family: var(--cy-font-mono); font-size: 11.5px; line-height: 1.7;
    letter-spacing: 0.04em; color: #7fe7c4; white-space: pre-wrap; word-break: break-word;
    max-height: 132px;
}
.cw-bootlog .cw-bl-cur { color: var(--cy-signal); animation: cw-bl-blink 1s steps(1) infinite; }
@keyframes cw-bl-blink { 50% { opacity: 0; } }
.cw-mode-light .cw-bootlog { color: #0f9e74; }

/* ============================ 9.9 命令面板（config: palette） ============================ */
.cw-palette {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: flex-start; justify-content: center; padding-top: 14vh;
    background: rgba(2, 6, 14, 0.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cw-palette.is-open { display: flex; }
.cw-palette-box {
    width: min(620px, 92vw); max-height: 64vh; display: flex; flex-direction: column;
    background: rgba(8, 13, 24, 0.96);
    border: 1px solid var(--cy-line); border-radius: calc(var(--cy-radius) + 4px);
    box-shadow: var(--cy-sh-3), 0 0 30px rgba(0, 240, 255, 0.14);
    overflow: hidden;
    animation: cw-pal-in 220ms var(--cy-ease-out) both;
}
@keyframes cw-pal-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
.cw-palette-input {
    width: 100%; padding: 18px 20px; border: 0; outline: none;
    background: transparent; color: var(--cy-ink);
    font-family: var(--cy-font-mono); font-size: 16px; letter-spacing: 0.02em;
    border-bottom: 1px solid var(--cy-line-soft);
}
.cw-palette-input::placeholder { color: var(--cy-muted); }
.cw-palette-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.cw-palette-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--cy-radius); cursor: pointer;
    border: 1px solid transparent; text-decoration: none; color: var(--cy-ink);
}
.cw-palette-item .cw-pi-glyph {
    width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex;
    align-items: center; justify-content: center; font-family: var(--cy-font-mono);
    border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius);
    color: var(--cy-cyan); background: rgba(0, 240, 255, 0.06); font-size: 14px;
}
.cw-palette-item .cw-pi-body { display: flex; flex-direction: column; min-width: 0; }
.cw-palette-item .cw-pi-label { font-size: 14px; color: var(--cy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-palette-item .cw-pi-desc  { font-size: 12px; color: var(--cy-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-palette-item .cw-pi-go {
    margin-left: auto; color: var(--cy-muted); font-family: var(--cy-font-mono);
    font-size: 11px; opacity: 0; transition: opacity var(--cy-t-fast) var(--cy-ease-out);
}
.cw-palette-item.is-active,
.cw-palette-item:hover { background: rgba(0, 240, 255, 0.08); border-color: var(--cy-cyan); }
.cw-palette-item.is-active .cw-pi-go,
.cw-palette-item:hover .cw-pi-go { opacity: 1; }
.cw-palette-empty {
    padding: 28px 12px; text-align: center; color: var(--cy-muted);
    font-family: var(--cy-font-mono); font-size: 13px;
}
.cw-palette-foot {
    display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px;
    border-top: 1px solid var(--cy-line-soft);
    font-family: var(--cy-font-mono); font-size: 11px; color: var(--cy-muted); letter-spacing: 0.06em;
}
.cw-palette-foot b { color: var(--cy-cyan); font-weight: 700; }
.cw-mode-light .cw-palette { background: rgba(120, 140, 165, 0.40); }
.cw-mode-light .cw-palette-box { background: rgba(255, 255, 255, 0.97); border-color: var(--cy-line); }
.cw-mode-light .cw-palette-input { color: var(--cy-ink); }
.cw-mode-light .cw-palette-item.is-active,
.cw-mode-light .cw-palette-item:hover { background: rgba(10, 140, 170, 0.10); }

/* ============================ 10. Responsive ============================ */
@media (max-width: 1200px) {
    .cw-stage { padding: 44px 36px 60px; }
}

@media (max-width: 768px) {
    .cw-shell,
    .cw-rail-right .cw-shell { flex-direction: column; }

    .cw-rail,
    .cw-rail-right .cw-rail {
        position: static; width: 100%; min-width: 0; height: auto;
        padding: 22px 18px 24px;
        border-right: none; border-left: none;
        border-bottom: 1px solid var(--cy-line);
        box-shadow: none;
    }
    .cw-brand-name { font-size: 22px; }
    .cw-rail-nav { flex-direction: row; flex-wrap: wrap; }
    .cw-rail-link { border-left: none; border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius); }
    .cw-rail-idx { display: none; }

    .cw-stage { padding: 30px 18px 44px; }
    .cw-hero-title { letter-spacing: 0.02em; }
    .cw-foot { padding: 16px 18px; }
    .cw-foot-left .cw-foot,
    .cw-foot-right .cw-foot { justify-content: center; }
    .cw-zone { grid-template-columns: repeat(2, 1fr); }
    .cw-time { font-size: 30px; }
}

@media (max-width: 480px) {
    .cw-zone { grid-template-columns: 1fr; }
    .cw-finder { flex-wrap: wrap; }
    .cw-finder-input { flex: 1 1 100%; order: 2; }
    .cw-finder-go { width: 100%; order: 3; }
    .cw-finder-prompt { order: 1; }
    .cw-engines { gap: 8px; }
}