/* base.css - 非破坏性的基础样式：reset、变量、导航/页脚小量共享样式、通用动画。 */
:root{
  /* 原有变量保留 */
  --primary: #007bff;
  --muted: #6c757d;
  --bg: #f6f9fb;
  --surface: rgba(255,255,255,0.95);
  --text: #222;
  --brand-shadow: 0 8px 30px rgba(13,38,76,0.06);
  
  /* 新增CSS变量定义 - 浅色模式默认 */
  /* 背景颜色 */
  --bg-primary: #f6f9fb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-nav: rgba(169, 169, 169, 0.5);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-footer: #333333;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-active: rgba(0, 0, 0, 0.1);
  
  /* 文本颜色 */
  --text-primary: #222;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --text-light: #ffffff;
  --text-link: #007bff;
  --text-glow: rgba(255, 255, 255, 0.7);
  --text-shadow: rgba(0, 0, 0, 0.3);
  --text-glow-hover: rgba(255, 255, 255, 1);
  --text-shadow-hover: rgba(0, 0, 0, 0.5);
  
  /* 边框和阴影 */
  --border-color: rgba(0, 0, 0, 0.1);
  --border-light: rgba(255, 255, 255, 0.3);
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-accent: rgba(0, 123, 255, 0.2);
  --shadow-accent-hover: rgba(0, 123, 255, 0.4);
  --shadow-qq: rgba(26, 150, 222, 0.3);
  
  /* 强调色 */
  --accent-primary: #007bff;
  --accent-secondary: #a4c6ff;
  --accent-success: #22c55e;
  --accent-purple: #6f42c1;
  --accent-danger: #dc3545;
  --accent-qq: #1a96de;
  --accent-glow: rgba(0, 123, 255, 0.2);
  
  /* 状态颜色 */
  --success-color: #28a745;
  --error-color: #dc3545;
  
  /* 过渡动画 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  
  /* 代码块样式 - 浅色模式 */
  --bg-code-dark: #f6f8fa;
  --bg-code-light: #ffffff;
  --text-code: #24292e;
  --shadow-code: rgba(0, 0, 0, 0.1);
  
  /* 复制按钮样式 - 浅色模式 */
  --bg-copy-btn: rgba(255, 255, 255, 0.8);
  --bg-copy-btn-hover: rgba(255, 255, 255, 1);
  --text-copy-btn: #24292e;
  --shadow-copy-btn: rgba(0, 0, 0, 0.1);
  --shadow-copy-btn-hover: rgba(0, 0, 0, 0.2);
  --border-copy-btn: rgba(0, 0, 0, 0.1);
  --border-copy-btn-hover: rgba(0, 0, 0, 0.2);
  
  /* 代码语法高亮颜色 - 浅色模式 */
  --highlight-comment: #6a737d;
  --highlight-punctuation: #57606a;
  --highlight-number: #032f62;
  --highlight-string: #032f62;
  --highlight-operator: #d73a49;
  --highlight-keyword: #d73a49;
  --highlight-function: #6f42c1;
  --highlight-variable: #e36209;
  
  /* 行号颜色 - 浅色模式 */
  --text-line-numbers: #6a737d;
  
  /* 滚动条样式 - 浅色模式 */
  --bg-scrollbar: rgba(0, 0, 0, 0.05);
  --bg-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --bg-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
  
  /* 表格样式 */
  --bg-header: #f8f9fa;
  --text-header: #222;
  
  /* 行内代码样式 */
  --bg-code-inline: #f1f3f4;
  --border-code: #e0e0e0;
}

