/* HOI4 国策树可视化编程器样式 */

/* 全局重置和变量 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* LLM 配置专用样式 */
.config-modal {
    max-width: 1000px;
    min-height: 600px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    animation: modalSlideIn 0.3s ease-out;
}

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

/* 方案管理区域 */
.scheme-management {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.scheme-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.scheme-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.scheme-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.scheme-select {
    min-width: 220px;
}

/* 配置表单区域 */
.config-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.config-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.config-input,
.config-textarea,
.scheme-select,
.prompt-actions .copy-prompt-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.config-input:focus,
.config-textarea:focus,
.scheme-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.1);
}

.config-textarea {
    min-height: 160px;
    resize: vertical;
}

.prompt-help small {
    color: var(--text-secondary);
}

.prompt-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-sm);
}

.copy-prompt-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* 底部动作区域 */
.config-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* 状态提示 */
.config-status {
    grid-column: 1 / -1;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* LLM 测试输出区域 */
.config-output {
    grid-column: 1 / -1;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* 新建方案模态中的表单 */
.new-scheme-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.new-scheme-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.help-text {
    color: var(--text-secondary);
}

/* 响应式调整：窄屏改为单列 */
@media (max-width: 900px) {
    .config-modal { max-width: 95vw; }
    .config-form { grid-template-columns: 1fr; }
}

:root {
    /* 东方Project红白二色极简主义风格 */
    --primary-color: #DC143C;        /* 鲜红色 - 主要强调色 */
    --secondary-color: #FF6B6B;      /* 浅红色 - 次要强调色 */
    --accent-color: #FFE4E1;         /* 淡粉色 - 装饰色 */
    --success-color: #28A745;        /* 绿色 - 成功状态 */
    --warning-color: #FFC107;        /* 黄色 - 警告状态 */
    --error-color: #DC3545;          /* 红色 - 错误状态 */
    --info-color: #17A2B8;           /* 蓝色 - 信息状态 */
    
    /* 背景色 - 纯红白配色 */
    --bg-primary: #FFFFFF;           /* 纯白色 - 主背景 */
    --bg-secondary: #FFFFFF;         /* 纯白色 - 次要背景 */
    --bg-tertiary: #FFFFFF;          /* 纯白色 - 分割背景 */
    --bg-panel: #FFFFFF;             /* 纯白色 - 面板背景 */
    
    /* 文本色 */
    --text-primary: #000000;         /* 深灰色 - 主要文字 */
    --text-secondary: #000000;       /* 中灰色 - 次要文字 */
    --text-muted: #999999;           /* 浅灰色 - 辅助文字 */
    
    /* 边框和阴影 */
    --border-color: #FFE4E1;         /* 淡红色边框 */
    --border-light: #FFF0F0;         /* 极淡红色边框 */
    --shadow-sm: 0 1px 3px rgba(220, 20, 60, 0.1);
    --shadow-md: 0 2px 6px rgba(220, 20, 60, 0.15);
    --shadow-lg: 0 4px 12px rgba(220, 20, 60, 0.2);
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 圆角 - 极简风格使用较小圆角 */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    
    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* 字体 */
    --font-family: 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 24px;
}

/* 基础样式 */
body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    position: relative;
}

/* 极简的装饰元素 - 可选的淡红色装饰线条 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%);
    z-index: 1000;
}

/* 应用容器 */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-primary);
}

/* 顶部工具栏 */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
}

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

.toolbar-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
    border-right: 1px solid var(--border-color);
}

.toolbar-section:last-child {
    border-right: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--primary-color);
}

.logo i {
    font-size: var(--font-size-xl);
}

/* 按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

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

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: #A0522D;
    border-color: #A0522D;
}

.btn-secondary {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background: #DEB887;
    border-color: #DEB887;
}

.btn-success {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.btn-info {
    background: var(--info-color);
    border-color: var(--info-color);
    color: white;
}

.btn-warning {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: white;
}

.btn-warning:hover {
    background: #FF7F00;
    border-color: #FF7F00;
}

.btn-ghost {
    background: transparent;
    border-color: var(--border-color);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* 缩放控件 */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs);
}

.zoom-level {
    min-width: 50px;
    text-align: center;
    font-weight: bold;
    color: var(--accent-color);
}

