/* ============================================================
   战斗吧！精灵 · 「暗夜荧光」主题框架  zdb.css
   全新手写设计系统 · 无外部依赖 · 无 Bootstrap/UIKit/Tailwind
   配色：暗夜墨蓝底 + 荧光薄荷绿(主) + 琥珀橘(强调) + 浅紫(辅)
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
    /* 色板 */
    --z-night:        #0B0F1F;   /* 全局深色底 */
    --z-night-2:      #0E1330;   /* 次级深底 */
    --z-panel:        #131A38;   /* 面板/卡片 */
    --z-panel-2:      #1A2346;   /* 面板 hover */
    --z-energy:       #3DF0C0;   /* 主色 · 荧光薄荷绿 */
    --z-energy-dim:   #2BBF9A;
    --z-hot:          #FFB84D;   /* 强调 · 琥珀橘 */
    --z-purp:         #C792FF;   /* 辅色 · 浅紫 */
    --z-text:         #E8ECFF;   /* 主文字 */
    --z-text-dim:     #9AA3C9;   /* 次文字 */
    --z-text-faint:   #5C6690;   /* 弱文字 */
    --z-border:       #242C56;   /* 边框 */
    --z-success:      #3DF0C0;
    --z-danger:       #FF6B81;
    --z-white:        #FFFFFF;

    /* 排版 */
    --z-font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    --z-font-mono: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;

    /* 几何 */
    --z-radius:     16px;
    --z-radius-lg:  24px;
    --z-radius-sm:  9px;
    --z-border-w:   1.5px;

    /* 阴影与光效 */
    --z-shadow:  0 14px 40px -16px rgba(0,0,0,0.6);
    --z-shadow-lg: 0 24px 60px -18px rgba(0,0,0,0.7);
    --z-glow-energy: 0 0 0 1px rgba(61,240,192,0.4), 0 12px 40px -10px rgba(61,240,192,0.35);
    --z-glow-hot:  0 12px 36px -10px rgba(255,184,77,0.35);

    /* 间距刻度 */
    --z-space-1: .25rem;
    --z-space-2: .5rem;
    --z-space-3: .75rem;
    --z-space-4: 1rem;
    --z-space-5: 1.5rem;
    --z-space-6: 2rem;
    --z-space-7: 3rem;
    --z-space-8: 4rem;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--z-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--z-text);
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(61,240,192,0.10), transparent 60%),
        radial-gradient(1000px 520px at -10% 30%, rgba(199,146,255,0.08), transparent 55%),
        var(--z-night);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; display: inline-block; }
a { color: var(--z-energy); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--z-hot); }
h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--z-space-3); line-height: 1.35; font-weight: 700; }
p { margin: 0 0 var(--z-space-4); }
ul, ol { margin: 0; padding-left: 1.25rem; }

/* 键盘焦点可访问性 */
:focus-visible {
    outline: 3px solid var(--z-energy);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: rgba(61,240,192,0.3); }

/* ---------- 3. 布局 / 容器 ---------- */
.z-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--z-space-5);
}

.z-container-narrow { max-width: 880px; }

/* 自研 flex 栅格 */
.z-row { display: flex; flex-wrap: wrap; gap: var(--z-space-5); }
.z-row > * { min-width: 0; }

.z-col { flex: 1 1 100%; }
.z-col-4 { flex: 1 1 calc(33.333% - var(--z-space-5)); }
.z-col-6 { flex: 1 1 calc(50% - var(--z-space-5)); }
.z-col-8 { flex: 1 1 calc(66.666% - var(--z-space-5)); }

@media (max-width: 992px) {
    .z-col-4, .z-col-8 { flex-basis: calc(50% - var(--z-space-5)); }
}
@media (max-width: 640px) {
    .z-col-4, .z-col-6, .z-col-8 { flex-basis: 100%; }
}

