/* ===== 设计令牌系统 (CSS Variables) ===== */
:root {
    /* 主色调 - 蓝色系 */
    --primary-color: #2196F3;
    --primary-dark: #1976D2;
    --primary-light: #64B5F6;
    --primary-gradient: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
    
    /* 深色配套 */
    --primary-text: white;
    --primary-bg-dark: #1a1a2e;
    
    /* 强调色 - 绿色（用于拖拽交互，调暗版本） */
    --accent-color: #a8e063;
    --accent-light: #b8e87a;
    --accent-dark: #7cb342;
    
    /* 中性色 */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    
    /* 语义色 */
    --success-color: #4CAF50;
    --warning-color: #FF9800;
    --error-color: #f44336;
    --info-color: #2196F3;
    
    /* 卡片颜色 */
    --card-red: #ffcdd2;
    --card-blue: #bbdefb;
    --card-green: #d4edb3;
    --card-yellow: #fff9c4;
    --card-purple: #e1bee7;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
    
    /* 动画 */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-bounce: 400ms cubic-bezier(0.16, 1, 0.3, 1);
    
    /* ===== 交互色彩系统 ===== */
    
    /* 主交互色 - 蓝色，用于选中状态 */
    --interaction-primary: var(--primary-color);
    --interaction-primary-rgb: 33, 150, 243;  /* #2196F3 的 RGB 值 */
    --interaction-primary-glow: 0 0 0 3px var(--interaction-primary), 
                                 0 0 12px rgba(33, 150, 243, 0.4);
    
    /* 强调交互色 - 蓝色深色，用于 hover/active 状态 */
    --interaction-accent: var(--primary-dark);
    --interaction-accent-rgb: 25, 118, 210;  /* #1976D2 的 RGB 值 */
    --interaction-accent-glow: 0 0 8px rgba(25, 118, 210, 0.6);
    
    /* 拖拽交互色 - 提亮绿色，用于拖拽操作 */
    --drag-color: #b2e165;
    --drag-color-rgb: 178, 225, 101;
    --drag-glow: 0 0 8px rgba(178, 225, 101, 0.6);
    
    /* 中性交互色 - 用于连线等 */
    --interaction-neutral: var(--gray-500);
    --interaction-neutral-dark: var(--gray-700);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow: hidden;
    background: #F8F8FA;
}

/* 工具栏 */
.toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: white;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-lg);
    z-index: 1000;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.logo {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    margin: 0;
}

.logo .logo-text {
    font-family: 'Kaushan Script', cursive;
    font-size: 28px;
    font-weight: 400;
    display: inline-block;
    padding: 0 10px;
    line-height: 1.8;
    background: linear-gradient(90deg, #4ade80 0%, #22d3ee 25%, #a78bfa 50%, #f472b6 75%, #4ade80 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: logo-shimmer 3s linear infinite;
}

@keyframes logo-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hint {
    font-size: 13px;
    color: var(--gray-500);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 工具栏分隔线 */
.toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--gray-300);
    margin: 0 var(--spacing-xs);
}

.btn {
    padding: 10px 18px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: all var(--transition-normal);
}

.btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 整理下拉菜单 */
.organize-dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉箭头样式 - 圆角三角形 */
.dropdown-arrow {
    display: inline-block;
    font-size: 12px;
    margin-left: 2px;
    transition: transform var(--transition-normal);
}

.organize-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
}

.organize-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.organize-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.organize-option:last-child {
    border-bottom: none;
}

.organize-option:hover {
    background: #f5f7fa;
}

.organize-option:first-child {
    border-radius: 8px 8px 0 0;
}

.organize-option:last-child {
    border-radius: 0 0 8px 8px;
}

.option-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.option-text {
    flex: 1;
    font-weight: 500;
    color: #333;
}

.option-desc {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

/* 画布容器 */
#canvas-container {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    cursor: grab;
    background-color: #f5f5f0;
    background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1px);
    background-size: 24px 24px;
}

#canvas-container:active {
    cursor: grabbing;
}

#canvas-container.panning {
    cursor: grabbing;
}

#canvas-container.space-mode {
    cursor: grab;
}

#canvas-container.space-mode:active {
    cursor: grabbing;
}

/* 【新增】侧边栏打开时，鼠标恢复为箭头，不可拖拽画布 */
#canvas-container.sidebar-open {
    cursor: default !important;
}

/* SVG 连线层 */
#connections-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;  /* 【关键修复】连线在卡片下方，视觉效果更清晰 */
    overflow: visible;
}

/* 连线样式 */
.connection {
    stroke: var(--interaction-neutral);
    stroke-width: 2;
    fill: none;
    pointer-events: stroke;  /* 只有线条本身可以点击 */
    cursor: pointer;
    transition: stroke-width 0.2s, stroke 0.2s, filter 0.2s;
}

/* 【优化】添加一个透明的宽线条作为点击区域 */
.connection-hitbox {
    stroke: transparent;
    stroke-width: 20;
    fill: none;
    pointer-events: stroke;  /* 【关键】只有线条部分响应，不干扰其他区域 */
    cursor: pointer;
    z-index: 1;  /* 在实际线条下方 */
}

/* 【关键修复】hover hitbox时，高亮实际连线 */
.connection-hitbox:hover + .connection {
    stroke-width: 4;
    stroke: var(--interaction-neutral-dark);
}

.connection:hover {
    stroke-width: 4;
    stroke: var(--interaction-neutral-dark);
}

.connection.selected {
    stroke: var(--drag-color);
    stroke-width: 4;
    /* 【新增】添加阴影使选中更明显 */
    filter: drop-shadow(0 0 6px rgba(139, 195, 74, 0.8));
}

/* 【新增】hitbox选中时，也高亮实际连线 */
.connection-hitbox.selected + .connection {
    stroke: var(--drag-color);
    stroke-width: 4;
    filter: drop-shadow(0 0 6px rgba(139, 195, 74, 0.8));
}

/* 连线箭头 */
.connection-arrow {
    fill: var(--interaction-neutral);
}

/* 卡片层 */
#cards-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* 【关键修复】让卡片层的空隙可穿透，鼠标能点到下层的连线 */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 卡片样式 */
.card {
    position: absolute;
    width: 250px;
    min-height: 100px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    cursor: move;
    /* 【修复】只对非位置属性应用过渡，避免拖拽时卡片和连线不同步 */
    transition: box-shadow var(--transition-normal), 
                border-color var(--transition-normal),
                opacity var(--transition-normal);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
    /* 【修复】改为 visible，让调整手柄和连接点可以完整显示在卡片外部 */
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* 【关键修复】恢复卡片可点击，整体选中体验更好 */
    pointer-events: auto;
    /* 【性能优化】提示浏览器优化 transform 动画 */
    will-change: transform;
    /* 【触摸优化】禁用触摸时的高亮效果 */
    -webkit-tap-highlight-color: transparent;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card.selected {
    box-shadow: 0 0 0 2px var(--gray-500), var(--shadow-lg);
    border-color: var(--gray-500);
}

/* 【修复】选中状态下禁用内容区域的文本选择，避免干扰拖拽 */
.card.selected .card-content {
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.card.selected .card-content:active {
    cursor: grabbing;
}

/* 框选矩形 - 多选交互用蓝色 */
#selection-box {
    position: absolute;
    border: 2px dashed var(--interaction-primary);
    background: rgba(33, 150, 243, 0.1);
    pointer-events: none;
    z-index: 1000;
}

.card.connecting {
    box-shadow: 0 0 0 2px var(--drag-color);
}

/* 图片上传中状态（乐观 UI） */
.card.uploading {
    opacity: 0.6;
}

.card.uploading::after {
    content: '⏳ 上传中...';
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 100;
}

/* 图片上传失败状态 */
.card.upload-error {
    border: 2px solid #f44336;
    box-shadow: 0 0 0 2px #f44336;
}

.card.upload-error::after {
    content: '❌ 上传失败';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #f44336;
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 100;
}

/* 调整大小手柄 - 隐藏UI但保留功能 */
.card-resize-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    border-radius: 4px;
    z-index: 10;
    opacity: 0;
    transition: all 0.2s;
}

