.collages-header { text-align: center; padding: 2rem 1rem; }
.collages-header h1 { font-family: 'Fraunces', Georgia, serif; font-size: 2rem; margin-bottom: 0.5rem; }
.collages-header p { color: #78716C; }

.collages-filters { text-align: center; margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.collages-filters .btn-primary { background: #F87C27; color: #fff; border: none; }
.collages-filters .btn-primary:hover { background: #E06D1F; }
.collages-auth-links { display: flex; gap: 0.5rem; }

.collages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  padding: 0 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.collage-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(28,25,23,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.collage-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(28,25,23,0.12); }
.collage-card img { display: block; width: 100%; height: auto; object-fit: contain; }
.collage-card-meta { padding: 0.875rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.collage-card-title { font-size: 0.9375rem; font-weight: 600; color: #1C1917; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.collage-card-stats { display: flex; gap: 0.75rem; font-size: 0.875rem; color: #78716C; flex-shrink: 0; }

.collage-detail { margin: 2rem auto; padding: 0 1rem; }
.collage-breadcrumb ol { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.875rem; color: #78716C; }
.collage-breadcrumb li + li::before { content: '›'; margin-right: 0.5rem; color: #A8A29E; }
.collage-breadcrumb a { color: #C45C2C; text-decoration: none; }
.collage-breadcrumb a:hover { text-decoration: underline; }
.collage-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.75rem; margin-bottom: 1rem; color: #1C1917; }
.collage-detail-image img { width: 100%; max-width: 680px; border-radius: 1rem; box-shadow: 0 4px 24px rgba(28,25,23,0.08); display: block; margin: 0 auto; }
.collage-detail-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.collage-detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.collage-detail-actions .btn { background: #F87C27; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 0.75rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; display: inline-block; cursor: pointer; transition: background 0.2s ease; }
.collage-detail-actions .btn:hover { background: #E06D1F; }
.collage-like-btn { background: none; border: 2px solid #E7E5E4; border-radius: 100px; padding: 0.5rem 1rem; cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s ease; }
.collage-like-btn:hover { border-color: #C45C2C; }
.collage-like-btn.liked { border-color: #C45C2C; color: #C45C2C; }
.collage-like-btn .heart { font-size: 1.125rem; }

.comment-form { margin-top: 1.5rem; margin-bottom: 30px; display: flex; flex-direction: column; gap: 0.75rem; }
.comment-form input, .comment-form textarea {
  padding: 0.75rem 1rem; border: 2px solid #E7E5E4; border-radius: 0.75rem; font-family: inherit; font-size: 1rem; outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: #C45C2C; }
.comment-auth-notice { background: #FAF9F7; padding: 1rem; border-radius: 0.75rem; text-align: center; color: #78716C; }
.comment-auth-notice a { color: #C45C2C; text-decoration: none; font-weight: 600; }
.comment-auth-notice a:hover { text-decoration: underline; }
.smart-captcha { min-height: 50px; }

.comment-form .btn-primary {
  background: #F87C27;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.comment-form .btn-primary:hover {
  background: #E06D1F;
}
.comments-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.comment-item { background: #FAF9F7; padding: 1rem; border-radius: 0.75rem; }
.comment-item-header { display: flex; justify-content: space-between; font-size: 0.875rem; color: #78716C; margin-bottom: 0.375rem; }

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1C1917;
  color: #fff;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.collages-loading { text-align: center; color: #78716C; padding: 2rem; }
.collages-pagination { text-align: center; padding: 1rem; }
.collages-pagination button { margin: 0 0.25rem; }
.collages-pagination .btn-secondary {
  background: #F87C27;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.collages-pagination .btn-secondary:hover:not(:disabled) { background: #E06D1F; }
.collages-pagination .btn-secondary:disabled { background: #E7E5E4; color: #78716C; cursor: not-allowed; }

@media (max-width: 480px) {
  .collages-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0 0.75rem 1.5rem; }
  .collage-title { font-size: 1.375rem; }
}