/* ============================================================
   ZLD 科技风暗色主题 — 报告子页 (dark-theme.css)
   与主页 index.html 同款风格, 覆盖三份报告页
   兼容: ①Tailwind版(聚碳酸脂薄膜) ②自定义CSS版(长链尼龙/电缆护套)
   ============================================================ */

:root {
    --zd-primary: #00e5ff;
    --zd-blue: #2979ff;
    --zd-purple: #a855f7;
    --zd-green: #34d399;
    --zd-text: #e6f1ff;
    --zd-text-2: #cdd9f2;
    --zd-text-3: #a6b6d6;
    --zd-text-dim: #7d92b8;
    --zd-card: rgba(13, 20, 38, 0.82);
    --zd-card-2: rgba(5, 10, 22, 0.6);
    --zd-border: rgba(56, 189, 248, 0.18);
}

html { background: #05070f !important; scroll-behavior: smooth; }
body,
body.bg-gray-50 {
    background: transparent !important;
    color: var(--zd-text) !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ============ 背景层 (由 dark-theme.js 注入) ============ */
.zd-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.zd-bg-canvas { position: absolute; inset: 0; }
.zd-orb {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45;
    animation: zdFloat 18s ease-in-out infinite alternate;
}
.zd-orb-1 { width: 42vw; height: 42vw; left: -12vw; top: -14vh; background: radial-gradient(circle, rgba(0,229,255,.55), transparent 70%); }
.zd-orb-2 { width: 38vw; height: 38vw; right: -10vw; top: 28vh; background: radial-gradient(circle, rgba(41,121,255,.5), transparent 70%); animation-delay: -6s; }
.zd-orb-3 { width: 32vw; height: 32vw; left: 30vw; bottom: -12vh; background: radial-gradient(circle, rgba(168,85,247,.4), transparent 70%); animation-delay: -12s; }
@keyframes zdFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(5vw,-5vh) scale(1.12); } }
.zd-grid {
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
.zd-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(3,5,12,.85) 100%); }

/* ============ 顶部导航 (由 dark-theme.js 注入) ============ */
.zd-nav {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px clamp(16px, 4vw, 40px);
    background: rgba(5,7,15,.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(56,189,248,.14);
    margin-bottom: 16px;
}
.zd-nav .zd-logo { display: flex; align-items: center; gap: 10px; color: var(--zd-text); text-decoration: none; font-weight: 700; letter-spacing: 1px; font-size: 15px; }
.zd-logo .zd-ico {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--zd-primary), var(--zd-blue));
    color: #04121a; font-size: 15px;
    box-shadow: 0 0 16px rgba(0,229,255,.5);
}
.zd-nav .zd-status { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--zd-text-dim); letter-spacing: 1px; }
.zd-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--zd-green); box-shadow: 0 0 10px var(--zd-green); animation: zdPulse 1.8s ease-in-out infinite; }
@keyframes zdPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
.zd-nav .zd-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--zd-primary); text-decoration: none;
    font-size: 13px; font-weight: 600; letter-spacing: .5px;
    border: 1px solid rgba(0,229,255,.35); background: rgba(0,229,255,.08);
    padding: 7px 16px; border-radius: 999px; transition: all .25s;
}
.zd-nav .zd-back:hover { background: rgba(0,229,255,.2); box-shadow: 0 0 18px rgba(0,229,255,.35); }

/* 文件内自带的返回主页链接 a[href="/"] 也改成胶囊按钮 */
a[href="/"] {
    display: inline-block !important;
    color: var(--zd-primary) !important;
    background: rgba(0,229,255,.08) !important;
    border: 1px solid rgba(0,229,255,.35) !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    text-decoration: none !important;
    transition: all .25s !important;
    opacity: 1 !important;
    font-size: .9em !important;
}
a[href="/"]:hover { background: rgba(0,229,255,.2) !important; box-shadow: 0 0 18px rgba(0,229,255,.35) !important; }

/* ============ 通用暗色面板 ============ */
.card, .container, .company-card, .chain-box, .cable-structure, .stat-card, .toc, .mechanism-box, .player-card {
    background: var(--zd-card) !important;
    border-color: var(--zd-border) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.45) !important;
    color: var(--zd-text) !important;
}
.container { background: rgba(10,16,32,.88) !important; }

/* ============ 头部 (文件2/3) ============ */
.header {
    background: linear-gradient(135deg, rgba(0,52,100,.5), rgba(8,16,52,.6)) !important;
    border-bottom: 1px solid rgba(0,229,255,.25);
    position: relative;
}
.header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.8), transparent);
}
.header h1 { text-shadow: 0 0 26px rgba(0,229,255,.55) !important; }