/* 【关键】扩大hover识别范围：使用伪元素扩展检测区域 */
.card-resize-handle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;
}

/* 卡片hover时手柄区域可交互但不显示 */
.card:hover .card-resize-handle {
    opacity: 1;
}

/* 手柄hover时不显示任何视觉效果 */
.card-resize-handle:hover {
    opacity: 1 !important;
}

.card-resize-handle.top-left {
    top: -10px;
    left: -10px;
    cursor: nw-resize;
}

.card-resize-handle.top-right {
    top: -10px;
    right: -10px;
    cursor: ne-resize;
}

.card-resize-handle.bottom-left {
    bottom: -10px;
    left: -10px;
    cursor: sw-resize;
}

.card-resize-handle.bottom-right {
    bottom: -10px;
    right: -10px;
    cursor: se-resize;
}

/* 卡片头部 */
.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px var(--spacing-md);
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid var(--gray-200);
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    /* 【关键修复】强制恢复点击事件 */
    pointer-events: auto !important;
    touch-action: auto !important;
    /* 【新增】防止标题溢出 */
    overflow: hidden;
}

/* 【新增】确保标题区域的所有子元素都能响应点击 */
.card-header > * {
    pointer-events: auto !important;
}

.card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-800);
    outline: none;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    box-sizing: border-box;
}

.card-title:empty:before {
    content: 'Double-click...';
    color: #ccc;
    font-style: italic;
    pointer-events: none; /* 【修复】伪元素不应该阻止点击事件 */
}

/* 【新增】无内容卡片 - 只显示标题，更紧凑 */
.card[data-has-content="false"]:not([data-has-image="true"]) {
    min-height: auto;  /* 移除最小高度限制 */
}

.card[data-has-content="false"]:not([data-has-image="true"]) .card-header {
    border-radius: var(--radius-lg);  /* 无内容时，header就是整个卡片，四角都圆 */
    border-bottom: none;
}

/* 卡片内容 */
.card-content {
    padding: var(--spacing-md);
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-700);
    min-height: 40px;
    /* 移除固定的max-height，让内容跟随卡片大小自适应 */
    outline: none;
    box-sizing: border-box;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    /* 【修复】内容过多时可滚动，同时防止溢出 */
    overflow: hidden auto;
    flex: 1; /* 让内容区域填充剩余空间 */
    /* 【关键修复】强制恢复点击事件，覆盖父元素的 pointer-events: none */
    pointer-events: auto !important;
    touch-action: auto !important;
    /* 【修复】底部圆角，防止内容区域超出卡片边框 */
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* 【修复】隐藏滚动条但保持滚动功能 - 解决Windows系统滚动条显示问题 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* 【修复】隐藏卡片内容区域的滚动条 - WebKit浏览器(Chrome/Safari) */
.card-content::-webkit-scrollbar {
    display: none;
}

/* 【新增】卡片内容中的链接样式 */
.card-content .card-link {
    color: #2196F3;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto !important;
    transition: color 0.2s ease;
}

.card-content .card-link:hover {
    color: #1976D2;
    text-decoration: underline;
}

/* 【新增】确保内容区域的所有子元素都能响应点击 */
.card-content > * {
    pointer-events: auto !important;
}

.card-content:empty:before {
    content: 'Double-click to edit...';
    color: #ccc;
    pointer-events: none; /* 【修复】伪元素不应该阻止点击事件 */
}

/* 卡片图片 - 基础样式 */
.card-image-container {
    padding: 0;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    display: none;
    /* 【关键修复】让点击穿透到卡片，由卡片统一处理 */
    pointer-events: none;
}

/* 有图片的卡片容器：【修复】使用固定高度而不是flex，避免闪变 */
.card[data-has-image="true"] .card-image-container {
    display: block;  /* 改为block布局 */
    padding: 0;
    margin: 0;
    border-top: 1px solid #e0e0e0;
    overflow: hidden;
    width: 100%;
    /* 移除flex: 1，改为在JS中直接设置高度 */
}

/* 有图片的卡片 - 图片样式 */
.card[data-has-image="true"] .card-image {
    width: 100%;
    height: 100%;  /* 【关键】填满容器 */
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 0;
    cursor: pointer;
    object-fit: contain;  /* 保持长宽比，完整显示图片 */
    position: relative;
    /* 【关键修复】禁止浏览器默认的图片拖拽行为 */
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;  /* 让点击穿透到容器，由卡片统一处理 */
}

/* 连接点 */
.card-connectors {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 15;  /* 【关键】高于缩放手柄(z-index: 10)，确保连接点优先级 */
}

.connector {
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid var(--gray-500);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s;
    pointer-events: auto;
    cursor: crosshair;
    z-index: 15;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 【关键】扩大hover识别范围 */
.connector::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: transparent;
    border-radius: 50%;
}

/* 卡片hover时显示连接点 */
.card:hover .connector {
    opacity: 1;
}

/* 【新增】缩放时隐藏所有连接点 */
#canvas-container.zooming .connector,
#canvas-container.resizing .connector {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 连接点hover时更明显（需要保持定位transform） */
.connector.top:hover {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1.5);
    background: var(--gray-100);
    border-color: var(--gray-500);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.connector.right:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.5);
    background: var(--gray-100);
    border-color: var(--gray-500);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.connector.bottom:hover {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1.5);
    background: var(--gray-100);
    border-color: var(--gray-500);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.connector.left:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.5);
    background: var(--gray-100);
    border-color: var(--gray-500);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.connector.top {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.connector.right {
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
}

.connector.bottom {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.connector.left {
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
}

/* 正在创建的连线（临时）：简单的直线虚线 - 拖拽交互用柔和绿色 */
.connection-temp {
    stroke: var(--drag-color);
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    fill: none;
    pointer-events: none;
    opacity: 0.6;
}

/* 吸附状态：变色，但仍然是虚线直线 */
.connection-temp.snapped {
    stroke: var(--accent-dark);
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    opacity: 0.8;
}

/* 【新增】目标卡片高亮 - 拖拽交互用提亮绿色 */
.card.connection-target {
    box-shadow: 0 0 0 3px var(--drag-color), 0 4px 20px rgba(178, 225, 101, 0.4) !important;
    border: 2px solid var(--drag-color) !important;
}

/* 【新增】目标卡片高亮时隐藏连接点 */
.card.connection-target .connector {
    opacity: 0 !important;
}

/* 提示信息 */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 2000;
    animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 选中框样式 - 多选交互用蓝色 */
.selection-box {
    position: absolute;
    border: 1px dashed var(--interaction-primary);
    background: rgba(33, 150, 243, 0.1);
    pointer-events: none;
    z-index: 1000;
}

/* 编辑窗口 */
.edit-modal {
    position: fixed;
    top: 60px; /* 从工具栏下方开始 */
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 2000;
    pointer-events: none;
}

.edit-modal-content {
    background: white;
    width: 520px;
    max-width: 80vw;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    pointer-events: auto;
    transform: translateX(100%);
    transition: transform var(--transition-bounce);
}

.edit-modal.show .edit-modal-content {
    transform: translateX(0);
}

/* 点击背景关闭 */
.edit-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    pointer-events: auto;
    transition: all var(--transition-normal);
}

.edit-modal.show::before {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.edit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;  /* 与白板列表保持一致 */
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.edit-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* .edit-modal-close 样式已移除，现在使用 .esc-hint 样式 */

.edit-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* 滚动条样式 */
.edit-modal-body::-webkit-scrollbar {
    width: 6px;
}

.edit-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.edit-modal-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.edit-modal-body::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.edit-field {
    margin-bottom: 20px;
}

.edit-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

.edit-field input[type="text"] {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    outline: none;
    transition: all var(--transition-normal);
    background: var(--gray-50);
}

.edit-field input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
    background: white;
}

.edit-field textarea {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.7;
    resize: none;
    outline: none;
    transition: all var(--transition-normal);
    min-height: 300px;
    background: var(--gray-50);
    color: var(--gray-800);  /* 【修复】明确设置文字颜色 */
}

.edit-field textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
    background: white;
}

