/* ==================== 能力树样式 v3.0 ====================
 * 三棵树各有独特风格：
 * - 技能树：系统架构图（三层架构 + 引擎内核 + 连接线）
 * - 知识树：档案馆卡片风格（网格布局、文件夹样式）
 * - 记忆树：神经网络径向布局（中心扩散、脉冲动画）
 * 
 * CSS变量已统一到 zelda-theme.css，此处不再重复定义
 */

/* ==================== 通用树容器 ==================== */
.ability-tree-container {
    padding: 8px;
    min-height: 300px;
    position: relative;
}

/* ==================== 1. 技能树 - 系统架构图 ==================== */

.skill-architecture {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
}

/* 架构头部 */
.arch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(200, 220, 240, 0.1);
}
.arch-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: var(--sheikah-blue-light);
}
.arch-icon { font-size: 20px; }
.arch-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(200, 220, 240, 0.6);
}
.arch-stat-sep { opacity: 0.4; }

/* === 元能力层 === */
.meta-layer {
    background: linear-gradient(180deg, rgba(20, 18, 35, 0.95) 0%, rgba(15, 14, 28, 0.92) 100%);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 12px;
    overflow: visible;
    position: relative;
}
.meta-layer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a78bfa, transparent);
}
.meta-layer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(10, 8, 22, 0.9);
    border-bottom: 1px solid rgba(167, 139, 250, 0.15);
}
.meta-label-icon { font-size: 18px; }
.meta-label-text {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 600;
    color: #c4b5fd;
}
.meta-label-desc {
    font-size: 11px;
    color: rgba(200, 220, 240, 0.5);
    margin-left: 4px;
}
.meta-layer-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 底部并排行（认知框架+系统工具） */
.meta-bottom-row {
    display: flex;
    gap: 10px;
}
.meta-bottom-row > * {
    flex: 1;
    min-width: 0;
}

/* === 自进化引擎（Demo风格） === */
.engine-section {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 16px;
    overflow: visible;
    position: relative;
    z-index: 101;
    min-height: auto;  /* v13.9: 自适应高度，上下留白一致 */
    padding-bottom: 20px;  /* 确保底部留白与顶部一致 */
}
/* Demo风格头部 */
.engine-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(10, 8, 25, 0.9);
    border-bottom: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 16px 16px 0 0;
}
.engine-icon { font-size: 20px; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.engine-title { font-size: 15px; font-weight: 700; color: #c4b5fd; }
.engine-desc { font-size: 11px; color: rgba(200, 220, 240, 0.5); margin-left: auto; }
/* Demo风格内容区 */
.engine-body {
    padding: 16px 32px 12px;
    position: relative;
    overflow: visible;
}

/* 兼容旧样式 */
.engine-title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(167, 139, 250, 0.08);
    border-bottom: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 12px 12px 0 0;
}
.engine-title-icon { font-size: 16px; }
.engine-title-text {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    color: #c4b5fd;
}
.engine-title-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.5);
    margin-left: auto;
}

/* 引擎流程图 */
.engine-diagram {
    padding: 12px 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 580px;
    margin: 0 auto;
}
.engine-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 引导行：吸星大法←小无相功→北冥神功 */
.engine-guide-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    gap: 8px;
}
/* 吸星大法在左侧 */
.engine-absorb-node {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 防止被压缩 */
}
.engine-absorb-node .engine-node {
    border-color: rgba(167,139,250,0.25);
    background: rgba(167,139,250,0.06);
    border-style: dashed;
    opacity: 0.85;
    min-width: 105px; /* 确保有足够宽度显示横排文字 */
    flex-shrink: 0;
}
.engine-absorb-node .engine-node:hover {
    opacity: 1;
    border-color: rgba(167,139,250,0.5);
    border-style: solid;
}
/* 增强箭头：从吸星大法指向小无相功（向右） */
.engine-absorb-link {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.engine-absorb-link .absorb-arrow {
    display: block;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, rgba(167,139,250,0.15), rgba(167,139,250,0.5));
    position: relative;
}
.engine-absorb-link .absorb-arrow--left::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(167,139,250,0.5);
}
.engine-absorb-link .absorb-label {
    font-size: 10px;
    color: rgba(167,139,250,0.7);
    white-space: nowrap;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 1px;
}
/* 导出箭头：从小无相功指向北冥神功（向右） */
.engine-export-link {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.engine-export-link .export-arrow {
    display: block;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, rgba(74,222,128,0.5), rgba(74,222,128,0.15));
    position: relative;
}
.engine-export-link .export-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(74,222,128,0.5);
}
.engine-export-link .export-label {
    font-size: 10px;
    color: rgba(74,222,128,0.7);
    white-space: nowrap;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 1px;
}
/* 北冥神功在右侧 */
.engine-export-node {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 防止被压缩 */
}
.engine-export-node .engine-node {
    border-color: rgba(74,222,128,0.25);
    background: rgba(74,222,128,0.06);
    border-style: dashed;
    opacity: 0.85;
    min-width: 105px; /* 确保有足够宽度显示横排文字 */
    flex-shrink: 0;
}
.engine-export-node .engine-node:hover {
    opacity: 1;
    border-color: rgba(74,222,128,0.5);
    border-style: solid;
}

