/* ==================== Compare AI Tools Page Styles ==================== */

.picker-row { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; max-width: 900px; margin-left: auto; margin-right: auto; flex-wrap: wrap; }
.picker-col { flex: 1; min-width: 200px; text-align: left; }
.picker-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.slot-remove { background: rgba(255,255,255,.15); border: none; color: rgba(255,255,255,.6); width: 18px; height: 18px; border-radius: 50%; font-size: .6rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.slot-remove:hover { background: rgba(252,165,165,.3); color: #FCA5A5; }

.add-slot-btn {
    background: rgba(255,255,255,.12); border: 1px dashed rgba(255,255,255,.35);
    color: white; font-size: .8rem; font-weight: 600; padding: .5rem 1.25rem; border-radius: 50px;
    cursor: pointer; transition: all .2s; margin-bottom: 1.5rem;
}
.add-slot-btn:hover { background: rgba(255,255,255,.2); }

.autocomplete-wrap { position: relative; }
.autocomplete-input {
    width: 100%; padding: .75rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
    color: white; font-size: .95rem; outline: none; transition: all .2s;
    box-sizing: border-box;
}
.autocomplete-input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.15); }
.autocomplete-input[readonly] { opacity: .7; cursor: default; }
.autocomplete-input::placeholder { color: rgba(255,255,255,.35); }