.edit-markdown-container {
    display: flex;
    gap: 20px;
    height: 300px;
}

.edit-markdown-container textarea {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    resize: none;
    outline: none;
}

.edit-markdown-container textarea:focus {
    border-color: #2196F3;
}

.markdown-preview {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f9f9f9;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.markdown-preview ul,
.markdown-preview ol {
    padding-left: 20px;
}

.markdown-preview code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.markdown-preview pre {
    background: #f0f0f0;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
}

.markdown-preview pre code {
    background: none;
    padding: 0;
}

.markdown-preview blockquote {
    border-left: 4px solid #2196F3;
    padding-left: 10px;
    color: #666;
    margin: 10px 0;
}

.color-picker {
    display: flex;
    gap: 10px;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option:focus {
    outline: none;
    border-color: var(--interaction-accent);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.4);
    transform: scale(1.1);
}

.color-option.selected {
    border-color: var(--interaction-primary);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

.size-picker {
    display: flex;
    gap: 10px;
}

.size-option {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.size-option:hover {
    background: #f5f5f5;
}

.size-option.selected {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.edit-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* 编辑页面分割线 */
.edit-modal-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
    flex-shrink: 0;
}

.shortcut-hints {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 8px;
}

.shortcut-hint {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 5px;
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
}

.edit-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 右键菜单 */
.context-menu {
    position: fixed;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm) 0;
    min-width: 220px;
    z-index: 10000;
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 右键菜单颜色选择区域 */
.context-menu-color-section {
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.color-picker-inline {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.color-option-inline {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-option-inline:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.color-option-inline.selected {
    border-color: var(--interaction-primary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.context-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: 14px;
}

.context-menu-item:hover {
    background: var(--gray-100);
}

/* 【新增】禁用状态的菜单项 */
.context-menu-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.context-menu-item.disabled:hover {
    background: transparent;
}

.context-menu-item span:first-child {
    flex: 1;
}

.context-menu-item .shortcut {
    font-size: 12px;
    color: #999;
    margin-left: 20px;
}

.context-menu-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0;
}

.btn-primary {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #1a1a1e;
    border: none;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5aee90 0%, #32e3fe 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
}

/* 卡片颜色变体 */
.card[data-color="red"] .card-header {
    background: #ffcdd2;
}

.card[data-color="blue"] .card-header {
    background: #bbdefb;
}

.card[data-color="green"] .card-header {
    background: #d4edb3;
}

.card[data-color="yellow"] .card-header {
    background: #fff9c4;
}

.card[data-color="purple"] .card-header {
    background: #e1bee7;
}

/* 卡片大小变体 */
.card[data-size="small"] {
    transform: scale(0.85);
}

.card[data-size="large"] {
    transform: scale(1.15);
}

/* 画布导览（小地图） */
#canvas-navigator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 200px;
    height: 150px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    cursor: grab;
}

#canvas-navigator:active {
    cursor: grabbing;
}

.navigator-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--gray-50);
}

#navigator-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#navigator-viewport {
    position: absolute;
    border: 2px solid var(--primary-color);
    background: rgba(33, 150, 243, 0.1);
    border-radius: var(--radius-sm);
    pointer-events: none;
    transition: border-color var(--transition-fast);
}

#navigator-viewport:hover {
    border-color: var(--primary-dark);
    background: rgba(33, 150, 243, 0.15);
}

.navigator-card {
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 0.5;
    transition: fill 0.2s;
}

.navigator-card:hover {
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 1;
}

.navigator-connection {
    stroke: rgba(0, 0, 0, 0.3);
    stroke-width: 0.5;
    fill: none;
}

/* ===== Supabase SaaS 新增样式 ===== */

/* 通用模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f5f5f5;
    color: #333;
}

.modal-body {
    padding: 24px;
}

/* 登录模态框 */
.auth-status {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: none;
    font-size: 14px;
}

.auth-status.success {
    display: block;
    background: #c8e6c9;
    color: #2e7d32;
}

.auth-status.error {
    display: block;
    background: #ffcdd2;
    color: #c62828;
}

.auth-status.info {
    display: block;
    background: #bbdefb;
    color: #1565c0;
}

