/* ==================== Directory Card Grid Styles ==================== */

.dir-page-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .9rem; border-radius: 10px; font-size: .8rem; font-weight: 600;
    background: #F3F4F6; color: #6B7280; text-decoration: none; transition: all .2s;
    border: 1px solid #E5E7EB;
}
.dir-page-btn:hover { background: #EEF2FF; color: #4F46E5; }
.dir-page-btn.active { background: #4F46E5; color: white; border-color: #4F46E5; }

.watch-btn-dir { background: none; border: 1px solid #E5E7EB; border-radius: 8px; padding: 4px 10px; font-size: .78rem; color: #6B7280; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; }
.watch-btn-dir:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.watch-btn-dir.watched { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }

.dir-skeleton {
    background: linear-gradient(90deg, #F3F4F6 25%, #E9EBEF 50%, #F3F4F6 75%);
    background-size: 200% 100%; animation: dirShimmer 1.2s infinite; border-radius: 16px;
}
@keyframes dirShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

[data-theme="dark"] .dir-page-btn { background: #334155; color: #94A3B8; border-color: #475569; }
[data-theme="dark"] .dir-page-btn:hover { background: rgba(129,140,248,0.15); color: #818CF8; }
[data-theme="dark"] .dir-page-btn.active { background: #818CF8; color: #0F172A; border-color: #818CF8; }

[data-theme="dark"] .watch-btn-dir { border-color: #334155; color: #94A3B8; }
[data-theme="dark"] .watch-btn-dir:hover { border-color: #818CF8; color: #818CF8; background: rgba(129,140,248,0.15); }
[data-theme="dark"] .watch-btn-dir.watched { border-color: #818CF8; color: #818CF8; background: rgba(129,140,248,0.15); }

[data-theme="dark"] .dir-skeleton { background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%); background-size: 200% 100%; }