body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 保持禁止选中文本，防止双击或拖拽时的干扰 */
    user-select: none;
}

:root {
    interpolate-size: allow-keywords;
}

#canvas {
    width: 100%;
    height: 100%;
    background-color: #333333;
    /* 深灰色背景 */
    position: relative;
    overflow: hidden;
    cursor: default;
}

#canvas.is-panning {
    cursor: grabbing !important; /* 强制覆盖，显示抓手 */
}

/* 存放所有卡片的容器 */
#content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    
    /* --- 新增：提升内容层级，确保盖住背景文字 --- */
    z-index: 10;
    transform-origin: 0 0;
}

/* 存放连线的 SVG 容器 */
#lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 10000px;
    height: 10000px;
    pointer-events: none; /* 关键：让空白处不阻挡点击 */
    overflow: visible;
    
    z-index: 100;
}

/* 允许 SVG 内部的特定元素响应鼠标 */
#lines-svg * {
    pointer-events: visiblePainted;
}


/* 1. 统一所有预览类（正在拉线、正在画箭头）的样式 */
.temp-preview {
    fill: rgba(255, 255, 255, 0.15) !important; /* 预览统一设为 0.15 */
    opacity: 1 !important;                      /* 设为 1，防止双重透明度叠加 */
    pointer-events: none !important;
    filter: none !important;
}

.temp-line {
    display: none; 
}

.cutting-trail {
    fill: rgba(255, 255, 255, 0.9);
    stroke: #ff4d4f;
    stroke-width: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255, 77, 79, 0.8));
    opacity: 0.9;
}

/* 确保项目卡片进入编辑状态时，鼠标变成文本输入状 */
.project-card .card-content[contenteditable="true"] {
    cursor: text;
    pointer-events: auto !important; /* 强制允许点击 */
    outline: 2px solid rgba(255, 215, 0, 0.5); /* 编辑时显示金色轮廓提示 */
}

/* 卡片样式 */
.card {
    position: absolute;
    /* 绝对定位，跟随鼠标坐标 */
    background-color: #fff;
    /* 纯白色 */
    border: 1px solid #e0e0e0;
    /* 极细的浅灰色边框 */
    padding: 15px 30px;
    /* 增加内边距 */
    border-radius: 0;
    /* 增加内边距 */
    border-radius: 3px;
    /* 圆角 */
    box-sizing: border-box;
    /* 关键：确保 width/height 包含 padding 和 border */
    color: #000;
    /* 文字颜色黑色 */
    font-size: 22px;
    /* 增大字体 */
    font-weight: bold;
    /* 加粗文本 */
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 6px 6px 0px rgba(0, 0, 0, 0.4);
    /* 始终保持两层阴影以防止切换时闪烁 */
    outline: 1px solid transparent;
    /* 消除旋转锯齿的关键技巧 */
    transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        rotate 0.2s ease,
        border-color 0.2s,
        background-color 0.2s,
        opacity 0.2s,
        width 0.2s ease,
        height 0.2s ease,
        /* 下面这行最关键：赋予阴影弹簧般的伸缩感 */
        box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 恢复 width/height 动画，使打字时的自动扩展变顺滑 */
    backface-visibility: hidden;
    /* 强制开启 GPU 加速，提升抗锯齿质量 */
    -webkit-font-smoothing: antialiased;
    user-select: none;
    /* 默认禁止选中，防止拖拽干扰 */
    translate: -50% -50%;
    rotate: var(--r);
    padding: 0;
    /* 容器不再需要内边距 */
    z-index: 200; /* 确保卡片层级高于组块，不影响单独操作卡片 */
}

/* 1. 悬停本身、或者作为子卡片被父级悬停触发时：微微上浮 */
.card:hover:not(.dragging):not(.linking-target),
.card.child-float:not(.dragging):not(.linking-target) {
    scale: 1.02;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 8px 8px 4px rgba(0, 0, 0, 0.35);
    z-index: 300;
}

/* 2. 点击按下时：保持上浮（极度稳定） */
.card:active:not(.dragging):not(.linking-target) {
    scale: 1.02 !important; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 8px 8px 4px rgba(0, 0, 0, 0.35) !important;
}

/* 3. 拖动时：依然保持上浮，仅提升最高层级防穿模 */
.card.dragging {
    scale: 1.02 !important; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 8px 8px 4px rgba(0, 0, 0, 0.35) !important; 
    z-index: 1000 !important; 
}

