.cities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-xl);width:100%}.city-card{background-color:var(--color-card);color:var(--color-card-foreground);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--spacing-xl);transition:all var(--transition-normal);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;height:100%}.city-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.city-card-header{display:flex;align-items:center;justify-content:space-between}.city-code,.city-country{font-size:var(--font-size-sm);color:var(--color-muted-foreground)}.city-code{font-family:Courier New,monospace;font-weight:600;background-color:var(--color-muted);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.city-name{font-size:var(--font-size-xl);font-weight:600;color:var(--color-foreground);margin:0;line-height:var(--line-height-tight)}.city-description{font-size:var(--font-size-sm);color:var(--color-muted-foreground);line-height:var(--line-height-normal);margin:0}.city-details{flex-direction:column;flex:1}.city-detail-item,.city-details{display:flex;gap:var(--spacing-sm)}.city-detail-item{align-items:center}.city-detail-icon{width:1rem;height:1rem;color:var(--color-muted-foreground);flex-shrink:0}.city-detail-text{color:var(--color-foreground);line-height:var(--line-height-normal)}.city-detail-text,.city-link{font-size:var(--font-size-sm)}.city-link{display:inline-flex;align-items:center;font-weight:500;text-decoration:none;transition:color var(--transition-fast);margin-top:var(--spacing-sm)}.city-link,.city-link:active,.city-link:visited{color:var(--color-primary)}.city-link:hover{color:var(--color-primary-hover)}.empty-state{text-align:center;padding:var(--spacing-3xl) var(--spacing-xl)}.empty-state-icon{width:4rem;height:4rem;color:var(--color-muted-foreground);margin:0 auto var(--spacing-lg) auto}.empty-state-title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-muted-foreground);margin:0 0 var(--spacing-sm) 0}.empty-state-description{font-size:var(--font-size-base);color:var(--color-muted-foreground);margin:0}@media (max-width:768px){.cities-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.city-card{padding:var(--spacing-lg)}}@media (max-width:480px){.city-card{padding:var(--spacing-md);gap:var(--spacing-sm)}}