:root{--bg:#fff;--bg2:#f2f2f2;--tx:#0f0f0f;--tx2:#606060;--bd:#e5e5e5;--ac:#f00;--top:56px;--adm:0px;--adm-d:0px;--side:240px;--font:Roboto,"Segoe UI",Arial,sans-serif}
:root[data-theme=dark]{--bg:#0f0f0f;--bg2:#272727;--tx:#f1f1f1;--tx2:#aaa;--bd:#303030}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0f0f;--bg2:#272727;--tx:#f1f1f1;--tx2:#aaa;--bd:#303030}}
body.admin-bar{--adm:32px;--adm-d:32px}
@media(max-width:782px){body.admin-bar{--adm:46px;--adm-d:46px}}
@media(max-width:600px){body.admin-bar{--adm:0px}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 var(--font)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.screen-reader-text{position:absolute;left:-9999px}
.icon-btn{background:none;border:0;color:inherit;width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{background:var(--bg2)}
.topbar{position:sticky;top:var(--adm);height:var(--top);display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg);z-index:50}
.brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:18px;letter-spacing:-.5px}
.brand__mark{background:var(--ac);width:28px;height:20px;border-radius:6px;display:grid;place-items:center}
.search{flex:1;max-width:640px;margin:0 auto;display:flex}
.search input{flex:1;min-width:0;height:40px;padding:0 16px;border:1px solid var(--bd);border-right:0;border-radius:20px 0 0 20px;background:var(--bg);color:var(--tx);font:inherit}
.search button{width:64px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:0 20px 20px 0;cursor:pointer}
.shell{position:relative}
.side{position:fixed;top:calc(var(--top) + var(--adm));bottom:0;left:0;width:var(--side);padding:12px;overflow-y:auto;background:var(--bg);z-index:40;transition:transform .2s}
.side ul{list-style:none;margin:0;padding:0}
.side a{display:block;padding:8px 12px;border-radius:10px}
.side a:hover,.side .current-menu-item>a,.side .current-cat>a{background:var(--bg2)}
.side__title{font-size:16px;margin:16px 12px 6px}
.main{margin-left:var(--side);padding:12px 24px 48px;transition:margin .2s}
body.side-off .side{transform:translateX(-100%)}
body.side-off .main{margin-left:0}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
@media(max-width:899px){.side{transform:translateX(-100%);z-index:60;top:0;padding-top:calc(var(--adm-d) + 12px)}.main{margin-left:0;padding:12px 12px 48px}body.side-open .side{transform:none}body.side-open .overlay{display:block;z-index:55}.brand__name{display:none}}
.chips{display:flex;gap:12px;overflow-x:auto;padding:4px 0 16px;scrollbar-width:none}
.chip{flex:none;background:var(--bg2);padding:6px 12px;border-radius:8px;font-weight:500;white-space:nowrap}
.chip.is-active{background:var(--tx);color:var(--bg)}
.page-title{font-size:24px;margin:8px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px 16px}
.vcard__thumb{display:block;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bg2)}
.vcard__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vcard__dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:500;padding:1px 5px;border-radius:4px}
.vcard__meta{display:flex;gap:12px;margin-top:12px}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:700}
.vcard__title{margin:0;font-size:16px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard__sub{margin:2px 0 0;color:var(--tx2)}
.empty{color:var(--tx2);padding:32px 0}
.pagination,.navigation{margin:32px 0;text-align:center}
.pagination .page-numbers,.nav-links a,.nav-links span{display:inline-block;padding:6px 12px;margin:0 2px;border-radius:8px;background:var(--bg2)}
.page-numbers.current{background:var(--tx);color:var(--bg)}
.watch{display:grid;grid-template-columns:minmax(0,1fr) 402px;gap:24px;max-width:1700px}
@media(max-width:1100px){.watch{grid-template-columns:1fr}}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;cursor:pointer}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.player__play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:var(--ac);border-radius:12px;display:grid;place-items:center}
.watch__title{font-size:20px;line-height:1.4;margin:12px 0}
.channel{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.desc{background:var(--bg2);border-radius:12px;padding:12px}
.desc__meta{margin:0 0 6px;font-weight:700}
.desc__body>:first-child{margin-top:0}.desc__body>:last-child{margin-bottom:0}
.watch__rel .vcard{display:flex;gap:8px;margin-bottom:8px}
.watch__rel .vcard__thumb{flex:none;width:168px;border-radius:8px}
.watch__rel .vcard__meta{margin:0}.watch__rel .avatar{display:none}
.watch__rel .vcard__title{font-size:14px}
.comments{margin-top:24px}
.comments__list{list-style:none;padding:0}.comments__list .children{list-style:none}
.comments textarea,.comments input[type=text],.comments input[type=email],.comments input[type=url]{width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--bd);background:none;color:var(--tx);font:inherit}
.comments input[type=submit]{background:var(--tx);color:var(--bg);border:0;border-radius:18px;padding:8px 16px;font:inherit;cursor:pointer}
.article{max-width:760px;font-size:17px;line-height:1.7}
.article__img{border-radius:12px;margin:12px 0}

.section-title{font-size:20px;margin:8px 0 16px}
.plist{margin:0 0 32px}
.plist__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.plist__title{font-size:20px;margin:0}
.plist__count{color:var(--tx2)}
.plist__all{margin-left:auto;font-weight:500;color:var(--tx2)}
.plist__all:hover{color:var(--tx)}
.plist__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,280px);gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.plist__row .vcard{scroll-snap-align:start}
.grid--blog .vcard__thumb:not(:has(img)){background:var(--bg2)}
.brand--logo .brand__img{display:block;height:36px;width:auto;max-width:180px;object-fit:contain}
@media(max-width:899px){.brand--logo .brand__img{max-width:120px}}