:root{--bg: #0e0f13;--panel: #16181f;--panel-2: #1d2029;--text: #e8eaf0;--muted: #8b90a0;--accent: #6d8bff;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1200px;margin:0 auto;padding:0 20px 64px}.topbar{display:flex;align-items:baseline;gap:14px;padding:28px 0 22px}.brand{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.sub{color:var(--muted);font-size:.85rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;cursor:pointer;background:var(--panel);color:inherit;border-radius:var(--radius);overflow:hidden;text-align:left;transition:transform .15s ease,box-shadow .15s ease}.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px #00000073}.thumb{position:relative;aspect-ratio:16 / 9;background:#000}.thumb img,.thumb video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.thumb video{opacity:0;transition:opacity .25s ease}.card:hover .thumb video{opacity:1}.thumb .play{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0000008c;color:#fff;font-size:14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px}.title{font-weight:600;font-size:.98rem}.dur{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}.skeleton{aspect-ratio:16 / 9;height:auto}.skeleton .thumb,.card.skeleton{background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;min-height:200px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:32px}.pager button{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:var(--panel);color:var(--text);border:1px solid #2a2e3a;border-radius:9px;padding:9px 14px;font-size:.9rem;transition:background .12s ease,border-color .12s ease}.pager button:hover:not(:disabled){background:var(--panel-2);border-color:#3a3f4d}.pager button.active{background:var(--accent);border-color:var(--accent);color:#0b0d12;font-weight:700}.pager button:disabled{opacity:.4;cursor:default}.notice{padding:14px 16px;border-radius:10px;margin-bottom:16px}.notice.error{background:#3a1d1d;color:#ffb4b4}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#000000d1;display:grid;place-items:center;padding:24px}.player{position:relative;width:min(960px,100%)}.player video{width:100%;border-radius:12px;display:block;background:#000}.player-title{margin-top:12px;font-size:1.05rem;font-weight:600}.close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;background:#fff;color:#000;border:none;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}.footer{color:var(--muted);font-size:.8rem;text-align:center;margin-top:48px}@media (max-width: 640px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.close{top:8px;right:8px}}