/* 深色模式变量 */
body.dark-mode {
  /* 背景颜色 */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-card: #252525;
  --bg-nav: rgba(26, 26, 26, 0.8);
  --bg-overlay: rgba(0, 0, 0, 0.9);
  --bg-footer: #1a1a1a;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-active: rgba(255, 255, 255, 0.15);
  
  /* 文本颜色 */
  --text-primary: #f0f0f0;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --text-light: #ffffff;
  --text-link: #8bb8ff;
  --text: #f0f0f0;
  --text-glow: rgba(255, 255, 255, 0.3);
  --text-shadow: rgba(255, 255, 255, 0.1);
  --text-glow-hover: rgba(255, 255, 255, 0.5);
  --text-shadow-hover: rgba(255, 255, 255, 0.2);
  
  /* 边框和阴影 */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.2);
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.5);
  --shadow-accent: rgba(139, 184, 255, 0.2);
  --shadow-accent-hover: rgba(139, 184, 255, 0.4);
  --shadow-qq: rgba(26, 150, 222, 0.3);
  
  /* 强调色 */
  --accent-primary: #8bb8ff;
  --accent-secondary: #6b97e0;
  --primary: #8bb8ff;
  --accent-success: #22c55e;
  --accent-purple: #9333ea;
  --accent-danger: #ef4444;
  --accent-qq: #1a96de;
  --accent-glow: rgba(139, 184, 255, 0.3);
  
  /* 代码块样式 - 深色模式保持不变 */
  --bg-code-dark: #0b1220;
  --bg-code-light: #0f1720;
  --text-code: #d6deeb;
  --shadow-code: rgba(0, 0, 0, 0.5);
  
  /* 复制按钮样式 - 深色模式 */
  --bg-copy-btn: rgba(255, 255, 255, 0.06);
  --bg-copy-btn-hover: rgba(255, 255, 255, 0.12);
  --text-copy-btn: #ffffff;
  --shadow-copy-btn: rgba(0, 0, 0, 0.6);
  --shadow-copy-btn-hover: rgba(0, 0, 0, 0.8);
  --border-copy-btn: rgba(255, 255, 255, 0.1);
  --border-copy-btn-hover: rgba(255, 255, 255, 0.2);
  
  /* 代码语法高亮颜色 - 深色模式 */
  --highlight-comment: #64748b;
  --highlight-punctuation: #94a3b8;
  --highlight-number: #f87171;
  --highlight-string: #4ade80;
  --highlight-operator: #60a5fa;
  --highlight-keyword: #a78bfa;
  --highlight-function: #facc15;
  --highlight-variable: #fb923c;
  
  /* 行号颜色 - 深色模式 */
  --text-line-numbers: #64748b;
  
  /* 滚动条样式 - 深色模式 */
  --bg-scrollbar: rgba(255, 255, 255, 0.05);
  --bg-scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --bg-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
  
  /* 表格样式 - 深色模式 */
  --bg-header: #1f2937;
  --text-header: #f9fafb;
  
  /* 行内代码样式 - 深色模式 */
  --bg-code-inline: #374151;
  --border-code: #4b5563;
}

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

/* 深色模式切换按钮样式 - 移除 */
html,body{height:100%}
body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--text-primary); background:var(--bg-primary); transition: background-color var(--transition-normal), color var(--transition-normal);}

/* 深色模式切换脚本将在HTML文件中添加 */
a{color:var(--primary);text-decoration:none; transition: color var(--transition-fast);}

/* 主题切换按钮样式 - 优化版 */
.theme-toggle-btn {
  background: var(--bg-hover);
  border: none; /* 默认没有边框 */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  margin-left: 15px;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px var(--shadow-light);
  border: 1px solid var(--text-light); /* 鼠标悬停时显示白色边框 */
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.theme-icon {
  position: absolute;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  font-size: 18px;
  color: var(--text-primary);
}

/* 深色模式下显示月亮图标 */
body.dark-mode .sun-icon {
  opacity: 0;
  transform: scale(0.8);
}

body.dark-mode .moon-icon {
  opacity: 1;
  transform: scale(1);
}

/* 浅色模式下显示太阳图标 */
.sun-icon {
  opacity: 1;
  transform: scale(1);
}

.moon-icon {
  opacity: 0;
  transform: scale(0.8);
}

/* 移动端主题按钮调整 */
@media (max-width: 480px) {
  .theme-toggle-btn {
    width: 35px;
    height: 35px;
    margin-left: 10px;
  }
  
  .theme-icon {
    font-size: 16px;
  }
}
img{max-width:100%;height:auto;display:block}

/* shared nav baseline (keeps existing site nav behavior but minimal) */
.main-nav{height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.nav-list{display:flex;gap:16px;align-items:center}
/* nav visual baseline - keeps consistent look on all pages while allowing page CSS to refine */
.nav-link{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .18s}
.nav-link:hover{color:var(--primary);background:rgba(0,123,255,0.06)}
.home-key-icon{font-family:Georgia,serif;font-weight:600;letter-spacing:1px;padding:8px 12px}

/* small utilities that are safe across pages */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:8px 14px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* gentle reveal animation baseline */
.scroll-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.scroll-reveal.visible{opacity:1;transform:none}

/* footer baseline */
footer{background:var(--bg-footer);color:var(--text-light); transition: background-color var(--transition-normal), color var(--transition-normal);}
.footer-container{max-width:1200px;margin:0 auto;padding:28px 20px;display:flex;justify-content:space-between;flex-wrap:wrap}
.footer-section{width:22%;margin-bottom:12px}
.footer-section h3{margin-bottom:8px}
.footer-section a{color:var(--text-muted)}
.footer-section a:hover{color:var(--text-light)}

/* 备案 / ICP 行样式（占位，可在需要时覆盖） */
.footer-icp{font-size:0.9rem;color:var(--text-muted);margin-top:8px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap; transition: color var(--transition-fast);}
.footer-icp .icp-placeholder{color:#ccc}

/* footer 图标（公安备案） */
.footer-icp .icon-footer{width:18px;height:18px;flex:0 0 18px;max-width:18px;object-fit:contain;display:inline-block}
.footer-icp .icon-footer{width:18px!important;height:18px!important;max-width:18px!important}


/* keep base very conservative - page-specific files still control visual identity */