.city-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.city-empty {
   color: #94a3b8;
   font-style: italic;
   padding: 8px 0;
}

.city-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   margin-bottom: 6px;
   border-left: 4px solid #94a3b8;
   border-radius: 6px;
   background: #0f172a;
}

.city-item-main {
   flex: 1;
   min-width: 0;
}

.city-name {
   font-weight: 600;
   color: #f8fafc;
   word-break: break-word;
}

.city-webhook {
   font-size: 12px;
   color: #94a3b8;
}

.city-actions {
   display: flex;
   gap: 6px;
   flex-shrink: 0;
}

.city-geom-status {
   margin-left: 10px;
   font-size: 13px;
   color: #94a3b8;
}

.zones-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 12px;
   font-size: 13px;
   color: #cbd5e1;
}

.legend-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.legend-swatch {
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 3px;
   border: 1px solid rgba(255, 255, 255, 0.2);
}

#zoneEditCard .form-control,
#zoneEditCard .form-select,
#cityForm .form-control {
   background: #0f172a;
   color: #e2e8f0;
   border: 1px solid #334155;
}

#zoneEditCard .form-control:focus,
#zoneEditCard .form-select:focus,
#cityForm .form-control:focus {
   background: #0f172a;
   color: #e2e8f0;
   border-color: #2563eb;
   box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

#zoneEditCard .form-label,
#cityForm .form-label {
   color: #cbd5e1;
   margin-bottom: 4px;
}