/* 内部可编辑区域，负责居中 */
.card-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 15px;
    box-sizing: border-box;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    /* 默认不换行，保持单行增长 */
    color: #000;
    font-size: 22px;
    font-weight: bold;
}

/* 手动调整大小后，允许换行 */
.card[data-manually-resized="true"] .card-content {
    white-space: normal;
    word-break: break-all;
}

/* 移除之前的伪元素，改用真实的 DOM 元素以便交互 */

.resize-handle {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 16px;
    height: 10px;
    background-color: #ff4d4f;
    cursor: nwse-resize;
    z-index: 20;
    /* 确保在内容之上 */
    pointer-events: auto !important;
    opacity: 0;
    transition: opacity 0.2s;
}

.card:hover .resize-handle {
    opacity: 1;
}

.card:focus {
    user-select: text;
    /* 只有获得焦点（编辑时）才允许选中文字 */
}



.card.resizing {
    transition: none !important;
}

.card.deleting {
    border-color: #e0e0e0 !important;
    /* 恢复灰色边框 */
    background-color: #fff !important;
    /* 恢复白色背景 */
    opacity: 0.6;
    /* 保持透明度作为反馈 */
    scale: 0.9;
    /* 保持缩小作为反馈 */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 6px 6px 0px rgba(0, 0, 0, 0.4) !important;
    /* 恢复硬边缘半透明阴影 */
}

.card.linking-target {
    border-color: #000 !important; /* 卡片这里是黑边 */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 10px 10px 0px rgba(0, 0, 0, 0.5) !important;
    scale: 1.05;
    outline: 2px dashed rgba(255, 255, 255, 0.5); /* 颜色是 0.5 */
    outline-offset: 6px;
}
.chunk-container.linking-target {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    
    /* 同步卡片的缩放感 */
    scale: 1.05; 
    
    box-shadow: none !important;
}

/* 触发虚线框弹出 */
.chunk-container.linking-target::after {
    opacity: 1;
    transform: scale(1) !important;
}

.pending-delete {
    opacity: 0.3 !important;
    filter: grayscale(100%);
}

/* 新增：连线点击热区 */
.connection-hit-area {
    fill: none;
    stroke: transparent;
    stroke-width: 20px;
    /* 宽大的点击容差 */
    cursor: pointer;
    /* 改为 pointer 以提高在深色背景下的可见性 */
    pointer-events: stroke;
}

/* 新增：连线文字标签 */
.connection-label {
    position: absolute;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    translate: -50% -50%;
    white-space: nowrap;
    outline: none;
    padding: 2px 4px;
    min-width: 10px;
    text-align: center;
    z-index: 150;
    /* 确保在连线之上 */
    transition: color 0.2s, scale 0.2s;
    cursor: pointer;
}

.connection-label:empty::before {
    content: " ";
    /* 占位符确保可点击 */
    display: inline-block;
    min-width: 20px;
    height: 14px;
}

/* 没有文字时，悬停给出可以连线的视觉提示 */
.connection-label:empty:hover {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 当连线上有文字时，显示毛玻璃遮罩，完美遮挡下方的连线 */
.connection-label.has-text {
    background: rgba(51, 51, 51, 0.85); /* 使用和画布相同的深灰色 */
    backdrop-filter: blur(4px); /* 毛玻璃滤镜，把背后的连线模糊掉 */
    border: 1px solid rgba(255, 255, 255, 0.15); /* 加一层精致的微边框 */
    border-radius: 10px; /* 变成圆润的胶囊状 */
    padding: 1px 4px; /* 让背景范围比文字大一圈 */
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 增加悬浮阴影 */
    text-shadow: none; 
}

/* 正在输入文字时的高亮状态 */
.connection-label:focus {
    color: #fff;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.5); /* 金色边框提示正在编辑 */
    border-radius: 10px;
    padding: 1px 4px;
    outline: none;
    z-index: 170;
}

/* 补充：连线高亮（例如鼠标悬浮被点亮）时，胶囊块也一起变亮 */
.connection-label.child-float.has-text,
.connection-label.dragging.has-text { 
    background: rgba(80, 80, 80, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
}

/* 连线标签悬浮效果 */
.connection-label.dragging,
.connection-label.child-float { 
    scale: 1; 
    color: #fff; /* 文字变亮 */
    z-index: 160; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 文字也有投影 */
}

.connection-line {
    fill: rgba(255, 255, 255, 0.35); 
    stroke: none;
    transition: fill 0.2s, filter 0.2s;
}

/* 连线悬浮效果（与拖拽时保持一致） */
.connection-line.dragging,
.connection-line.child-float { 
    fill: rgba(255, 255, 255, 0.8); /* 变亮 */
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4)); /* 加投影，浮起来 */
    transition: fill 0.2s, filter 0.2s; /* 丝滑过渡 */
}

