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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #0f1419;
  color: #e1e8ed;
  min-height: 100vh;
}

header {
  background: #1a2332;
  border-bottom: 1px solid #2a3a4a;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  font-size: 18px;
  color: #f0b90b;
  white-space: nowrap;
}

nav { display: flex; gap: 4px; flex: 1; }

.tab {
  background: transparent;
  border: none;
  color: #8a9ba8;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab:hover { background: #2a3a4a; color: #e1e8ed; }
.tab.active { background: #f0b90b; color: #0f1419; font-weight: 600; }

.header-right { display: flex; gap: 8px; align-items: center; }

select, input, button {
  background: #1a2332;
  color: #e1e8ed;
  border: 1px solid #2a3a4a;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
}

select:focus, input:focus { outline: none; border-color: #f0b90b; }

button { cursor: pointer; transition: all 0.2s; }
button:hover { background: #2a3a4a; border-color: #f0b90b; }
#refreshBtn { background: #f0b90b; color: #0f1419; border-color: #f0b90b; font-weight: 600; }
#refreshBtn:hover { background: #d4a40a; }

main { padding: 20px 24px; max-width: 1600px; margin: 0 auto; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: #1a2332;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-card label { display: block; font-size: 12px; color: #8a9ba8; margin-bottom: 6px; }
.stat-card span { font-size: 24px; font-weight: 700; color: #f0b90b; }

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.chart-row:has(.chart-lg:only-child) { grid-template-columns: 1fr; }

.chart-box {
  background: #1a2332;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 16px;
}

.chart-box h3 {
  font-size: 14px;
  color: #8a9ba8;
  margin-bottom: 12px;
  font-weight: 500;
}

.chart-lg { width: 100%; height: 320px; }
.chart-md { width: 100%; height: 280px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #1a2332;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
}

.controls label { font-size: 13px; color: #8a9ba8; display: flex; align-items: center; gap: 6px; }

input[type="range"] { accent-color: #f0b90b; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  background: #1a2332;
  color: #8a9ba8;
  padding: 8px 10px;
  text-align: left;
  font-weight: 500;
  border-bottom: 2px solid #2a3a4a;
  position: sticky;
  top: 0;
}

td {
  padding: 6px 10px;
  border-bottom: 1px solid #1e2a3a;
}

tr:hover { background: #1e2a3a; }
tr.backfill { opacity: 0.5; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.insight-box {
  background: #1a2332;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  line-height: 1.8;
  font-size: 14px;
}

.insight-box strong { color: #f0b90b; }

.hint { color: #8a9ba8; font-size: 13px; margin-bottom: 16px; }

#notifierConfigs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.notifier-card {
  background: #1a2332;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 16px;
}

.notifier-card h4 { margin-bottom: 12px; color: #f0b90b; }

.notifier-card label {
  display: block;
  font-size: 12px;
  color: #8a9ba8;
  margin-bottom: 4px;
  margin-top: 8px;
}

.notifier-card input, .notifier-card select {
  width: 100%;
  margin-bottom: 4px;
}

.notifier-card .channel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.notifier-card .channel-toggle input { width: auto; }

@media (max-width: 768px) {
  header { flex-wrap: wrap; }
  nav { overflow-x: auto; }
  .chart-row { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}