.category-directory h1 { font-size:30px; margin:12px 0; }
.category-directory h2 { font-size:24px; margin:0 0 12px; }
.category-summary { color:var(--site-muted); line-height:1.8; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:24px; }
.category-tile { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--site-line); border-radius:var(--site-radius-sm); color:var(--site-ink); background:var(--site-soft); }
.category-tile strong { font-size:17px; }
.category-tile>span { font-size:13px; color:var(--site-muted); }
.category-tile:hover { border-color:var(--site-accent); transform:translateY(-2px); }
.category-ranking { display:grid; gap:18px; margin-top:24px; }
.category-rank { display:grid; grid-template-columns:160px minmax(0,1fr) 65px; gap:16px; align-items:center; font-size:16px; color:var(--site-ink); }
.category-rank strong { text-align:right; font-size:14px; }
.category-bar { height:14px; background:var(--site-soft); border-radius:8px; overflow:hidden; }
.category-bar i { display:block; height:100%; background:#48896c; border-radius:8px; }
@media(max-width:600px) { .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .category-tile { padding:16px 12px; } .category-rank { grid-template-columns:100px minmax(0,1fr) 48px; gap:10px; font-size:14px; } }
.category-grid { max-height:560px; overflow:auto; padding:2px; }
.category-tile[hidden] { display:none; }
#category-filter { color:var(--site-ink); }