/* P2-5+P2-7: 暗色模式 — 通过 <link media="(prefers-color-scheme: dark)"> 自动启用 */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a2e; color: #e0e0e0; }
  .topbar { background: #16213e; border-color: #0f3460; }
  .topbar .logo { color: #e0e0e0; }
  .topbar .apps a { color: #aaa; }
  .topbar .apps a:hover, .topbar .apps a.active { background: #0f3460; color: #4ecca3; }
  .left-pane, .right-pane { background: #16213e; border-color: #0f3460; }
  .tab-btn { color: #aaa; }
  .tab-btn.active { color: #4ecca3; }
  .tab-btn.active::after { background: #4ecca3; }
  .chat-msgs .msg.user { background: #1a5080; color: #e0e0e0; }
  .chat-msgs .msg.bot { background: #0f3460; color: #e0e0e0; }
  .chat-input-area input { background: #0f3460; border-color: #1a5080; color: #e0e0e0; }
  select, input[type=number] { background: #0f3460; border-color: #1a5080; color: #e0e0e0; }
  .result-area { border-color: #0f3460; }
  .result-area th { background: #0f3460; color: #aaa; }
  .result-area td { border-color: #0f3460; color: #ccc; }
  .form-row label { color: #aaa; }
}

/* P2-4: 移动端适配 */
@media (max-width: 768px) {
  .main { flex-direction: column; }
  .left-pane { flex: 0 0 auto; max-height: 50vh; }
  .right-pane { flex: 1; min-height: 300px; }
  .topbar { padding: 0 12px; height: 48px; }
  .topbar .logo { font-size: 14px; }
  .topbar .apps a { padding: 4px 8px; font-size: 12px; }
  .chat-input-area input { padding: 8px; font-size: 13px; }
}