body {
    font-family: 'Noto Sans SC', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* 节点状态样式 */
.node-mastered {
    fill: #10b981;
    stroke: #059669;
    stroke-width: 3px;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
}

.node-ready {
    fill: #f59e0b;
    stroke: #d97706;
    stroke-width: 3px;
    animation: pulse 2s infinite;
}

.node-blocked {
    fill: #64748b;
    stroke: #475569;
    stroke-width: 2px;
    opacity: 0.6;
}

.node-target {
    fill: #ec4899;
    stroke: #db2777;
    stroke-width: 4px;
    filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.6));
}

.node-source {
    fill: #3b82f6;
    stroke: #2563eb;
    stroke-width: 4px;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.link {
    stroke: #94a3b8;
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
}

.link-path {
    stroke: #ec4899;
    stroke-opacity: 0.8;
    stroke-width: 3px;
    stroke-dasharray: 5, 5;
    animation: flow 1s linear infinite;
}

.link-reachable {
    stroke: #10b981;
    stroke-opacity: 0.6;
    stroke-width: 2px;
}

@keyframes flow {
    to {
        stroke-dashoffset: -10;
    }
}

.matrix-cell {
    transition: all 0.3s ease;
    cursor: pointer;
}

.matrix-cell:hover {
    transform: scale(1.2);
    z-index: 10;
    filter: brightness(1.3);
}

.path-highlight {
    background: linear-gradient(120deg, rgba(236, 72, 153, 0.2) 0%, transparent 100%);
    border-left: 3px solid #ec4899;
}

.reachable-highlight {
    background: linear-gradient(120deg, rgba(16, 185, 129, 0.2) 0%, transparent 100%);
    border-left: 3px solid #10b981;
}

.glass-panel {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 移动端优化 */
@media (max-width: 767px) {
    /* 隐藏滚动条但保持功能 */
    .mobile-tab-panel {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .mobile-tab-panel::-webkit-scrollbar {
        display: none;
    }
    
    /* 确保面板占满剩余高度 */
    .mobile-tab-panel {
        height: calc(100vh - 7rem);
        overflow-y: auto;
    }
    
    /* 力导向图容器优化 */
    #graphContainer {
        min-height: 300px;
        height: 100%;
        width: 100%;
    }
    
    /* 确保图表面板正确显示 */
    #panel-graph {
        height: calc(100vh - 7rem);
        min-height: 300px;
    }
    
    #panel-graph svg {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 矩阵表格缩小 */
    .matrix-cell {
        font-size: 8px !important;
    }
    
    /* 选择框优化 */
    select {
        font-size: 14px !important;
    }
    
    /* 按钮触摸优化 */
    button, 
    label.cursor-pointer,
    input[type="checkbox"] {
        min-height: 36px;
        min-width: 36px;
    }
    
    /* 防止字体缩放 */
    body {
        -webkit-text-size-adjust: 100%;
    }
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-tab-panel {
        height: calc(100vh - 4rem);
    }
}

/* 桌面端 */
@media (min-width: 1024px) {
    .mobile-tab-panel {
        height: calc(100vh - 4rem);
    }
    
    #panel-graph {
        height: calc(100vh - 4rem);
    }
}

/* 防止移动端的横向滚动 */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.8);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 1);
}