/* 引擎节点 */
.engine-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(15, 12, 28, 0.95);
    border: 1.5px solid rgba(200, 220, 240, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}
.engine-node:hover {
    border-color: var(--node-color, #a78bfa);
    background: rgba(167, 139, 250, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(167, 139, 250, 0.2);
}
.engine-node--guide {
    border-color: rgba(167, 139, 250, 0.4);
    background: linear-gradient(135deg, rgba(22, 18, 40, 0.98) 0%, rgba(15, 12, 28, 0.95) 100%);
}
.engine-node--guide::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    animation: guide-glow 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes guide-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; border-color: rgba(167, 139, 250, 0.4); }
}
.engine-node-ring {
    width: 22px; height: 22px;
    position: relative;
    flex-shrink: 0;
}
.engine-node-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.engine-node-ring .ring-bg {
    fill: none;
    stroke: rgba(100, 120, 140, 0.3);
    stroke-width: 2;
}
.engine-node-ring .ring-progress {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.engine-node-level {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--node-color, #a78bfa);
}
.engine-node-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.engine-node-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(200, 220, 240, 0.95);
}
.engine-node-role {
    font-size: 9px;
    color: rgba(200, 220, 240, 0.6);
    font-family: var(--font-mono);
}
.engine-node--tool {
    padding: 4px 10px;
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(74, 222, 128, 0.05);
}
.engine-node--tool:hover {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(74, 222, 128, 0.1);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.15);
}

/* 水平连接线（从demo复制） */
.connector-h {
    height: 3px;
    background: linear-gradient(90deg, 
        var(--line-from, rgba(200, 220, 240, 0.3)),
        var(--line-to, rgba(200, 220, 240, 0.3))
    );
    position: relative;
    border-radius: 2px;
}

/* 水平箭头（从demo复制） */
.arrow-right {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--arrow-color, rgba(200, 220, 240, 0.4));
    margin-left: -1px;
}

/* 最近使用标记 */
.skill-recent-badge {
    position: absolute;
    top: -3px; right: -3px;
    width: 7px; height: 7px;
    background: #4ade80;
    border-radius: 50%;
    border: 2px solid rgba(20, 25, 30, 0.95);
    animation: recent-pulse 2s ease-in-out infinite;
}
@keyframes recent-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 引擎连接器 */
.engine-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 0;
    position: relative;
}
.engine-connector--vertical { height: 18px; }
.connector-line {
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(167, 139, 250, 0.2));
    position: relative;
}
.connector-line::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(167, 139, 250, 0.5);
}
.connector-label {
    font-size: 9px;
    color: rgba(167, 139, 250, 0.75);
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 6px;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 1;
    left: calc(50% + 8px);
}

/* 核心分支 */
.engine-core-branches {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
.engine-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 90px;
    max-width: 150px;
}
.branch-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    position: relative;
}
.branch-connector::before {
    content: '';
    position: absolute;
    top: 0; width: 1px; height: 100%;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.3), rgba(167, 139, 250, 0.15));
}
.branch-connector::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid rgba(167, 139, 250, 0.35);
}
.branch-label {
    font-size: 9px;
    color: rgba(167, 139, 250, 0.75);
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 6px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

/* 反馈线（纯CSS虚线 + 动画光点） */
.engine-feedback-line {
    width: 75%;
    max-width: 380px;
    height: 14px;
    position: relative;
    margin: 2px auto;
    border-bottom: 1.5px dashed rgba(167, 139, 250, 0.4);
    border-left: 1.5px dashed rgba(167, 139, 250, 0.3);
    border-right: 1.5px dashed rgba(167, 139, 250, 0.3);
    border-radius: 0 0 8px 8px;
    overflow: visible;
    margin-bottom: 10px;
}
.engine-feedback-line::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 6px; height: 6px;
    background: #a78bfa;
    border-radius: 50%;
    filter: blur(1px);
    animation: feedback-dot 3s linear infinite;
}
@keyframes feedback-dot {
    0% { left: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - 6px); opacity: 0; }
}
.feedback-label {
    position: absolute;
    bottom: -7px; right: 8px;
    font-size: 9px;
    color: rgba(167, 139, 250, 0.7);
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.6);
    padding: 0 5px;
    border-radius: 3px;
    line-height: 14px;
}