.auth-hint {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

/* 我的白板侧边栏 */
.boards-sidebar {
    position: fixed;
    top: 60px; /* 从工具栏下方开始 */
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 2500;
}

.sidebar-content {
    background: white;
    width: 380px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    pointer-events: auto; /* 【关键】只有内容区可交互 */
    transform: translateX(100%);
    transition: transform var(--transition-bounce);
}

.boards-sidebar.show .sidebar-content {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.esc-hint {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 5px;
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* 用户信息区域 - 登录前（Neutral Dark 配色方案） */
.user-info-guest {
    padding: 30px 24px;
    background: linear-gradient(135deg, #3a3a3e 0%, #252528 100%);
    border: 1px solid #4a4a4e;
    border-radius: 16px;
    color: white;
    margin-bottom: 20px;
    position: relative;
    text-align: center;
}

/* Logo 流光动画 */
@keyframes sidebar-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.user-info-guest .sidebar-logo {
    font-family: 'Kaushan Script', cursive;
    font-size: 36px;
    display: inline-block;
    padding: 0 12px;
    line-height: 1.6;
    background: linear-gradient(90deg, #4ade80 0%, #22d3ee 25%, #a78bfa 50%, #f472b6 75%, #4ade80 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sidebar-shimmer 3s linear infinite;
    margin-bottom: 8px;
}

.user-info-guest .sidebar-slogan {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.guest-message {
    font-size: 14px;
    margin-bottom: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.user-info-guest button {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #1a1a1e;
    border: none;
    font-weight: 600;
    border-radius: 30px;
    padding: 14px 32px;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.user-info-guest button:hover {
    background: linear-gradient(135deg, #5aee90 0%, #32e3fe 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 用户信息区域 - 登录后 */
.user-info-logged {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 用户信息和退出登录区域（置底） */
.user-section-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 0;
}

.user-email {
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    background: transparent;
    border-radius: 8px;
    color: #666;
    word-break: break-all;
    border: 1px solid #e0e0e0;
}

/* 会员状态徽章（亮色紫红渐变风格） */
.membership-badge {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.membership-badge.free {
    background: #4a4a4e;
    color: #b0b0b0;
    border: 1px solid #5a5a5e;
}

/* 会员徽章 - 亮色紫红渐变 */
.membership-badge.member {
    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.4);
}

/* 升级会员按钮（Teal-Green 渐变） */
.btn-upgrade {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #1a1a1e;
    border: none;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-upgrade:hover {
    background: linear-gradient(135deg, #5aee90 0%, #32e3fe 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
    border: none;
}

/* 反馈建议按钮 */
.btn-feedback {
    background: transparent;
    border: 1px dashed #9e9e9e;
    color: #666;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-feedback:hover {
    border-color: #4CAF50;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.05);
    border-style: solid;
}

.sidebar-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
    flex-shrink: 0;
}

.sidebar-actions {
    margin-bottom: 20px;
}

.boards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.board-item {
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
}

.board-item:hover {
    background: white;
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.board-item.active {
    background: var(--gray-50);
    border-color: #333;
    border-width: 1px;
    position: relative;
}

.board-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.board-item-title {
    font-weight: 600;
    color: #333;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.board-item-date {
    font-size: 12px;
    color: #999;
    margin-left: 12px;
}

.board-item-meta {
    font-size: 13px;
    color: #666;
}

.board-item-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.board-item-actions button {
    flex: 1;
    padding: 6px 12px;
    font-size: 13px;
}

.loading {
    text-align: center;
    color: #999;
    padding: 40px 20px;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.empty-state-text {
    font-size: 14px;
    line-height: 1.6;
}

/* Toast 提示增强 */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    z-index: 4000;
    animation: toastSlideUp 0.3s ease-out;
    max-width: 80%;
    text-align: center;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 滚动条样式 */
.sidebar-body::-webkit-scrollbar {
    width: 6px;
}

.sidebar-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sidebar-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.sidebar-body::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* 登录/注册按钮组 */
.auth-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.auth-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 状态消息样式 */
.auth-status.warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

/* 截图预览样式 */
.edit-image-preview {
    width: 100%;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fafafa;
    text-align: center;
}

.edit-image-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

/* 保存状态指示器 */
.save-status-pending {
    color: #ff9800;
    font-weight: 500;
}

.save-status-saving {
    color: #2196F3;
    font-weight: 500;
    animation: pulse 1s infinite;
}

.save-status-saved {
    color: #4CAF50;
    font-weight: 500;
}

.save-status-error {
    color: #f44336;
    font-weight: 500;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


/* ===== 升级会员模态框样式 ===== */

.upgrade-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.upgrade-modal-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

.upgrade-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.upgrade-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.upgrade-header {
    text-align: center;
    margin-bottom: 24px;
}

.upgrade-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.upgrade-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.current-board-count {
    font-size: 14px;
    color: #e74c3c;
    margin: 0;
}

.upgrade-benefits {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.upgrade-benefits h3 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0 0 12px 0;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.benefits-list li {
    font-size: 14px;
    color: #333;
}

.upgrade-plans {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.plan-card {
    flex: 1;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
    position: relative;
}

.plan-card:hover {
    border-color: #2196F3;
}

.plan-card.recommended {
    border-color: #2196F3;
    background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
}

.plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2196F3;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 10px;
}

.plan-name {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.plan-price {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.plan-price span {
    font-size: 14px;
    font-weight: 400;
    color: #999;
}

.plan-save {
    font-size: 12px;
    color: #4CAF50;
    margin-bottom: 12px;
}

.plan-btn {
    width: 100%;
}

.upgrade-footer {
    text-align: center;
}

.upgrade-footer p {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* 暗色模式 - 升级模态框 */
body.dark-mode .upgrade-modal-content {
    background: #252528;
}

body.dark-mode .upgrade-modal-close {
    background: #3a3a3e;
    color: #b0b0b0;
}

body.dark-mode .upgrade-modal-close:hover {
    background: #4a4a4e;
    color: #fff;
}

body.dark-mode .upgrade-header h2 {
    color: #fff;
}

body.dark-mode .upgrade-benefits {
    background: #2a2a2e;
}

body.dark-mode .upgrade-benefits h3 {
    color: #b0b0b0;
}

body.dark-mode .benefits-list li {
    color: #e0e0e0;
}

body.dark-mode .plan-card {
    border-color: #4a4a4e;
    background: #2a2a2e;
}

body.dark-mode .plan-card:hover {
    border-color: #2196F3;
}

body.dark-mode .plan-card.recommended {
    background: linear-gradient(135deg, #3a3a3e 0%, #2a2a2e 100%);
}

body.dark-mode .plan-name {
    color: #b0b0b0;
}

body.dark-mode .plan-price {
    color: #fff;
}

/* ===== 邀请码输入区域样式 ===== */

.invite-code-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* 邀请码折叠状态 */
.invite-code-section.collapsed {
    border-top: none;
    padding-top: 10px;
}

.invite-code-toggle {
    text-align: center;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
}

.invite-code-toggle:hover {
    color: #666;
}

.invite-code-content {
    margin-top: 15px;
}

.invite-code-divider {
    text-align: center;
    color: #999;
    font-size: 13px;
    margin-bottom: 15px;
}

.invite-code-input-group {
    display: flex;
    gap: 10px;
}

.invite-code-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.invite-code-input:focus {
    outline: none;
    border-color: #2196F3;
}

.invite-code-input::placeholder {
    color: #aaa;
}

.invite-code-status {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}

.invite-code-status.success {
    color: #4CAF50;
}

.invite-code-status.error {
    color: #f44336;
}

.invite-code-status.loading {
    color: #2196F3;
}

/* ===== Gumroad License 区域样式 ===== */

.gumroad-section {
    text-align: center;
    margin-bottom: 20px;
}

.gumroad-buy-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #ff90e8 0%, #ffc900 100%);
    border: none;
    color: #000;
    text-decoration: none;
    display: inline-block;
}

.gumroad-buy-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.gumroad-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
}

.license-section {
    margin-bottom: 20px;
}

.license-input-group {
    display: flex;
    gap: 10px;
}

.license-input {
    flex: 1;
    padding: 14px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: monospace;
    transition: border-color 0.2s;
}

.license-input:focus {
    outline: none;
    border-color: #2196F3;
}

.license-input::placeholder {
    color: #aaa;
    font-family: inherit;
}

.license-status {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}

.license-status.success {
    color: #4CAF50;
}

.license-status.error {
    color: #f44336;
}

.license-status.loading {
    color: #2196F3;
}

/* 暗色模式 - 邀请码区域 */
body.dark-mode .invite-code-section {
    border-top-color: #4a4a4e;
}

body.dark-mode .invite-code-divider {
    color: #b0b0b0;
}

body.dark-mode .invite-code-input {
    background: #2a2a2e;
    border-color: #4a4a4e;
    color: #e0e0e0;
}

body.dark-mode .invite-code-input:focus {
    border-color: #2196F3;
}

body.dark-mode .invite-code-input::placeholder {
    color: #6a6a6a;
}

/* 暗色模式 - License 区域 */
body.dark-mode .gumroad-hint {
    color: #888;
}

body.dark-mode .license-input {
    background: #2a2a2e;
    border-color: #4a4a4e;
    color: #e0e0e0;
}

body.dark-mode .license-input:focus {
    border-color: #2196F3;
}

body.dark-mode .license-input::placeholder {
    color: #6a6a6a;
}

body.dark-mode .invite-code-toggle {
    color: #888;
}

body.dark-mode .invite-code-toggle:hover {
    color: #aaa;
}

/* ===== 用户邀请码生成区域样式（亮色紫红渐变） ===== */

.user-invite-section {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3);
}

.invite-quota-info {
    font-size: 13px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.95);
}

.generated-code-display {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
}

.generated-code-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
}

.generated-code-value {
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
    letter-spacing: 2px;
    margin-bottom: 10px;
    word-break: break-all;
    color: white;
}

.user-invite-section .btn {
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
}

.user-invite-section .btn:hover {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
}


/* ===== 分享模态框样式 ===== */

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.share-modal-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

.share-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.share-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.share-header {
    text-align: center;
    margin-bottom: 24px;
}

.share-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.share-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.share-header p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.share-generate {
    margin-bottom: 24px;
}

.share-list-section {
    margin-bottom: 24px;
}

.share-list-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0 0 12px 0;
}

.shares-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-shares {
    text-align: center;
    color: #999;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.share-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 12px;
}

.share-info {
    flex: 1;
    min-width: 0;
}

.share-url {
    font-size: 13px;
    color: #333;
    word-break: break-all;
    margin-bottom: 4px;
}

.share-date {
    font-size: 11px;
    color: #999;
}

.share-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-danger {
    background: #fff;
    border: 1px solid #e74c3c;
    color: #e74c3c;
}

.btn-danger:hover {
    background: #e74c3c;
    color: #fff;
}

.share-footer {
    text-align: center;
}

.share-footer p {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* 暗色模式 - 分享模态框 */
body.dark-mode .share-modal-content {
    background: #252528;
}

body.dark-mode .share-modal-close {
    background: #3a3a3e;
    color: #b0b0b0;
}

body.dark-mode .share-modal-close:hover {
    background: #4a4a4e;
    color: #fff;
}

body.dark-mode .share-header h2 {
    color: #fff;
}

body.dark-mode .share-header p {
    color: #b0b0b0;
}

body.dark-mode .share-list-section h3 {
    color: #b0b0b0;
}

body.dark-mode .empty-shares {
    background: #2a2a2e;
    color: #6a6a6a;
}

body.dark-mode .share-item {
    background: #2a2a2e;
}

body.dark-mode .share-url {
    color: #e0e0e0;
}

body.dark-mode .btn-danger {
    background: #2a2a2e;
    border-color: #e74c3c;
}


/* ===== 只读模式样式 ===== */

#readonly-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    padding: 10px 20px;
    text-align: center;
    z-index: 10001;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.readonly-home-link {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}

.readonly-home-link:hover {
    opacity: 0.9;
}

/* 只读模式下调整工具栏位置 */
body.readonly-mode .toolbar {
    top: 42px;
}

/* 只读模式下调整画布位置 */
body.readonly-mode #canvas-container {
    top: 92px;
}

/* 只读模式下禁用卡片拖拽光标 */
body.readonly-mode .card {
    cursor: default;
}

body.readonly-mode .card-header {
    cursor: default;
}

body.readonly-mode .card-content {
    cursor: default;
}

/* 只读模式下隐藏连接点和调整大小手柄 */
body.readonly-mode .connector {
    display: none;
}

body.readonly-mode .card-resize-handle {
    display: none;
}

/* 只读模式下禁用卡片选中效果 */
body.readonly-mode .card.selected {
    box-shadow: none;
    outline: none;
}

/* 暗色模式 - 只读横幅 */
body.dark-mode #readonly-banner {
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
}


/* ===== 登录模态框美化样式 ===== */

/* 模态框根容器 */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}

/* 背景遮罩 - 毛玻璃效果 */
.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: authFadeIn 0.3s ease-out;
}

/* 模态框内容容器（Neutral Dark 配色方案） */
.auth-modal-content {
    position: relative;
    background: linear-gradient(135deg, #3a3a3e 0%, #252528 100%);
    border: 1px solid #4a4a4e;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 420px;
    width: 90%;
    overflow: hidden;
    animation: authSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 关闭按钮 */
.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.auth-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.1);
}

/* 入场动画 */
@keyframes authFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes authSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 品牌区域（方案1：深蓝渐变 + 流光Logo） */
.auth-brand {
    background: transparent;
    padding: 40px 30px 20px;
    text-align: center;
}

.auth-brand-icon {
    display: none; /* 隐藏原有图标，使用Logo代替 */
}

/* Logo 流光动画 */
@keyframes auth-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.auth-brand-logo {
    font-family: 'Kaushan Script', cursive;
    font-size: 48px;
    display: inline-block;
    padding: 0 15px;
    line-height: 1.6;
    background: linear-gradient(90deg, #4ade80 0%, #22d3ee 25%, #a78bfa 50%, #f472b6 75%, #4ade80 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: auth-shimmer 3s linear infinite;
    margin-bottom: 12px;
}

.auth-brand-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    display: none; /* 隐藏原有标题，使用Logo代替 */
}

.auth-brand-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
    letter-spacing: 1px;
}

/* 表单容器 */
.auth-form-container {
    padding: 20px 30px 30px;
}

/* 输入框组 */
.auth-input-group {
    position: relative;
    margin-bottom: 20px;
}

.auth-input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.auth-input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
    outline: none;
    background: rgba(255, 255, 255, 0.12);
}

.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 输入框图标 */
.auth-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
    pointer-events: none;
}

.auth-input:focus ~ .auth-input-icon,
.auth-input-group:focus-within .auth-input-icon {
    color: #fff;
}

/* 密码显示切换按钮 */
.auth-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    border-radius: 6px;
}

.auth-password-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.auth-password-toggle .toggle-icon {
    font-size: 16px;
}

/* 错误状态 */
.auth-input-group.error .auth-input {
    border-color: #f472b6;
    animation: authShake 0.4s ease-out;
}

.auth-input-group.error .auth-input-icon {
    color: #f472b6;
}

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 操作按钮区域 */
.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* 主要按钮（Teal-Green 渐变） */
.auth-btn-primary {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #1a1a1e;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.auth-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(74, 222, 128, 0.3);
    background: linear-gradient(135deg, #5aee90 0%, #32e3fe 100%);
}

.auth-btn-primary:active {
    transform: translateY(0);
}

.auth-btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* 次要按钮（方案1：透明边框） */
.auth-btn-secondary {
    width: 100%;
    padding: 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.auth-btn-secondary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 加载状态 */
.auth-btn-primary.loading,
.auth-btn-secondary.loading {
    pointer-events: none;
}

.auth-btn-primary.loading .btn-text,
.auth-btn-secondary.loading .btn-text {
    visibility: hidden;
}

.auth-btn-primary.loading .btn-loading,
.auth-btn-secondary.loading .btn-loading {
    display: inline-block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: authSpin 0.8s linear infinite;
}

@keyframes authSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 状态提示消息（深蓝主题适配） */
.auth-status-message {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    animation: authSlideIn 0.3s ease-out;
}

@keyframes authSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-status-message.success {
    display: flex;
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid #4ade80;
    color: #4ade80;
}

.auth-status-message.error {
    display: flex;
    background: rgba(244, 114, 182, 0.2);
    border: 1px solid #f472b6;
    color: #f472b6;
    animation: authSlideIn 0.3s ease-out, authShake 0.4s ease-out;
}

.auth-status-message.info {
    display: flex;
    background: rgba(34, 211, 238, 0.2);
    border: 1px solid #22d3ee;
    color: #22d3ee;
}

.auth-status-message.warning {
    display: flex;
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid #fbbf24;
    color: #fbbf24;
}

/* 提示文字 */
.auth-hint-text {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 20px 0 0 0;
}

/* 响应式适配 */
@media (max-width: 480px) {
    .auth-modal-content {
        width: 95%;
        max-width: none;
        margin: 10px;
        border-radius: 20px;
    }
    
    .auth-brand {
        padding: 30px 20px 15px;
    }
    
    .auth-brand-logo {
        font-size: 40px;
    }
    
    .auth-form-container {
        padding: 20px;
    }
    
    .auth-input {
        padding: 14px 14px 14px 44px;
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    .auth-btn-primary,
    .auth-btn-secondary {
        padding: 14px;
    }
    
    /* 侧边栏登录区域响应式 */
    .user-info-guest {
        padding: 24px 20px;
    }
    
    .user-info-guest .sidebar-logo {
        font-size: 32px;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .auth-modal-backdrop,
    .auth-modal-content,
    .auth-brand-logo,
    .auth-input,
    .auth-btn-primary,
    .auth-btn-secondary,
    .auth-status-message,
    .user-info-guest .sidebar-logo {
        animation: none;
        transition: none;
    }
}

/* ===== 暗色主题 (Dark Mode) - 深色系 ===== */
body.dark-mode {
    background: #1a1a1e;
}

/* 暗色模式 - 工具栏 */
body.dark-mode .toolbar {
    background: #252528;
    border-bottom-color: #3a3a3e;
}

body.dark-mode .logo {
    color: #ffffff;
}

/* 暗色模式下 Logo 流光效果保持不变 */
body.dark-mode .logo .logo-text {
    background: linear-gradient(90deg, #4ade80 0%, #22d3ee 25%, #a78bfa 50%, #f472b6 75%, #4ade80 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .hint {
    color: #6a6a6a;
}

body.dark-mode .btn {
    background: #2a2a2e;
    border-color: #3a3a3e;
    color: #b0b0b0;
}

body.dark-mode .btn:hover {
    background: #3a3a3e;
    border-color: #4a4a4e;
    color: #ffffff;
}

/* 暗色模式 - 主按钮（Teal-Green 渐变） */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #1a1a1e;
    border: none;
}

body.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, #5aee90 0%, #32e3fe 100%);
    color: #1a1a1e;
}

body.dark-mode .toolbar-divider {
    background: #4a4a4e;
}

/* 暗色模式 - 画布 */
body.dark-mode #canvas-container {
    background-color: #1a1a1e;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
}

/* 暗色模式 - 卡片 */
body.dark-mode .card {
    background: #252528;
    border-color: #3a3a3e;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

body.dark-mode .card.selected {
    box-shadow: 0 0 0 2px #72dd9f, 0 8px 24px rgba(0, 0, 0, 0.6);
    border-color: #72dd9f;
}

/* 暗色模式 - 卡片头部和内容 */
body.dark-mode .card-header {
    background: #2a2a2e;
    border-bottom: 4px solid #4a4a4e;
}

body.dark-mode .card-title {
    color: #ffffff;
}

body.dark-mode .card-content {
    color: #e0e0e0;
    background: #2a2a2e;
    /* 确保继承基础样式的 padding 和 overflow */
}

/* 暗色模式 - 卡片颜色变体（标题区上色，内容文字颜色） */
body.dark-mode .card[data-color="red"] .card-header {
    background: #ffcdd2;
}
body.dark-mode .card[data-color="red"] .card-title {
    color: #1a1a1e;
}
body.dark-mode .card[data-color="red"] .card-content {
    color: #ffcdd2;
}

body.dark-mode .card[data-color="blue"] .card-header {
    background: #bbdefb;
}
body.dark-mode .card[data-color="blue"] .card-title {
    color: #1a1a1e;
}
body.dark-mode .card[data-color="blue"] .card-content {
    color: #bbdefb;
}

body.dark-mode .card[data-color="green"] .card-header {
    background: #c8e6c9;
}
body.dark-mode .card[data-color="green"] .card-title {
    color: #1a1a1e;
}
body.dark-mode .card[data-color="green"] .card-content {
    color: #c8e6c9;
}

body.dark-mode .card[data-color="yellow"] .card-header {
    background: #fff9c4;
}
body.dark-mode .card[data-color="yellow"] .card-title {
    color: #1a1a1e;
}
body.dark-mode .card[data-color="yellow"] .card-content {
    color: #fff9c4;
}

body.dark-mode .card[data-color="purple"] .card-header {
    background: #e1bee7;
}
body.dark-mode .card[data-color="purple"] .card-title {
    color: #1a1a1e;
}
body.dark-mode .card[data-color="purple"] .card-content {
    color: #e1bee7;
}

/* 暗色模式 - 连接线 */
body.dark-mode .connection {
    stroke: #4a4a4e;
}

body.dark-mode .connection:hover {
    stroke: #6a6a6e;
}

body.dark-mode .connection.selected {
    stroke: var(--drag-color);
    filter: drop-shadow(0 0 6px rgba(178, 225, 101, 0.8));
}

/* 暗色模式 - 连接点 */
body.dark-mode .connector {
    background: var(--drag-color);
    border-color: #4a4a4e;
}

body.dark-mode .connector:hover {
    background: var(--accent-light);
    border-color: #6a6a6e;
}

/* 暗色模式 - 小地图 */
body.dark-mode #canvas-navigator {
    background: #252528;
    border-color: #3a3a3e;
}

body.dark-mode .navigator-content {
    background: #1a1a1e;
}

body.dark-mode .navigator-card {
    fill: #252528;
    stroke: #3a3a3e;
}

/* 暗色模式 - 框选矩形 */
body.dark-mode #selection-box,
body.dark-mode .selection-box {
    border-color: #6a6a6e;
    background: rgba(106, 106, 110, 0.1);
}

/* 暗色模式 - 右键菜单 */
body.dark-mode .context-menu {
    background: #252528;
    border-color: #3a3a3e;
}

body.dark-mode .context-menu-item {
    color: #b0b0b0;
}

body.dark-mode .context-menu-item:hover {
    background: #2a2a2e;
    color: #ffffff;
}

body.dark-mode .context-menu-color-section {
    background: #2a2a2e;
    border-bottom-color: #3a3a3e;
}

body.dark-mode .context-menu-divider {
    background: #2a2a2e;
}

/* 暗色模式 - 编辑模态框 */
body.dark-mode .edit-modal-content {
    background: #252528;
}

body.dark-mode .edit-modal-header {
    border-bottom-color: #3a3a3e;
}

body.dark-mode .edit-modal-header h2 {
    color: #ffffff;
}

body.dark-mode .edit-field label {
    color: #b0b0b0;
}

body.dark-mode .edit-field input[type="text"],
body.dark-mode .edit-field textarea {
    background: #1a1a1e;
    border-color: #3a3a3e;
    color: #e0e0e0;
}

body.dark-mode .edit-field input[type="text"]:focus,
body.dark-mode .edit-field textarea:focus {
    border-color: #4a4a4e;
    background: #2a2a2e;
}

body.dark-mode .edit-modal-divider {
    background: #2a2a2e;
}

/* 暗色模式 - 快捷键提示 */
body.dark-mode .shortcut-hint {
    background: transparent;
    border: 1px solid #3a3a3e;
    color: #6a6a6a;
}

/* 暗色模式 - 侧边栏 */
body.dark-mode .sidebar-content {
    background: #252528;
}

body.dark-mode .sidebar-header {
    border-bottom-color: #3a3a3e;
}

body.dark-mode .sidebar-header h2 {
    color: #ffffff;
}

body.dark-mode .sidebar-divider {
    background: #3a3a3e;
}

body.dark-mode .board-item {
    background: transparent;
    color: #b0b0b0;
    border: 1px solid #3a3a3e;
}

body.dark-mode .board-item:hover {
    background: #2a2a2e;
    border-color: #4a4a4e;
    color: #ffffff;
}

body.dark-mode .board-item.active {
    background: transparent;
    border: 2px solid #4CAF50;
    box-shadow: none;
}

body.dark-mode .board-item.active .board-item-title {
    color: #ffffff;
}

body.dark-mode .board-item.active .board-item-date {
    color: #9a9a9a;
}

body.dark-mode .board-item.active .board-item-actions button {
    background: #2a2a2e;
    border-color: #3a3a3e;
    color: #b0b0b0;
}

body.dark-mode .board-item.active .board-item-actions button:hover {
    background: #3a3a3e;
    color: #ffffff;
}

body.dark-mode .board-item-title {
    color: #ffffff;
}

body.dark-mode .user-email {
    background: #2a2a2e;
    border-color: #3a3a3e;
    color: #b0b0b0;
}

/* 暗色模式 - 会员徽章（Neutral Dark 配色方案） */
body.dark-mode .membership-badge.free {
    background: #4a4a4e;
    color: #b0b0b0;
    border: 1px solid #5a5a5e;
}

/* 暗色模式会员徽章 - 保持亮色紫红渐变 */
body.dark-mode .membership-badge.member {
    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    color: white;
    border: none;
}

/* 暗色模式 - 升级按钮（Teal-Green 渐变） */
body.dark-mode .btn-upgrade {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #1a1a1e;
}

body.dark-mode .btn-upgrade:hover {
    background: linear-gradient(135deg, #5aee90 0%, #32e3fe 100%);
}

/* 暗色模式 - 反馈按钮 */
body.dark-mode .btn-feedback {
    border-color: #5a5a5e;
    color: #9e9e9e;
    background: transparent;
}

body.dark-mode .btn-feedback:hover {
    border-color: #4CAF50;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

/* 暗色模式 - ESC按钮 */
body.dark-mode .esc-hint {
    background: transparent;
    border: 1px solid #3a3a3e;
    color: #6a6a6a;
}

/* 暗色模式 - 整理下拉菜单 */
body.dark-mode .organize-menu {
    background: #252528;
    border-color: #3a3a3e;
}

body.dark-mode .organize-option {
    border-bottom-color: #3a3a3e;
}

body.dark-mode .organize-option:hover {
    background: #2a2a2e;
}

body.dark-mode .option-text {
    color: #ffffff;
}

body.dark-mode .option-desc {
    color: #6a6a6a;
}

/* ===== 反馈建议弹窗样式 ===== */
.feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.feedback-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: feedbackModalIn 0.2s ease-out;
}

@keyframes feedbackModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.feedback-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

.feedback-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.feedback-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.feedback-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.feedback-modal-body {
    padding: 24px;
}

.feedback-type-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.feedback-type-option {
    flex: 1;
    padding: 12px 8px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background: white;
}

.feedback-type-option:hover {
    border-color: #bdbdbd;
}

.feedback-type-option:has(input:checked) {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.08);
}

.feedback-type-option input {
    display: none;
}

.feedback-type-option .type-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.feedback-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.feedback-textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

.feedback-textarea::placeholder {
    color: #9e9e9e;
}

.feedback-char-count {
    text-align: right;
    font-size: 12px;
    color: #9e9e9e;
    margin-top: 4px;
    margin-bottom: 12px;
}

.feedback-char-count.valid {
    color: #4CAF50;
}

.feedback-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.feedback-input:focus {
    outline: none;
    border-color: #4CAF50;
}

.feedback-input::placeholder {
    color: #9e9e9e;
}

.feedback-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
}

.feedback-modal-footer .btn {
    min-width: 100px;
}

.feedback-modal-footer #submitFeedback:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 暗色模式 - 反馈弹窗 */
body.dark-mode .feedback-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .feedback-modal-content {
    background: #1a1a1e;
    border: 1px solid #2a2a2e;
}

body.dark-mode .feedback-modal-header {
    background: #151518;
    border-bottom-color: #2a2a2e;
}

body.dark-mode .feedback-modal-header h2 {
    color: #ffffff;
}

body.dark-mode .feedback-modal-close {
    color: #6a6a6a;
}

body.dark-mode .feedback-modal-close:hover {
    background: #252528;
    color: #ffffff;
}

body.dark-mode .feedback-modal-body {
    background: #1a1a1e;
}

body.dark-mode .feedback-type-option {
    background: #1a1a1e;
    border-color: #3a3a3e;
}

body.dark-mode .feedback-type-option:hover {
    border-color: #5a5a5e;
}

body.dark-mode .feedback-type-option:has(input:checked) {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.15);
}

body.dark-mode .feedback-type-option .type-label {
    color: #e0e0e0;
}

body.dark-mode .feedback-textarea {
    background: #252528;
    border-color: #3a3a3e;
    color: #e0e0e0;
}

body.dark-mode .feedback-textarea:focus {
    border-color: #4CAF50;
}

body.dark-mode .feedback-textarea::placeholder {
    color: #6a6a6a;
}

body.dark-mode .feedback-input {
    background: #252528;
    border-color: #3a3a3e;
    color: #e0e0e0;
}

body.dark-mode .feedback-input:focus {
    border-color: #4CAF50;
}

body.dark-mode .feedback-input::placeholder {
    color: #6a6a6a;
}

body.dark-mode .feedback-modal-footer {
    background: #151518;
    border-top-color: #2a2a2e;
}

/* ===== 导入思维导图弹窗样式 ===== */
.import-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.import-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.import-modal-content {
    position: relative;
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: importModalFadeIn 0.2s ease-out;
}

@keyframes importModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.import-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.import-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
}

.import-modal-header #import-root-name {
    color: var(--primary-color);
    font-weight: 700;
}

.import-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.import-modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.import-modal-body {
    padding: 24px;
}

.import-textarea {
    width: 100%;
    height: 300px;
    padding: 16px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
    line-height: 1.6;
    resize: none;
    outline: none;
    transition: all var(--transition-normal);
    background: var(--gray-50);
}

.import-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
    background: white;
}

.import-textarea::placeholder {
    color: var(--gray-400);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.import-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--gray-600);
}

.import-preview-divider {
    color: var(--gray-400);
}

#import-node-count,
#import-depth-count {
    font-weight: 600;
    color: var(--gray-700);
}

.import-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.import-modal-footer .btn {
    min-width: 100px;
}

.import-modal-footer #confirmImport:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 暗色模式 - 导入弹窗 */
body.dark-mode .import-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .import-modal-content {
    background: #1a1a1e;
    border: 1px solid #2a2a2e;
}

body.dark-mode .import-modal-header {
    background: #151518;
    border-bottom-color: #2a2a2e;
}

body.dark-mode .import-modal-header h2 {
    color: #ffffff;
}

body.dark-mode .import-modal-close {
    color: #6a6a6a;
}

body.dark-mode .import-modal-close:hover {
    background: #252528;
    color: #ffffff;
}

body.dark-mode .import-textarea {
    background: #151518;
    border-color: #2a2a2e;
    color: #ffffff;
}

body.dark-mode .import-textarea:focus {
    border-color: var(--primary-color);
    background: #1a1a1e;
}

body.dark-mode .import-textarea::placeholder {
    color: #5a5a5a;
}

body.dark-mode .import-preview {
    background: #151518;
    color: #9a9a9a;
}

body.dark-mode #import-node-count,
body.dark-mode #import-depth-count {
    color: #ffffff;
}

