/* Colors now managed by central theme.css */
:root {
  /* Compact Design Variables */
  --cm-section-padding: 2.5rem 0 2rem;
  --cm-header-margin: 0 0 1.5rem;
  --cm-grid-gap: 1rem;
  --cm-tile-height: 180px;
  --cm-tile-radius: 14px;
  --cm-tag-height: 36px;

  --cm-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cm-transition-fast: all 0.2s ease-out;
}

/* Section Container - Compact */
.collections-mosaic-section {
  position: relative;
  padding: var(--cm-section-padding);
  background: var(--cm-bg);
  overflow: hidden;
  border-top: 1px solid var(--cm-border);
}

.collections-mosaic-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 187, 51, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--z-accent-glow) 0%, transparent 50%);
  pointer-events: none;
}

/* Header - Streamlined */
.cm-header {
  text-align: center;
  margin: var(--cm-header-margin);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--cm-accent-soft);
  border: 1px solid rgba(255, 187, 51, 0.2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cm-accent);
  margin-bottom: 0.8rem;
}

.cm-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

.cm-title .title-main {
  color: var(--cm-text);
}

.cm-title .title-accent {
  background: linear-gradient(135deg, var(--cm-accent), var(--z-accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cm-subtitle {
  color: var(--cm-text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Grid - Compact Layout */
.cm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--cm-grid-gap);
  margin-bottom: 2rem;
}

/* Tiles - Professional Cards */
.cm-tile {
  position: relative;
  height: var(--cm-tile-height);
  border-radius: var(--cm-tile-radius);
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  overflow: hidden;
  cursor: pointer;
  transition: var(--cm-transition);
  backdrop-filter: blur(10px);
  box-shadow: var(--cm-shadow);
}

.cm-tile.wide {
  grid-column: span 2;
}

.cm-tile:hover {
  transform: translateY(-4px);
  border-color: var(--cm-border-hover);
  background: var(--cm-surface-hover);
  box-shadow: var(--cm-shadow-hover), var(--cm-shadow-accent);
}

.cm-link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail */
.cm-thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.cm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: brightness(0.85) contrast(1.1);
}

.cm-tile:hover .cm-img {
  transform: scale(1.08);
  filter: brightness(0.95) contrast(1.15);
}

.cm-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a3441, #1e2936);
  color: var(--cm-text-muted);
  font-size: 1.8rem;
}

/* Overlays */
.cm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.4);
  mix-blend-mode: multiply;
}

.cm-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
}

/* Tags */
.cm-tags-inline {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  max-width: calc(100% - 1.2rem);
}

.cm-tag {
  padding: 0.2rem 0.4rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--cm-text-secondary);
  backdrop-filter: blur(4px);
}

/* Info Section */
.cm-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.8rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(8px);
}

.cm-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cm-text);
  margin: 0 0 0.3rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  color: var(--cm-text-secondary);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.meta-delta {
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-delta.up {
  background: rgba(34, 197, 94, 0.2);
  color: var(--z-success);
}

.meta-delta.down {
  background: var(--z-danger);
  color: var(--z-danger);
}

/* Hover Effect */
.cm-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  color: var(--cm-accent);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: var(--cm-transition);
}

.cm-tile:hover .cm-hover {
  opacity: 1;
}

/* Placeholder/Skeleton */
.cm-tile.placeholder {
  background: linear-gradient(110deg, var(--cm-glass) 8%, rgba(255, 255, 255, 0.08) 18%, var(--cm-glass) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-color: rgba(255, 255, 255, 0.05);
}

.skeleton {
  background: linear-gradient(90deg, var(--cm-glass), rgba(255, 255, 255, 0.08), var(--cm-glass));
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

.skeleton-line {
  height: 12px;
  width: 70%;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Trend Tags - Compact */
.trend-tags-wrapper {
  margin-top: 1.5rem;
}

.trend-tags-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cm-text);
  margin: 0 0 0.8rem;
}

.trend-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.trend-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: var(--cm-tag-height);
  padding: 0 0.8rem;
  background: var(--cm-glass);
  border: 1px solid var(--cm-border);
  border-radius: 18px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--cm-text-secondary);
  cursor: pointer;
  transition: var(--cm-transition-fast);
  backdrop-filter: blur(8px);
}