.autocomplete-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.2);
    max-height: 260px; overflow-y: auto; z-index: 100;
}
.autocomplete-item { padding: .65rem 1rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .15s; }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #F3F4FF; }
.autocomplete-item .item-name { font-weight: 600; color: #111827; font-size: .9rem; }
.autocomplete-item .item-version { font-weight: 400; color: #9CA3AF; font-size: .8rem; }
.autocomplete-item .item-meta { font-size: .78rem; color: #6B7280; margin-top: 1px; }

.picker-selected { margin-top: .5rem; }
.selected-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px; padding: .35rem .75rem .35rem 1rem;
}
.selected-chip-name { color: white; font-size: .85rem; font-weight: 600; }
.selected-chip-remove { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 0; font-size: .85rem; line-height: 1; }
.selected-chip-remove:hover { color: #FCA5A5; }

.compare-picker-hero { margin: 0 auto; max-width: 900px; }
.compare-picker-header { display: flex; align-items: stretch; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; justify-content: center; }
.compare-picker-model.picker-hero {
    flex: 1; min-width: 200px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px);
    border-radius: 16px; padding: 1rem 1.25rem; position: relative; min-height: 84px;
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid rgba(255,255,255,.15);
}
.compare-picker-model.picker-hero .model-info { flex: 1; }
.compare-picker-model.picker-hero .model-name { font-size: 1rem; font-weight: 700; color: white; }
.compare-picker-model.picker-hero .model-meta { font-size: .78rem; color: rgba(255,255,255,.65); margin-top: .1rem; }
.compare-picker-model.picker-hero .model-badge { font-size: .65rem; padding: .15rem .5rem; border-radius: 20px; background: rgba(209,250,229,.2); color: #6EE7B7; white-space: nowrap; border: 1px solid rgba(110,231,183,.3); }
.compare-picker-model.picker-hero .remove-btn { background: none; border: none; color: rgba(255,255,255,.5); font-size: 1rem; cursor: pointer; padding: .2rem .4rem; border-radius: 8px; transition: all .2s; flex-shrink: 0; }
.compare-picker-model.picker-hero .remove-btn:hover { background: rgba(255,255,255,.1); color: #FCA5A5; }
.compare-picker-model.picker-hero .model-desc { font-size: .72rem; color: rgba(255,255,255,.5); line-height: 1.3; margin-top: .15rem; }
.model-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.wins-badge { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px; background: rgba(217,119,6,.25); color: #FCD34D; white-space: nowrap; border: 1px solid rgba(252,211,77,.3); }

.compare-picker-vs { flex-shrink: 0; width: 36px; height: 36px; background: linear-gradient(135deg,#4F46E5,#7C3AED); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: white; box-shadow: 0 4px 15px rgba(79,70,229,.3); align-self: center; }

.compare-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.compare-hint { font-size: .78rem; color: rgba(255,255,255,.6); font-weight: 500; }
.copy-link-btn {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    color: white; font-size: .78rem; font-weight: 600; padding: .45rem 1rem; border-radius: 50px;
    cursor: pointer; transition: all .2s;
}
.copy-link-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.copy-link-btn:disabled { opacity: .4; cursor: not-allowed; }

.compare-results-table { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.compare-results-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-results-table th { padding: 1rem; text-align: center; border-bottom: 2px solid #E9ECEF; background: #FAFBFC; font-weight: 600; color: #495057; }
.compare-results-table th:first-child { text-align: left; min-width: 160px; background: #F8F9FF; }
.compare-results-table td { padding: .85rem 1rem; border-bottom: 1px solid #F0F0F0; vertical-align: middle; text-align: center; color: #212529; }
.compare-results-table td:first-child { font-weight: 600; color: #495057; background: #FAFBFC; text-align: left; min-width: 160px; white-space: nowrap; }
.compare-results-table tr:hover td { background: #F8F9FF !important; }
.compare-results-table .feature-tag { display: inline-block; background: #E8F4FD; color: #1A73E8; font-size: .7rem; padding: .15rem .5rem; border-radius: 12px; white-space: nowrap; margin: 2px; }
.compare-results-table .modality-tag { display: inline-block; background: #E8F5E9; color: #2E7D32; font-size: .7rem; padding: .15rem .5rem; border-radius: 12px; margin: 2px; }
.compare-highlight-better { color: #059669; font-weight: 700; }

.compare-section-row td { background: #EEF2FF !important; font-weight: 700; color: #4F46E5; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: .6rem 1rem; }
.compare-wins-row td { background: #FFFBEB !important; font-weight: 700; color: #92400E; }
.wins-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: .15rem .5rem; border-radius: 20px; background: #FEF3C7; color: #B45309; font-weight: 700; }
.wins-cell.top { background: #F59E0B; color: white; }
.muted-dash { color: #D1D5DB; }

.radar-wrap { background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: 1.5rem; margin-top: 1.25rem; }
.radar-title { font-size: .95rem; font-weight: 700; color: #111827; text-align: center; margin-bottom: 1rem; }

.model-grid-card { cursor: pointer; transition: all .2s; position: relative; }
.model-grid-card:hover { border-color: #4F46E5 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79,70,229,.1); }
.model-grid-card.grid-picked { border-color: #4F46E5 !important; background: #EEF2FF !important; }
.grid-badge-open { font-size: .65rem; padding: .15rem .5rem; border-radius: 20px; background: #D1FAE5; color: #065F46; white-space: nowrap; }
.grid-picked-badge { font-size: .75rem; color: #4F46E5; font-weight: 600; }

#modelPager .page-link { color: #4F46E5; border-radius: 8px; margin: 0 2px; }
#modelPager .page-item.active .page-link { background: #4F46E5; border-color: #4F46E5; color: #fff; }
#modelPager .page-item.disabled .page-link { color: #9CA3AF; pointer-events: none; }
#modelPager .page-item .page-link:hover { background: #EEF2FF; border-color: #4F46E5; }
#modelPagerInfo { margin-top: .5rem; }

.filter-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; margin-bottom: .3rem; display: block; }
#browseSection .form-select { border-radius: 10px; border-color: #E5E7EB; font-size: .85rem; }

#browseSection .select2-container .select2-selection--single {
    height: 31px; border-radius: 10px; border-color: #E5E7EB; font-size: .85rem;
}
#browseSection .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 29px; padding-left: 12px; color: #374151;
}
#browseSection .select2-container .select2-selection--single .select2-selection__arrow {
    height: 29px;
}
#browseSection .select2-container--default .select2-selection--single:focus,
#browseSection .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #4F46E5; outline: none;
}
#browseSection .select2-dropdown { border-radius: 10px; border-color: #E5E7EB; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
#browseSection .select2-results__option--highlighted.select2-results__option--selectable {
    background: #4F46E5; color: #fff;
}

.upvote-btn { background: none; border: 1px solid #E5E7EB; border-radius: 8px; padding: 4px 10px; font-size: .75rem; color: #6B7280; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; }
.upvote-btn:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.upvote-btn.upvoted { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; font-weight: 600; }
.upvote-btn i { font-size: .7rem; }

.stars-wrap { display: inline-flex; align-items: center; }
.star-display { display: inline-flex; align-items: center; gap: 1px; }
.star-display .star { font-size: .75rem; color: #D1D5DB; cursor: pointer; transition: color .15s; }
.star-display .star.active { color: #F59E0B; }
.star-display .star:hover { color: #FBBF24; }
.star-display .star-count { font-size: .65rem; color: #9CA3AF; }

.compare-mobile-stack { display: flex; flex-direction: column; gap: 1rem; }
.compare-mobile-row { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.compare-mobile-section { background: #EEF2FF; color: #4F46E5; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: .5rem .9rem; }
.compare-mobile-label { font-size: .75rem; font-weight: 700; color: #374151; padding: .6rem .9rem .2rem; }
.compare-mobile-model { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .9rem; border-top: 1px solid #F3F4F6; }
.compare-mobile-model-name { font-size: .78rem; font-weight: 600; color: #6B7280; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-mobile-model-val { font-size: .85rem; font-weight: 700; color: #111827; text-align: right; }
.compare-mobile-model.better .compare-mobile-model-val { color: #059669; }
.compare-mobile-model.better .compare-mobile-model-name { color: #059669; }

@media (max-width: 768px) {
    .picker-row { flex-direction: column; align-items: stretch; }
    .picker-col { min-width: 0; }
    .compare-picker-header { flex-direction: column; }
    .compare-picker-vs { transform: rotate(90deg); align-self: center; }
    .compare-results-table td, .compare-results-table th { padding: .6rem .5rem !important; font-size: .8rem; }
    .compare-results-table td:first-child { min-width: 100px !important; font-size: .85rem; }
    .compare-toolbar { justify-content: center; }
    .compare-results-table { overflow-x: auto; }
    .compare-results-table table { min-width: 520px; }
}

[data-theme="dark"] .autocomplete-input {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(51, 65, 85, 0.5);
    color: #E2E8F0;
}
[data-theme="dark"] .autocomplete-input:focus {
    background: rgba(30, 41, 59, 0.9);
    border-color: #818CF8;
}
[data-theme="dark"] .autocomplete-dropdown {
    background: #1E293B;
    border-color: rgba(51, 65, 85, 0.5);
}
[data-theme="dark"] .autocomplete-item {
    color: #E2E8F0;
}
[data-theme="dark"] .autocomplete-item:hover {
    background: rgba(51, 65, 85, 0.5);
}
[data-theme="dark"] .autocomplete-item .item-name { color: #F1F5F9; }
[data-theme="dark"] .autocomplete-item .item-version { color: #94A3B8; }
[data-theme="dark"] .autocomplete-item .item-meta { color: #64748B; }

[data-theme="dark"] .compare-results-table {
    background: #1E293B;
}
[data-theme="dark"] .compare-results-table th {
    background: #334155;
    color: #F1F5F9;
    border-color: #475569;
}
[data-theme="dark"] .compare-results-table th:first-child { background: #1E293B; }
[data-theme="dark"] .compare-results-table td {
    color: #E2E8F0;
    border-color: #334155;
}
[data-theme="dark"] .compare-results-table td:first-child {
    background: #334155;
    color: #94A3B8;
}
[data-theme="dark"] .compare-results-table tr:hover td { background: #334155 !important; }
[data-theme="dark"] .compare-section-row td { background: rgba(129,140,248,0.15) !important; color: #818CF8; }
[data-theme="dark"] .compare-wins-row td { background: rgba(245,158,11,0.15) !important; color: #FBBF24; }
[data-theme="dark"] .wins-cell { background: rgba(245,158,11,0.2); color: #FBBF24; }
[data-theme="dark"] .wins-cell.top { background: #F59E0B; color: #0F172A; }
[data-theme="dark"] .compare-highlight-better { color: #6EE7B7; }
[data-theme="dark"] .compare-results-table .feature-tag { background: rgba(59,130,246,0.2); color: #93C5FD; }
[data-theme="dark"] .compare-results-table .modality-tag { background: rgba(34,197,94,0.2); color: #86EFAC; }
[data-theme="dark"] .muted-dash { color: #64748B; }

[data-theme="dark"] .radar-wrap { background: #1E293B; }
[data-theme="dark"] .radar-title { color: #F1F5F9; }

[data-theme="dark"] .model-grid-card { background: #1E293B; border-color: #334155; }
[data-theme="dark"] .model-grid-card:hover { border-color: #818CF8 !important; box-shadow: 0 4px 12px rgba(129,140,248,0.15); }
[data-theme="dark"] .model-grid-card.grid-picked { border-color: #818CF8 !important; background: rgba(129,140,248,0.15) !important; }
[data-theme="dark"] .grid-badge-open { background: rgba(16,185,129,0.2); color: #6EE7B7; }

[data-theme="dark"] .filter-label { color: #94A3B8; }
[data-theme="dark"] #browseSection .form-select { background: #1E293B; border-color: #334155; color: #E2E8F0; }
[data-theme="dark"] #browseSection .select2-container .select2-selection--single {
    background: #1E293B; border-color: #334155; color: #E2E8F0;
}
[data-theme="dark"] #browseSection .select2-container .select2-selection--single .select2-selection__rendered { color: #E2E8F0; }
[data-theme="dark"] #browseSection .select2-dropdown { background: #1E293B; border-color: #334155; }
[data-theme="dark"] #browseSection .select2-results__option--highlighted.select2-results__option--selectable { background: #818CF8; color: #0F172A; }

[data-theme="dark"] .upvote-btn { border-color: #334155; color: #94A3B8; }
[data-theme="dark"] .upvote-btn:hover { border-color: #818CF8; color: #818CF8; background: rgba(129,140,248,0.15); }
[data-theme="dark"] .upvote-btn.upvoted { border-color: #818CF8; color: #818CF8; background: rgba(129,140,248,0.15); }
[data-theme="dark"] .star-display .star { color: #475569; }
[data-theme="dark"] .star-display .star.active { color: #FBBF24; }
[data-theme="dark"] .star-display .star:hover { color: #FDE68A; }
[data-theme="dark"] .star-display .star-count { color: #64748B; }

[data-theme="dark"] .compare-mobile-row { background: #1E293B; }
[data-theme="dark"] .compare-mobile-section { background: rgba(129,140,248,0.2); color: #818CF8; }
[data-theme="dark"] .compare-mobile-label { color: #E2E8F0; }
[data-theme="dark"] .compare-mobile-model { border-color: #334155; }
[data-theme="dark"] .compare-mobile-model-name { color: #94A3B8; }
[data-theme="dark"] .compare-mobile-model-val { color: #F1F5F9; }
[data-theme="dark"] .compare-mobile-model.better .compare-mobile-model-val { color: #6EE7B7; }
[data-theme="dark"] .compare-mobile-model.better .compare-mobile-model-name { color: #6EE7B7; }

[data-theme="dark"] #modelPager .page-link { color: #818CF8; background: #1E293B; border-color: #334155; }
[data-theme="dark"] #modelPager .page-item.active .page-link { background: #818CF8; border-color: #818CF8; color: #0F172A; }
[data-theme="dark"] #modelPager .page-item.disabled .page-link { color: #64748B; }
[data-theme="dark"] #modelPager .page-item .page-link:hover { background: rgba(129,140,248,0.15); border-color: #818CF8; }