﻿        :root {
            /* 明亮模式变量 */
            --bg-color: #f8f9fa;
            --text-color: #2c3e50;
            --card-bg: #ffffff;
            --shadow-color: rgba(0, 0, 0, 0.08);
            --help-color: #0ea5e9;
            --border-color: #e2e8f0;
            --chart-text: #333333;
        }

        [data-theme="dark"] {
            /* 暗黑模式变量 */
            --bg-color: #0f172a;
            --text-color: #f8fafc;
            --card-bg: #1e293b;
            --shadow-color: rgba(0, 0, 0, 0.4);
            --help-color: #38bdf8;
            --border-color: #334155;
            --chart-text: #f8fafc;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            transition: background-color 0.3s, color 0.3s;
            overflow-x: hidden;
        }

        /* --- [M2] 控件容器 --- */
        .page-controls { position: fixed; top: 1.5rem; right: 1.5rem; display: flex; gap: 1rem; z-index: 1000; }
        
        /* --- [M2] 基础按钮样式 (主题/管理) --- */
        .control-btn { 
            background: var(--card-bg); border: none; width: 3rem; height: 3rem; 
            border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px var(--shadow-color); 
            color: var(--text-color); font-size: 1.2rem; display: flex; justify-content: center; 
            align-items: center; transition: all 0.3s ease; border: 1px solid var(--border-color);
        }
        .control-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--shadow-color); }

        /* --- [M2] 帮助按钮样式 (带呼吸效果) --- */
        .help-toggle { color: var(--help-color); animation: breathing-effect 2.5s infinite ease-in-out; }
        .help-toggle:hover { animation-play-state: paused; }
        @keyframes breathing-effect { 
            0%, 100% { transform: scale(1); opacity: 0.8; } 
            50% { transform: scale(1.08); box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4); opacity: 1; } 
        }

        /* --- [M2] 模态框样式 --- */
        .modal-overlay { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; 
            align-items: center; z-index: 2000; backdrop-filter: blur(5px); 
            opacity: 1; transition: opacity 0.3s ease; 
        }
        .modal-overlay.hidden { opacity: 0; pointer-events: none; }
        .modal-content { 
            background: var(--card-bg); color: var(--text-color); padding: 2rem; 
            border-radius: 12px; width: 90%; max-width: 600px; max-height: 85vh; 
            overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); 
            transform: scale(1); transition: transform 0.3s ease; border: 1px solid var(--border-color);
        }
        .modal-overlay.hidden .modal-content { transform: scale(0.9); }
        .modal-close-btn { 
            position: absolute; top: 1rem; right: 1rem; background: none; border: none; 
            font-size: 1.8rem; color: var(--text-color); opacity: 0.5; cursor: pointer; 
        }
        .modal-close-btn:hover { opacity: 1; }

        /* --- [M2] 帮助卡片样式 --- */
        .help-card-list { list-style: none; padding: 0; margin: 0; }
        .help-card { display: flex; align-items: flex-start; background: var(--bg-color); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border-color); }
        .help-card-icon { font-size: 1.5rem; color: var(--help-color); margin-right: 1.2rem; width: 2rem; text-align: center; padding-top: 0.25rem; }
        .help-card-text { flex: 1; }
        .help-card-text strong { font-size: 1rem; color: var(--text-color); display: block; margin-bottom: 0.25rem; }
        .help-card-text p { font-size: 0.9rem; line-height: 1.6; opacity: 0.8; margin: 0; }

        /* --- 全局页脚版权 (Footer 规范) --- */
        .global-footer { text-align: center; padding: 2rem 0; margin-top: 4rem; opacity: 0.9; border-top: 1px solid var(--border-color); }
        .global-footer p { margin: 0.3rem 0; }
        .footer-project-name { font-size: 0.9rem; font-weight: 600; color: var(--text-color); }
        .footer-license { font-size: 0.75rem; color: var(--secondary); }
        .footer-copyright { font-size: 0.75rem; color: var(--secondary); opacity: 0.8; }
        .footer-blockchain { font-size: 0.7rem; font-family: monospace; color: #10b981; margin-top: 0.5rem; opacity: 0.75; }

        /* --- 自定义卡片与输入框 --- */
        .glass-card { background: var(--card-bg); border-radius: 16px; box-shadow: 0 4px 20px var(--shadow-color); border: 1px solid var(--border-color); transition: all 0.3s ease; }
        .glass-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px var(--shadow-color); }
        .custom-input { width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); outline: none; transition: border-color 0.3s; }
        .custom-input:focus { border-color: var(--help-color); }

        /* --- 响应式调整 --- */
        @media (max-width: 768px) { 
            .page-controls { top: 1rem; right: 1rem; gap: 0.5rem; } 
            .control-btn { width: 2.5rem; height: 2.5rem; font-size: 1rem; } 
            .modal-content { width: 95%; padding: 1.5rem; } 
        }