/* 排版工具 */
.z-text-center { text-align: center; }
.z-text-dim { color: var(--z-text-dim); }
.z-text-faint { color: var(--z-text-faint); }
.z-text-hot { color: var(--z-hot); }
.z-text-purp { color: var(--z-purp); }
.z-text-energy { color: var(--z-energy); }
.z-text-white { color: var(--z-white); }
.z-fs-sm { font-size: .875rem; }
.z-fs-lg { font-size: 1.125rem; }
.z-fw-bold { font-weight: 700; }
.z-mt-2 { margin-top: var(--z-space-2); }
.z-mt-4 { margin-top: var(--z-space-4); }
.z-mt-6 { margin-top: var(--z-space-6); }
.z-mb-2 { margin-bottom: var(--z-space-2); }
.z-mb-4 { margin-bottom: var(--z-space-4); }
.z-mb-0 { margin-bottom: 0; }

/* ---------- 4. 按钮 ---------- */
.z-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--z-space-2);
    padding: .6rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--z-night);
    background: linear-gradient(135deg, var(--z-energy), #7CFAD9);
    border: var(--z-border-w) solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
    box-shadow: var(--z-glow-energy);
    font-family: var(--z-font);
}
.z-btn:hover { transform: translateY(-2px); color: var(--z-night); box-shadow: var(--z-glow-energy), 0 16px 36px -12px rgba(61,240,192,0.5); }
.z-btn:active { transform: translateY(0); }

.z-btn-lg { padding: .9rem 2.2rem; font-size: 1.1rem; }
.z-btn-sm { padding: .4rem 1rem; font-size: .875rem; }

.z-btn-ghost {
    background: transparent;
    color: var(--z-energy);
    border-color: var(--z-energy);
    box-shadow: none;
}
.z-btn-ghost:hover { background: rgba(61,240,192,0.12); color: var(--z-energy); }

.z-btn-hot {
    background: linear-gradient(135deg, var(--z-hot), #FF8A5C);
    color: var(--z-night);
    box-shadow: var(--z-glow-hot);
}
.z-btn-hot:hover { color: var(--z-night); box-shadow: var(--z-glow-hot), 0 16px 36px -12px rgba(255,184,77,0.55); }

.z-btn-block { display: flex; width: 100%; }

/* ---------- 5. 卡片 ---------- */
.z-card {
    position: relative;
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: var(--z-border-w) solid var(--z-border);
    border-radius: var(--z-radius);
    padding: var(--z-space-6);
    box-shadow: var(--z-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
.z-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--z-energy), var(--z-purp));
    opacity: 0;
    transition: opacity .2s ease;
}
.z-card:hover { transform: translateY(-6px); border-color: rgba(61,240,192,0.5); box-shadow: var(--z-shadow-lg), var(--z-glow-energy); }
.z-card:hover::before { opacity: 1; }

.z-card-hot:hover { border-color: rgba(255,184,77,0.55); }

/* ---------- 6. 头部导航 ---------- */
.z-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(11,15,31,0.82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--z-border);
    transition: box-shadow .2s ease;
}
.z-header.scrolled { box-shadow: 0 10px 34px -12px rgba(0,0,0,0.7); }

.z-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--z-space-4);
    min-height: 70px;
}

