/* ==================== AI Directory Page Styles ==================== */

.detail-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.detail-hero-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
    transform: scaleY(-1);
}

.detail-hero-wave .shape-fill { fill: #F7F7F7; }

[style*="border-radius:16px"]:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08) !important; border-color: #E5E7EB !important; transform: translateY(-2px); }
[style*="border-radius:16px"] a:hover { opacity: .85; }
.filter-chip-active { background: #4F46E5 !important; color: white !important; }

.upvote-btn-dir { 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-dir:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.upvote-btn-dir.upvoted { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; font-weight: 600; }
.upvote-btn-dir i { font-size: .7rem; }

.stars-wrap-dir { 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; }
.star-static { display: inline-flex; align-items: center; gap: 1px; }
.star-static .star { font-size: .7rem; color: #D1D5DB; }
.star-static .star.active { color: #F59E0B; }
.star-static .star-count { font-size: .65rem; color: #9CA3AF; }

.dir-skeleton {
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 16px;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@media (max-width: 768px) {
    .detail-body .col-md-6.col-lg-4 { padding-left: 0; padding-right: 0; }
    .detail-body .col-md-6.col-lg-4 .row { margin-left: 0; margin-right: 0; }
}

[data-theme="dark"] .detail-hero-wave .shape-fill { fill: #0F172A; }
[data-theme="dark"] .upvote-btn-dir { border-color: #334155; color: #94A3B8; }
[data-theme="dark"] .upvote-btn-dir:hover { border-color: #818CF8; color: #818CF8; background: rgba(129,140,248,0.15); }
[data-theme="dark"] .upvote-btn-dir.upvoted { border-color: #818CF8; color: #818CF8; background: rgba(129,140,248,0.15); }
[data-theme="dark"] .star-display .star, [data-theme="dark"] .star-static .star { color: #475569; }
[data-theme="dark"] .star-display .star.active, [data-theme="dark"] .star-static .star.active { color: #FBBF24; }
[data-theme="dark"] .star-display .star:hover { color: #FDE68A; }
[data-theme="dark"] .dir-skeleton { background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%); background-size: 200% 100%; }