/* ==========================================================================
   基础变量与重置 (base.css)
   ========================================================================== */
:root {
    /* 1. 主题色系 (紫色调) */
    --color-primary: #9333ea;        /* 主品牌色 */
    --color-primary-light: #c084fc;  /* 浅主色 (用于渐变) */
    --color-primary-dark: #7e22ce;   /* 深主色 (用于悬停) */
    --color-primary-hover: #a855f7;  /* 悬停渐变色 */
    
    /* 2. 背景与边框色系 */
    --bg-body: #f8f5ff;              /* 网页大背景 */
    --bg-card: #ffffff;              /* 卡片纯白背景 */
    --bg-light: #faf5ff;             /* 极浅灰紫底色 */
    --bg-hover: #f3e8ff;             /* 悬停浅紫底色 */
    --border-color: #e9d5ff;         /* 统一边框色 */
    
    /* 3. 文字色系 */
    --text-main: #4a306d;            /* 主标题/正文 */
    --text-muted: #6b21a8;           /* 次要说明文字 */
    --text-light: #ffffff;           /* 按钮纯白文字 */
    --text-danger: #ff4d4d;          /* 退出/警告文字 */
    --text-disabled: #9ca3af;        /* 禁用状态文字 */
    
    /* 4. 状态色系 (打字对错反馈) */
    --color-success: #28a745;
    --color-success-bg: #d4edda;
    --color-success-border: #c3e6cb;
    --color-success-text: #155724;
    
    --color-error: #dc3545;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-error-text: #721c24;

    /* 5. 渐变快捷变量 */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-hover) 100%);
    --gradient-bg-light: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-hover) 100%);
}

* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
body { 
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; 
    background: var(--bg-body); 
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    color: var(--text-main); 
}

p, span, h1, h2, h3, h4, h5, h6, li, a { max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }
input, textarea, select, button { max-width: 100%; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* 页面通用主体容器 */
.main { padding: 40px 20px; min-height: 400px; text-align: center; flex: 1;}

/* 滚动条美化 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* 响应式显示控制 */
.mobile-only { display: none !important; }
.desktop-only { display: flex !important; }

@media (max-width: 768px) {
    .mobile-only { display: flex !important; }
    .desktop-only { display: none !important; }
    .main { padding: 20px 10px; }
}