/* 
   细节暴君的私人定制样式 
   Tailwind很棒，但有些微小的物理反馈需要手写CSS来实现
*/
body {
    background-color: #f1f5f9; /* Slate-100: 完美的冷调背景 */
    color: #1e293b; /* Slate-800: 比纯黑更有质感的深灰 */
    -webkit-font-smoothing: antialiased;
}

/* 隐藏滚动条但保留功能，保持视觉纯净 */
.hide-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.hide-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.hide-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}

/* 核心：矩阵聚焦逻辑 */
.matrix-cell {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 当容器处于hover状态时，非焦点的元素变淡 */
.matrix-container:hover .matrix-cell:not(.is-active):not(.is-related) {
    opacity: 0.3;
    transform: scale(0.98);
    filter: grayscale(100%);
}

/* 焦点元素 */
.matrix-cell.is-active {
    transform: scale(1.02);
    z-index: 10;
    background-color: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #3b82f6;
}

/* 关联的行和列头 */
.matrix-header.is-highlighted {
    background-color: #eff6ff; /* Blue-50 */
    color: #1d4ed8; /* Blue-700 */
    border-color: #3b82f6;
}

/* 连接线动画 - 模拟数据流动 */
@keyframes flow {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}
.connector-line {
    stroke-dasharray: 10;
    animation: flow 60s linear infinite;
    opacity: 0.1;
}