* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: monospace; background: #fff; color: #000; padding: 20px; }
.container { max-width: 1000px; margin: 0 auto; }
h1 { font-size: 1.2rem; margin-bottom: 20px; border-bottom: 1px solid #000; padding-bottom: 10px; }
.controls { margin-bottom: 15px; display: flex; gap: 10px; align-items: center; }
.controls select, .controls button { 
  font-family: monospace; border: 1px solid #000; padding: 5px 10px; background: #fff; cursor: pointer; 
}
.controls button { min-width: 30px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.stat { border: 1px solid #000; padding: 10px; cursor: default; }
.stat.clickable { cursor: pointer; }
.stat.clickable.active { background: #000; color: #fff; }
.stat.clickable.active .label { border-bottom-color: #fff; }
.stat.clickable.active .value { color: #fff; }
.stat.clickable:hover:not(.active) { background: #eee; }
.label { font-size: 0.7rem; border-bottom: 1px solid #000; padding-bottom: 5px; margin-bottom: 5px; }
.value { font-size: 1.2rem; font-weight: bold; }
.value.bot-negative { color: #c00; }
.value.bot-banned { color: #080; }
.raw-data { border: 1px solid #000; padding: 10px; margin-bottom: 20px; font-size: 0.8rem; overflow-x: auto; }
.raw-data pre { white-space: pre-wrap; word-break: break-all; }
.chart-wrapper { border: 1px solid #000; padding: 10px; height: 400px; margin-bottom: 20px; }
.day-stats { border: 1px solid #000; padding: 10px; }
.day-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 5px; margin-bottom: 10px; }
.day-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid #ccc; }
.day-row:last-child { border-bottom: none; }
.day-change.up::before { content: "+"; }
.day-change.down::before { content: ""; }
.day-source { font-weight: bold; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }