/* 沧海一粟 · 全局样式 v1.0 — 暗色模式 + 响应式 */

/* ===== CSS 变量（亮色=默认, .dark 覆盖） ===== */
:root {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-input: #0f172a;
  --border: #334155;
  --border-light: #1e293b;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --text-muted: #64748b;
  --accent: #3b82f6;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;
  --nav-bg: #1e293b;
}

/* ===== 响应式断点 ===== */
@media (max-width: 768px) {
  .container { padding: 12px !important; }
  h1 { font-size: 18px !important; }
  h2 { font-size: 15px !important; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr !important; }
  .card-grid { grid-template-columns: 1fr !important; }
  table { font-size: 11px !important; }
  th, td { padding: 6px !important; }
  .stat-value { font-size: 20px !important; }
  .summary { flex-wrap: wrap !important; }
  .summary-card { min-width: 70px !important; padding: 10px !important; }
  /* 导航栏滚动 */
  #globalNav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  .container { padding: 8px !important; }
}

/* ===== 暗色模式切换按钮 ===== */
#darkModeToggle {
  position: fixed; bottom: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 18px;
  cursor: pointer; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#darkModeToggle:hover { color: var(--text); border-color: var(--accent); }