.z-brand { display: flex; align-items: center; gap: var(--z-space-3); }
.z-brand img { border-radius: 10px; }
.z-brand-name { font-size: 1.25rem; font-weight: 800; color: var(--z-text); white-space: nowrap; }
.z-brand-badge {
    font-size: .72rem; font-weight: 700; color: var(--z-night);
    background: linear-gradient(135deg, var(--z-hot), #FF8A5C);
    padding: .12rem .5rem; border-radius: 999px; margin-left: .25rem;
}

.z-nav { display: flex; align-items: center; gap: .35rem; }
.z-nav a {
    color: var(--z-text-dim);
    font-weight: 600;
    padding: .5rem .95rem;
    border-radius: 999px;
    transition: color .18s ease, background .18s ease;
    white-space: nowrap;
}
.z-nav a:hover { color: var(--z-knowledge); /* fallback */ color: var(--z-text); background: rgba(61,240,192,0.10); }
.z-nav a.z-active { color: var(--z-night); background: linear-gradient(135deg, var(--z-energy), #7CFAD9); }

/* 汉堡按钮 */
.z-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--z-border);
    color: var(--z-text);
    border-radius: 10px;
    width: 46px; height: 42px;
    font-size: 1.4rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* 移动端导航 */
.z-mobile-menu {
    display: none;
    border-top: 1px solid var(--z-border);
    background: var(--z-night-2);
    padding: var(--z-space-4) 0;
}
.z-mobile-menu.open { display: block; }

.z-mobile-menu a {
    display: flex; align-items: center; gap: var(--z-space-3);
    padding: .8rem var(--z-space-5);
    color: var(--z-text-dim);
    font-weight: 600;
    border-top: 1px solid var(--z-border);
}
.z-mobile-menu a.z-active { color: var(--z-energy); }
.z-mobile-menu a i { width: 22px; text-align: center; color: var(--z-energy); }

/* 主内容区下移，抵消固定头 */
.z-main { padding-top: 86px; }

@media (max-width: 992px) {
    .z-burger { display: flex; }
    .z-nav { display: none; }
}

/* ---------- 7. Hero ---------- */
.z-hero {
    position: relative;
    text-align: center;
    padding: var(--z-space-8) 0 var(--z-space-7);
    overflow: hidden;
    isolation: isolate;
}
.z-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(700px 380px at 50% 0%, rgba(61,240,192,0.16), transparent 60%),
        radial-gradient(500px 300px at 15% 80%, rgba(199,146,255,0.14), transparent 55%);
}
.z-hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 900;
    letter-spacing: .5px;
    background: linear-gradient(120deg, var(--z-text) 20%, var(--z-energy) 55%, var(--z-purp) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--z-space-4);
}
.z-hero-sub { font-size: 1.15rem; color: var(--z-text-dim); margin-bottom: var(--z-space-6); }
.z-hero-btns { display: flex; justify-content: center; gap: var(--z-space-4); flex-wrap: wrap; }
.z-hero-meta {
    display: flex; justify-content: center; gap: var(--z-space-5);
    flex-wrap: wrap; margin-top: var(--z-space-5);
    font-size: .875rem; color: var(--z-text-faint);
}

/* ---------- 8. 区块标题 ---------- */
.z-sec { padding: var(--z-space-8) 0; }
@media (max-width: 640px){ .z-sec { padding: var(--z-space-6) 0; } }

.z-sec-title { text-align: center; margin-bottom: var(--z-space-7); }
.z-sec-title h2 {
    font-size: 1.9rem; font-weight: 800;
    display: inline-flex; align-items: center; gap: var(--z-space-2);
}
.z-sec-title h2 i { color: var(--z-energy); }
.z-sec-title .z-rule {
    width: 64px; height: 3px; margin: var(--z-space-3) auto;
    background: linear-gradient(90deg, var(--z-energy), var(--z-purp));
    border-radius: 99px;
}
.z-sec-title p { color: var(--z-text-dim); margin-bottom: 0; }

/* ---------- 9. 图标盒 / 精灵球 ---------- */
.z-pokeball {
    width: 52px; height: 52px; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(255,255,255,.5), transparent 40%),
        linear-gradient(180deg, var(--z-energy) 49.5%, #0E1330 50%, #0E1330 50%);
    border: 2px solid var(--z-text-dim);
    position: relative;
}
.z-pokeball::after {
    content: "";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--z-night);
    border: 2px solid var(--z-text-dim);
}