/* 主内容区域 */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左侧面板 */
.left-panel {
    width: 280px;
    flex: 0 0 280px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.panel-section {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

/* 生成代码历史面板 */
.code-scheme-panel { display: flex; flex-direction: column; gap: 8px; }
.scheme-toolbar { display: flex; gap: 8px; align-items: center; }
.scheme-list { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow: auto; }
.scheme-item { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px; background: var(--bg-primary); }
.scheme-meta .scheme-title { font-weight: 600; color: var(--text-primary); }
.scheme-meta .scheme-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.scheme-actions { display: flex; gap: 6px; margin-top: 8px; }
.scheme-editor { margin-top: 8px; }
.scheme-editor textarea { width: 100%; font-family: var(--font-mono, monospace); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 6px; color: var(--text-primary); }

.panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* 工具网格 */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tool-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-primary);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tool-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.tool-btn i {
    font-size: var(--font-size-lg);
}

/* 国策模板 */
.node-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.node-template {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.node-template:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.node-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    color: white;
}

.node-icon.political { background: #8B0000; }
.node-icon.military { background: #006400; }
.node-icon.economic { background: #FF8C00; }
.node-icon.research { background: #4B0082; }
.node-icon.diplomatic { background: #4682B4; }
.node-icon.generic { background: var(--primary-color); }
.node-icon.generic-red { background: #FFCDD2; }
.node-icon.generic-yellow { background: #FFF9C4; color: #333; }
.node-icon.generic-purple { background: #E1BEE7; }

.node-template span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* 流程框（红色、黄色、紫色）字体加粗 */
.node-template[data-type="generic_red"] span,
.node-template[data-type="generic_yellow"] span,
.node-template[data-type="generic_purple"] span {
    font-weight: bold;
}

/* 国策树信息 */
.tree-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* 表单控件 */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: var(--text-secondary);
}

.form-control {
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.2);
}

.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-control {
    resize: vertical;
    min-height: 60px;
}

/* 画布容器 */
.canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-secondary);
    min-width: 0; /* 允许中间区域在flex布局中收缩，避免挤压左右面板 */
}

.canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: auto;
    padding: 20px;
}

.main-canvas {
    display: block;
    cursor: crosshair;
    background: var(--bg-primary);
    border: 4px double #ff0000; /* 纯红双线条边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 7500px;
    height: 7500px;
}

.main-canvas.pan-mode {
    cursor: grab;
}

.main-canvas.pan-mode:active {
    cursor: grabbing;
}

.main-canvas.connect-mode {
    cursor: crosshair;
}

.canvas-overlay {
    position: absolute;
    /* 对齐到 canvas 内容区域：wrapper 的 20px 内边距 + canvas 的 4px 双红边框 */
    top: 24px;
    left: 24px;
    pointer-events: auto;
    z-index: 10;
    width: 7500px;
    height: 7500px;
}

/* 画布工具栏 */
.canvas-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
}

.canvas-info {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.canvas-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* 右侧面板 */
.right-panel {
    width: 320px;
    flex: 0 0 320px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-left: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 国策属性 */
.node-properties {
    min-height: 200px;
}

/* 节点属性视窗：非按钮文字统一黑色 */
.node-properties label,
.node-properties p,
.node-properties small,
.node-properties .help-text,
.node-properties .no-selection,
.node-properties .no-selection p,
.node-properties input,
.node-properties textarea,
.node-properties select,
.node-properties .form-group,
.node-properties .panel-title,
.node-properties span {
    color: #000 !important;
}
/* 保持按钮文字按原主题样式 */
.node-properties .btn,
.node-properties button {
    color: inherit;
}

.no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--text-muted);
    text-align: center;
}

.no-selection i {
    font-size: var(--font-size-xxl);
    opacity: 0.5;
}

/* 代码预览 */
.code-preview {
    position: relative;
}

.code-preview pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    overflow-x: auto;
    max-height: 200px;
    margin-bottom: var(--spacing-sm);
}

/* 状态栏 */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-panel);
    border-top: 2px solid var(--border-color);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.status-left,
.status-right {
    display: flex;
    gap: var(--spacing-lg);
}

/* 模态框 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

.modal-content.large {
    max-width: 800px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--accent-color);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    color: var(--error-color);
    background: rgba(220, 20, 60, 0.1);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* 代码输出 */
.code-output {
    margin-bottom: var(--spacing-md);
}

.code-output pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-lg);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    overflow: auto;
    max-height: 400px;
    white-space: pre-wrap;
}

