/* ============================================
   全局变量与基础样式
   ============================================ */

:root {
    /* 配色方案 */
    --bg-dark: #0a0a0a;
    --bg-darker: #050505;
    --bg-panel: #111111;
    
    /* 我方（安全/CN） */
    --color-safe: #00ff88;
    --color-safe-glow: #00ff88;
    --color-safe-dim: #00aa55;
    --color-cyan: #00ffff;
    
    /* 敌方（风险/US） */
    --color-danger: #ff3333;
    --color-danger-glow: #ff6666;
    --color-warning: #ff8800;
    --color-danger-dim: #aa2222;
    
    /* 中性色 */
    --color-text: #cccccc;
    --color-text-dim: #888888;
    --color-border: #333333;
    
    /* 字体 */
    --font-mono: 'Courier New', 'Consolas', 'Monaco', monospace;
    --font-sans: 'Arial', 'Helvetica', 'Microsoft YaHei', sans-serif;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 动画时长 */
    --anim-fast: 0.2s;
    --anim-normal: 0.5s;
    --anim-slow: 1s;
}

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

body {
    font-family: var(--font-sans);
    background: var(--bg-dark);
    color: var(--color-text);
    overflow-x: hidden;
    min-height: 100vh;
}

/* 页面容器 */
.page {
    display: none;
    min-height: 100vh;
    position: relative;
}

.page.active {
    display: block;
}

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

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

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

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

/* 按钮基础样式 */
button {
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    outline: none;
    transition: all var(--anim-fast);
}

/* 链接样式 */
a {
    color: var(--color-cyan);
    text-decoration: none;
}

a:hover {
    color: var(--color-safe);
}