/* 深度工具层 */
.engine-tools-connector {
    text-align: center;
    padding: 2px 0 6px;
    position: relative;
}
.engine-tools-connector::before {
    content: '';
    display: block;
    width: 1px; height: 8px;
    background: rgba(74, 222, 128, 0.3);
    margin: 0 auto 3px;
}
.tools-connector-label {
    font-size: 10px;
    color: rgba(74, 222, 128, 0.8);
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.engine-tools-grid {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 8px;
}

/* === 认知框架 === */
.cognitive-section {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 140px;
}
.cognitive-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cognitive-icon { font-size: 16px; }
.cognitive-title {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    color: #fbbf24;
}
.cognitive-pillars {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cognitive-pillar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}
.cognitive-pillar:hover {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
    transform: translateX(2px);
}
.cognitive-ring {
    width: 22px; height: 22px;
    position: relative;
    flex-shrink: 0;
}
.cognitive-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.cognitive-ring .ring-bg {
    fill: none;
    stroke: rgba(100, 120, 140, 0.3);
    stroke-width: 2;
}
.cognitive-ring .ring-progress {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.cognitive-level {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--pillar-color, #fbbf24);
}
.cognitive-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(200, 220, 240, 0.9);
    flex: 1;
}
.cognitive-note {
    font-size: 9px;
    color: rgba(245, 158, 11, 0.5);
    text-align: center;
    font-style: italic;
}

/* === 系统工具（做事工具） === */
.system-section {
    background: rgba(94, 196, 212, 0.05);
    border: 1px solid rgba(94, 196, 212, 0.2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 140px;
}
.system-header { display: flex; align-items: center; gap: 6px; }
.system-icon { font-size: 16px; }
.system-title {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    color: #5ec4d4;
}
.system-section .cognitive-pillars {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.system-section .cognitive-pillar {
    border-color: rgba(94, 196, 212, 0.15);
}
.system-section .cognitive-pillar:hover {
    border-color: rgba(94, 196, 212, 0.4);
    background: rgba(94, 196, 212, 0.08);
}

/* === 通用技能芯片 === */
.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 220, 240, 0.12);
    border-left: 2px solid var(--chip-source-color, rgba(200, 220, 240, 0.2));
    border-radius: 2px 4px 4px 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}
.skill-chip:hover {
    border-color: var(--chip-color, var(--sheikah-blue));
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.skill-chip-level {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--chip-color, var(--sheikah-blue));
    min-width: 12px;
    text-align: center;
}
.skill-chip-name {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.85);
    white-space: nowrap;
}
/* 快手内部标记 */
.skill-chip-ks {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.15);
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 3px;
    flex-shrink: 0;
}
/* 个人定制标记 */
.skill-chip-sl {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 3px;
    flex-shrink: 0;
}
/* AI助手专属标记 */
.skill-chip-link {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.15);
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 3px;
    flex-shrink: 0;
}
/* CodeFlicker项目标记（保留兼容） */
.skill-chip-cf {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    padding: 1px 3px;
    border-radius: 2px;
    margin-left: 2px;
}
/* 技能规模标签 */
.skill-chip-size {
    font-family: var(--font-mono);
    font-size: 8px;
    color: rgba(200, 220, 240, 0.5);
    background: rgba(200, 220, 240, 0.08);
    padding: 1px 3px;
    border-radius: 2px;
    margin-left: 2px;
}

/* === 层间过渡 === */
.layer-transition {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
}
.transition-line {
    width: 1.5px; height: 10px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.3), rgba(167, 139, 250, 0.1));
}
.transition-label {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.55);
    font-family: var(--font-mono);
    padding: 2px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 12px;
    margin: 2px 0;
    letter-spacing: 0.5px;
}
.transition-arrow {
    font-size: 10px;
    color: rgba(167, 139, 250, 0.4);
    animation: arrow-pulse 2s ease-in-out infinite;
}
@keyframes arrow-pulse {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 0.8; transform: translateY(3px); }
}