/* Empty State Tips */
#empty-state-tips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    
    /* --- 修改：确保背景文字层级低于 #content --- */
    z-index: 0; 
    
    text-align: left;
    color: rgba(255, 255, 255, 0.616);
    font-family: sans-serif;
    display: none;
    /* Initially hidden, controlled by JS */
    flex-direction: column;
    gap: 12px;
}

#empty-state-logo {
    position: relative;
    /* Override absolute from .card */
    top: auto;
    left: auto;
    margin-bottom: 20px;
    font-size: 32px;
    transform: rotate(-5deg);
    cursor: default;
    pointer-events: none;
    white-space: nowrap;
    align-self: center;
    /* Center in flex column */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#empty-state-logo.hidden {
    opacity: 0;
    transform: rotate(-5deg) scale(0.8);
    pointer-events: none;
}

#empty-state-tips.visible {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

.tip-item {
    font-size: 16px;
    letter-spacing: 0.5px;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tip-item.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.tip-highlight {
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
/* 消失动画：稍微缩小并变透明 */
@keyframes menu-pop-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* 处于消失状态时的菜单 */
.context-menu.hiding {
    animation: menu-pop-out 0.1s forwards ease-in;
    pointer-events: none; /* 消失过程中禁止交互 */
}
.context-menu {
    position: fixed;
    background: rgba(41, 41, 41, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    display: none; /* 关键：平时不占位 */
    flex-direction: column;
    padding: 6px 0;
    min-width: 160px;
    border-radius: 2px;
    
    transform-origin: top left;
    animation: menu-pop 0.12s cubic-bezier(0.2, 0.8, 0.2, 1.1);
}

/* 弹出动画：位移+缩放+透明度 */
@keyframes menu-pop {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    padding: 10px 20px;
    color: #eee;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: #444;
}

.context-menu-item.active {
    color: #ff4d4f;
    background: #333;
}

/* 2. 统一正式箭头的样式（与 .connection-line 保持一致） */
.canvas-arrow {
    fill: rgba(255, 255, 255, 0.35); /* 统一设为 0.35 */
    stroke: none;
    pointer-events: none !important;
    transition: fill 0.2s;
}

/* --- 颜色选择器菜单样式 --- */
.menu-section {
    display: none;
    flex-direction: column;
    /* 去除上下的 padding，只保留边框分隔 */
    padding: 0;
}

.menu-section:last-child {
    border-bottom: none;
}

/* 颜色行容器 */
.color-picker-row {
    display: flex;
    padding: 4px; /* 菜单边缘稍微留一点缝隙，好看一点 */
    gap: 0;       /* 关键：去除格子之间的间距 */
}

/* 颜色格子 */
.color-swatch {
    width: 25px;   /* 宽度 */
    height: 25px;  /* 高度 */
    border-radius: 0; /* 关键：直角，无圆角 */
    border: none;     /* 关键：无边框 */
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    box-sizing: border-box;
    position: relative; /* 为了 hover 时调整层级 */
}

/* 悬停效果：为了让人知道点到了哪个，稍微凸起一点，但不加边框 */
.color-swatch:hover {
    transform: scale(1.2); /* 放大 */
    z-index: 10;           /* 浮在最上层 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* 加一点投影增加立体感 */
}

.chunk-container {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: auto;
    cursor: grab;
    padding-top: 28px;
    box-sizing: border-box;
    /* 只保留缩放和背景的过渡 */
    transition: 
        border-color 0.2s ease, 
        background-color 0.2s ease,
        scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /*使用与卡片一致的弹出曲线 */
    border-radius: 8px;
     /* 圆角 */
}
.chunk-container::after {
    content: "";
    position: absolute;
    /* 关键：固定大小，设为最终想要扩展到的位置 */
    inset: -12px; 
    border: 2px dashed rgba(255, 255, 255, 0.5); /* 同步颜色：0.5 */
    pointer-events: none;
    z-index: -1;
    
    transform: scale(1) !important; 
    opacity: 0;
    
    transition: opacity 0.2s ease;
    border-radius: 8px;
     /* 圆角 */
}
.chunk-container:active {
    cursor: grabbing;
}

/* 组块标题 */

.chunk-title {
    position: absolute;
    top: 0; /* 贴着组块顶部内边界 */
    left: 50%;
    transform: translateX(-50%); /* 居中 */
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    outline: none;
    pointer-events: auto; /* 标题允许点击编辑 */
    padding: 4px 8px;
    z-index: 2; /* 位于组块上方但低于卡片 */
    cursor: text;
    max-width: calc(100% - 12px);
    text-align: center;
    box-sizing: border-box;
}

.chunk-title:hover, .chunk-title:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* 绘制时的预览框 */
.chunk-preview {
    position: absolute;
    border: 2px solid #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
    pointer-events: none;
    z-index: 1000;
}

/* 待删除状态 */
.chunk-container.pending-delete {
    opacity: 0.3;
    border-color: #ff4d4f !important;
}

/* 组块调整大小手柄 */

.chunk-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #ff4d4f;
    z-index: 12;
    pointer-events: auto !important;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.15);
}

.chunk-container:hover .chunk-resize-handle {
    opacity: 1;
}

/* 四角定位与光标 */
.chunk-resize-handle.br { right: -8px; bottom: -8px; cursor: nwse-resize; }
.chunk-resize-handle.tl { left: -8px; top: -8px; cursor: nwse-resize; }
.chunk-resize-handle.tr { right: -8px; top: -8px; cursor: nesw-resize; }
.chunk-resize-handle.bl { left: -8px; bottom: -8px; cursor: nesw-resize; }

.chunk-container.resizing {
    transition: none !important;
}

/* 调整提示区域容器 */
#empty-state-tips {
    align-items: flex-start; /* 改为左对齐，更有设计感 */
}

