.content-section {
  padding-block: var(--space-12);
}

.section .card-image {
  position: relative;
}

.section-title {
  margin-bottom: var(--space-6);
}

.section-title h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 620;
  letter-spacing: -0.02em;
}

.section-title a,
.page-meta a {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
}

.section-title a:hover,
.page-meta a:hover {
  color: var(--color-brand-hover);
}

.result-grid,
.asset-grid {
  gap: var(--space-6);
}

.card {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition:
    border-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.card:hover {
  border-color: var(--color-border);
  box-shadow: none;
  transform: translateY(-1px);
}

.card-image {
  border-radius: var(--radius-card);
  background-color: #ededeb;
}

.card-body {
  padding: var(--space-3) var(--space-1) var(--space-2);
}

.card-title {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.card-meta {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.ai-card-badges {
  position: absolute;
  z-index: 1;
  bottom: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ai-content-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-control);
  background: rgb(23 23 23 / 84%);
  color: #fff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.ai-tool-badge {
  background: rgb(23 23 23 / 84%);
}

.asset-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-8);
  align-items: start;
}

.detail-preview,
.detail-card,
.detail-cover,
.detail-info {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: none;
}

.page-hero {
  padding-block: var(--space-12);
  background: var(--color-ink);
  color: #fff;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.page-hero p {
  margin: var(--space-3) 0 0;
  color: #c9c9c4;
}

.commerce-shell {
  padding-block: var(--space-10);
}

.editorial-list {
  border-top: 1px solid var(--color-border);
}

.editorial-list > * {
  border-bottom: 1px solid var(--color-border);
}

.news-list-item {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.coupon-center-card {
  border-radius: var(--radius-panel);
  background: var(--color-brand);
  box-shadow: none;
}

.creator-grid > a {
  transition: color var(--motion-fast) ease !important;
}

/* Contests and tasks */
.contest-shell,
.contest-detail-shell,
.task-shell,
.task-detail-shell {
  padding-block: var(--space-10);
}

.page-hero.contest-hero,
.task-hero.task-hero {
  border: 0;
  border-radius: 0;
  background: var(--color-ink);
  color: #fff;
  box-shadow: none;
}

.task-detail-shell .task-hero {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: none;
}

.contest-shell .contest-card,
.contest-detail-shell .contest-card,
.task-shell .task-card,
.contest-detail-shell .judge-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
}

.contest-shell .contest-card:hover,
.task-shell .task-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: none;
  transform: translateY(-1px);
}

.contest-filter.active,
.task-filter.active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.contest-detail-shell :is(.contest-panel, .contest-sidebar, .submit-card),
.task-detail-shell :is(.task-desc-wrap, .submit-card, .contrib-apply-card) {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: none;
}

.task-detail-shell .submit-card {
  padding: var(--space-6);
}

.task-detail-shell .submit-label,
.task-detail-shell .submit-hint {
  color: var(--color-text-secondary);
  opacity: 1;
}

.task-detail-shell .submit-textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
}

.judge-score-badge {
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: #fff;
}

@media (max-width: 1199px) {
  .asset-detail-shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
  }
}

@media (max-width: 767px) {
  .content-section {
    padding-block: var(--space-8);
  }

  .section-title {
    align-items: center;
    margin-bottom: var(--space-4);
  }

  .section-title h2 {
    font-size: 19px;
  }

  .result-grid,
  .asset-grid,
  .section .grid-videos,
  .section .grid[style*="320px"],
  .section .grid[style*="280px"] {
    gap: var(--space-2) !important;
  }

  .section .grid-videos,
  .section .grid[style*="320px"],
  .section .grid[style*="280px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section .grid-videos .card-image,
  .section .grid[style*="320px"] .card-image {
    aspect-ratio: 16 / 9 !important;
  }

  .creator-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--space-2) !important;
  }

  .creator-avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
  }

  .news-list li a {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .news-list li a span:last-child {
    white-space: nowrap;
  }

  .asset-detail-shell {
    grid-template-columns: 1fr;
  }

  .card-body {
    padding-top: var(--space-2);
  }

  .commerce-shell {
    padding-block: var(--space-6);
  }

  .contest-shell,
  .contest-detail-shell,
  .task-shell,
  .task-detail-shell {
    padding-block: var(--space-6);
  }

  .contest-grid,
  .task-grid,
  .judge-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}