/* ==================== 领域能力层（v2.0 统一风格） ==================== */
.domain-layer {
    background: linear-gradient(135deg, rgba(18, 14, 35, 0.95) 0%, rgba(12, 10, 25, 0.92) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(8px);
}
.domain-layer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
}
.domain-layer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(10, 8, 22, 0.95) 0%, rgba(14, 12, 28, 0.9) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}
.domain-layer-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}
.domain-layer-title {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: #c4b5fd;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}
.domain-layer-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.45);
    margin-left: auto;
    font-family: var(--font-mono);
}
.domain-cards-grid {
    display: flex;
    gap: 14px;
    padding: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.domain-card {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    background: linear-gradient(135deg, rgba(22, 18, 40, 0.98) 0%, rgba(15, 12, 30, 0.95) 100%);
    border: 1px solid rgba(var(--domain-rgb, 139, 92, 246), 0.35);
    border-radius: 12px;
    padding: 14px;
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: 0 2px 8px rgba(var(--domain-rgb, 139, 92, 246), 0.1), 
                inset 0 1px 0 rgba(var(--domain-rgb, 139, 92, 246), 0.1);
}
.domain-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--domain-color, #8b5cf6), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.domain-card:hover::before { opacity: 1; }
.domain-card:hover {
    border-color: var(--domain-color, #8b5cf6);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--domain-rgb, 139, 92, 246), 0.2),
                inset 0 1px 0 rgba(var(--domain-rgb, 139, 92, 246), 0.15);
}
.domain-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.domain-card-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 6px var(--domain-color, rgba(139, 92, 246, 0.5)));
}
.domain-card-name {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--domain-color, #c4b5fd);
    text-shadow: 0 0 10px rgba(var(--domain-rgb, 139, 92, 246), 0.3);
}
.domain-card-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.5);
    margin-bottom: 10px;
    line-height: 1.5;
}
.domain-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ==================== 执行技能层（v2.0 统一风格） ==================== */
.exec-layer {
    background: linear-gradient(135deg, rgba(12, 22, 18, 0.95) 0%, rgba(10, 18, 14, 0.92) 100%);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(8px);
}
.exec-layer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
}
.exec-layer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(8, 18, 12, 0.95) 0%, rgba(10, 20, 14, 0.9) 100%);
    cursor: pointer;
    transition: all var(--transition-normal);
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
}
.exec-layer-header:hover {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.exec-layer-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.4));
}
.exec-layer-title {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: #86efac;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}
.exec-layer-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.45);
    flex: 1;
    font-family: var(--font-mono);
}
.exec-layer-count {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.exec-layer-toggle-icon {
    font-size: 10px;
    color: rgba(74, 222, 128, 0.6);
    transition: transform 0.3s ease;
}
.exec-layer.collapsed .exec-layer-toggle-icon { transform: rotate(-90deg); }
.exec-layer-content {
    padding: 16px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.exec-layer.collapsed .exec-layer-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.exec-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.exec-group {
    background: linear-gradient(135deg, rgba(14, 24, 18, 0.98) 0%, rgba(10, 18, 14, 0.95) 100%);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    padding: 12px;
    transition: all var(--transition-normal);
    position: relative;
}
.exec-group::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.exec-group:hover::before { opacity: 1; }
.exec-group:hover {
    border-color: rgba(74, 222, 128, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.15);
}
.exec-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(74, 222, 128, 0.1);
}
.exec-group-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.3));
}
.exec-group-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(200, 220, 240, 0.85);
    flex: 1;
}
.exec-group-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #4ade80;
    padding: 2px 8px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 6px;
}
.exec-group-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 执行层四段分层（林克定制 → 快手定制 → 个人定制 → 通用） */
.exec-sublayer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.exec-sublayer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.exec-sublayer-label {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 0 2px 1px;
}
/* 林克定制 - 紫色调 */
.exec-sublayer-link .exec-sublayer-label {
    color: rgba(167, 139, 250, 0.55);
    border-left: 1px solid rgba(167, 139, 250, 0.3);
    padding-left: 4px;
}
/* 快手定制 - 橙色调 */
.exec-sublayer-ks .exec-sublayer-label {
    color: rgba(251, 146, 60, 0.55);
    border-left: 1px solid rgba(251, 146, 60, 0.3);
    padding-left: 4px;
}
/* 个人定制 - 绿色调 */
.exec-sublayer-sl .exec-sublayer-label {
    color: rgba(74, 222, 128, 0.55);
    border-left: 1px solid rgba(74, 222, 128, 0.3);
    padding-left: 4px;
}
/* 共同 - 灰色调 */
.exec-sublayer-generic .exec-sublayer-label {
    color: rgba(200, 220, 240, 0.3);
    border-left: 1px solid rgba(200, 220, 240, 0.12);
    padding-left: 4px;
}
/* 分层之间加分隔线（非首个） */
.exec-sublayer + .exec-sublayer {
    border-top: 1px solid rgba(200, 220, 240, 0.06);
    padding-top: 4px;
    margin-top: 2px;
}

/* 旧版兼容 */
.skill-tech-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 20px;
}
.skill-root-node {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a2a3a 0%, #0d1a26 100%);
    border: 3px solid var(--sheikah-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}
.skill-root-icon { font-size: 36px; }
.skill-root-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--sheikah-blue-light); margin-top: 4px; }
.skill-root-count { position: absolute; bottom: -10px; background: linear-gradient(135deg, var(--sheikah-blue-dark), var(--sheikah-blue)); color: white; padding: 2px 12px; border-radius: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

/* ==================== 2. 知识树 - 纵向三层架构图（v3.0 统一风格） ==================== */
.knowledge-arch {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
}

/* 知识树层级容器 */
.kn-layer {
    border: 1px solid rgba(200, 220, 240, 0.2);
    border-radius: 16px;
    overflow: visible;
    position: relative;
    background: linear-gradient(135deg, rgba(15, 18, 25, 0.95) 0%, rgba(12, 14, 20, 0.92) 100%);
    backdrop-filter: blur(8px);
}
.kn-layer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--kn-color, rgba(200,220,240,0.5)), transparent);
}
.kn-layer-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0.95) 0%, rgba(12, 14, 20, 0.9) 100%);
    border-bottom: 1px solid rgba(200, 220, 240, 0.1);
    flex-wrap: wrap;
}
.kn-label-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 6px var(--kn-color, rgba(200,220,240,0.4)));
}
.kn-label-text {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--kn-color, rgba(200, 220, 240, 0.9));
    text-shadow: 0 0 10px var(--kn-color, rgba(200,220,240,0.3));
}
.kn-label-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.45);
    margin-left: 4px;
    font-family: var(--font-mono);
}
.kn-label-align {
    margin-left: auto;
    font-size: 9px;
    color: rgba(200, 220, 240, 0.35);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}
.kn-label-count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    color: var(--kn-color, rgba(200, 220, 240, 0.8));
    text-shadow: 0 0 8px var(--kn-color, rgba(200,220,240,0.3));
}
.kn-layer-content {
    padding: 14px;
}