.code-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* 通知系统 */
.notification-container {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.notification {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: white;
    font-weight: bold;
    min-width: 300px;
    animation: notificationSlideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notification.success { background: var(--success-color); }
.notification.error { background: var(--error-color); }
.notification.warning { background: var(--warning-color); }
.notification.info { background: var(--info-color); }

/* 去除进度条，改为手动关闭按钮 */
.notification::after { display: none; }

.notification .notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: var(--radius-sm);
}

/* 进程监视器窗口 */
.task-monitor {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 360px;
    max-height: 40vh;
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    z-index: 2500;
}
.task-monitor.show { display: flex; }
/* 嵌入布局：替换代码预览为固定窗口 */
.task-monitor.embedded {
    position: static;
    bottom: auto;
    right: auto;
    width: 100%;
    max-height: none;
    height: 320px;
    box-shadow: none;
    border: 1px solid var(--border-color);
}
.task-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}
.task-monitor-title {
    font-size: var(--font-size-lg);
    color: var(--accent-color);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.task-monitor-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.task-section-title {
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}
.task-list, .task-history {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.task-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-left: 3px solid var(--info-color);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.task-item.running { border-left-color: var(--info-color); }
.task-item.success { border-left-color: var(--success-color); }
.task-item.error { border-left-color: var(--error-color); }
.task-icon { color: var(--text-secondary); }
.task-title { font-weight: bold; }
.task-desc { font-size: var(--font-size-sm); color: var(--text-secondary); }
.task-meta { font-size: var(--font-size-sm); color: var(--text-muted); }
.task-empty {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs);
}

.notification .notification-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 上下文菜单 */
.context-menu {
    position: fixed;
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xs);
    z-index: 2500;
    display: none;
    min-width: 180px;
}

.context-menu.show {
    display: block;
    animation: contextMenuShow 0.2s ease;
}

@keyframes contextMenuShow {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
}

.context-menu-item:hover {
    background: var(--bg-secondary);
    color: var(--accent-color);
}