/* 组块被拿起时的效果*/
.chunk-container.dragging {
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.08);
    z-index: 100; 
}

/* Logo 和灯泡的横向容器 */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: -10px;
    align-self: center; /* 容器整体在屏幕居中 */
}

/* 覆盖原本 logo 的 margin */
#empty-state-logo {
    margin-bottom: 0; 
}



/* 简单的摆动动画，无模糊感 */
@keyframes simple-swing {
    from {
        transform: rotate(-5deg) translate(-35px,-35px);
    }
    to {
        transform: rotate(-2deg) translateY(-40px,-20px);
    }
}

/* 调整 SVG 内部样式，确保纯扁平色 */
#logo-bulb svg path {
    stroke: none; /* 移除描边，更扁平 */
}

/* 修改切割消失时的状态 */
#logo-bulb.hidden {
    opacity: 0;
}

/* 灯泡主体的闪烁（颜色和发光感） */
.bulb-main {
    transition: fill 0.1s;
    animation: bulb-flicker 5s infinite;
}

/* 光芒线的闪烁 */
.bulb-rays {
    opacity: 0;
    animation: rays-flicker 4s infinite;
}

/* 动画1：模拟灯泡丝接触不良的明暗变化 */
@keyframes bulb-flicker {
    0%, 79%, 82%, 85%, 88%, 91%, 94%, 100% { 
        fill: #FFD700; 
        filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
    }
    80%, 83%, 86%, 89%, 92% { 
        fill: #555; /* 熄灭的颜色 */
        filter: none;
    }
}

/* 动画2：模拟短路瞬间迸发的光芒 */
@keyframes rays-flicker {
    0%, 79%, 82%, 85%, 88%, 91%, 94%, 100% { 
        opacity: 0; 
    }
    80%, 86%, 92% { 
        opacity: 1; 
    }
}


/* 确保 SVG 容器能展示 filter 效果 */
#logo-bulb svg {
    overflow: visible;
}

/* 闪光线条样式 */
.bulb-sparks {
    opacity: 0; 
    /* 缩短总周期到 5秒，让它出现得频繁一点，但单次持续时间变长 */
    animation: spark-long-flicker 5s infinite; 
}

/* 持续时间更长的、舒适的闪烁动画 */
@keyframes spark-long-flicker {
   
    0%, 15% {
        opacity: 0;
    }
    

    40% {
        opacity: 0.6;
    }
    


    30% {
        opacity: 0.4;
    }
    40% {
        opacity: 0.8;
    }

    75%, 100% {
        opacity: 0;
    }
}

