/* Common styles shared across all pages */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a1628; color: #c8d6e8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Navigation */
nav { background: #0f2040; border-bottom: 1px solid #1e3a5f; padding: 0 24px; display: flex; align-items: center; height: 56px; }
.logo { color: #f0b429; font-weight: 700; font-size: 16px; margin-right: 32px; white-space: nowrap; }
nav a { color: #6b8aad; text-decoration: none; padding: 0 16px; height: 56px; display: flex; align-items: center; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
nav a:hover { color: #c8d6e8; }
nav a.active { color: #f0b429; border-bottom-color: #f0b429; }
.spacer { flex: 1; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.alert-bell { background: none; border: none; color: #6b8aad; cursor: pointer; font-size: 18px; position: relative; padding: 4px; }
.alert-bell:hover { color: #f0b429; }
.alert-badge { position: absolute; top: -2px; right: -4px; background: #f44336; color: white; font-size: 10px; font-weight: 700; border-radius: 50%; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.logout { background: none; border: 1px solid #1e3a5f; color: #6b8aad; border-radius: 5px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.logout:hover { color: #ff6b6b; border-color: #ff6b6b; }
main { max-width: 1200px; margin: 0 auto; padding: 24px; }
h2 { font-size: 18px; color: #c8d6e8; margin-bottom: 16px; }

/* Panels */
.panel { background: #0f2040; border: 1px solid #1e3a5f; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.loading { color: #6b8aad; font-size: 14px; text-align: center; padding: 32px; }
.empty { color: #6b8aad; font-size: 14px; text-align: center; padding: 32px; }

/* Buttons */
.btn-sm { background: #f0b429; color: #0a1628; border: none; border-radius: 5px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-sm:hover { opacity: .85; }
.btn-outline { background: none; border: 1px solid #1e3a5f; color: #6b8aad; border-radius: 5px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.btn-outline:hover { border-color: #2a4a7f; color: #c8d6e8; }
.btn-danger { background: rgba(244,67,54,.15); border: 1px solid rgba(244,67,54,.3); color: #f44336; border-radius: 5px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.btn-danger:hover { background: rgba(244,67,54,.25); }

/* Tags */
.tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.tag-中 { background: rgba(240,180,41,.15); color: #f0b429; }
.tag-高 { background: rgba(255,152,0,.15); color: #ff9800; }
.tag-紧急 { background: rgba(244,67,54,.15); color: #f44336; }
.tag-低 { background: rgba(76,175,80,.15); color: #4caf50; }

/* Search */
.search-box { flex: 1; background: #0a1628; border: 1px solid #1e3a5f; color: #c8d6e8; padding: 7px 12px; border-radius: 5px; font-size: 13px; outline: none; }
.search-box::placeholder { color: #6b8aad; }
.search-box:focus { border-color: #f0b429; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }

/* Load more */
.btn-load-more { display: block; width: 100%; margin-top: 16px; background: #1e3a5f; border: 1px solid #2a4a7f; color: #c8d6e8; border-radius: 5px; padding: 10px; font-size: 13px; cursor: pointer; text-align: center; }
.btn-load-more:hover { background: #2a4a7f; }
.btn-load-more:disabled { opacity: 0.5; cursor: not-allowed; }

/* Print styles */
@media print {
  body { background: white !important; color: #333 !important; }
  nav, .logout, .btn-collect, .btn-load-more, .toolbar, .collect-bar, .alert-bell, .nav-right { display: none !important; }
  main { max-width: 100% !important; padding: 10px !important; }
  .panel { border-color: #ddd !important; background: white !important; box-shadow: none !important; }
  .chart-wrap, canvas { page-break-inside: avoid; }
  h2 { color: #333 !important; }
  .loading, .empty { color: #666 !important; }
}

/* Mobile */
@media (max-width: 640px) {
  nav { padding: 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .logo { margin-right: 12px; font-size: 14px; }
  nav a { padding: 0 10px; font-size: 12px; }
  main { padding: 12px; }
  .panel { padding: 14px; }
}