.collection { border: 1px solid var(--c-border, #dee2e6); border-radius: 8px; overflow: hidden; }
.dark .collection { border-color: rgba(255,255,255,0.15); }

.collection-header { padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.dark .collection-header { background: #1a1a1a; }

.collection-icon { font-size: 24px; }
.collection-title { font-size: 17px; font-weight: 600; }
.collection-count { font-size: 12px; color: var(--text-secondary, #868e96); margin-left: auto; }

.collection-sites { padding: 12px 20px; }
.collection-site { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--c-border, #dee2e6); font-size: 14px; }
.collection-site:last-child { border-bottom: none; }
.dark .collection-site { border-color: rgba(255,255,255,0.08); }
.collection-site a { font-weight: 500; text-decoration: none; color: inherit; }
.collection-site a:hover { text-decoration: underline; }
.collection-site .site-url { font-size: 12px; color: var(--text-secondary, #868e96); }
.collection-site .site-remark { font-size: 12px; color: var(--text-secondary, #868e96); margin-left: auto; }

@media (max-width: 600px) {
  .collection-site { flex-direction: column; gap: 2px; }
  .collection-site .site-remark { margin-left: 0; }
}