/* 保持缓慢的摆动，但幅度减小，增加舒适度 */
#logo-bulb {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 调整位置，确保顶部闪光不被遮挡 */
    transform: rotate(-3deg) translate(-37px, -30px);
    animation: gentle-swing 4s infinite alternate ease-in-out;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* 新增：默认隐藏移动设备警告文本 */
#mobile-warning-text {
    display: none;
    pointer-events: none;
}

/* 移动设备适配：使用更通用的阈值 (1024px) 和触摸屏特性 (pointer: coarse) */
@media screen and (max-width: 1024px) {
    
    /* 1. 隐藏所有功能性/可交互区域 */
    #content,
    #lines-svg,
    #context-menu,
    #measure-ghost,
    .resize-handle,
    .chunk-resize-handle {
        display: none !important;
    }
    
    /* 2. 隐藏所有桌面提示 */
    .desktop-only {
        display: none !important;
    }

    /* 3. 强制显示 #empty-state-tips 容器，并修正布局 */
    #empty-state-tips {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        text-align: center !important; 
        
        /* 修正定位：保持居中，但移除缩放以防溢出 */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* 移除 scale(1.2) */
        width: 90% !important; /* 防止太宽 */
        
        opacity: 1 !important; 
        visibility: visible !important;
        animation: none !important;
        pointer-events: auto !important; /* 允许文字被看到 */
    }
    
    /* 4. Logo 容器布局重置 */
    .logo-container {
        display: flex !important; 
        flex-direction: row !important; /* 强制横向排列 */
        align-items: center !important;
        justify-content: center !important; 
        
        position: relative !important; 
        width: auto !important; 
        height: auto !important;
        margin: 0 0 20px 0 !important; /* 底部留白给警告文字 */
        gap: 15px !important; /* Logo 和灯泡之间的间距 */
        transform: none !important; /* 移除桌面端的摆动偏移 */
    }

    /* 5. Logo 样式重置 */
    #empty-state-logo {
         display: block !important;
         opacity: 1 !important;
         animation: none !important;
         box-shadow: 0 0 0 rgba(0, 0, 0, 0), 4px 4px 0px rgba(0, 0, 0, 0.4) !important;
         
         /* 关键：取消绝对定位 */
         position: static !important; 
         transform: rotate(-5deg) !important;
         margin: 0 !important;
         font-size: 24px !important; 
         padding: 10px 15px !important;
         white-space: nowrap !important;
    }
    
    /* 6. 灯泡样式重置 */
    #logo-bulb {
         display: block !important;
         opacity: 1 !important;
         animation: none !important;
         
         /* 关键：取消绝对定位 */
         position: static !important; 
         transform: rotate(5deg) !important; /* 稍微反向旋转一点 */
         margin: 0 !important;
         
         width: 40px !important; 
         height: 40px !important;
    }
    
    /* 7. 移动端灯泡去色（灰色） */
    #logo-bulb svg path { 
        fill: #777 !important; /* 强制所有路径变灰 */
        filter: none !important;
        animation: none !important;
    }
    /* 隐藏闪光线条 */
    .bulb-sparks,
    .bulb-rays {
        display: none !important; 
    }

    /* 8. 移动设备警告文本 */
    #mobile-warning-text {
        display: block !important;
        color: #ff4d4f; /* 红色警告 */
        font-size: 16px; 
        font-weight: bold;
        margin-top: 10px;
        line-height: 1.5;
        max-width: 300px;
        text-align: center;
        background: transparent !important;
    }
}

/* --- 返回主页按钮：书页折角样式 --- */
#back-to-home {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    display: none; 
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 10px;
    padding-right: 12px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.4);
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    isolation: isolate; 
    
    /* 【新增】进场时自动播放展开动画 */
    animation: fold-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    
    /* 统一所有属性的互动过渡 */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
                
    backdrop-filter: none;
    box-shadow: none;
    transform: none; 
}

/* 伪元素保持不变... */
#back-to-home::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #181818 50%, transparent 50.5%);
    z-index: -2; pointer-events: none;
    box-shadow: inset 2px 2px 8px rgba(0,0,0,0.8);
}
#back-to-home::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, transparent 49.5%, #FFD700 50%, #e6c200 100%);
    filter: drop-shadow(-3px -3px 4px rgba(0,0,0,0.5));
    z-index: -1; pointer-events: none;
}
#back-to-home:hover {
    width: 84px; height: 84px; background: transparent; transform: none; box-shadow: none; color: rgba(0, 0, 0, 0.9);
}