.z-icon-box {
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--z-night);
    background: linear-gradient(135deg, var(--z-energy), #7CFAD9);
    box-shadow: var(--z-glow-energy);
    margin: 0 auto var(--z-space-4);
}
.z-icon-box-hot { background: linear-gradient(135deg, var(--z-hot), #FF8A5C); box-shadow: var(--z-glow-hot); color: var(--z-night); }
.z-icon-box-purp { background: linear-gradient(135deg, var(--z-purp), #E1C6FF); color: var(--z-night); }

/* ---------- 10. 统计 ---------- */
.z-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--z-space-5);
    text-align: center;
}
.z-stat-num { font-size: clamp(2rem,4vw,3rem); font-weight: 900; color: var(--z-energy); }
.z-stat-label { color: var(--z-text-dim); margin-top: var(--z-space-1); }
@media (max-width: 640px){ .z-stats{ grid-template-columns: repeat(2,1fr); } }

/* ---------- 11. 截图画廊 ---------- */
.z-gallery {
    display: grid; grid-template-columns: repeat(4,1fr); gap: var(--z-space-4);
}
.z-shot {
    border-radius: var(--z-radius-sm); overflow: hidden; cursor: zoom-in;
    border: 1px solid var(--z-border); transition: transform .2s ease, border-color .2s ease;
}
.z-shot img { width: 100%; display: block; transition: transform .4s ease; }
.z-shot:hover { transform: translateY(-4px); border-color: rgba(61,240,192,0.6); }
.z-shot:hover img { transform: scale(1.06); }
@media (max-width:768px){ .z-gallery{ grid-template-columns: repeat(2,1fr); } }

/* ---------- 12. 兑换码盒 ---------- */
.z-code-box {
    position: relative;
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: 2px solid var(--z-border);
    border-left-width: 5px;
    border-radius: var(--z-radius);
    padding: var(--z-space-5) var(--z-space-6);
    margin-bottom: var(--z-space-5);
    box-shadow: var(--z-shadow);
    transition: transform .18s ease, border-color .18s ease;
}
.z-code-box:hover { transform: translateY(-3px); }
.z-code-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--z-space-2); }
.z-tag {
    display: inline-block; padding: .12rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; color: var(--z-night);
}
.z-code-text {
    font-family: var(--z-font-mono);
    font-size: 1.5rem; font-weight: 800; letter-spacing: 2px;
}
.z-code-copy {
    display: inline-flex; align-items: center; gap: var(--z-space-2);
    margin-top: var(--z-space-2);
    padding: .45rem 1.1rem; border: none; border-radius: 999px;
    font-weight: 700; font-size: .875rem; color: var(--z-night);
    background: var(--z-energy); cursor: pointer;
    transition: transform .15s ease;
    font-family: var(--z-font);
}
.z-code-copy:hover { transform: translateY(-2px); }

/* ---------- 13. 指南条目 ---------- */
.z-guide-item {
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: var(--z-border-w) solid var(--z-border);
    border-left-width: 4px;
    border-left-color: var(--z-energy);
    border-radius: var(--z-radius);
    padding: var(--z-space-5);
    height: 100%;
    transition: transform .18s ease, border-color .18s ease;
}
.z-guide-item:hover { transform: translateY(-4px); border-color: rgba(61,240,192,0.5); }
.z-guide-item h4 { display: flex; align-items: center; gap: var(--z-space-2); }
.z-guide-item h4 i { color: var(--z-energy); }
.z-guide-item p { color: var(--z-text-dim); margin-bottom: 0; }

/* ---------- 14. 页脚 ---------- */
.z-footer {
    background: var(--z-night);
    border-top: 1px solid var(--z-border);
    padding: var(--z-space-7) 0 var(--z-space-6);
    margin-top: var(--z-space-7);
}
.z-footer a { color: var(--z-text-dim); }
.z-footer a:hover { color: var(--z-energy); }
.z-footer-title { font-size: 1.1rem; color: var(--z-text); margin-bottom: var(--z-space-4); }
.z-footer-col { display: flex; flex-direction: column; gap: var(--z-space-2); }
.z-footer-bottom {
    border-top: 1px solid var(--z-border);
    margin-top: var(--z-space-6);
    padding-top: var(--z-space-4);
    text-align: center; color: var(--z-text-faint); font-size: .875rem;
}

/* ---------- 15. 公告 / 文章系统 ---------- */
/* 列表卡片 */
.z-post-card {
    display: flex; gap: var(--z-space-4);
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: var(--z-border-w) solid var(--z-border);
    border-radius: var(--z-radius);
    padding: var(--z-space-4);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    align-items: flex-start;
}
.z-post-card:hover { transform: translateY(-4px); border-color: rgba(61,240,192,0.5); box-shadow: var(--z-shadow-lg); }
.z-post-card img { border-radius: var(--z-radius-sm); object-fit: cover; flex: 0 0 120px; height: 84px; }
@media (max-width:640px){ .z-post-card img{ flex-basis: 88px; } }
.z-post-title a { color: var(--z-text); font-weight: 700; }
.z-post-title a:hover { color: var(--z-energy); }
.z-post-excerpt { color: var(--z-text-dim); font-size: .9rem; margin: var(--z-space-1) 0; }
.z-post-meta { color: var(--z-text-faint); font-size: .8rem; }

