.ai-comp { max-width: 960px; margin: 0 auto; }
.ai-comp-header { text-align: center; margin-bottom: 32px; }
.ai-comp-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.ai-comp-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: inherit; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.ai-comp-btn.active { background: #f97316; border-color: #f97316; color: #fff; font-weight: 600; }
.ai-comp-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); font-size: 0.9rem; }
.ai-comp-table th { background: rgba(255,255,255,0.05); padding: 14px 16px; text-align: left; font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ai-comp-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.ai-comp-table tr:last-child td { border-bottom: none; }
.ai-comp-table tr:hover td { background: rgba(255,255,255,0.02); }
.ai-comp-model { font-weight: 600; }
.ai-comp-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.ai-comp-badge.free { background: rgba(16,185,129,0.15); color: #10b981; }
.ai-comp-badge.paid { background: rgba(249,115,22,0.15); color: #f97316; }
.ai-comp-check { color: #10b981; }
.ai-comp-cross { color: #ef4444; opacity: 0.5; }
.ai-comp-note { text-align: center; margin-top: 16px; font-size: 0.8rem; opacity: 0.6; }
@media (max-width: 768px) {
    .ai-comp-table { font-size: 0.8rem; display: block; overflow-x: auto; }
    .ai-comp-table th, .ai-comp-table td { padding: 10px 12px; min-width: 100px; }
    .ai-comp-table th:first-child, .ai-comp-table td:first-child { position: sticky; left: 0; background: #1a1a2e; z-index: 1; }
}