body.dark-mode .import-modal-footer {
    background: #151518;
    border-top-color: #2a2a2e;
}

/* ===== 卡片组样式 ===== */

/* 组层 */
#groups-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 卡片组 */
.card-group {
    position: absolute;
    pointer-events: auto;
}

/* 组边框 - 轻量级虚线样式 */
.group-border {
    position: absolute;
    border: 2px dashed rgba(100, 149, 237, 0.4);
    border-radius: 12px;
    background: rgba(100, 149, 237, 0.03);
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 线条粗细 */
.card-group[data-border-width="thin"] .group-border {
    border-width: 1px;
}
.card-group[data-border-width="medium"] .group-border {
    border-width: 2px;
}
.card-group[data-border-width="thick"] .group-border {
    border-width: 4px;
}

/* 颜色主题 */
.card-group[data-color="blue"] .group-border {
    border-color: rgba(100, 149, 237, 0.4);
    background: rgba(100, 149, 237, 0.03);
}
.card-group[data-color="green"] .group-border {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.03);
}
.card-group[data-color="purple"] .group-border {
    border-color: rgba(156, 39, 176, 0.4);
    background: rgba(156, 39, 176, 0.03);
}
.card-group[data-color="orange"] .group-border {
    border-color: rgba(255, 152, 0, 0.4);
    background: rgba(255, 152, 0, 0.03);
}
.card-group[data-color="pink"] .group-border {
    border-color: rgba(233, 30, 99, 0.4);
    background: rgba(233, 30, 99, 0.03);
}
.card-group[data-color="gray"] .group-border {
    border-color: rgba(158, 158, 158, 0.4);
    background: rgba(158, 158, 158, 0.03);
}

