**Context:**
We have built a headless CMS using a custom TipTap editor to manage content for our client websites. To maximize Answer Engine Optimization (AEO) and SEO, our editor exports pristine, semantic HTML (e.g., `<div class="top-list">`, `<aside class="info-box">`) without any inline Tailwind utility classes cluttering the payload.

**The Problem:**
Because the HTML payload only contains abstract semantic classes, our frontend website is currently rendering these new custom components as raw, unstyled HTML.

**Your Task:**
1. Locate our global Tailwind stylesheet in the frontend repository (usually `src/styles/globals.css` or `src/app/globals.css`).
2. Inject the following CSS block into the file. This CSS uses Tailwind's `@apply` directive within `@layer components` to map our semantic classes directly to Tailwind utility classes, perfectly replicating our editor's design.
3. Ensure that the styles do not conflict with our existing typography and verify that the components render beautifully on the live site.

**The CSS Code:**
```css
@layer components {

  /* =========================================================================
     1. SHARED EDITOR STYLES (Content & Typography)
     ========================================================================= */
  .ProseMirror, .article-content {
    @apply text-base text-gray-800 leading-relaxed;
  }
  .article-content h2, .detailed-review-heading, .verification-heading {
    @apply text-2xl font-bold mt-10 mb-6 text-gray-900 border-b border-gray-200 pb-2;
  }
  .article-content h3 {
    @apply text-xl font-bold mt-8 mb-4 text-gray-800;
  }
  .article-content h4 {
    @apply text-lg font-semibold mt-6 mb-3 text-gray-800;
  }
  .article-content p {
    @apply mb-4;
  }
  .article-content img {
    @apply rounded-xl max-w-full h-auto my-6 shadow-sm border border-gray-100;
  }

  /* Shared Tab System */
  .top-list-tabs, .detailed-review-tabs, .verification-tabs {
    @apply flex flex-wrap justify-center gap-2 mb-8 mt-2;
  }
  .top-list-tab, .detailed-review-tab, .verification-tab {
    @apply px-5 py-2 rounded-full text-sm font-semibold transition-all cursor-pointer bg-gray-100 text-gray-600 hover:bg-gray-200 border border-transparent;
  }
  .top-list-tab.active, .detailed-review-tab.active, .verification-tab.active {
    @apply bg-blue-600 text-white shadow-md border-blue-700;
  }

  /* =========================================================================
     2. TOP LIST (.top-list)
     ========================================================================= */
  .top-list-item {
    @apply bg-white border border-gray-200 rounded-2xl p-6 mb-8 shadow-sm transition-shadow hover:shadow-md;
  }
  .top-list-identity {
    @apply flex items-center gap-4 pb-4 border-b border-gray-100 mb-5 relative;
  }
  .top-list-rank {
    @apply flex items-center justify-center w-10 h-10 shrink-0 bg-blue-600 text-white rounded-full font-bold text-lg shadow-sm;
  }
  .top-list-logo {
    @apply w-16 h-16 object-contain rounded-lg border border-gray-100 bg-white p-1;
  }
  .top-list-identity h3 {
    @apply text-xl font-bold m-0 text-gray-900;
  }
  .top-list-badge {
    @apply absolute -top-4 -left-4 bg-red-100 text-red-600 px-3 py-1 text-xs rounded-br-lg rounded-tl-xl font-bold uppercase border border-red-200;
  }
  .top-list-rating {
    @apply ml-auto text-amber-500 font-bold text-lg whitespace-nowrap;
  }
  .top-list-center {
    @apply space-y-4 mb-5;
  }
  .top-list-bonus-banner {
    @apply flex items-center justify-center gap-3 bg-red-50 border border-red-100 rounded-xl p-3 text-red-700 font-bold text-sm md:text-base;
  }
  .bonus-icon { @apply text-2xl; }
  .bonus-value { @apply text-red-600 text-lg; }
  .top-list-info-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-3;
  }
  .info-item {
    @apply flex flex-col items-center justify-center bg-gray-50 border border-gray-100 rounded-lg p-3 text-center;
  }
  .info-item .icon { @apply text-xl mb-1; }
  .info-item .label { @apply text-xs text-gray-500 font-semibold uppercase; }
  .info-item .value { @apply text-sm font-bold text-gray-900; }
  .top-list-cta-box {
    @apply flex flex-col items-center bg-blue-50 border border-blue-100 rounded-xl p-5 mb-5;
  }
  .top-list-sparkle { @apply text-sm font-bold text-blue-800 mb-1 flex items-center gap-1; }
  .top-list-sub { @apply text-xs text-blue-600 mb-3; }
  .top-list-cta {
    @apply block w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-sm transition-colors text-lg mb-3;
  }
  .top-list-review-link { @apply text-sm font-medium text-blue-600 hover:underline; }
  .top-list-detail-cards {
    @apply grid grid-cols-2 gap-3 mb-5;
  }
  .detail-card {
    @apply flex items-start gap-3 bg-white border border-gray-200 rounded-lg p-4;
  }
  .detail-card .icon { @apply text-2xl; }
  .detail-card .label { @apply text-xs text-gray-500 block mb-0.5; }
  .detail-card .value { @apply text-sm font-bold text-gray-900 block; }
  .detail-card .subtext { @apply text-xs text-gray-400 block mt-1; }
  .top-list-payment {
    @apply flex flex-wrap gap-2 items-center mb-5 border-t border-gray-100 pt-5;
  }
  .top-list-payment span { @apply text-xs font-semibold text-gray-500 uppercase; }
  .top-list-payment img { @apply h-6 w-auto m-0 border-0 shadow-none; }
  .top-list-expert {
    @apply bg-gray-50 border border-gray-200 rounded-xl p-5 mb-5;
  }
  .top-list-expert strong { @apply block text-sm font-bold text-gray-900 mb-2; }
  .top-list-expert p { @apply text-sm text-gray-700 italic mb-4; }
  .top-list-expert > div { @apply flex items-center gap-3 border-t border-gray-200 pt-4 mt-4; }
  .expert-avatar { @apply w-10 h-10 rounded-full object-cover m-0 border-0 shadow-none; }
  .top-list-expert span:nth-of-type(1) { @apply font-bold text-sm text-gray-900; }
  .top-list-expert span:nth-of-type(2) { @apply text-xs text-gray-500; }
  .top-list-recommendations {
    @apply mb-5;
  }
  .top-list-recommendations strong { @apply block text-sm font-bold text-gray-900 mb-2; }
  .top-list-recommendations ul { @apply space-y-2 m-0 p-0 list-none; }
  .top-list-recommendations li { @apply flex items-start gap-2 text-sm text-gray-700 before:content-['✓'] before:text-green-500 before:font-bold; }
  .top-list-view-all {
    @apply text-center mt-6;
  }
  .top-list-view-all a {
    @apply inline-block px-6 py-2 border border-gray-300 rounded-full text-sm font-bold text-gray-700 hover:bg-gray-50 transition-colors;
  }

  /* =========================================================================
     3. DETAILED REVIEW (.detailed-review)
     ========================================================================= */
  .detailed-review-item {
    @apply bg-white border border-gray-200 rounded-2xl p-6 mb-8 shadow-sm;
  }
  .detailed-review-item h3 {
    @apply text-xl font-bold text-gray-900 mb-4 pb-4 border-b border-gray-100 mt-0;
  }
  .detailed-review-item h3 .rank {
    @apply text-blue-600 mr-2;
  }
  .review-hero {
    @apply flex flex-col md:flex-row gap-6 mb-6;
  }
  .review-hero img {
    @apply w-full md:w-48 h-auto object-cover rounded-xl border border-gray-100 m-0 shadow-none;
  }
  .review-hero h4 {
    @apply text-lg font-bold text-gray-900 mb-2 mt-0;
  }
  .review-hero p {
    @apply text-gray-600 text-sm leading-relaxed m-0;
  }
  .review-specs {
    @apply w-full border-collapse mb-6 text-sm border border-gray-200 rounded-lg overflow-hidden;
  }
  .review-specs tr { @apply border-b border-gray-200 last:border-b-0; }
  .review-specs th { @apply bg-gray-50 text-left p-3 font-semibold text-gray-700 w-1/3 border-r border-gray-200; }
  .review-specs td { @apply p-3 text-gray-800 bg-white; }
  .review-merits, .review-demerits {
    @apply p-5 rounded-xl mb-6;
  }
  .review-merits { @apply bg-green-50 border border-green-100; }
  .review-demerits { @apply bg-red-50 border border-red-100; }
  .merit-heading { @apply text-green-800 font-bold mb-3 mt-0 text-base flex items-center gap-2 before:content-['👍']; }
  .demerit-heading { @apply text-red-800 font-bold mb-3 mt-0 text-base flex items-center gap-2 before:content-['👎']; }
  .review-merits ul, .review-demerits ul { @apply space-y-2 m-0 p-0 list-none; }
  .review-merits li { @apply flex items-start gap-2 text-green-900 text-sm before:content-['✓'] before:text-green-600 before:font-bold; }
  .review-demerits li { @apply flex items-start gap-2 text-red-900 text-sm before:content-['✕'] before:text-red-600 before:font-bold; }
  .review-editorial {
    @apply bg-yellow-50 border border-yellow-200 rounded-xl p-5 mb-6;
  }
  .review-editorial strong { @apply block text-yellow-800 font-bold mb-2 text-sm; }
  .review-editorial p { @apply text-yellow-900 text-sm m-0 italic; }
  .review-ctas {
    @apply flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-100;
  }
  .primary-cta {
    @apply flex-1 text-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors;
  }
  .secondary-cta {
    @apply flex-1 text-center bg-white border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 text-gray-700 font-bold py-3 px-6 rounded-lg transition-colors;
  }

  /* =========================================================================
     4. VERIFICATION POINTS (.verification-points)
     ========================================================================= */
  .verification-item {
    @apply flex flex-col md:flex-row gap-6 bg-white border border-gray-200 rounded-2xl p-6 mb-6 shadow-sm;
  }
  .verification-icon {
    @apply shrink-0 w-24 h-24 flex items-center justify-center bg-gray-50 rounded-xl border border-gray-100;
  }
  .verification-icon img {
    @apply w-16 h-16 object-contain m-0 shadow-none border-0;
  }
  .verification-content {
    @apply flex-1;
  }
  .verification-title {
    @apply flex items-center gap-2 text-xl font-bold text-gray-900 m-0 mb-2;
  }
  .verification-check {
    @apply flex items-center justify-center w-6 h-6 bg-green-500 text-white rounded-full text-xs font-bold;
  }
  .verification-title em {
    @apply not-italic text-blue-600 font-semibold;
  }
  .verification-description {
    @apply text-sm text-gray-600 mb-4 pb-4 border-b border-gray-100;
  }
  .verification-sections {
    @apply space-y-3 mb-4;
  }
  .verification-section {
    @apply flex items-start gap-2 text-sm;
  }
  .verification-section strong {
    @apply font-semibold text-gray-900 min-w-24;
  }
  .verification-section span {
    @apply text-gray-700;
  }
  .verification-pointers {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4 pt-4 border-t border-gray-100 list-none m-0 p-0;
  }
  .verification-pointers li {
    @apply text-sm text-gray-700 flex items-center gap-2 before:content-['✦'] before:text-blue-500;
  }
  .verification-cta {
    @apply inline-block mt-5 w-full md:w-auto text-center bg-gray-900 hover:bg-gray-800 text-white font-bold py-2.5 px-8 rounded-lg transition-colors text-sm;
  }

  /* =========================================================================
     5. PAGINATED TABLE (.paginated-table)
     ========================================================================= */
  .paginated-table-inner {
    @apply border border-gray-200 rounded-xl overflow-hidden bg-white shadow-sm mb-8;
  }
  .paginated-table-heading {
    @apply text-lg font-bold p-4 bg-gray-50 border-b border-gray-200 m-0;
  }
  .paginated-table-grid {
    @apply w-full text-sm border-collapse min-w-max m-0;
  }
  .paginated-table-grid th, .paginated-table-grid td {
    @apply p-4 border-r border-b border-gray-100 last:border-r-0 text-center;
  }
  .paginated-table-grid th {
    @apply bg-gray-50 align-top;
  }
  .paginated-table-grid tr:last-child td {
    @apply border-b-0;
  }
  .rank-badge {
    @apply inline-block px-3 py-1 rounded text-white text-xs font-bold mb-3 shadow-sm;
  }
  .table-col-image {
    @apply w-12 h-12 object-cover rounded mx-auto mb-2 border border-gray-200 m-0 shadow-none block;
  }
  .table-col-title {
    @apply block font-bold text-gray-900 mb-1;
  }
  .table-col-rating {
    @apply block text-amber-500 text-xs font-bold whitespace-nowrap;
  }
  .row-label {
    @apply font-semibold text-gray-700 bg-gray-50 text-left;
  }
  .table-cta {
    @apply inline-block px-4 py-2 bg-blue-600 text-white text-xs rounded-lg font-bold hover:bg-blue-700 transition-colors whitespace-nowrap;
  }
  .table-cta-text {
    @apply inline-block px-4 py-2 bg-gray-100 text-gray-500 text-xs rounded-lg font-bold whitespace-nowrap;
  }

  /* =========================================================================
     6. INFO BOX & SEMANTIC BLOCKS
     ========================================================================= */
  .info-box {
    @apply my-6 border border-sky-200 bg-sky-50/50 rounded-xl overflow-hidden shadow-sm;
  }
  .info-box-inner {
    @apply p-5;
  }
  .info-box-header {
    @apply flex items-center gap-3 mb-3;
  }
  .info-box-icon {
    @apply text-2xl bg-white w-10 h-10 flex items-center justify-center rounded-lg shadow-sm border border-sky-100 shrink-0;
  }
  .info-box-title {
    @apply text-sky-900 font-bold text-lg m-0;
  }
  .info-box-list {
    @apply list-none m-0 p-0 space-y-2;
  }
  .info-box-list li {
    @apply flex items-start gap-2 text-sky-800 text-sm before:content-['●'] before:text-sky-500 before:text-xs before:mt-1;
  }

  /* Pros / Cons */
  .pros-cons {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4 my-8;
  }
  .pros-column {
    @apply border border-green-200 bg-green-50 rounded-xl p-5;
  }
  .cons-column {
    @apply border border-red-200 bg-red-50 rounded-xl p-5;
  }
  .pros-column h3, .cons-column h3 {
    @apply font-bold m-0 mb-4 flex items-center gap-2;
  }
  .pros-column h3 { @apply text-green-800; }
  .cons-column h3 { @apply text-red-800; }
  .pros-column ul, .cons-column ul { @apply list-none m-0 p-0 space-y-2; }
  .pros-column li { @apply flex items-start gap-2 text-green-900 text-sm before:content-['✓'] before:text-green-600 before:font-bold; }
  .cons-column li { @apply flex items-start gap-2 text-red-900 text-sm before:content-['✕'] before:text-red-600 before:font-bold; }

  /* AI Boxes */
  .aio-box {
    @apply border border-orange-200 bg-orange-50/50 rounded-xl p-6 my-6;
  }
  .key-takeaways {
    @apply border border-green-200 bg-green-50/50 rounded-xl p-6 my-6;
  }

  /* FAQ */
  .faq-section {
    @apply my-8 space-y-4;
  }
  .faq-details {
    @apply border border-gray-200 bg-white rounded-xl overflow-hidden [&[open]]:shadow-md transition-shadow;
  }
  .faq-question {
    @apply p-4 font-bold text-gray-900 cursor-pointer hover:bg-gray-50 list-none relative pr-10 outline-none;
  }
  .faq-question::-webkit-details-marker { @apply hidden; }
  .faq-question::after {
    content: '+';
    @apply absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 font-bold text-xl transition-transform duration-200;
  }
  .faq-details[open] .faq-question::after {
    content: '−';
    @apply text-blue-600;
  }
  .faq-answer {
    @apply p-4 pt-0 text-gray-600 text-sm border-t border-gray-100 mt-2;
  }

  /* TOC */
  nav.toc {
    @apply my-8 p-6 bg-gray-50 border border-gray-200 rounded-xl shadow-sm;
  }
  nav.toc > strong {
    @apply block text-lg font-bold mb-4 text-gray-900;
  }
  nav.toc ul {
    @apply space-y-2 m-0 p-0 list-none;
  }
  nav.toc a {
    @apply text-blue-600 hover:text-blue-800 hover:underline transition-colors;
  }
  nav.sticky-toc {
    @apply sticky top-4 z-10 shadow-lg border-blue-200 bg-white/95 backdrop-blur-sm;
  }

}
```
