@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Dark Anime Strategy Portal Theme - ten-sura-game.com */
    --background: 15 15 18; /* #0F0F12 deep black */
    --foreground: 0 0% 100%; /* #FFFFFF white */
    --card: 32 32 38; /* #202026 soft dark */
    --card-foreground: 0 0% 100%; /* #FFFFFF white */
    --popover: 32 32 38; /* #202026 soft dark */
    --popover-foreground: 0 0% 100%; /* #FFFFFF white */
    --primary: 349 100% 45%; /* #E60023 crimson red */
    --primary-foreground: 0 0% 100%; /* white */
    --secondary: 32 32 38; /* #202026 soft dark */
    --secondary-foreground: 0 0% 100%; /* #FFFFFF white */
    --muted: 26 26 31; /* #1A1A1F dark gray */
    --muted-foreground: 240 5% 74%; /* #B8B8C0 light gray */
    --accent: 349 100% 45%; /* #E60023 crimson red */
    --accent-foreground: 0 0% 100%; /* white */
    --destructive: 0 100% 59%; /* #FF2A3D bright red */
    --destructive-foreground: 0 0% 100%; /* white */
    --border: 42 42 51; /* #2A2A33 soft gray */
    --input: 42 42 51; /* #2A2A33 soft gray */
    --ring: 349 100% 45%; /* #E60023 crimson red */
    --radius: 12px;
    
    /* Custom ten-sura-game.com colors */
    --crimson-red: 349 100% 45%; /* #E60023 */
    --hover-red: 354 100% 59%; /* #FF2A3D */
    --deep-black: 240 7% 6%; /* #0F0F12 */
    --dark-gray: 240 7% 11%; /* #1A1A1F */
    --soft-dark: 240 7% 14%; /* #202026 */
    --soft-gray-border: 240 7% 18%; /* #2A2A33 */
  }
  
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-deep-black text-text-white;
    font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: 'palt';
    line-height: 1.8;
  }
}

/* Article Content Styles */
.prose-article {
  @apply max-w-none text-text-white;
  line-height: 1.8;
}

.prose-article h1 {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  color: var(--foreground);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  scroll-margin-top: 100px;
}

.prose-article h2 {
  @apply text-2xl font-bold mt-8 mb-4 text-text-white;
  font-size: 1.875rem !important; /* 30px */
  border-left: 4px solid #E60023;
  padding-left: 1rem;
}

.prose-article h3 {
  @apply text-xl font-bold mt-6 mb-3 text-text-white;
  font-size: 1.5rem !important; /* 24px */
}

.prose-article h4 {
  @apply text-lg font-bold mt-4 mb-2 text-text-white;
  font-size: 1.25rem !important; /* 20px */
}

.prose-article p {
  @apply mb-4 leading-relaxed text-text-white;
  line-height: 1.8;
}

.prose-article a {
  @apply text-crimson-red underline hover:text-hover-red transition-colors;
}

.prose-article ul,
.prose-article ol {
  @apply mb-4 pl-6 text-text-white;
}

.prose-article li {
  @apply mb-2;
  line-height: 1.8;
}

.prose-article img {
  @apply rounded-xl my-6 w-full;
}

.prose-article strong,
.prose-article b {
  font-weight: 700 !important;
  color: var(--foreground);
}

.prose-article blockquote {
  @apply border-l-4 border-crimson-red pl-4 italic my-4 text-text-light-gray;
}

.prose-article code {
  @apply bg-soft-dark px-2 py-1 rounded text-sm text-text-white;
}

.prose-article pre {
  @apply bg-soft-dark p-4 rounded-xl overflow-x-auto my-4;
}

.prose-article table {
  @apply w-full border-collapse my-6;
}

.prose-article th {
  @apply bg-crimson-red text-white font-bold p-3 text-left;
}

.prose-article td {
  @apply border border-soft-gray-border p-3 text-text-white;
}

/* Content Blocks */
.aio-box {
  @apply bg-soft-dark border-l-4 border-crimson-red rounded-xl p-6 my-6 shadow-sm;
}

.aio-box h3 {
  @apply text-lg font-bold text-crimson-red mb-3;
}

.aio-box p {
  @apply text-text-white leading-relaxed;
  line-height: 1.8;
}

