.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.photo-thumb { aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; cursor: pointer; width: 100%; transition: transform 0.2s; }
.photo-thumb:hover { transform: scale(1.05); }
.album-card { display: inline-block; width: 140px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 0.5rem; text-align: center; cursor: pointer; margin-right: 8px; transition: border-color 0.2s; }
.album-card.active { border-color: var(--site-accent); }
.album-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.375rem; }
.album-card .album-title { font-size: 0.8rem; font-weight: 500; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-card .album-count { font-size: 0.7rem; color: #94a3b8; }
.upload-zone { border: 2px dashed #cbd5e1; border-radius: 0.5rem; padding: 2rem; text-align: center; color: #94a3b8; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.upload-zone.drag-over { border-color: var(--site-accent); background: var(--site-accent-light); }
@media (max-width: 767.98px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }