:root{
  --bg:#0a0a10; --fg:#e5e7eb; --radius:18px; --s1:#1c1f2a; --s2:#0f1320;
  --badge-bg:rgba(0,0,0,.45); --badge-txt:#e2e8f0; --badge-br:rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1150px){.grid{grid-template-columns:repeat(5,1fr)}}
.card{display:block;transform:translateZ(0);transition:transform .18s ease}
.frame{position:relative;aspect-ratio:16/9}
.imgwrap{position:relative;width:100%;height:100%}
.imgwrap img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius);transform:translateZ(0);transition:transform .22s ease;filter:none}
.card:hover{transform:translateY(-2px)}
.card:hover .imgwrap img{transform:scale(1.02);filter:none!important}
.grad{position:absolute;inset:auto 0 0 0;height:42%;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
.badge{position:absolute;right:6px;bottom:6px;font-size:12px;font-weight:800;padding:3px 8px;border-radius:8px;background:var(--badge-bg);color:var(--badge-txt);border:1px solid var(--badge-br);letter-spacing:.2px}
.meta{padding:10px 4px 2px}
.title{font-weight:900;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:22px 0 8px}
.pager a,.pager span{height:38px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-weight:700;font-size:14px}
.pager a:hover{background:rgba(255,255,255,.09)}
.pager .current{padding:0 10px;border:none;background:transparent;opacity:.85}
.pager .icon{padding:0;min-width:38px}
.pager .disabled{opacity:.4;pointer-events:none}
h1{text-align:center;margin:8px 0 18px;font-size:20px;font-weight:900}
.empty-note{opacity:.7;text-align:center}