.trend-tag:hover {
  background: var(--cm-glass-hover);
  border-color: var(--cm-border-hover);
  color: var(--cm-text);
  transform: translateY(-1px);
}

.trend-tag.active {
  background: var(--cm-accent-soft);
  border-color: var(--cm-accent);
  color: var(--cm-accent);
  box-shadow: 0 0 0 2px rgba(255, 187, 51, 0.1);
}

.trend-tag .hash {
  color: var(--cm-accent);
  font-weight: 600;
}

.trend-tag .count {
  margin-left: 0.2rem;
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 600;
}

.trend-tag.active .count {
  background: var(--cm-accent);
  color: var(--z-bg-deep);
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --cm-section-padding: 2rem 0 1.5rem;
    --cm-tile-height: 160px;
    --cm-grid-gap: 0.8rem;
  }
  
  .cm-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  
  .cm-tile.wide {
    grid-column: span 1;
  }
  
  .trend-tags-grid {
    gap: 0.4rem;
  }
  
  .trend-tag {
    font-size: 0.65rem;
    padding: 0 0.6rem;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .cm-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  
  :root {
    --cm-tile-height: 140px;
  }
}

/* Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .cm-tile,
  .cm-img,
  .trend-tag,
  .cm-hover {
    transition: none !important;
  }
}

.cm-tile:focus-within {
  outline: 2px solid var(--cm-accent);
  outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  :root {
    --cm-border: rgba(255, 255, 255, 0.3);
    --cm-surface: rgba(255, 255, 255, 0.1);
  }
}

/* --- Trending Tags Horizontal Swiper (v1) --- */
.ttx-panel--carousel{padding-bottom:.9rem;}
.ttx-carousel-wrapper{position:relative;padding:0 2.3rem;}
.ttx-swiper{width:100%;--ttx-gap:8px;}
.ttx-swiper .swiper-wrapper{display:flex;align-items:stretch;}
.ttx-swiper .swiper-slide{width:auto!important;flex:0 0 auto;padding-right:var(--ttx-gap);}
.ttx-chip{
  --chip-bg:var(--ttx-glass,rgba(255,255,255,.06));
  --chip-border:var(--ttx-border,rgba(255,255,255,.12));
  --chip-accent:var(--cm-accent);
  --chip-accent-soft:rgba(255,187,51,.18);
  position:relative;
  display:inline-flex;align-items:center;gap:.55rem;
  height:44px;padding:0 .95rem 0 .75rem;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  border-radius:18px;
  text-decoration:none;
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--chip-accent);
  font-weight:600;
  backdrop-filter:blur(12px);
  position:relative;
  overflow:hidden;
  transition:.35s;
}
.ttx-chip::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,187,51,.18),rgba(255,187,51,0));
  opacity:0;transition:.45s;
}
.ttx-chip:hover{
  box-shadow:0 0 0 1px var(--chip-accent),0 6px 18px -6px color-mix(in srgb,var(--chip-accent) 55%,transparent);
}
.ttx-chip:hover::after{opacity:1;}
.ttx-chip-rank{
  width:22px;height:22px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ttx-accent),var(--z-accent-light));
  color:var(--chip-accent);
  font-size:.55rem;
  font-weight:700;
  border-radius:8px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 2px 6px -2px rgba(255,140,0,.5);
}
.ttx-chip[data-rank="4"] .ttx-chip-rank,
.ttx-chip[data-rank="5"] .ttx-chip-rank,
.ttx-chip[data-rank="6"] .ttx-chip-rank{
  background:var(--cm-glass-hover,rgba(255,255,255,.1));color:var(--ttx-accent);
  box-shadow:none;
}
/* Per-color palettes (dark+light blend friendly) */
.ttx-chip[data-color=blue]{
  --chip-accent:var(--z-info);
  background:linear-gradient(135deg, var(--z-accent), var(--z-accent-light));
  border-color:var(--z-accent);
}
.ttx-chip[data-color=indigo]{
  --chip-accent:var(--z-indigo-light);
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(99,102,241,.05));
  border-color:rgba(99,102,241,.38);
}
.ttx-chip[data-color=purple]{
  --chip-accent:var(--z-purple-light);
  background:linear-gradient(135deg, var(--z-accent), var(--z-accent-light));
  border-color:var(--z-accent);
}
.ttx-chip[data-color=teal]{
  --chip-accent:#14b8a6;
  background:linear-gradient(135deg,rgba(20,184,166,.16),rgba(20,184,166,.05));
  border-color:rgba(20,184,166,.42);
}
.ttx-chip[data-color=cyan]{
  --chip-accent:#06b6d4;
  background:linear-gradient(135deg,rgba(6,182,212,.16),rgba(6,182,212,.05));
  border-color:rgba(6,182,212,.42);
}
.ttx-chip[data-color=amber]{
  --chip-accent:var(--z-accent);
  background:linear-gradient(135deg, var(--z-accent), var(--z-accent-light));
  border-color:var(--z-accent);
}
.ttx-chip[data-color=rose]{
  --chip-accent:#f43f5e;
  background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(244,63,94,.06));
  border-color:rgba(244,63,94,.50);
}
.ttx-chip[data-color=emerald]{
  --chip-accent:var(--z-success);
  background:linear-gradient(135deg,var(--z-success-bg),var(--z-success-bg));
  border-color:var(--z-success);
}
/* Top 3 highlight (keeps per-color interior accent) */
.ttx-chip.ttx-chip--top{
  border:2px solid transparent;
  background:
    linear-gradient(var(--chip-bg,rgba(0,0,0,.15)),var(--chip-bg,rgba(0,0,0,.25))) padding-box,
    linear-gradient(135deg,var(--z-accent-light),var(--z-accent-light),var(--z-pink)) border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 22px -8px rgba(0,0,0,.7),0 0 0 4px rgba(255,187,51,.10);
}
.ttx-chip.ttx-chip--top .ttx-chip-rank{
  background:linear-gradient(135deg,var(--z-accent-light),var(--z-accent-light));
  color:#162026;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 4px 10px -2px rgba(255,140,0,.55);
}