/* 组边框悬停状态 */
.group-border:hover {
    border-color: rgba(100, 149, 237, 0.6);
    background: rgba(100, 149, 237, 0.06);
}

/* 组边框选中状态 */
.card-group.selected .group-border {
    border-color: rgba(100, 149, 237, 0.8);
    background: rgba(100, 149, 237, 0.08);
    box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.15);
}

/* 组标签 */
.group-label {
    position: absolute;
    top: -24px;
    left: 8px;
    font-size: 12px;
    color: rgba(100, 149, 237, 0.8);
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 10px;
    border-radius: 4px;
    cursor: text;
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 标签颜色跟随组颜色 */
.card-group[data-color="blue"] .group-label { color: rgba(100, 149, 237, 0.9); }
.card-group[data-color="green"] .group-label { color: rgba(76, 175, 80, 0.9); }
.card-group[data-color="purple"] .group-label { color: rgba(156, 39, 176, 0.9); }
.card-group[data-color="orange"] .group-label { color: rgba(255, 152, 0, 0.9); }
.card-group[data-color="pink"] .group-label { color: rgba(233, 30, 99, 0.9); }
.card-group[data-color="gray"] .group-label { color: rgba(100, 100, 100, 0.9); }

/* 组标签编辑状态 */
.group-label.editing {
    background: white;
    border: 1px solid rgba(100, 149, 237, 0.5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.2);
}

/* 组右键菜单样式 */
.context-menu-section-title {
    padding: 6px 12px;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-menu-colors {
    display: flex;
    gap: 6px;
    padding: 6px 12px;
}

.context-menu-border-width {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
}

.border-width-option {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    color: #666;
}

.border-width-option:hover {
    background: rgba(0, 0, 0, 0.08);
}

.border-width-option[data-width="thin"] { 
    font-size: 10px;
    font-weight: 300;
}
.border-width-option[data-width="medium"] { 
    font-size: 14px;
    font-weight: 500;
}
.border-width-option[data-width="thick"] { 
    font-size: 18px;
    font-weight: 700;
}

.border-width-option.selected {
    background: rgba(100, 149, 237, 0.15);
    color: rgba(100, 149, 237, 1);
}

/* 组颜色选择器 */
.group-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
}

.group-color:hover {
    transform: scale(1.15);
}

.group-color.selected {
    border-color: #333;
    box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(0, 0, 0, 0.2);
}

/* 暗色模式 - 卡片组 */
body.dark-mode .group-border {
    border-color: rgba(135, 206, 250, 0.3);
    background: rgba(135, 206, 250, 0.03);
}

body.dark-mode .group-label {
    color: rgba(135, 206, 250, 0.9);
    background: rgba(30, 30, 30, 0.95);
}

body.dark-mode .card-group[data-color="blue"] .group-border {
    border-color: rgba(135, 206, 250, 0.4);
}
body.dark-mode .card-group[data-color="green"] .group-border {
    border-color: rgba(129, 199, 132, 0.4);
}
body.dark-mode .card-group[data-color="purple"] .group-border {
    border-color: rgba(186, 104, 200, 0.4);
}
body.dark-mode .card-group[data-color="orange"] .group-border {
    border-color: rgba(255, 183, 77, 0.4);
}
body.dark-mode .card-group[data-color="pink"] .group-border {
    border-color: rgba(240, 98, 146, 0.4);
}
body.dark-mode .card-group[data-color="gray"] .group-border {
    border-color: rgba(189, 189, 189, 0.4);
}

body.dark-mode .card-group[data-color="blue"] .group-label { color: rgba(135, 206, 250, 0.9); }
body.dark-mode .card-group[data-color="green"] .group-label { color: rgba(129, 199, 132, 0.9); }
body.dark-mode .card-group[data-color="purple"] .group-label { color: rgba(186, 104, 200, 0.9); }
body.dark-mode .card-group[data-color="orange"] .group-label { color: rgba(255, 183, 77, 0.9); }
body.dark-mode .card-group[data-color="pink"] .group-label { color: rgba(240, 98, 146, 0.9); }
body.dark-mode .card-group[data-color="gray"] .group-label { color: rgba(189, 189, 189, 0.9); }

body.dark-mode .group-label.editing {
    background: #252528;
    border-color: rgba(135, 206, 250, 0.5);
}

body.dark-mode .context-menu-section-title {
    color: #6a6a6a;
}

body.dark-mode .border-width-option {
    color: #aaa;
}

body.dark-mode .border-width-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .border-width-option.selected {
    background: rgba(135, 206, 250, 0.15);
    color: rgba(135, 206, 250, 1);
}

body.dark-mode .group-color.selected {
    border-color: #fff;
}

/* ===== PWA 移动端适配 ===== */

/* 响应式断点变量 */
:root {
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
}

/* 禁用触摸设备的默认行为 */
#canvas-container {
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* ===== 手机端样式 (<768px) ===== */
@media (max-width: 767px) {
    /* 隐藏侧边栏 */
    .sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.mobile-open {
        display: block;
        transform: translateX(0);
    }
    
    /* 侧边栏遮罩 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* 底部工具栏 */
    .toolbar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--gray-200);
        border-bottom: none;
        z-index: 1000;
    }
    
    .toolbar-left {
        display: none;
    }
    
    .toolbar-right {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        justify-content: space-around;
    }
    
    /* 工具栏按钮 - 最小触摸区域 44x44px */
    .toolbar .btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .toolbar-divider {
        display: none;
    }
    
    /* 汉堡菜单按钮 */
    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        background: var(--gray-100);
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 20px;
    }
    
    .hamburger-btn:active {
        background: var(--gray-200);
    }
    
    /* 隐藏小地图 */
    #canvas-navigator,
    .canvas-navigator {
        display: none !important;
    }
    
    /* 增大卡片字体 */
    .card-title {
        font-size: 16px;
    }
    
    .card-content {
        font-size: 14px;
    }
    
    /* 右键菜单项增大 */
    .context-menu-item {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    /* 编辑弹窗全屏 */
    .edit-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    .edit-modal-body {
        height: calc(100% - 60px - 70px);
        overflow-y: auto;
    }
    
    /* 移动端简化：移除快速收集功能 */
    
    /* 保存状态指示器隐藏 */
    #save-status-indicator {
        display: none;
    }
    
    /* 整理下拉菜单适配 */
    .organize-menu {
        bottom: 100%;
        top: auto;
        margin-bottom: 8px;
    }
}

