.article-content { font-family: 'Cairo', sans-serif; }
.article-content h2 { font-size: 1.6rem; font-weight: 900; color: #1a1a2e; margin-top: 2.5rem; margin-bottom: 1rem; padding-right: 1rem; border-right: 4px solid #d4a017; line-height: 1.4; }
.article-content h3 { font-size: 1.25rem; font-weight: 800; color: #2d2d44; margin-top: 1.8rem; margin-bottom: 0.75rem; }
.article-content p { margin-bottom: 1.2rem; color: #4a4a5a; line-height: 1.9; font-size: 16px; }
.article-content strong { color: #1a1a2e; font-weight: 700; }
.article-content ul, .article-content ol { margin: 1rem 0; padding-right: 1.5rem; }
.article-content ul { list-style: none; }
.article-content ul li { position: relative; padding-right: 1.5rem; margin-bottom: 0.6rem; color: #4a4a5a; line-height: 1.8; }
.article-content ul li::before { content: ''; position: absolute; right: 0; top: 0.65rem; width: 8px; height: 8px; background: linear-gradient(135deg, #6366f1, #d4a017); border-radius: 50%; }
.article-content ol { list-style: none; counter-reset: item; }
.article-content ol li { counter-increment: item; position: relative; padding-right: 2.5rem; margin-bottom: 0.75rem; color: #4a4a5a; line-height: 1.8; }
.article-content ol li::before { content: counter(item); position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #818cf8); color: white; font-size: 13px; font-weight: 800; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.article-content th { background: #f1f5f9; padding: 12px 16px; font-weight: 800; color: #1a1a2e; text-align: right; border-bottom: 2px solid #e2e8f0; }
.article-content td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; color: #4a4a5a; }
.article-content tr:nth-child(even) td { background: #fafbfc; }
.article-content blockquote { border-right: 4px solid #d4a017; background: linear-gradient(135deg, #fffbeb, #fef3c7); padding: 1.25rem 1.5rem; margin: 2rem 0; border-radius: 0 12px 12px 0; color: #92400e; font-style: italic; font-size: 16px; line-height: 1.9; font-weight: 600; }

/* Info Box - Blue */
.article-content .info-box,
.article-content div[style*="border-right: 4px solid #3b82f6"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-content div[style*="border-right: 4px solid #3b82f6"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Warning Box - Red */
.article-content .warning-box,
.article-content div[style*="border-right: 4px solid #ef4444"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-content div[style*="border-right: 4px solid #ef4444"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Success Box - Green */
.article-content .success-box,
.article-content div[style*="border-right: 4px solid #22c55e"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-content div[style*="border-right: 4px solid #22c55e"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

/* Stat Highlight - Dark with Gold */
.article-content div[style*="background: linear-gradient(135deg, #1a1a2e, #16213e)"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-content div[style*="background: linear-gradient(135deg, #1a1a2e, #16213e)"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.3);
}

/* Comparison Grid */
.article-content div[style*="grid-template-columns: 1fr 1fr"] > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-content div[style*="grid-template-columns: 1fr 1fr"] > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Responsive: Stack comparison grids on mobile */
@media (max-width: 640px) {
  .article-content div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .article-content h2 {
    font-size: 1.35rem;
  }

  .article-content h3 {
    font-size: 1.1rem;
  }

  .article-content div[style*="font-size: 3rem"] {
    font-size: 2.5rem !important;
  }

  .article-content blockquote {
    padding: 1rem 1.25rem;
    font-size: 15px;
  }
}

/* Smooth scroll for anchor links */
.article-content {
  scroll-behavior: smooth;
}

/* Better image handling inside articles */
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem 0;
}

/* Print styles */
@media print {
  .article-content div[style*="background: linear-gradient"] {
    border: 2px solid #ccc !important;
    background: #f9f9f9 !important;
  }

  .article-content div[style*="-webkit-text-fill-color"] {
    -webkit-text-fill-color: #1a1a2e !important;
    color: #1a1a2e !important;
  }
}