.key-takeaways {
  @apply bg-soft-dark border-l-4 border-crimson-red rounded-xl p-6 my-6 shadow-sm;
}

.key-takeaways h3 {
  @apply text-lg font-bold text-text-white mb-3;
}

.key-takeaways ul {
  @apply space-y-2;
}

.key-takeaways li {
  @apply flex items-start gap-2 text-text-white;
}

.key-takeaways li::before {
  content: "✓";
  @apply text-crimson-red font-bold flex-shrink-0 mt-1;
}

.faq-section {
  @apply my-8;
}

.faq-section h2 {
  @apply text-2xl font-bold mb-6 text-text-white;
}

.faq-item {
  @apply border border-soft-gray-border rounded-xl mb-4 overflow-hidden bg-soft-dark shadow-sm;
}

.faq-question {
  @apply bg-dark-gray p-4 cursor-pointer hover:bg-crimson-red/10 transition-colors font-bold text-text-white;
}

.faq-question::before {
  content: "Q. ";
  @apply text-crimson-red font-bold mr-2;
}

.faq-answer {
  @apply p-4 border-t border-soft-gray-border bg-soft-dark text-text-white;
  line-height: 1.8;
}

.faq-answer::before {
  content: "A. ";
  @apply text-crimson-red font-bold mr-2;
}

/* Strategy Tips Callout (Red with dark background) */
.strategy-tips {
  @apply bg-soft-dark border-l-4 border-crimson-red rounded-xl p-6 my-6 shadow-md;
}

.strategy-tips h3 {
  @apply text-lg font-bold text-crimson-red mb-3;
}

.strategy-tips p {
  @apply text-text-white leading-relaxed;
  line-height: 1.8;
}

/* Warning Callout (Bright red with dark background) */
.warning-box {
  @apply bg-soft-dark border-l-4 border-hover-red rounded-xl p-6 my-6 shadow-md;
}

.warning-box h3 {
  @apply text-lg font-bold text-hover-red mb-3;
}

.warning-box p {
  @apply text-text-white leading-relaxed;
  line-height: 1.8;
}

/* Info Boxes */
.info-box {
  @apply bg-soft-dark border-l-4 border-crimson-red rounded-xl p-4 my-4;
}

.tip-box {
  @apply bg-soft-dark border-l-4 border-crimson-red rounded-xl p-4 my-4;
}

/* CTA Section */
.cta-section {
  @apply bg-gradient-to-r from-crimson-red to-hover-red rounded-xl p-8 my-8 text-center shadow-md;
}

.cta-section h3 {
  @apply text-2xl font-bold text-white mb-4;
}

.cta-section p {
  @apply text-white/90 mb-6;
  line-height: 1.8;
}

/* Product Cards */
.product-card {
  @apply border border-soft-gray-border rounded-xl p-4 my-4 bg-soft-dark shadow-sm hover:shadow-md transition-shadow;
}

.product-card img {
  @apply rounded-xl mb-3;
}

.product-card h4 {
  @apply font-bold text-text-white mb-2;
}

.product-card .price {
  @apply text-crimson-red font-bold text-lg;
}

/* Comparison Table */
.comparison-table {
  @apply w-full my-6 overflow-x-auto;
}

.comparison-table table {
  @apply w-full border-collapse;
}

.comparison-table th {
  @apply bg-crimson-red text-white font-bold p-3 text-center;
}

.comparison-table td {
  @apply border border-soft-gray-border p-3 text-center text-text-white;
}

.comparison-table tr:nth-child(even) {
  @apply bg-dark-gray;
}

/* Pros/Cons Lists */
.pros-cons {
  @apply grid md:grid-cols-2 gap-6 my-6;
}

.pros-list,
.cons-list {
  @apply border border-soft-gray-border rounded-xl p-4 bg-soft-dark;
}

.pros-list h4 {
  @apply text-lg font-bold text-crimson-red mb-3;
}

.cons-list h4 {
  @apply text-lg font-bold text-hover-red mb-3;
}

.pros-list li {
  @apply text-text-white;
}

.cons-list li {
  @apply text-text-white;
}

.pros-list li::before {
  content: "✓";
  @apply text-crimson-red font-bold mr-2;
}

.cons-list li::before {
  content: "✗";
  @apply text-hover-red font-bold mr-2;
}

.youtube-video {
  @apply relative pb-[56.25%] h-0 rounded-xl overflow-hidden my-6 shadow-md;
}