/* 侧边栏模块 */
.z-sidebar { position: sticky; top: 96px; }
.z-mod {
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: var(--z-border-w) solid var(--z-border);
    border-radius: var(--z-radius);
    padding: var(--z-space-5);
    margin-bottom: var(--z-space-5);
}
.z-mod-title {
    display: flex; align-items: center; gap: var(--z-space-2);
    font-size: 1.05rem; font-weight: 800; color: var(--z-text);
    padding-bottom: var(--z-space-3);
    margin-bottom: var(--z-space-4);
    border-bottom: 2px solid var(--z-border);
}
.z-mod-title i { color: var(--z-energy); }
.z-mod-list { list-style: none; padding: 0; margin: 0; }
.z-mod-list li { border-bottom: 1px dashed var(--z-border); }
.z-mod-list li:last-child { border-bottom: none; }
.z-mod-list a {
    display: block; padding: .6rem 0; color: var(--z-text-dim); font-size: .925rem;
}
.z-mod-list a:hover { color: var(--z-energy); padding-left: 4px; }
.z-mod-badge {
    float: right; font-size: .72rem; color: var(--z-energy);
    background: rgba(61,240,192,0.12); padding: .05rem .5rem; border-radius: 999px;
}

/* 联系客服模块 */
.z-contact-row { display: flex; align-items: center; gap: var(--z-space-3); margin-bottom: var(--z-space-3); }
.z-contact-ic {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    color: var(--z-energy); background: rgba(61,240,192,0.12);
    flex: 0 0 auto;
}
.z-contact-qq { color: var(--z-hot); background: rgba(255,184,77,0.12); }
.z-contact-label { font-weight: 700; color: var(--z-text); }
.z-contact-val { color: var(--z-text-dim); font-size: .875rem; }

/* 文章正文排版 */
.z-article h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; margin-bottom: var(--z-space-4);
}
.z-article h2 { font-size: 1.4rem; font-weight: 700; margin-top: var(--z-space-6); padding-left: var(--z-space-3); border-left: 4px solid var(--z-energy); }
.z-article h3 { font-size: 1.15rem; font-weight: 700; margin-top: var(--z-space-5); }
.z-article p { color: var(--z-text); }
.z-article li { color: var(--z-text); }
.z-article blockquote {
    margin: var(--z-space-5) 0; padding: var(--z-space-4) var(--z-space-5);
    border-left: 4px solid var(--z-hot);
    background: rgba(255,184,77,0.08);
    border-radius: 0 var(--z-radius-sm) var(--z-radius-sm) 0;
    color: var(--z-text-dim);
}
.z-article pre {
    background: var(--z-night); border: 1px solid var(--z-border);
    border-radius: var(--z-radius-sm); padding: var(--z-space-4);
    overflow-x: auto; color: var(--z-energy); font-family: var(--z-font-mono);
}
.z-article code { font-family: var(--z-font-mono); color: var(--z-energy); background: rgba(61,240,192,0.12); padding: .08rem .35rem; border-radius: 5px; }
.z-article table { width: 100%; border-collapse: collapse; margin: var(--z-space-4) 0; }
.z-article th, .z-article td { border: 1px solid var(--z-border); padding: .6rem .8rem; text-align: left; }
.z-article th { background: var(--z-panel-2); color: var(--z-text); }
.z-article img { border-radius: var(--z-radius-sm); }

/* 上一篇 / 下一篇 翻页 */
.z-pager {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--z-space-4);
    margin-top: var(--z-space-6);
}
@media (max-width:640px){ .z-pager{ grid-template-columns: 1fr; } }
.z-pager-item {
    display: flex; flex-direction: column; gap: .15rem;
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: var(--z-border-w) solid var(--z-border);
    border-radius: var(--z-radius-sm);
    padding: var(--z-space-4) var(--z-space-5);
    transition: transform .16s ease, border-color .16s ease;
    color: var(--z-text);
}
.z-pager-item:hover { transform: translateY(-3px); border-color: rgba(61,240,192,0.55); color: var(--z-text); }
.z-pager-dir { display: flex; align-items: center; gap: var(--z-space-2); color: var(--z-energy); font-size: .8rem; font-weight: 700; letter-spacing: 1px; }
.z-pager-next { text-align: right; }
.z-pager-next .z-pager-dir { justify-content: flex-end; }
.z-pager-title { font-weight: 700; color: var(--z-text); }

