:root{
  --card-bg      : #fff;
  --muted        : #666;
  --border       : #ddd;
  --radius       : 6px;
  --header-height: 40px;
  --card-padding : 12px;
}

.cards-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap                  : 10px;
  align-items          : start;
  margin-top           : 12px;
}

.card {
  background    : var(--card-bg);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  overflow      : hidden;
  box-shadow    : 0 1px 0 rgba(0,0,0,0.04);
  display       : flex;
  flex-direction: column;
}

.card .card-header {
  height         : 30px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-weight    : 700;
  font-size      : 16px;
  padding        : 0px 10px;
}

.card .card-body{
  padding       : var(--card-padding);
  color         : #111;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.card .parking-name {
  font-weight  : 700;
  text-align   : center;
  background   : #fff;
  padding      : 6px 0;
  border-top   : 1px solid transparent;
  border-bottom: 1px solid var(--border);
  font-size    : 16px;
}

.card .stats {
  display              : grid;
  grid-template-columns: 1fr auto;
  gap                  : 6px 12px;
  align-items          : center;
  font-size            : 14px;
  color                : var(--muted);
}

.card .stats .label {
  text-align: left;
}

.card .stats .value {
  text-align : right;
  font-weight: 600;
  color      : #111;
}

.card .stats .value.free-value {
  font-size  : 1.2em;
  font-weight: 800;
}

.card .stats .value.free-zero { color: #c0392b; }
.card .stats .value.free-highocc { color: #f39c12; }
.card .stats .value.free-ok { color: #16a34a; }

.card .card-footer {
  font-size : 12px;
  color     : var(--muted);
  padding   : 8px 12px;
  border-top: 1px dashed var(--border);
  background: #fafafa;
}

.card .card-footer.stale-update {
  color      : #c0392b;
  font-weight: 700;
}

@media (max-width:480px){
  .cards-grid { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
  .card .card-header { font-size:14px; }
  .card .parking-name { font-size:15px;}
  .card .stats { font-size:13px; }
}