/* Focus */
.ttx-chip:focus-visible{
  outline:2px solid var(--chip-accent);
  outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .ttx-chip{transition:none!important;}
}

/* Light mode subtle tweak */
@media (prefers-color-scheme:light){
  .ttx-chip[data-color]{
    filter:brightness(1.05);
  }
  .ttx-chip.ttx-chip--top{
    background:
      linear-gradient(#ffffffdd,#ffffffcc) padding-box,
      linear-gradient(135deg,var(--z-accent-light),var(--z-accent-light),var(--z-pink)) border-box;
  }
}
.ttx-chip-label{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ttx-chip-count{
  font-size:.5rem;
  padding:.25rem .45rem;
  border-radius:10px;
  background:var(--cm-glass-hover,rgba(255,255,255,.1));
  color:var(--chip-accent);
  font-weight:600;
}
.ttx-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:14px;
  background:var(--ttx-glass,rgba(255,255,255,.07));
  border:1px solid var(--ttx-border,rgba(255,255,255,.15));
  display:grid;place-items:center;
  color:var(--ttx-muted);
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.3s;
  z-index:5;
}
.ttx-prev{left:.35rem;}
.ttx-next{right:.35rem;}
.ttx-nav:hover{
  color:var(--ttx-text);
  border-color:rgba(255,187,51,.45);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,187,51,.35),0 4px 14px -4px rgba(255,187,51,.5);
}
.ttx-panel--carousel .ttx-empty{margin:0 .75rem;}
@media (max-width:780px){
  .ttx-carousel-wrapper{padding:0 1.2rem;}
  .ttx-nav{width:34px;height:34px;border-radius:12px;}
  .ttx-chip{height:40px;padding:0 .8rem 0 .65rem;}
  .ttx-chip-label{max-width:100px;}
  .ttx-chip-count{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ttx-chip,.ttx-nav{transition:none!important;}
}/* --- Enhanced Mosaic & Trending Buttons (v1.1) --- */
.cm-view-all-btn{
  --_grad:linear-gradient(135deg,var(--cm-accent) 0%,var(--z-accent-light) 95%);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem .52rem .8rem;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cm-text);
  background:var(--cm-glass);
  border:1px solid var(--cm-border);
  border-radius:18px;
  backdrop-filter:blur(12px) saturate(140%);
  overflow:hidden;
  transition:.35s;
}
.cm-view-all-btn .cm-va-icon{
  width:21px;height:21px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--_grad);
  color:#14191f;
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 4px 10px -2px rgba(255,140,0,.55);
  transition:.4s;
}
.cm-view-all-btn .cm-va-text{position:relative;z-index:2;}
.cm-view-all-btn .cm-va-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 20% 15%,rgba(255,187,51,.20),transparent 60%);
  opacity:0;transition:.5s;
}
.cm-view-all-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,187,51,.18),rgba(255,187,51,0) 60%);
  mix-blend-mode:overlay;opacity:0;transition:.5s;
}
.cm-view-all-btn:hover,
.cm-view-all-btn:focus-visible{
  border-color:var(--cm-border-hover);
  color:var(--cm-text);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(255,187,51,.35),0 6px 18px -4px rgba(255,187,51,.45);
}
.cm-view-all-btn:hover .cm-va-icon,
.cm-view-all-btn:focus-visible .cm-va-icon{
  transform:rotate(12deg) scale(1.05);
}
.cm-view-all-btn:hover .cm-va-glow,
.cm-view-all-btn:focus-visible .cm-va-glow,
.cm-view-all-btn:hover::after,
.cm-view-all-btn:focus-visible::after{opacity:1;}
.cm-view-all-btn:focus-visible{outline:2px solid rgba(255,187,51,.6);outline-offset:2px;}
.cm-view-all-btn:active{transform:translateY(-1px) scale(.97);}