/* 知识领域卡片网格 */
.kn-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* 知识领域卡片 */
.kn-domain-card {
    background: linear-gradient(135deg, rgba(20, 24, 32, 0.98) 0%, rgba(16, 18, 26, 0.95) 100%);
    border: 1px solid rgba(var(--kn-rgb, 200, 220, 240), 0.2);
    border-left: 3px solid var(--kn-color, rgba(200,220,240,0.4));
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(200, 220, 240, 0.05);
}
.kn-domain-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kn-color, rgba(200,220,240,0.4)), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.kn-domain-card:hover::before { opacity: 1; }
.kn-domain-card:hover {
    border-color: var(--kn-color, rgba(200,220,240,0.5));
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px var(--kn-color, rgba(200,220,240,0.1));
}
.kn-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.kn-card-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 6px var(--kn-color, rgba(200, 220, 240, 0.3)));
}
.kn-card-info {
    flex: 1;
    min-width: 0;
}
.kn-card-name {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: rgba(200, 220, 240, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kn-card-meta {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.5);
    margin-top: 2px;
}
.kn-card-count {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--kn-color, rgba(200, 220, 240, 0.8));
    text-shadow: 0 0 6px var(--kn-color, rgba(200,220,240,0.3));
}

/* 热度指示器 */
.kn-card-heat {
    display: flex;
    gap: 2px;
    align-items: center;
}
.kn-heat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(200, 220, 240, 0.15);
    transition: background 0.3s ease;
}
.kn-heat-dot.active {
    box-shadow: 0 0 4px currentColor;
}

/* 进度条 */
.kn-card-progress {
    height: 3px;
    background: rgba(100, 120, 140, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}
.kn-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
    opacity: 0.7;
}

/* 关联技能标签 */
.kn-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.kn-skill-tag {
    font-size: 9px;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(200, 220, 240, 0.15);
    border-radius: 8px;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.kn-domain-card:hover .kn-skill-tag {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(200, 220, 240, 0.3);
}
.kn-skill-tag-more {
    font-size: 9px;
    color: rgba(200, 220, 240, 0.4);
    padding: 1px 4px;
}

/* ==================== 3. 记忆树 - 纵向三层架构图（v3.0 统一风格） ==================== */
.memory-arch {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
}

/* 记忆树层级容器 */
.mem-layer {
    border: 1px solid rgba(200, 220, 240, 0.2);
    border-radius: 16px;
    overflow: visible;
    position: relative;
    background: linear-gradient(135deg, rgba(15, 18, 25, 0.95) 0%, rgba(12, 14, 20, 0.92) 100%);
    backdrop-filter: blur(8px);
}
.mem-layer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mem-layer-color, rgba(200,220,240,0.5)), transparent);
}
.mem-layer-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0.95) 0%, rgba(12, 14, 20, 0.9) 100%);
    border-bottom: 1px solid rgba(200, 220, 240, 0.1);
    flex-wrap: wrap;
}
.mem-label-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 6px var(--mem-layer-color, rgba(200,220,240,0.4)));
}
.mem-label-text {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--mem-layer-color, rgba(200, 220, 240, 0.9));
    text-shadow: 0 0 10px var(--mem-layer-color, rgba(200,220,240,0.3));
}
.mem-label-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.45);
    margin-left: 4px;
    font-family: var(--font-mono);
}
.mem-label-align {
    margin-left: auto;
    font-size: 9px;
    color: rgba(200, 220, 240, 0.35);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}
.mem-label-count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    color: var(--mem-layer-color, rgba(200, 220, 240, 0.8));
    text-shadow: 0 0 8px var(--mem-layer-color, rgba(200,220,240,0.3));
}
.mem-layer-content {
    padding: 14px;
}

/* 记忆分类卡片网格 */
.mem-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* 记忆分类卡片 */
.mem-category-card {
    background: linear-gradient(135deg, rgba(20, 24, 32, 0.98) 0%, rgba(16, 18, 26, 0.95) 100%);
    border: 1px solid rgba(var(--mem-cat-rgb, 200, 220, 240), 0.2);
    border-left: 3px solid var(--mem-cat-color, rgba(200,220,240,0.4));
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(200, 220, 240, 0.05);
}
.mem-category-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mem-cat-color, rgba(200,220,240,0.4)), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mem-category-card:hover::before { opacity: 1; }
.mem-category-card:hover {
    border-color: var(--mem-cat-color, rgba(200,220,240,0.5));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 12px var(--mem-cat-color, rgba(200,220,240,0.1));
    transform: translateY(-2px);
}
.mem-category-card.expanded {
    border-color: var(--mem-cat-color, rgba(200,220,240,0.5));
    background: linear-gradient(135deg, rgba(24, 28, 38, 0.98) 0%, rgba(18, 20, 30, 0.95) 100%);
}

/* 分类卡片头部 */
.mem-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mem-cat-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 4px var(--mem-cat-color, rgba(200, 220, 240, 0.3)));
}
.mem-cat-name {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    color: rgba(200, 220, 240, 0.9);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mem-cat-count {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--mem-cat-color, rgba(200, 220, 240, 0.8));
    text-shadow: 0 0 6px var(--mem-cat-color, rgba(200,220,240,0.3));
}
.mem-cat-toggle {
    font-size: 9px;
    color: rgba(200, 220, 240, 0.4);
    transition: all var(--transition-normal);
    user-select: none;
}
.mem-category-card.expanded .mem-cat-toggle {
    color: var(--mem-cat-color, rgba(200,220,240,0.6));
}