/* ============ 章节 (文件2/3) ============ */
.section {
    background: var(--zd-card) !important;
    border-left: 4px solid rgba(0,229,255,.5) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
}
.section h2 { color: #eef6ff !important; }
.section h2::before { background: var(--zd-primary) !important; box-shadow: 0 0 8px rgba(0,229,255,.8) !important; }
.section h3 { color: #cfe0ff !important; border-bottom-color: rgba(56,189,248,.2) !important; }
.section h4 { color: #cfe0ff !important; }
.section p, .section li { color: var(--zd-text-3) !important; }

/* ============ 表格 ============ */
table { background: rgba(5,10,22,.5) !important; }
th {
    background: linear-gradient(135deg, rgba(0,229,255,.22), rgba(41,121,255,.22)) !important;
    color: #eef6ff !important;
    border-bottom: 1px solid rgba(56,189,248,.25) !important;
}
td { border-bottom: 1px solid rgba(56,189,248,.12) !important; color: var(--zd-text-3) !important; }
tr:hover td, tr:hover { background: rgba(0,229,255,.06) !important; }

/* ============ 提示框 ============ */
.highlight-box { background: rgba(0,229,255,.07) !important; border: 1px solid rgba(0,229,255,.35) !important; }
.highlight-box h4 { color: var(--zd-primary) !important; }
.warning-box { background: rgba(249,115,22,.1) !important; border-color: rgba(249,115,22,.4) !important; }
.success-box { background: rgba(52,211,153,.1) !important; border-color: rgba(52,211,153,.4) !important; }
.warning-box h4 { color: #fbbf24 !important; }
.success-box h4 { color: #6ee7b7 !important; }

/* ============ 统计卡片 ============ */
.stat-card h3 { color: var(--zd-primary) !important; text-shadow: 0 0 14px rgba(0,229,255,.5) !important; }
.stat-card p { color: var(--zd-text-dim) !important; }

/* ============ 标签 / 企业卡片 / 机理 / 流程 ============ */
.tag { color: #fff !important; }
.company-card h4, .company-card h3 { color: var(--zd-primary) !important; }
.company-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 22px rgba(0,229,255,.12) !important; }
.mechanism-box h4 { color: var(--zd-text) !important; }
.player-card { background: var(--zd-card-2) !important; }

/* ============ 章节标题 (文件1 Tailwind版) ============ */
.section-title::before {
    background: linear-gradient(var(--zd-primary), var(--zd-blue)) !important;
    box-shadow: 0 0 10px rgba(0,229,255,.6) !important;
}
.stat-number { color: var(--zd-primary) !important; text-shadow: 0 0 12px rgba(0,229,255,.5) !important; }
.timeline-item::before { background: var(--zd-primary) !important; box-shadow: 0 0 8px rgba(0,229,255,.8) !important; }
.timeline-item::after { background: rgba(56,189,248,.25) !important; }

/* ============ 目录 / 页脚 / 产业链 ============ */
.toc { background: rgba(5,10,22,.6) !important; border-color: var(--zd-border) !important; }
.toc h3 { color: var(--zd-primary) !important; border-bottom-color: rgba(0,229,255,.4) !important; }
.toc li { border-bottom: 1px dashed rgba(56,189,248,.2) !important; }
.toc a { color: var(--zd-text-3) !important; }
.toc a:hover { color: var(--zd-primary) !important; }
.footer { background: rgba(5,7,15,.85) !important; border-top: 1px solid rgba(56,189,248,.15) !important; }
.chain-box { border-top: 4px solid var(--zd-primary) !important; }
.chain-box h4 { color: #eef6ff !important; }
.arrow { color: var(--zd-primary) !important; }

/* ============ Tailwind 工具类暗色映射 (文件1) ============ */
.bg-gray-50   { background-color: rgba(13,20,38,.6) !important; }
.bg-gray-200  { background-color: rgba(255,255,255,.08) !important; }
.text-gray-800 { color: #eef6ff !important; }
.text-gray-700 { color: var(--zd-text-2) !important; }
.text-gray-600 { color: var(--zd-text-3) !important; }
.text-gray-500 { color: var(--zd-text-dim) !important; }
.text-gray-400 { color: #6479a0 !important; }
.text-gray-300 { color: rgba(125,146,184,.55) !important; }

.bg-blue-50   { background-color: rgba(0,121,255,.10) !important; }
.bg-green-50  { background-color: rgba(52,211,153,.10) !important; }
.bg-purple-50 { background-color: rgba(168,85,247,.10) !important; }
.bg-red-50    { background-color: rgba(244,63,94,.10) !important; }
.bg-orange-50 { background-color: rgba(249,115,22,.10) !important; }

.bg-blue-100   { background-color: rgba(0,121,255,.18) !important; }
.bg-green-100  { background-color: rgba(52,211,153,.18) !important; }
.bg-purple-100 { background-color: rgba(168,85,247,.18) !important; }
.bg-orange-100 { background-color: rgba(249,115,22,.18) !important; }
.bg-red-100    { background-color: rgba(244,63,94,.18) !important; }
.bg-red-200    { background-color: rgba(244,63,94,.30) !important; }

.text-blue-600   { color: #38bdf8 !important; }
.text-green-600  { color: #34d399 !important; }
.text-purple-600 { color: #c084fc !important; }
.text-red-600    { color: #fb7185 !important; }
.text-orange-600 { color: #fb923c !important; }
.text-blue-800   { color: #7dd3fc !important; }
.text-green-800  { color: #6ee7b7 !important; }
.text-purple-800 { color: #d8b4fe !important; }
.text-red-800    { color: #fda4af !important; }
.text-orange-800 { color: #fdba74 !important; }

/* ============ 文件1 顶部渐变头 → 暗色技术头 ============ */
.gradient-header {
    background: rgba(5,10,22,.75) !important;
    border-bottom: 1px solid rgba(0,229,255,.22) !important;
    backdrop-filter: blur(14px);
    position: sticky !important;
    top: 58px !important;
    z-index: 40 !important;
}

/* ============ 入场动画 ============ */
.card, .section, .stat-card, .company-card, .chain-box, .toc, .cable-structure, .mechanism-box, .player-card, .highlight-box {
    animation: zdFadeUp .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes zdFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============ 移动端 / 减弱动效 ============ */
@media (max-width: 640px) {
    .zd-nav { position: static; margin-bottom: 8px; }
    .gradient-header { top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .zd-orb, .zd-pulse, .card, .section, .stat-card, .company-card, .chain-box, .toc, .cable-structure, .mechanism-box, .player-card, .highlight-box {
        animation: none !important;
    }
}