.youtube-video iframe {
  @apply absolute top-0 left-0 w-full h-full;
}

/* Video Container with Border */
.video-container {
  @apply border border-soft-gray-border rounded-xl overflow-hidden my-6 bg-soft-dark shadow-sm;
}

.video-container .video-title {
  @apply bg-dark-gray p-3 font-bold text-text-white border-b border-soft-gray-border;
}

/* Author Box */
.author-box {
  @apply bg-soft-dark border-l-4 border-crimson-red rounded-xl p-6 my-8 shadow-sm;
}

.author-box .author-name {
  @apply text-lg font-bold text-crimson-red mb-2;
}

.author-box .author-bio {
  @apply text-text-light-gray leading-relaxed;
  line-height: 1.8;
}

.author-box .author-link {
  @apply text-crimson-red hover:text-hover-red underline transition-colors;
}

/* Reading Stats */
.reading-stats {
  @apply flex items-center gap-4 text-sm text-text-light-gray my-4;
}

.reading-stats .stat-item {
  @apply flex items-center gap-2;
}

.reading-stats .stat-icon {
  @apply text-crimson-red;
}

/* Category Badge */
.category-badge {
  @apply inline-block bg-crimson-red text-white px-3 py-1 rounded-full text-sm font-medium;
}

/* Popular Articles Ranking Badges */
.ranking-badge {
  @apply inline-flex items-center justify-center w-8 h-8 rounded-full bg-crimson-red text-white font-bold text-sm;
}

/* Button Styles */
.btn-primary {
  @apply bg-crimson-red hover:bg-hover-red text-white font-bold px-6 py-3 rounded-xl transition-all shadow-sm hover:shadow-md;
}

.btn-secondary {
  @apply bg-soft-dark hover:bg-dark-gray text-text-white font-bold px-6 py-3 rounded-xl transition-all shadow-sm hover:shadow-md border border-soft-gray-border;
}

.btn-outline {
  @apply border-2 border-crimson-red text-crimson-red hover:bg-crimson-red hover:text-white font-bold px-6 py-3 rounded-xl transition-all;
}

/* Card Styles */
.article-card {
  @apply bg-soft-dark border border-soft-gray-border rounded-xl overflow-hidden shadow-sm transition-all;
}

.article-card:hover {
  @apply shadow-[0_0_0_2px_#E60023];
}

.article-card img {
  @apply w-full aspect-video object-cover transition-transform duration-300;
}

.article-card:hover img {
  @apply scale-105;
}

.article-card .card-content {
  @apply p-4;
}

.article-card .card-title {
  @apply font-bold text-text-white mb-2 line-clamp-2 transition-colors;
}

.article-card:hover .card-title {
  @apply text-crimson-red;
}

.article-card .card-excerpt {
  @apply text-sm text-text-light-gray line-clamp-2 mb-3;
  line-height: 1.8;
}

/* Skeleton Loading */
.skeleton {
  @apply animate-pulse bg-soft-dark rounded;
}

/* Utility Classes */
.text-crimson-red {
  color: #E60023;
}

.text-crimson-red-hover:hover {
  color: #E60023;
}

.bg-crimson-red {
  background-color: #E60023;
}

.bg-deep-black {
  background-color: #0F0F12;
}

.bg-dark-gray {
  background-color: #1A1A1F;
}

.bg-soft-dark {
  background-color: #202026;
}

.border-crimson-red {
  border-color: #E60023;
}

/* Vertical Accent Bar Utility */
.accent-bar {
  @apply border-l-4 border-crimson-red pl-4;
}

/* Section Title with Vertical Red Accent Bar */
.section-title {
  @apply relative pl-6;
}

.section-title::before {
  content: '';
  @apply absolute left-0 top-0 w-1 h-8 bg-crimson-red;
}

/* Hover Red Border Glow (not lift effect) */
.hover-glow {
  @apply transition-shadow;
}

.hover-glow:hover {
  box-shadow: 0 0 0 2px #E60023;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .prose-article h2 {
    @apply text-xl;
  }
  
  .prose-article h3 {
    @apply text-lg;
  }
  
  .aio-box,
  .key-takeaways,
  .author-box,
  .strategy-tips,
  .warning-box {
    @apply p-4;
  }
}

@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;
  }

}