/* ===== 平板端样式 (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 可折叠侧边栏 */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.tablet-open {
        transform: translateX(0);
    }
    
    /* 侧边栏遮罩 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1499;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* 折叠按钮 */
    .sidebar-toggle-btn {
        display: flex;
        position: fixed;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 64px;
        background: var(--gray-100);
        border: 1px solid var(--gray-300);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1400;
        font-size: 16px;
        color: var(--gray-600);
    }
    
    .sidebar-toggle-btn:hover {
        background: var(--gray-200);
    }
    
    .sidebar.tablet-open + .sidebar-toggle-btn {
        left: 292px;
    }
    
    /* 工具栏按钮 - 最小触摸区域 */
    .toolbar .btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== 桌面端样式 (>1024px) ===== */
@media (min-width: 1025px) {
    /* 隐藏移动端专用元素 */
    .hamburger-btn,
    .sidebar-toggle-btn,
    .sidebar-overlay {
        display: none !important;
    }
}

/* 移动端简化：移除快速收集弹窗样式 */

/* 暗色模式 - 移动端工具栏 */
@media (max-width: 767px) {
    body.dark-mode .toolbar {
        border-top-color: #3a3a3e;
    }
    
    body.dark-mode .hamburger-btn {
        background: #2a2a2e;
        border-color: #3a3a3e;
        color: #b0b0b0;
    }
}

/* 暗色模式 - 平板端 */
@media (min-width: 768px) and (max-width: 1024px) {
    body.dark-mode .sidebar-toggle-btn {
        background: #2a2a2e;
        border-color: #3a3a3e;
        color: #b0b0b0;
    }
}

/* ===== 加载遮罩 ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}