/* ---展开与收起的动画逻辑 --- */

/* 1. 进场关键帧：从 0 尺寸放大到 64px */
@keyframes fold-in {
    0% {
        width: 0; height: 0; padding: 0; opacity: 0;
    }
    100% {
        width: 64px; height: 64px; padding-bottom: 10px; padding-right: 12px; opacity: 1;
    }
}

/* 2. 退场关键帧：从 64px 缩小回 0 */
@keyframes fold-out {
    0% {
        width: 64px; height: 64px; padding-bottom: 10px; padding-right: 12px; opacity: 1;
    }
    100% {
        width: 0; height: 0; padding: 0; opacity: 0;
    }
}

/* 3. 退场收缩类：使用动画强行覆盖进场状态 */
#back-to-home.folding-out {
    animation: fold-out 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    pointer-events: none !important;
}

.project-card {
    /* 强制尺寸：类似 DVD 盒或游戏封面比例 (2:3) */
    width: 200px !important;
    height: 300px !important;
    
    border: none !important;
    background-color: #1e1e1e !important; /* 深色底座 */
    border-radius: 12px !important;
    padding: 0 !important; /* 移除内边距 */
    
    /* 封面阴影 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    
    /* 悬停动画 */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s !important;
}

/* --- 项目卡片：悬停、按下、拖拽三态彻底统一 --- */
.project-card:hover,
.card.project-card:active:not(.linking-target),
.card.project-card.dragging {
    /* 保持三态的属性完全一致，杜绝任何闪烁和缩水 */
    transform: scale(1.08) translateY(-5px) !important;
    
    /* 关键修复：补回普通卡片自带的 1.02 基础缩放，做到完美对齐 */
    scale: 1.02 !important; 
    
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 215, 0, 0.6) !important;
    z-index: 5000 !important;
}

/* 缩略图区域 */
.project-thumb-container {
    flex: 1; /* 占据剩余空间 */
    background-color: #2b2b2b; /* 缩略图背景色 */
    position: relative;
    overflow: hidden;
    pointer-events: none; /* 缩略图本身不响应点击，由卡片响应 */
}

/* 缩略图内的 SVG */
.project-thumb-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 标题区域 */
.project-info-bar {
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(30,30,30,0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

/* 覆盖原有的 .card-content 样式，适配标题栏 */
.project-card .card-content {
    position: static !important; /* 取消绝对定位 */
    width: 100%;
    height: auto;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #e0e0e0 !important;
    white-space: normal !important; /* 允许换行 */
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    display: -webkit-box !important;
    -webkit-line-clamp: 2; /* 最多显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 !important;
    pointer-events: none; /* 禁止直接点击文字 */

}

/* 主页模式下隐藏不必要的元素 */
body.home-mode .resize-handle, 
body.home-mode .chunk-resize-handle {
    display: none !important;
}



/* --- 新增：用于在批量恢复/初始化时禁用动画 --- */
.no-transition {
    transition: none !important;
    animation: none !important;
}


/* 场景切换动画 */

body {
    background-color: #333333; /* 防止缩放穿帮 */
}

.scene-transition {
    pointer-events: none !important; /* 切换期间禁止操作 */
}

/* 离开：进入项目（放大淡出） - 0.12s */
.scene-zoom-in-out {
    opacity: 0 !important;
    transform: scale(1.1) !important;
    transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 离开：返回主页（缩小淡出） - 0.12s */
.scene-zoom-out-out {
    opacity: 0 !important;
    transform: scale(0.9) !important;
    transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 预备：返回主页（新画面从大变正常） - 瞬时 */
.scene-zoom-in-in {
    opacity: 0 !important;
    transform: scale(1.1) !important;
}

/* 预备：进入项目（新画面从小变正常） - 瞬时 */
.scene-zoom-out-in {
    opacity: 0 !important;
    transform: scale(0.9) !important;
}

/* 激活：通用入场动画 - 0.15s */
.scene-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* --- 画布缩放指示器 --- */
#zoom-indicator {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(41, 41, 41, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
    cursor: pointer;
    z-index: 10000;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    user-select: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#zoom-indicator:hover {
    background: rgba(60, 60, 60, 0.95);
    color: #fff;
    transform: scale(1.05);
}

#zoom-indicator:active {
    transform: scale(0.95);
}

/* 主页模式下隐藏缩放指示器 */
body.home-mode #zoom-indicator {
    display: none !important;
}