.context-menu-separator {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-xs) 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .left-panel {
        width: 240px;
    }
    
    .right-panel {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .toolbar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .toolbar-left,
    .toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .left-panel,
    .right-panel {
        width: 200px;
    }
    
    .node-templates {
        grid-template-columns: 1fr;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* 选择状态 */
::selection {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* 焦点状态 */
*:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* 强制显示面板 - 确保工作区可见 */
.left-panel,
.right-panel,
.toolbar,
.status-bar {
    display: flex !important;
}

.main-content {
    display: flex !important;
}

/* 打印样式 */
@media print {
    .toolbar,
    .left-panel,
    .right-panel,
    .status-bar {
        display: none !important;
    }
    
    .canvas-container {
        width: 100% !important;
        height: 100vh !important;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #FFFFFF;
        --text-secondary: #CCCCCC;
        --bg-primary: #000000;
        --bg-secondary: #111111;
        --border-color: #FFFFFF;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #000000;  /* 深灰色文字，在白色背景上更清晰 */
        --text-secondary: #000000;  /* 中灰色文字 */
        --bg-primary: #FFFFFF;  /* 保持画布背景为白色 */
        --bg-secondary: #FFFFFF;  /* 保持左侧工具栏背景为白色 */
    }
}

/* --- Debug HUD & Overlays --- */
.debug-hud {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #e6e6e6;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 20;
    max-width: 360px;
}
.debug-hud .debug-row { margin: 2px 0; }
.debug-hud strong { color: #ffd166; font-weight: 600; }

.debug-line-h, .debug-line-v {
    position: absolute;
    background: rgba(0, 200, 255, 0.85);
    pointer-events: none;
    z-index: 11;
}
.debug-line-h { height: 1px; left: 0; width: 100%; }
.debug-line-v { width: 1px; top: 0; height: 100%; }

.debug-origin {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3860; /* visible red */
    box-shadow: 0 0 0 2px rgba(255,56,96,0.3);
    z-index: 12;
}

/*
====================================================================
DO NOT CHANGE OR REMOVE
全局强制：除按钮文字外的所有文本必须为纯黑或纯红（此处选用纯黑）。
禁止非按钮文字出现白色字体；此覆盖为合规要求的一部分。
====================================================================
*/
:root { color-scheme: light; }

/* 非按钮文本统一为纯黑（使用 !important 防止被局部样式覆盖）
   增加豁免类 .accent-text 用于保留特定文本的主题色 */
*:not(button):not(.btn):not([role="button"]):not(.login-btn):not(.link-btn):not(.tool-btn):not([class*="btn-"]):not(.accent-text) {
    color: #000 !important;
}

/* 豁免类：允许特定文本显示主题色（如标题等） */
.accent-text {
    color: var(--primary-color) !important;
}

/* 保留按钮及其子元素的原有文字颜色（避免被上面规则影响） */
button, .btn, [role="button"], .login-btn, .link-btn, .tool-btn, [class*="btn-"] {
    color: inherit !important;
}
button *, .btn *, [role="button"] *, .login-btn *, .link-btn *, .tool-btn *, [class*="btn-"] * {
    color: inherit !important;
}

/* 占位符文本必须为纯黑 */
::placeholder {
    color: #000 !important;
    opacity: 1;
}

/* ---------------------------------------------
   纯红文本与模态按钮文字规则（新增）
   --------------------------------------------- */
/* 纯红文本：用于指定视窗标题等需要纯红的文本 */
.pure-red {
    color: #ff0000 !important;
}

/* 模态框内按钮文字：有背景色的模态使用白色文字 */
.modal .btn {
    color: #ffffff !important;
}

/* 无背景色的模态（透明/无面板）按钮文字为黑色；备用类 */
.modal.transparent .btn,
.modal.no-bg .btn {
    color: #000000 !important;
}

/* ---------------------------------------------
   图标与通知颜色统一（新增）
   --------------------------------------------- */
/* 除“添加节点”视窗外，统一将图标改为主题红 */
.main-app-container i.fa,
.main-app-container i.fa-solid,
.main-app-container i.fa-regular,
.main-app-container i.fa-brands {
    color: var(--primary-color) !important;
}
/* 添加节点视窗内图标保持原有颜色（白或#333），不改为红 */
.node-templates .node-icon i {
    color: inherit !important;
}

/* 右上角通知弹窗及其内容文字统一为白色，覆盖全局黑色规则 */
.notification,
.notification * {
    color: #fff !important;
}

/* 通知模态的正文内容也统一为白色（如使用通知模态） */
.notification-modal .notification-content,
.notification-modal .notification-content * {
    color: #fff !important;
}

/* 保证带背景色按钮在悬停时文字仍为白色 */
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover {
    color: #fff !important;
}

/* 顶部工具栏按钮统一文字为白色，图标保持红色 */
.toolbar .btn {
    color: #ffffff !important;
}
.toolbar .btn i.fa,
.toolbar .btn i.fa-solid,
.toolbar .btn i.fa-regular,
.toolbar .btn i.fa-brands {
    color: var(--primary-color) !important;
}
/* ---------------------------------------------
   强制图标使用 #e53935 覆盖（保持添加节点例外）
   --------------------------------------------- */
.main-app-container i.fa,
.main-app-container i.fa-solid,
.main-app-container i.fa-regular,
.main-app-container i.fa-brands {
    color: #e53935 !important;
}
.toolbar .btn i.fa,
.toolbar .btn i.fa-solid,
.toolbar .btn i.fa-regular,
.toolbar .btn i.fa-brands {
    color: #e53935 !important;
}

#effectPickerModal .modal-content,
#effectPickerModal .effect-grid > * {
    background: #ffffff !important;
}

#effectPickerModal,
#effectPickerModal * {
    color: #000000 !important;
}

#effectPickerModal .modal-title {
    color: #000000 !important;
}

#effectPickerModal .btn {
    color: #000000 !important;
}

body i.fa,
body i.fa-solid,
body i.fa-regular,
body i.fa-brands {
    color: #e53935 !important;
}

button i.fa,
.btn i.fa,
.btn i.fa-solid,
.btn i.fa-regular,
.btn i.fa-brands {
    color: #e53935 !important;
}

.login-container i[class*="fa-"],
.login-overlay i[class*="fa-"] {
    color: #e53935 !important;
}