/* ============================================
   全局响应式CSS - all.css
   使用rem单位实现跨设备自适应
   ============================================ */

/* 响应式根字体设置 */
html { font-size: 16px; scroll-behavior: smooth; }
@media (max-width: 1300px) { html { font-size: 14px; } }
@media (max-width: 768px) { html { font-size: 13px; } }

/* CSS变量定义 - 深色主题(默认) */
:root { 
    --bg-primary: #0f0f23; 
    --bg-secondary: #1a1a2e; 
    --bg-card: #16213e; 
    --bg-hover: #1f2937; 
    --text-primary: #ffffff; 
    --text-secondary: #a0aec0; 
    --text-muted: #6b7280; 
    --accent-primary: #667eea; 
    --accent-secondary: #764ba2; 
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    --border-color: rgba(255,255,255,0.1); 
    --shadow-color: rgba(0,0,0,0.3); 
    --success-color: #22c55e; 
    --warning-color: #f59e0b; 
    --danger-color: #ef4444; 
    --neutral-color: #6b7280; 
    --purple-color: #a855f7; 
    --radius-sm: 0.8rem; 
    --radius-md: 1.2rem; 
    --radius-lg: 2rem; 
    --radius-xl: 3rem; 
    --transition-fast: 0.2s ease; 
    --transition-normal: 0.3s ease; 
    --transition-slow: 0.5s ease; 
}

/* 浅色主题 */
[data-theme="light"] { 
    --bg-primary: #f0f4f8; 
    --bg-secondary: #ffffff; 
    --bg-card: #ffffff; 
    --bg-hover: #e2e8f0; 
    --text-primary: #1e293b; 
    --text-secondary: #475569; 
    --text-muted: #64748b; 
    --accent-primary: #6366f1; 
    --accent-secondary: #8b5cf6; 
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); 
    --border-color: rgba(0,0,0,0.12); 
    --shadow-color: rgba(0,0,0,0.15); 
    --success-color: #16a34a; 
    --warning-color: #d97706; 
    --danger-color: #dc2626; 
    --neutral-color: #4b5563; 
    --purple-color: #9333ea; 
}

/* 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; transition: background var(--transition-normal), color var(--transition-normal);}
a { text-decoration: none; color: var(--accent-primary); transition: color var(--transition-fast); }
a:hover { color: var(--accent-secondary); }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
img { max-width: 100%; height: auto; }

/* 跳过导航链接样式 - 仅在获得焦点时显示，方便键盘用户 */
.skip-link { position: absolute; top: -10rem; left: 50%; transform: translateX(-50%); padding: 1.2rem 2.4rem; background: var(--accent-gradient); color: #fff; border-radius: var(--radius-md); font-weight: 600; z-index: 9999; transition: top 0.3s; text-decoration: none; }
.skip-link:focus { top: 1rem; outline: 0.3rem solid #fff; outline-offset: 0.2rem; }

/* 全局焦点样式 - 确保键盘导航可见性，符合WCAG无障碍标准 */
*:focus { outline: 0.2rem solid var(--accent-primary); outline-offset: 0.2rem; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 0.3rem solid var(--accent-primary); outline-offset: 0.2rem; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0.3rem solid var(--accent-primary); outline-offset: 0.2rem; box-shadow: 0 0 0 0.4rem rgba(102,126,234,0.3); }

/* 容器 */
.container { width: 100%; max-width: 140rem; margin: 0 auto; padding: 0 1.6rem; }
@media (min-width: 640px) { .container { padding: 0 2.8rem; } }
@media (min-width: 768px) { .container { padding: 0 4rem; } }

/* 头部导航 */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(15, 15, 35, 0.9); backdrop-filter: blur(1rem); border-bottom: 1px solid var(--border-color); transition: background var(--transition-normal); padding: 0.5rem 0; }
[data-theme="light"] .header { background: rgba(248, 250, 252, 0.9); }
.header-content { display: flex; align-items: center; justify-content: space-between;}
.logo { font-size: 1.2rem; font-weight: 700; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-right { display: flex; align-items: center; gap: 1.6rem; }
.theme-toggle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); color: var(--text-primary); }
.theme-toggle:hover { transform: scale(1.1); background: var(--bg-hover); }
.theme-toggle svg { transition: transform 0.3s ease; }
.theme-toggle:hover svg { transform: rotate(15deg); }