/* Refined Trending Panel action button */
.ttx-more{
  --_grad:linear-gradient(135deg,var(--ttx-accent,#ffbb33),var(--z-accent-light));
  position:relative;
  display:inline-flex;
  margin-bottom:.45rem;
  align-items:center;
  gap:.45rem;
  padding:.6rem .95rem .55rem .85rem;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--ttx-border,rgba(255,255,255,.14));
  color:var(--ttx-muted,#94a3b8);
  background:var(--ttx-glass,rgba(255,255,255,.05));
  border-radius:16px;
  backdrop-filter:blur(12px) saturate(150%);
  overflow:hidden;
  transition:.35s;
}
.ttx-more svg{transition:.45s;}
.ttx-more::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,187,51,.20),rgba(255,187,51,0) 65%);
  opacity:0;transition:.5s;
}
.ttx-more:hover,
.ttx-more:focus-visible{
  color:var(--ttx-text,#f1f5f9);
  border-color:rgba(255,187,51,.45);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,187,51,.35),0 4px 14px -4px rgba(255,187,51,.5);
}
.ttx-more:hover svg,
.ttx-more:focus-visible svg{transform:translateX(3px);}
.ttx-more:hover::before,
.ttx-more:focus-visible::before{opacity:1;}
.ttx-more:focus-visible{outline:2px solid rgba(255,187,51,.6);outline-offset:2px;}
.ttx-more:active{transform:translateY(-1px) scale(.97);}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .cm-view-all-btn,.ttx-more{transition:none!important;transform:none!important;}
  .cm-view-all-btn .cm-va-icon,
  .ttx-more svg{transition:none!important;}
}