/* 记忆条目（展开后） */
.mem-cat-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(200, 220, 240, 0.1);
}
.mem-item-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%);
    border: 1px solid rgba(200, 220, 240, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: 10px;
    color: rgba(200, 220, 240, 0.85);
    max-width: 100%;
}
.mem-item-chip:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%);
    border-color: rgba(200, 220, 240, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.mem-item-icon { font-size: 11px; flex-shrink: 0; }
.mem-item-title {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mem-item-more {
    font-size: 9px;
    color: rgba(200, 220, 240, 0.4);
    padding: 4px 8px;
}

/* ==================== Demo风格：三大功法区域 ==================== */
.three-techniques {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}
.technique-connector {
    display: flex;
    align-items: center;
    width: 70px;
    position: relative;
}
.technique-connector .connector-h { flex: 1; }
.technique-connector .energy-particles {
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
}

/* 垂直连接线（从demo复制） */
.connector-v {
    width: 3px;
    background: var(--line-color, rgba(167, 139, 250, 0.4));
    position: relative;
    border-radius: 2px;
}
.connector-v--animated {
    background: linear-gradient(180deg, 
        var(--line-from, #a78bfa) 0%,
        var(--line-to, #fb923c) 100%
    );
    animation: line-pulse 2s ease-in-out infinite;
}
@keyframes line-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 垂直箭头（从demo复制） */
.arrow-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--arrow-color, #a78bfa);
    margin-top: -1px;
}

/* 连接线标签（从demo复制） */
.connector-label--side {
    left: calc(50% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--label-border, rgba(167, 139, 250, 0.3));
    color: var(--label-color, #a78bfa);
}
.connector-label--top {
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--label-border, rgba(167, 139, 250, 0.3));
    color: var(--label-color, #a78bfa);
}
.connector-label--bottom {
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--label-border, rgba(167, 139, 250, 0.3));
    color: var(--label-color, #a78bfa);
}
.connector-label--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 15, 20, 0.95);
    border: 1px solid var(--label-border, rgba(34, 211, 209, 0.4));
    color: var(--label-color, #22d3d1);
}

/* ==================== 能量粒子流动动画（增强版） ==================== */
.energy-particles {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 10;
}
.energy-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--particle-color, #38bdf8) 0%, transparent 70%);
    box-shadow: 
        0 0 6px var(--particle-color, #38bdf8),
        0 0 12px rgba(var(--particle-rgb, 56, 189, 248), 0.4);
    animation: var(--particle-animation, particle-h) var(--particle-duration, 2s) ease-in-out infinite;
}
/* 拖尾效果 */
.energy-particle::after {
    content: '';
    position: absolute;
    top: 50%; left: -12px;
    transform: translateY(-50%);
    width: 15px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--particle-color, #38bdf8));
    border-radius: 2px;
    opacity: 0.4;
}

/* 水平流动动画 - 从左到右 */
@keyframes particle-h {
    0% { left: -10px; opacity: 0; transform: scale(0.5); }
    5% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { left: calc(100% + 2px); opacity: 0; transform: scale(0.5); }
}
/* 垂直流动动画 - 从上到下 */
@keyframes particle-v {
    0% { top: -10px; opacity: 0; transform: scale(0.5); }
    5% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { top: calc(100% + 2px); opacity: 0; transform: scale(0.5); }
}
/* 垂直拖尾方向调整 */
.energy-particle[style*="particle-v"]::after,
.nav-connector-section .energy-particle::after {
    left: 50%; top: -15px;
    transform: translateX(-50%);
    width: 4px; height: 20px;
    background: linear-gradient(180deg, transparent, var(--particle-color, #a78bfa));
}

/* ==================== Demo风格：导航连接区 ==================== */
.nav-connector-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 30px;  /* v13.7: 缩短导航调度连接线 */
    position: relative;
}
.nav-connector-section .connector-v { height: 100%; }
.nav-connector-section .energy-particles {
    width: 8px;
    left: 50%;
    transform: translateX(-50%);
}

/* ==================== Demo风格：核心能力区 ==================== */
.core-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: -8px;  /* v13.8: 核心能力区上移 */
}
.core-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}
.core-connector {
    display: flex;
    align-items: center;
    width: 60px;
    position: relative;
}
.core-connector .connector-h {
    flex: 1;
    --line-from: #fb923c;
    --line-to: #fb923c;
}
.core-connector .energy-particles {
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
}

/* ==================== Demo风格：双轮驱动区 ==================== */
.dual-drive-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 8px;  /* v13.7: 技能组整体上移 */
}
.dual-drive-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}
.p2-connector {
    display: flex;
    align-items: center;
    width: 100px;
    position: relative;
}
.p2-connector .energy-particles {
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
}

/* ==================== Demo风格：系统优化工具 ==================== */
.system-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 28px;  /* v13.9: 工具行下移，视觉居中于主动自驱行和技能发现行之间 */
}
.tools-grid {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
}
.tools-connector {
    display: flex;
    align-items: center;
    width: 30px;
    flex-shrink: 0;
    position: relative;
}
.tools-connector .connector-h {
    flex: 1;
    height: 2px;
    --line-from: #4ade80;
    --line-to: #4ade80;
}
.tools-connector .arrow-right {
    border-left-color: #4ade80;
    border-left-width: 6px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}
.tools-connector .energy-particles {
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
}