/* 主内容区 */
.main {min-height: 100vh; }

/* 按钮样式 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 1rem 2rem; border-radius: var(--radius-xl); font-size: 1rem; font-weight: 600; transition: all var(--transition-fast); }
.btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 0.4rem 1.5rem rgba(102, 126, 234, 0.4); }
.btn-primary:hover { transform: translateY(-0.2rem); box-shadow: 0 0.6rem 2rem rgba(102, 126, 234, 0.5); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-lg { padding: 1.6rem 3.2rem; font-size: 1rem; }
.btn-sm { padding: 0.3rem 1.2rem; font-size: 0.9rem; }

/* 卡片 */
.card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 2.4rem; border: 1px solid var(--border-color); transition: all var(--transition-normal); }
.card:hover { transform: translateY(-0.2rem); box-shadow: 0 1rem 4rem var(--shadow-color); }

/* 动画 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOut { to { opacity: 0; transform: translateX(-3rem); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1.1); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-fadeIn { animation: fadeIn 0.4s ease; }
.animate-fadeInUp { animation: fadeInUp 0.5s ease; }
.animate-slideIn { animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* 暂停遮罩 */
.pause-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(0.5rem); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
.pause-content { background: var(--bg-card); padding: 4rem; border-radius: var(--radius-lg); text-align: center; max-width: 90%; width: 40rem; box-shadow: 0 2.5rem 5rem var(--shadow-color); }
.pause-icon { font-size: 6.4rem; margin-bottom: 2rem; }
.pause-content h2 { font-size: 2.4rem; margin-bottom: 1.2rem; color: var(--text-primary); }
.pause-content p { color: var(--text-secondary); margin-bottom: 3rem; }
.btn-resume { background: var(--accent-gradient); color: #fff; border: none; padding: 1.6rem 4rem; border-radius: var(--radius-xl); font-size: 1.6rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.btn-resume:hover { transform: translateY(-0.2rem); box-shadow: 0 1rem 3rem rgba(102, 126, 234, 0.4); }

/* 恢复对话框 */
.recovery-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(0.5rem); z-index: 9998; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
.recovery-content { background: var(--bg-card); padding: 3.2rem; border-radius: var(--radius-lg); text-align: center; max-width: 90%; width: 38rem; box-shadow: 0 2.5rem 5rem var(--shadow-color); }
.recovery-icon { font-size: 4.8rem; margin-bottom: 1.6rem; }
.recovery-content h3 { font-size: 2rem; margin-bottom: 1.2rem; color: var(--text-primary); }
.recovery-content p { color: var(--text-secondary); margin-bottom: 0.8rem; }
.recovery-time { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 2.4rem; }
.recovery-actions { display: flex; gap: 1.2rem; }
.recovery-actions button { flex: 1; }

/* 工具类 */
.text-center { text-align: center; }
.text-gradient { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-4 { gap: 1.6rem; }
.mt-4 { margin-top: 1.6rem; }
.mb-4 { margin-bottom: 1.6rem; }

/* ============================================
   常用间距工具类 (rem单位)
   ============================================ */
/* padding */
.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.px-3 { padding-left: 3rem; padding-right: 3rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }

/* margin */
.m-0 { margin: 0; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* gap */
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

/* ============================================
   字体大小工具类 (rem单位)
   ============================================ */
.text-xs { font-size: 1.2rem; }
.text-sm { font-size: 1.4rem; }
.text-base { font-size: 1.6rem; }
.text-lg { font-size: 1.8rem; }
.text-xl { font-size: 2rem; }
.text-2xl { font-size: 2.4rem; }
.text-3xl { font-size: 3rem; }
.text-4xl { font-size: 3.6rem; }
.text-5xl { font-size: 4.8rem; }

/* ============================================
   宽度工具类
   ============================================ */
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.max-w-sm { max-width: 40rem; }
.max-w-md { max-width: 48rem; }
.max-w-lg { max-width: 56rem; }
.max-w-xl { max-width: 64rem; }
.max-w-2xl { max-width: 72rem; }
.max-w-3xl { max-width: 80rem; }
.max-w-4xl { max-width: 96rem; }