:root{--bg:#fff;--fg:#1a1a2e;--mut:#5a6472;--line:#e6e8eb;--accent:#0a64c2;--head:#0b2545}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--accent)}
header{max-width:1100px;margin:0 auto;padding:32px 20px 8px}
h1{font-size:1.7rem;margin:0 0 .35em;line-height:1.25}
.lede{color:var(--mut);margin:.2em 0 1em;max-width:70ch}
.stats{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 16px;font-size:.95rem;color:var(--mut)}
.stats b{color:var(--fg)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.controls{position:sticky;top:0;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--line);z-index:5;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
#q{flex:1 1 240px;min-width:180px;max-width:380px;padding:10px 12px;font-size:1rem;border:1px solid #cdd3da;border-radius:8px}
#q:focus-visible,.fbtn:focus-visible,.btn:focus-visible,.pg:focus-visible,.pill:focus-visible,thead th:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filters{display:inline-flex;border:1px solid #cdd3da;border-radius:8px;overflow:hidden}
.fbtn{appearance:none;border:0;border-left:1px solid #e6e8eb;background:#fff;color:var(--mut);padding:9px 14px;font-size:.9rem;cursor:pointer}
.fbtn:first-child{border-left:0}
.fbtn.is-on{background:var(--accent);color:#fff;font-weight:600}
.dl{display:inline-flex;gap:8px}
.btn{appearance:none;border:1px solid #cdd3da;background:#fff;color:var(--accent);padding:9px 12px;font-size:.88rem;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:#f0f6ff}
#count{color:var(--mut);font-size:.9rem;margin-left:auto}
mark{background:#fff2a8;color:inherit;padding:0 1px;border-radius:2px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.pill{appearance:none;border:1px solid #cdd3da;background:#fff;color:var(--fg);padding:6px 12px;border-radius:999px;font-size:.85rem;line-height:1;cursor:pointer}
.pill:hover{background:#f0f6ff}
.pill.is-on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:.93rem}
thead th{position:sticky;top:58px;background:var(--head);color:#fff;text-align:left;padding:10px;cursor:pointer;white-space:nowrap;font-weight:600}
thead th.num,thead th.dur,thead th.date,thead th.views,thead th.likes{text-align:right}
thead th .ar{opacity:.5;font-size:.8em;margin-left:4px}
tbody td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.num,td.dur,td.date,td.views,td.likes{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mut)}
td.title a{color:var(--accent);text-decoration:none}
td.title a:hover{text-decoration:underline}
tbody tr:hover{background:#f6f9fc}
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;margin:20px 0}
.pg{appearance:none;border:1px solid #cdd3da;background:#fff;color:var(--accent);padding:7px 11px;border-radius:7px;font-size:.85rem;line-height:1;cursor:pointer;text-decoration:none}
.pg:hover{background:#f0f6ff}
.pg.is-cur{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.pg.is-dis,.pg:disabled{color:#aeb6c0;background:#f6f8fb;cursor:default;pointer-events:none}
.pgi{color:var(--mut);font-size:.82rem;margin-left:8px}
footer{max-width:1100px;margin:0 auto;padding:24px 20px 60px;color:var(--mut);font-size:.85rem}
/* ---- video page ---- */
.vwrap{max-width:1000px;margin:0 auto;padding:0 20px 60px}
.crumb{font-size:.85rem;color:var(--mut);padding:14px 0}
.vtitle{font-size:1.5rem;margin:.1em 0 .4em;line-height:1.25}
.vmeta{display:flex;gap:8px 16px;flex-wrap:wrap;color:var(--mut);font-size:.88rem;margin-bottom:10px;align-items:center}
.vmeta .sep{opacity:.4}
.vtags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.chip{font-size:.78rem;background:#eef4fc;border:1px solid var(--line);color:var(--mut);padding:3px 9px;border-radius:999px}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin-bottom:20px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cols{display:grid;gap:24px}
@media(min-width:860px){.cols{grid-template-columns:1fr 300px;align-items:start}}
.sec h2{font-size:1.05rem;margin:0 0 .6em}
.chapters{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:520px;overflow-y:auto}
.chapters li{border-top:1px solid var(--line)}
.chapters li:first-child{border-top:0}
.chapters a{display:flex;gap:12px;padding:9px 12px;color:var(--fg);text-decoration:none}
.chapters a:hover{background:#f6f9fc}
.chapters .t{color:var(--accent);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.side .card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.side h2{font-size:.95rem;margin:0 0 .5em}
.linklist{list-style:none;margin:0;padding:0;font-size:.9rem}
.linklist li{margin:.35em 0;word-break:break-word}
.descbox{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.descbox summary{cursor:pointer;color:var(--accent);font-size:.92rem;font-weight:600}
.desc{white-space:pre-wrap;font-size:.9rem;line-height:1.5;margin-top:10px}
.attrib{font-size:.85rem;color:var(--mut);margin-top:10px}
@media(max-width:640px){thead th:nth-child(4),td.date{display:none}h1{font-size:1.35rem}#count{margin-left:0}}