/* ---------- 16. CTA 下载横幅 ---------- */
.z-cta {
    text-align: center;
    background: linear-gradient(135deg, var(--z-panel) 0%, #1C2547 60%, var(--z-panel-2));
    border: var(--z-border-w) solid var(--z-border);
    border-radius: var(--z-radius-lg);
    padding: var(--z-space-7);
    box-shadow: var(--z-shadow-lg);
    position: relative;
    overflow: hidden;
}
.z-cta::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(500px 220px at 50% -10%, rgba(61,240,192,0.2), transparent 60%);
}
.z-cta > * { position: relative; }
.z-cta h2 { color: var(--z-text); font-size: 1.7rem; font-weight: 800; }
.z-cta p { color: var(--z-text-dim); }

/* ---------- 17. Toast / 弹层 ---------- */
.z-toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 2000; opacity: 0; pointer-events: none;
    background: var(--z-energy); color: var(--z-night); font-weight: 700;
    padding: .75rem 1.5rem; border-radius: 999px; box-shadow: var(--z-glow-energy);
    transition: opacity .25s ease, transform .25s ease;
    max-width: 90vw;
}
.z-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.z-modal {
    position: fixed; inset: 0; z-index: 1500;
    display: none; align-items: center; justify-content: center;
    background: rgba(5,7,16,0.88);
    padding: var(--z-space-5);
}
.z-modal.open { display: flex; }
.z-modal img { max-width: 92vw; max-height: 86vh; border-radius: var(--z-radius); box-shadow: var(--z-shadow-lg); }
.z-modal-close {
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--z-border); background: rgba(19,26,56,0.9);
    color: var(--z-text); font-size: 1.3rem; cursor: pointer;
}

/* ---------- 18. 动效 ---------- */
@keyframes z-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(61,240,192,0.5); }
    50% { box-shadow: 0 0 0 12px rgba(61,240,192,0); }
}
.z-pulse { animation: z-pulse 2.4s ease-in-out infinite; }

@keyframes z-rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
.z-rise { animation: z-rise .6s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 19. 下载页 ---------- */
.z-dl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--z-space-5); }
@media (max-width:768px){ .z-dl-grid{ grid-template-columns: 1fr; } }
.z-dl-card {
    text-align: center;
    background: linear-gradient(160deg, var(--z-panel), var(--z-night-2));
    border: var(--z-border-w) solid var(--z-border);
    border-radius: var(--z-radius);
    padding: var(--z-space-6);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.z-dl-card:hover { transform: translateY(-6px); border-color: rgba(61,240,192,0.55); box-shadow: var(--z-shadow-lg); }
.z-dl-card .z-icon-box { margin-bottom: var(--z-space-4); }
.z-title-xl { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 900; }

/* ---------- 20. 其他通用 ---------- */
.z-breadcrumb { list-style: none; display: flex; gap: var(--z-space-2); padding: 0; margin: 0 0 var(--z-space-5); flex-wrap: wrap; }
.z-breadcrumb a { color: var(--z-text-dim); }
.z-breadcrumb li { color: var(--z-text-faint); }
.z-breadcrumb li + li::before { content: "/"; margin-right: var(--z-space-2); color: var(--z-text-faint); }

.z-rule-h { border: none; border-top: 1px solid var(--z-border); margin: var(--z-space-6) 0; }

.z-chip {
    display: inline-block; padding: .3rem .9rem; border-radius: 999px;
    background: var(--z-panel-2); border: 1px solid var(--z-border);
    color: var(--z-text-dim); font-size: .85rem; margin: .2rem;
}
.z-chip.z-chip-energy { color: var(--z-energy); border-color: rgba(61,240,192,0.4); }