*,*::before,*::after{box-sizing:border-box}
:root{
 --pink:#ff5fb0;
 --purple:#a45cff;
 --deep:#6f3bd9;
}
html,body{margin:0;padding:0;font-family:'Segoe UI',Tahoma,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#f6efff 0%,#fdf2f8 40%,#ffffff 100%);color:#222;font-size:14px;min-height:100%}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none}
.grad{background:linear-gradient(135deg,var(--pink) 0%,var(--purple) 50%,var(--deep) 100%)}
.grad-text{background:linear-gradient(135deg,var(--pink) 0%,var(--purple) 60%,var(--deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.container{max-width:1100px;margin:0 auto;}
.scroll-thin::-webkit-scrollbar{width:6px;height:6px}
.scroll-thin::-webkit-scrollbar-thumb{background:#d6c4f5;border-radius:3px}

/* TOP COMMENTERS */
.top-block{background:#fff;border:1px solid #ebdcfa;border-radius:18px;overflow:hidden;margin-bottom:18px;box-shadow:0 2px 8px rgba(111,59,217,.04)}
.top-head{padding:14px 18px;border-bottom:1px solid #f3e7fb;background:linear-gradient(90deg,#fdf2f8,#f5edff);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.top-head h2{margin:0;font-size:17px;font-weight:900;display:flex;align-items:center;gap:8px}
.period-switch{display:flex;background:#fff;border:1px solid #ebdcfa;border-radius:10px;padding:2px;gap:2px}
.period-switch button{padding:5px 12px;border-radius:8px;font-size:11px;color:#666;font-weight:600;transition:.15s}
.period-switch button.on{color:#fff;box-shadow:0 2px 6px rgba(164,92,255,.3)}

.top-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
@media(max-width:900px){
.top-grid { grid-template-columns: repeat(3, 1fr); overflow: auto; height: 460px; }
}
.top-card{padding:16px 12px;border-right:1px solid #f3e7fb;border-bottom:1px solid #f3e7fb;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;transition:.2s}
.top-card:hover{background:#fbf5ff}
.top-card:nth-child(5n){border-right:none}
.top-card:nth-last-child(-n+5){border-bottom:none}
@media(max-width:900px){
 .top-card{border-right:none!important;border-bottom:1px solid #f3e7fb!important}
 .top-card:nth-child(2n){border-right:1px solid #f3e7fb!important}
}
.rank{position:absolute;top:6px;left:8px;font-size:11px;font-weight:800;color:#a89bc4}
.medal{position:absolute;top:6px;right:8px;font-size:18px}
.top-av{width:56px;height:56px;border-radius:50%;color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(164,92,255,.25);border:3px solid #fff;outline:3px solid transparent;position:relative}
.top-card.r1 .top-av{outline-color:#fbbf24}
.top-card.r2 .top-av{outline-color:#a8a29e}
.top-card.r3 .top-av{outline-color:#fb923c}
.top-name{font-weight:700;font-size:13px;color:#1a1130;line-height:1.2}
.top-role{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:6px;color:#fff}
.role.admin{background:linear-gradient(135deg,#ff5fb0,#6f3bd9)}
.role.vip{background:linear-gradient(135deg,#fbbf24,#d97706)}
.role.mod{background:linear-gradient(135deg,#10b981,#065f46)}
.role.user{background:#a89bc4}
.top-count{font-size:11px;color:#888}
.top-count b{color:var(--deep);font-size:13px}
.top-likes{display:flex;align-items:center;gap:4px;font-size:11px;color:#e1186e;font-weight:700;margin-top:2px}

/* HEADER */
header{background:#fff;border-bottom:1px solid #ece1f7;position:sticky;top:0;z-index:30;box-shadow:0 1px 4px rgba(111,59,217,.05)}
.header-inner{height:56px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px}
.logo svg{width:26px;height:26px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.search{flex:1;max-width:420px;position:relative}
.search input{width:100%;background:#f5edff;border:1px solid #e7d8fb;border-radius:999px;padding:8px 38px 8px 16px;font-size:14px;outline:none;transition:.2s}
.search input:focus{background:#fff;border-color:var(--purple)}
.search button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:6px 12px;border-radius:999px;color:#444;font-size:14px;display:flex;align-items:center;gap:6px;transition:.2s}
.nav a:hover{background:#f5edff;color:var(--deep)}
.add-btn{width:32px;height:32px;border-radius:50%;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(164,92,255,.35);transition:.2s}
.add-btn:hover{transform:scale(1.08)}
.user-pill{display:flex;align-items:center;gap:8px;background:#f5edff;border-radius:999px;padding:3px 12px 3px 3px}
.avatar{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.user-pill span{font-weight:600;color:var(--deep)}

/* TABS */
.tabs-wrap{background:#fff;border-bottom:1px solid #ece1f7}
.tabs{display:flex;align-items:center;gap:8px;padding:12px 0;overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:13px;white-space:nowrap;background:#f5edff;color:#444;border:1px solid #ebdcfa;font-weight:500;transition:.2s}
.tab:hover{background:#ecdcfa}
.tab.active{color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(164,92,255,.35)}
.tabs .arrow{color:#b89be8;background:transparent;padding:4px 6px;font-size:18px}

/* BREADCRUMBS */
.crumbs{padding:14px 0 4px;font-size:12px;color:#888}
.crumbs a{color:var(--deep)}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{margin:0 6px;color:#ccc}

/* PAGE TITLE */
.page-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 16px;flex-wrap:wrap}
.page-title h1{margin:0;font-size:28px;font-weight:900;display:flex;align-items:center;gap:10px}
.page-title h1 .ic{font-size:30px}
.page-title .meta{font-size:12px;color:#888;display:flex;gap:14px;flex-wrap:wrap}
.page-title .meta b{color:var(--deep)}
.page-title .meta .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:4px;animation:liveDot 1.6s infinite}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:.3}}

/* STAT TILES */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat-tile{background:#fff;border:1px solid #ebdcfa;border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(111,59,217,.05)}
.stat-tile .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0}
.stat-tile .ic.c1{background:linear-gradient(135deg,#ff5fb0,#a4185c)}
.stat-tile .ic.c2{background:linear-gradient(135deg,#a45cff,#6f3bd9)}
.stat-tile .ic.c3{background:linear-gradient(135deg,#fbbf24,#d97706)}
.stat-tile .ic.c4{background:linear-gradient(135deg,#10b981,#065f46)}
.stat-tile .lbl{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.stat-tile .val{font-size:20px;font-weight:900;color:#1a1130;line-height:1.1}
.stat-tile .delta{font-size:11px;color:#10b981;font-weight:700;margin-top:2px}

 

/* FILTER BAR */
.filter-bar{background:#fff;border:1px solid #ebdcfa;border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;box-shadow:0 2px 6px rgba(111,59,217,.04);margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;font-size:12px;background:#f5edff;color:#555;border:1px solid #ebdcfa;cursor:pointer;transition:.15s}
.chip:hover{background:#ecdcfa}
.chip.on{color:#fff;border-color:transparent;font-weight:600}
.filter-bar .sep{flex:1}
.filter-bar .search-mini{position:relative;width:200px;max-width:100%}
.filter-bar .search-mini input{width:100%;background:#f5edff;border:1px solid #ebdcfa;border-radius:999px;padding:6px 12px 6px 30px;font-size:12px;outline:none}
.filter-bar .search-mini::before{content:"🔍";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.5}
.sort{font-size:12px;color:#666;display:flex;align-items:center;gap:6px}
.sort select{font:inherit;background:#f5edff;border:1px solid #ebdcfa;border-radius:8px;padding:4px 8px;color:var(--deep);font-weight:600;outline:none}

/* MAIN GRID */
.main{display:grid;grid-template-columns:1fr;gap:20px;padding:4px 0 20px}
.col-left{min-width:0;display:flex;flex-direction:column;gap:14px}
.col-right{display:flex;flex-direction:column;gap:16px}
@media(max-width:900px){.main{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid #ebdcfa;border-radius:18px;box-shadow:0 2px 8px rgba(111,59,217,.04);overflow:hidden}

/* DAY DIVIDER */
.day-divider{display:flex;align-items:center;gap:10px;color:#888;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:8px 4px 4px}
.day-divider::before,.day-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#e0d0f5,transparent)}
.day-divider .badge{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;padding:3px 10px;border-radius:999px;font-size:10px;letter-spacing:.05em}

/* COMMENT */
.comment{background:#fff;border:1px solid #ebdcfa;border-radius:14px;padding:12px 14px;display:flex;gap:12px;box-shadow:0 1px 4px rgba(111,59,217,.04);transition:.15s;position:relative}
.comment:hover{border-color:#dcc6f5;box-shadow:0 4px 14px rgba(164,92,255,.1)}
.comment.pinned{border-left:3px solid #fbbf24;background:linear-gradient(90deg,#fffbeb 0%,#fff 60%)}
.comment.hot{border-left:3px solid #e1186e}
.comment.new::after{content:"NEW";position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#ef4444,#9f1239);color:#fff;font-size:8px;font-weight:800;padding:2px 6px;border-radius:6px;letter-spacing:.05em}
.c-av{width:36px;height:36px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.c-av .online-dot{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.c-body{flex:1;min-width:0}
.c-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:#888;margin-bottom:4px}
.c-name{font-weight:800;color:#222;font-size:13px}
.lvl-mini{background:#f5edff;color:var(--deep);padding:1px 6px;border-radius:6px;font-weight:700;font-size:10px}
.c-time{color:#aaa}
.c-text{font-size:13px;color:#333;line-height:1.5;margin:2px 0 6px;word-wrap:break-word}
.c-text .mention{color:var(--deep);font-weight:700;background:#f5edff;padding:1px 5px;border-radius:5px}
.c-text .emoji{font-size:15px}
.c-text.spoiler{background:#1a1130;color:#1a1130;border-radius:6px;padding:2px 6px;cursor:pointer;transition:.2s}
.c-text.spoiler:hover{color:#fff}
.c-context{font-size:11px;color:#888;background:#f5edff;border-left:3px solid var(--purple);border-radius:6px;padding:6px 10px;margin:4px 0 8px;display:flex;align-items:center;gap:6px}
.c-context a{color:var(--deep);font-weight:600;display:flex;align-items:center;gap:4px;min-width:0}
.c-context a:hover{text-decoration:underline}
.c-context .cat{background:#ede9fe;color:#6d28d9;font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;text-transform:uppercase;flex-shrink:0}
.c-context .cat.news{background:#dbeafe;color:#1d4ed8}
.c-context .cat.leak{background:#fce7f3;color:#be185d}
.c-context .cat.ai{background:#ede9fe;color:#6d28d9}
.c-context .cat.blog{background:#d1fae5;color:#047857}
.c-context .cat.money{background:#fef3c7;color:#b45309}
.c-context .cat.tg{background:#cffafe;color:#0e7490}
.c-context .ttl{color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}

/* Reply quote */
.c-quote{background:#fbf5ff;border-left:3px solid #d6c4f5;border-radius:6px;padding:6px 10px;margin:4px 0 8px;font-size:11px;color:#666;line-height:1.4}
.c-quote .qa{font-weight:700;color:var(--deep);font-size:11px}

.c-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:11px}
.c-actions .act{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;color:#888;font-weight:600;transition:.15s}
.c-actions .act:hover{background:#f5edff;color:var(--deep)}
.c-actions .act svg{width:12px;height:12px}
.c-actions .act.up.active{color:#10b981}
.c-actions .act.down.active{color:#ef4444}
.c-actions .act.like.active{color:#e1186e}
.c-actions .act.like.active svg{fill:#e1186e}
.c-actions .score{font-weight:800;color:var(--deep);font-size:11px;padding:0 4px}
.c-actions .right{margin-left:auto;color:#bbb;font-size:10px;display:flex;align-items:center;gap:8px}
.c-actions .badge-rep{background:#fde2f0;color:#e1186e;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px}

/* LOAD MORE */
.load-more{display:flex;justify-content:center;padding:16px 0}
.load-more button{color:#fff;font-weight:700;font-size:13px;padding:12px 28px;border-radius:999px;box-shadow:0 8px 22px rgba(164,92,255,.3);transition:.2s;display:flex;align-items:center;gap:8px}
.load-more button:hover{transform:scale(1.04)}
.load-more .info{text-align:center;font-size:11px;color:#888;margin-top:8px}

/* PAGINATION */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;padding:16px 0 32px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:#fff;border:1px solid #ebdcfa;color:#555;padding:0 10px;transition:.15s}
.pagination a:hover{background:#f5edff;color:var(--deep);border-color:var(--purple)}
.pagination .cur{color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(164,92,255,.35)}
.pagination .dots{border:none;background:transparent}

/* SIDEBAR */
.profile-card{padding:16px}
.profile-top{display:flex;align-items:center;gap:12px}
.profile-top .av-lg{width:48px;height:48px;border-radius:50%;color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
.profile-top .lbl{font-size:11px;color:#888}
.profile-top .nm{font-weight:700;color:var(--deep)}
.profile-card ul{list-style:none;margin:12px 0 0;padding:0;font-size:13px;display:flex;flex-direction:column;gap:6px}
.profile-card ul a{color:var(--deep)}
.profile-card ul a:hover{text-decoration:underline}
.profile-card .balance{margin-top:12px;padding-top:12px;border-top:1px solid #f3e7fb;display:flex;justify-content:space-between;align-items:center}
.profile-card .balance .amt{font-weight:700;color:var(--deep);display:flex;align-items:center;gap:4px}

.menu a{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #f7eefb;font-size:13px;color:#444;transition:.15s}
.menu a:last-child{border-bottom:none}
.menu a:hover{background:#fbf5ff;color:var(--deep)}
.menu a .ic{width:20px}
.menu a .badge{margin-left:auto;font-size:10px;background:#fde2f0;color:#e1186e;padding:2px 8px;border-radius:999px;font-weight:700}
.menu a.premium{color:#fff;font-weight:700}
.menu a.cur{background:#fbf5ff;color:var(--deep);font-weight:600}

.side-section .head{padding:12px 16px;border-bottom:1px solid #f3e7fb;font-weight:700;font-size:13px;color:var(--deep);display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,#fdf2f8,#f5edff)}
.hot-cmt{padding:10px 14px;border-bottom:1px solid #f7eefb}
.hot-cmt:last-child{border-bottom:none}
.hot-cmt .row{display:flex;align-items:center;gap:6px;font-size:11px;margin-bottom:3px}
.hot-cmt .nm{font-weight:700;color:var(--deep)}
.hot-cmt .score{margin-left:auto;color:#e1186e;font-weight:800;font-size:11px;display:flex;align-items:center;gap:2px}
.hot-cmt .txt{font-size:12px;color:#555;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.rules{padding:14px 16px;font-size:12px;color:#555;line-height:1.5}
.rules ul{margin:6px 0 0;padding-left:18px}
.rules li{margin-bottom:3px}

/* FOOTER */
footer{margin-top:32px;border-top:1px solid #ece1f7;background:#fff}
.footer-inner{padding:32px 0}
.foot-card{background:linear-gradient(135deg,#fdf2f8,#f5edff);border-radius:18px;padding:24px;border:1px solid #ebdcfa}
.foot-card h3{margin:0 0 8px;font-size:15px}
.foot-card p{margin:0 0 16px;font-size:13px;color:#555}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:6px;transition:.2s;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.socials a:hover{transform:scale(1.05)}
.s-tg{background:#229ED9}.s-yt{background:#FF0000}.s-vk{background:#0077FF}.s-tg2{background:#22c5e0}.s-tt{background:#000}.s-x{background:#111}
.foot-bottom{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;color:#888;font-size:12px}
.foot-bottom a{color:var(--deep);font-weight:700}


.top-av img {border-radius: 50%; height: 50px; width: 50px; object-fit: cover; }

/* FAB */
.fab{position:fixed;bottom:20px;right:20px;z-index:40;color:#fff;border-radius:18px;box-shadow:0 16px 36px rgba(111,59,217,.4);padding:12px 16px 12px 12px;display:flex;align-items:center;gap:12px;max-width:260px;transition:.2s}
.fab:hover{transform:scale(1.05)}
.fab .icn{position:relative;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.fab .dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;background:#fde047;border-radius:50%}
.fab .dot.ping{animation:ping 1.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:1}80%,100%{transform:scale(2);opacity:0}}
.fab .lbl{font-size:11px;font-weight:600;opacity:.9;line-height:1.1}
.fab .ttl{font-size:14px;font-weight:900;line-height:1.1;display:flex;align-items:center;gap:4px}
.fab .ttl span{color:#fde047}

@media(max-width:600px){

.top-av { width: 105px!important; height: 105px!important; } .top-av img {  height: 100px; width: 100px; } .top-name { font-size: 15px;}.top-card:nth-child(2n) { border-left: 1px solid #f3e7fb !important; }
 .nav,.user-pill{display:none}
 .fab{padding:10px 12px}
 .fab .lbl{font-size:10px}
 .page-title h1{font-size:22px}
}

.cat {
    display: contents!important;
}

.strim {    background: linear-gradient(135deg, #ff5fb0, #ff8d8d);}
.moda {    background: linear-gradient(135deg, #6f84ff, #002f71); }
.onlyk {    background: linear-gradient(135deg, #00adff, #00a0ff);}
.fansly {background: linear-gradient(135deg, #5f76ff, #1778ff);}
.tiktok {background: linear-gradient(189deg, #6e00ff, #0000009c);}
.cosplay {background: linear-gradient(189deg, #ef9b00, #540013db);}