.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
            margin-bottom: 16px; padding: 12px; background: #161b22;
            border-radius: 8px; border: 1px solid #30363d; }
.controls label { font-size: 0.85em; color: #8b949e; }
.controls select, .controls input[type=number] {
  background: #0d1117; color: #e1e4e8; border: 1px solid #30363d;
  border-radius: 4px; padding: 4px 8px; font-size: 0.85em; }
.controls button { padding: 6px 14px; border: none; border-radius: 4px;
  font-size: 0.85em; cursor: pointer; font-weight: 600; }
.btn-start { background: #238636; color: #fff; }
.btn-start:hover { background: #2ea043; }
.btn-stop { background: #da3633; color: #fff; }
.btn-stop:hover { background: #f85149; }
.btn-small { padding: 3px 8px; font-size: 0.75em; }
.toggle { display: flex; align-items: center; gap: 4px; }
.toggle input { accent-color: #238636; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px; margin-bottom: 16px; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px;
        padding: 12px; position: relative; }
.card-header { display: flex; justify-content: space-between; align-items: center;
               margin-bottom: 8px; }
.card-title { font-weight: 600; font-size: 0.95em; }
.card-city { font-size: 0.8em; color: #8b949e; }
.stat { font-size: 0.8em; color: #8b949e; margin: 2px 0; }
.stat b { color: #e1e4e8; }
.chart-thumb { max-width: 100%; border-radius: 4px; margin-top: 6px;
               cursor: pointer; border: 1px solid #30363d; }
.card-actions { margin-top: 6px; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%;
  height: 100%; background: rgba(0,0,0,0.8); z-index: 1000;
  justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal-overlay img { max-width: 90%; max-height: 90%; border-radius: 8px; }
#status-bar { font-size: 0.75em; color: #484f58; text-align: right;
              margin-bottom: 8px; }