/* ==================== Demo风格：底部思维方法+做事方法 ==================== */
.bottom-row {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}
/* ==================== 思维方法 & 做事方法 酷炫样式 ==================== */
.method-section {
    flex: 1;
    background: linear-gradient(135deg, rgba(18, 16, 30, 0.95) 0%, rgba(12, 11, 22, 0.92) 100%);
    border: 1px solid rgba(200, 220, 240, 0.1);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all var(--transition-normal);
    backdrop-filter: blur(8px);
}
.method-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--method-accent, rgba(200, 220, 240, 0.3)), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.method-section:hover::before { opacity: 1; }
.method-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--method-glow, rgba(200, 220, 240, 0.1));
}

/* 思维方法 - 金色主题 */
.method-section--cognitive {
    --method-accent: linear-gradient(90deg, transparent, #fbbf24, transparent);
    --method-glow: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(135deg, rgba(25, 20, 12, 0.95) 0%, rgba(18, 14, 8, 0.92) 100%);
}
.method-section--cognitive::before {
    background: var(--method-accent);
}

/* 做事方法 - 青色主题 */
.method-section--system {
    --method-accent: linear-gradient(90deg, transparent, #5ec4d4, transparent);
    --method-glow: rgba(94, 196, 212, 0.15);
    border-color: rgba(94, 196, 212, 0.3);
    background: linear-gradient(135deg, rgba(12, 22, 25, 0.95) 0%, rgba(8, 18, 20, 0.92) 100%);
}
.method-section--system::before {
    background: var(--method-accent);
}

/* 社交学习 - 金橙色主题 */
.method-section--social {
    --method-accent: linear-gradient(90deg, transparent, #fbbf24, transparent);
    --method-glow: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(135deg, rgba(25, 20, 12, 0.95) 0%, rgba(18, 14, 8, 0.92) 100%);
}
.method-section--social::before {
    background: var(--method-accent);
}

/* 头部样式增强 */
.method-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(8, 8, 15, 0.95) 0%, rgba(12, 12, 20, 0.9) 100%);
    border-bottom: 1px solid rgba(200, 220, 240, 0.08);
    position: relative;
}
.method-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 8px var(--method-glow, rgba(200, 220, 240, 0.3)));
}
.method-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px var(--method-glow, rgba(200, 220, 240, 0.2));
}
.method-desc {
    font-size: 10px;
    color: rgba(200, 220, 240, 0.45);
    margin-left: auto;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}
.method-section--cognitive .method-title { color: #fcd34d; }
.method-section--system .method-title { color: #67e8f9; }
.method-section--social .method-title { color: #fbbf24; }

/* 内容区增强 */
.method-content { padding: 14px 16px 16px; }
.method-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 思维方法节点 - 金色系 */
.method-section--cognitive .engine-node {
    --node-color: #fbbf24;
    --node-glow: rgba(251, 191, 36, 0.4);
    border-color: rgba(251, 191, 36, 0.35);
    background: linear-gradient(135deg, rgba(30, 24, 10, 0.98) 0%, rgba(18, 14, 8, 0.95) 100%);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.1), inset 0 1px 0 rgba(251, 191, 36, 0.1);
}
.method-section--cognitive .engine-node:hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(251, 191, 36, 0.15);
    transform: translateY(-2px);
}

/* 做事方法节点 - 青色系 */
.method-section--system .engine-node {
    --node-color: #5ec4d4;
    --node-glow: rgba(94, 196, 212, 0.4);
    border-color: rgba(94, 196, 212, 0.35);
    background: linear-gradient(135deg, rgba(12, 25, 28, 0.98) 0%, rgba(8, 18, 22, 0.95) 100%);
    box-shadow: 0 2px 8px rgba(94, 196, 212, 0.1), inset 0 1px 0 rgba(94, 196, 212, 0.1);
}
.method-section--system .engine-node:hover {
    border-color: rgba(94, 196, 212, 0.6);
    box-shadow: 0 4px 20px rgba(94, 196, 212, 0.25), inset 0 1px 0 rgba(94, 196, 212, 0.15);
    transform: translateY(-2px);
}

/* 社交学习节点 - 金橙色系 */
.method-section--social .engine-node {
    --node-color: #fbbf24;
    --node-glow: rgba(251, 191, 36, 0.4);
    border-color: rgba(251, 191, 36, 0.35);
    background: linear-gradient(135deg, rgba(30, 24, 10, 0.98) 0%, rgba(18, 14, 8, 0.95) 100%);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.1), inset 0 1px 0 rgba(251, 191, 36, 0.1);
}
.method-section--social .engine-node:hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(251, 191, 36, 0.15);
    transform: translateY(-2px);
}

/* 环形进度条发光效果 */
.method-section--cognitive .engine-node .ring-progress {
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
}
.method-section--system .engine-node .ring-progress {
    filter: drop-shadow(0 0 3px rgba(94, 196, 212, 0.6));
}
.method-section--social .engine-node .ring-progress {
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
}

.method-note {
    margin-top: 10px;
    font-size: 10px;
    color: rgba(200, 220, 240, 0.4);
    text-align: center;
    font-style: italic;
}

/* ==================== Demo风格：节点变体 ==================== */
.engine-node--absorb {
    border-color: rgba(56, 189, 248, 0.25);
    background: rgba(56, 189, 248, 0.06);
    border-style: dashed;
    --node-color: #38bdf8;
    --node-glow: rgba(56, 189, 248, 0.4);
}
.engine-node--export {
    border-color: rgba(74, 222, 128, 0.25);
    background: rgba(74, 222, 128, 0.06);
    border-style: dashed;
    --node-color: #4ade80;
    --node-glow: rgba(74, 222, 128, 0.4);
}
.engine-node--proactive {
    border-color: rgba(251, 146, 60, 0.25);
    background: rgba(251, 146, 60, 0.06);
    border-style: dashed;
    --node-color: #fb923c;
    --node-glow: rgba(251, 146, 60, 0.4);
}
.engine-node--homepage {
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.05);
    --node-color: #38bdf8;
    --node-glow: rgba(56, 189, 248, 0.4);
}
.engine-node--core {
    border-color: rgba(251, 146, 60, 0.4);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%);
    --node-color: #fb923c;
    --node-glow: rgba(251, 146, 60, 0.4);
}
.engine-node--core::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    border: 1px solid rgba(251, 146, 60, 0.2);
    animation: core-pulse 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes core-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }

/* L形折线连接器（SVG动态绘制） */
.elbow-svg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.elbow-svg-overlay text {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.3px;
}

/* 内功运转能量环 */
.energy-ring {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    border: 2px solid;
    opacity: 0;
    animation: energy-expand 4s ease-out infinite;
}
@keyframes energy-expand {
    0% { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}
.energy-ring--1 { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: #a78bfa; animation-delay: 0s; }
.energy-ring--2 { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: #fb923c; animation-delay: 1.3s; }
.energy-ring--3 { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: #22d3d1; animation-delay: 2.6s; }

/* ==================== 技能生命周期 U形闭环 ==================== */
.lifecycle-section {
    margin-top: 16px;
    padding-top: 16px;
    padding-bottom: 36px;
    border-top: 1px dashed rgba(200, 220, 240, 0.1);
    position: relative;
    overflow: visible !important;
}
/* v13.7: 优化间距 - 系统工具行和生命周期行之间增加间距 */
.lifecycle-section--compact {
    margin-top: 16px;
    padding-top: 8px;
    padding-bottom: 12px;
    border-top: none;
}
.lifecycle-title-inline {
    font-size: 10px;
    line-height: 1.3;
    color: rgba(200, 220, 240, 0.45);
    font-family: var(--font-mono);
    padding: 4px 8px;
    border: 1px solid rgba(200, 220, 240, 0.12);
    border-radius: 4px;
    background: rgba(200, 220, 240, 0.02);
    text-align: center;
    white-space: nowrap;
    margin-right: 8px;
}
.lifecycle-connector--first {
    width: 20px;
}
.lifecycle-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.lifecycle-title {
    font-size: 11px;
    color: rgba(200, 220, 240, 0.5);
    font-family: var(--font-mono);
}
.lifecycle-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    padding: 4px 0;
}
/* 生命周期节点变体 - 复用engine-node */
.engine-node--lifecycle {
    padding: 4px 10px;
    border-color: rgba(200, 220, 240, 0.15);
    background: rgba(0, 0, 0, 0.3);
    --node-color: rgba(200, 220, 240, 0.6);
}
.engine-node--lifecycle:hover {
    border-color: rgba(200, 220, 240, 0.35);
    background: rgba(200, 220, 240, 0.08);
    box-shadow: 0 4px 12px rgba(200, 220, 240, 0.1);
}
/* 生命周期连接器 */
.lifecycle-connector {
    display: flex;
    align-items: center;
    width: 40px;
    position: relative;
}
.lifecycle-connector .connector-h {
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--line-from, rgba(167, 139, 250, 0.4)),
        var(--line-to, rgba(56, 189, 248, 0.4))
    );
    border-radius: 2px;
}
.lifecycle-connector .arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--arrow-color, rgba(56, 189, 248, 0.5));
    margin-left: -1px;
}
.lifecycle-connector .energy-particles {
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
}
/* 社区学习标签（U形闭环底部中央，样式与"触发"标签一致）*/
.lifecycle-feedback-label {
    position: absolute;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--label-color, rgba(167, 139, 250, 0.85));
    white-space: nowrap;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--label-border, rgba(167, 139, 250, 0.3));
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 10;
}
/* SVG闭环容器 */
.lifecycle-loop-svg {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

/* ==================== 响应式调整 ==================== */
@media (max-width: 768px) {
    .meta-bottom-row { flex-direction: column; }
    .engine-core-branches { flex-direction: column; align-items: center; }
    .engine-branch { max-width: 100%; width: 100%; }
    .exec-groups-grid { grid-template-columns: 1fr; }
    .domain-cards-grid { flex-direction: column; }
    .domain-card { min-width: 0; }
    .kn-cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .mem-cards-grid { grid-template-columns: 1fr; }
    .kn-label-desc, .mem-label-desc { display: none; }
    .kn-label-align, .mem-label-align { display: none; }
}

@media (max-width: 480px) {
    .skill-architecture { padding: 10px; }
    .knowledge-arch { padding: 10px; }
    .memory-arch { padding: 10px; }
    .arch-stats { display: none; }
    .engine-diagram { max-width: 100%; padding: 8px; }
    .engine-core-branches { gap: 4px; }
    .kn-cards-grid { grid-template-columns: 1fr; }
    .mem-cards-grid { grid-template-columns: 1fr; }
}