:root{--bg:#040713;--panel:#071427;--panel2:#08182d;--line:#17416e;--pink:#ff21b8;--purple:#b522ff;--blue:#19a7ff;--text:#f7f7fb;--muted:#a5aec2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#17113b 0,#070a16 36%,#03050c 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.top{height:78px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #111a2c;background:#050814;position:sticky;top:0;z-index:20}.brand{color:#fff;text-decoration:none;font-weight:900;font-size:27px;letter-spacing:-1px;white-space:nowrap}.brand:first-letter{color:var(--pink)}.brand span{color:#f6f7ff}.iconbtn{border:0;background:none;color:#fff;font-size:37px;line-height:1;padding:0;cursor:pointer}.langwrap{margin-left:auto;position:relative}.lang{background:#071427;border:1px solid #24558a;color:#fff;border-radius:24px;padding:11px 14px;font-size:16px;font-weight:700;cursor:pointer}.langmenu{display:none;position:absolute;right:0;top:52px;width:180px;background:#071427;border:1px solid #24558a;border-radius:14px;padding:7px;box-shadow:0 15px 50px #000}.langmenu.open{display:block}.langmenu button{display:block;width:100%;padding:11px;border:0;background:transparent;color:#fff;text-align:left;border-radius:9px}.langmenu button:hover{background:#122542}.drawer{position:fixed;left:-310px;top:0;bottom:0;width:290px;background:#061021;border-right:1px solid #204c7c;z-index:50;transition:.25s;padding:18px}.drawer.open{left:0}.drawerHead{display:flex;justify-content:space-between;font-size:18px;margin-bottom:25px}.drawerHead button{background:none;border:0;color:#fff;font-size:32px}.drawer nav a{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;padding:15px 12px;border-radius:12px;margin:5px 0}.drawer nav a:hover{background:#0c1b31}.shade{display:none;position:fixed;inset:0;background:#0009;z-index:40}.shade.open{display:block}main{max-width:1050px;margin:auto;padding:0 18px 50px}.hero{margin:16px 0 28px;min-height:345px;border:1px solid #55206b;border-radius:0 0 30px 30px;background-image:linear-gradient(90deg,rgba(5,8,20,.94) 0%,rgba(17,4,35,.72) 48%,rgba(18,0,32,.24) 100%),url('/assets/hero.svg');background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:35px 28px 24px;overflow:hidden}.eyebrow{color:var(--pink);font-weight:800;margin-bottom:7px}.hero h1{font-size:40px;line-height:1.05;max-width:620px;margin:0 0 12px}.hero p{color:#d6d4df;font-size:19px;margin:0 0 24px}.heroActions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.action{min-width:0;text-decoration:none;text-align:center;padding:13px 9px;border-radius:25px;font-weight:800;color:#fff;border:1px solid #4e2b67;white-space:nowrap}.action.pink{background:linear-gradient(90deg,#ff129c,#9c1cff)}.action.blue{background:linear-gradient(90deg,#0879dc,#16a6ef);border-color:#238dd4}.action.outline{background:#180d2c}.section{margin:28px 0}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.sectionHead h2{font-size:29px;margin:0;font-weight:900}.sectionHead h2:before{content:"";display:inline-block;width:6px;height:32px;border-radius:8px;background:linear-gradient(#ff19bc,#7e20ff);vertical-align:-5px;margin-right:10px}.sectionHead a{color:#ff36c4;text-decoration:none;font-weight:800;white-space:nowrap}.folderGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.folder{display:block;text-decoration:none;color:#fff;background:linear-gradient(145deg,#071a31,#061124);border:1px solid #174b7b;border-radius:22px;padding:17px;min-height:145px;box-shadow:inset 0 0 30px #09213b55}.folderIcon{font-size:43px}.folderName{font-size:20px;font-weight:900;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.folderCount{color:#9eabc0;margin-top:7px}.empty{display:none;color:#8f9aae;padding:10px 3px}.trendList{display:grid;gap:10px}.trend{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:15px 18px;background:#07162a;border:1px solid #174b7b;border-radius:18px}.rank{font-size:31px;font-weight:900;color:#ff21b8}.trendTitle{font-weight:900}.trendMeta{color:#98a6bc;font-size:14px;margin-top:3px}.trendPlays{color:#ff8de3;font-weight:800}footer{border-top:1px solid #142238;color:#8995a8;padding:25px 18px;text-align:center}footer a{color:#3db5ff;margin-left:15px} @media(max-width:600px){.top{height:74px;padding:0 13px;gap:8px}.iconbtn{font-size:36px}.brand{font-size:24px}.lang{padding:10px 11px;font-size:14px}.hero{min-height:310px;margin:0 -18px 25px;border-radius:0 0 28px 28px;padding:25px 18px 18px;background-position:62% center}.hero h1{font-size:29px;max-width:330px}.hero p{font-size:15px;max-width:310px}.heroActions{gap:7px}.action{font-size:13px;padding:11px 5px;border-radius:22px}.action span{display:inline}.sectionHead h2{font-size:24px}.sectionHead h2:before{height:27px}.sectionHead a{font-size:14px}.folderGrid{gap:10px}.folder{padding:13px;min-height:150px;border-radius:20px}.folderIcon{font-size:39px}.folderName{font-size:16px}.folderCount{font-size:14px}.trend{grid-template-columns:38px 1fr auto;padding:13px}.rank{font-size:27px}.trendPlays{font-size:13px}main{padding:0 18px 50px}}
@media(max-width:390px){.brand{font-size:21px}.lang span{display:none}.heroActions{gap:5px}.action{font-size:11.5px}.folder{min-height:140px}.folderIcon{font-size:34px}}
/* UI refinement: compact header/hero, single-line headings, working language menu */
*,*::before,*::after{text-decoration:none!important}
.langmenu{z-index:80;min-width:190px;padding:6px;overflow:hidden}
.langmenu button{font-size:14px;cursor:pointer}
.langEmpty{padding:12px;color:var(--muted);font-size:13px}
.pageSection{max-width:900px;margin:0 auto;padding-top:8px}
.pageIntro{padding:14px 0 18px}
.pageIntro .eyebrow{color:var(--pink);font-weight:900;font-size:13px;letter-spacing:.2px;white-space:nowrap}
.pageIntro h1{font-size:32px;line-height:1.05;margin:5px 0 8px;white-space:nowrap}
.pageIntro p{color:var(--muted);margin:0;font-size:14px}
@media(max-width:600px){
  .top{height:74px}
  .hero{min-height:300px!important;margin:0 -18px 24px!important;padding:14px 18px 16px!important;justify-content:space-between!important;background-position:62% center!important}
  .heroText{min-width:0;padding-top:0}
  .eyebrow{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:clip;margin-bottom:7px!important}
  .hero h1{font-size:19px!important;line-height:1.1!important;max-width:none!important;white-space:nowrap!important;letter-spacing:-.55px!important;margin:0 0 7px!important}
  .hero p{font-size:13.5px!important;line-height:1.2!important;max-width:none!important;margin:0!important;white-space:nowrap!important;letter-spacing:-.2px}
  .heroActions{width:100%;gap:6px!important}
  .heroActions .action{font-size:12px!important;padding:10px 4px!important}
  .section{margin:24px 0!important}
  .sectionHead{gap:7px!important;align-items:center!important}
  .sectionHead h2{font-size:20px!important;line-height:1!important;white-space:nowrap!important;flex:1;min-width:0;letter-spacing:-.45px}
  .sectionHead h2:before{width:5px;height:25px;margin-right:8px!important;vertical-align:-7px!important}
  .sectionHead a{font-size:12.5px!important;flex:0 0 auto}
  .folderGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .folder{min-height:132px!important;padding:10px!important;border-radius:16px!important}
  .folderIcon{font-size:32px!important}.folderName{font-size:14px!important}.folderCount{font-size:12px!important}
  .pageIntro h1{font-size:24px;white-space:nowrap}.pageIntro p{font-size:13px;line-height:1.35}
}
@media(max-width:390px){
  .brand{font-size:21px!important}.lang{font-size:13px!important;padding:9px 9px!important}
  .hero h1{font-size:17.5px!important;letter-spacing:-.65px!important}
  .hero p{font-size:12.5px!important}
  .heroActions .action{font-size:11px!important}
  .sectionHead h2{font-size:18px!important}.sectionHead a{font-size:11.5px!important}
}

.folderActions{display:flex;gap:7px;align-items:center}.heart{border:1px solid #254c79;background:#07172b;color:#fff;border-radius:10px;padding:9px 10px;font-size:17px;cursor:pointer;transition:.15s}.heart.active{color:#ff3aa8;border-color:#ff3aa8;background:rgba(255,32,152,.12)}.pages{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}.pages .action{min-width:42px}.trend .action{flex:0 0 auto}

/* Telegram + menu icon refinement */
.tgIcon{display:inline-flex;width:20px;height:20px;vertical-align:-5px;flex:0 0 20px}.tgIcon svg{width:100%;height:100%;display:block}.action .tgIcon{width:20px;height:20px;vertical-align:-6px;margin-right:2px}.drawer nav a{font-weight:800;border:1px solid transparent}.drawer nav a:hover{border-color:#244d7d}.menuIcon{width:28px;min-width:28px;height:28px;display:inline-grid;place-items:center;font-size:19px;line-height:1}.drawer nav a .tgIcon{width:27px;height:27px;vertical-align:middle;flex:0 0 27px}.drawer nav a span:last-child{line-height:1.1}footer .tgIcon{width:18px;height:18px;vertical-align:-5px}

/* V7 fixes: 16:9 hero, compact action buttons, stronger mobile language menu */
.hero{aspect-ratio:16/9;min-height:0;height:auto;max-height:none;border-radius:0 0 30px 30px;padding:30px 28px 22px;}
.heroActions{gap:8px;}
.heroActions .action{font-size:13px;padding:9px 7px;border-radius:18px;min-height:38px;display:flex;align-items:center;justify-content:center;gap:4px;}
.langmenu{top:calc(100% + 8px);z-index:9999;box-shadow:0 18px 55px rgba(0,0,0,.65);}
.langmenu button{min-height:42px;font-size:14px;text-align:left;}
@media(max-width:600px){
 .hero{aspect-ratio:16/9!important;min-height:0!important;height:auto!important;padding:16px 16px 13px!important;margin:0 -18px 22px!important;border-radius:0 0 22px 22px!important;}
 .heroActions{gap:5px!important;}
 .heroActions .action{font-size:10.5px!important;padding:7px 3px!important;min-height:32px!important;border-radius:15px!important;}
 .action .tgIcon{width:16px;height:16px;margin-right:0;vertical-align:-4px;}
 .hero h1{font-size:18px!important;margin-bottom:5px!important;}
 .hero p{font-size:12.5px!important;}
}
@media(max-width:390px){
 .heroActions .action{font-size:9.5px!important;min-height:30px!important;padding:6px 2px!important;}
 .action .tgIcon{width:15px;height:15px;}
}
/* Admin mobile browser-back support */
.adminBack{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid #234d7d;background:#07172c;color:#fff;border-radius:12px;font-size:20px;cursor:pointer;}
@media(min-width:901px){.adminBack{display:none}}

.adminVideoPreview{margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;background:#050812}.adminVideoPreview .previewLabel{padding:9px 12px;font-size:12px;color:#aab6c8}.adminVideoPreview iframe{display:block;width:100%;min-height:260px;border:0;background:#000}.videoRowUrl{flex:1;min-width:0}.videoRowUrl b{display:block;margin-bottom:7px}
.pendingLinks{margin-top:10px;display:grid;gap:6px}.pendingLinkRow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border:1px solid #183b60;background:#071a30;border-radius:10px;font-size:11px}.pendingLinkRow div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Requested polish: show complete folder names and remove underlines. */
*,*::before,*::after{ text-decoration:none!important; }
.folderName{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:normal;line-height:1.3;hyphens:auto;}
.folder{height:auto;min-width:0;}
.collectionTools{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--muted);font-weight:700;flex-wrap:wrap;}
.collectionTools select{background:#071427;color:#fff;border:1px solid #24558a;border-radius:12px;padding:10px 13px;font:inherit;max-width:100%;}

/* Trending rank badge shared by home preview and full Trending page */
.trendInfo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;white-space:nowrap}
.trendInfo .trendTitle{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trendMetaLine{display:flex;align-items:center;gap:7px;min-width:0;margin:0;white-space:nowrap;overflow:hidden}
.trendMetaFolder{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trendMetaFolder:after{content:" ·";display:inline;color:#98a6bc}
.trendRankBadge{display:inline-flex;position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;align-items:center;gap:5px;padding:4px 10px;border:1px solid #f4c14f;border-radius:999px;background:linear-gradient(135deg,#ffe7a3 0%,#f5bd42 55%,#d99a20 100%);color:#33220a;font-size:12px;font-weight:800;line-height:1.35;white-space:nowrap;vertical-align:middle;box-shadow:0 0 0 1px rgba(255,224,143,.12),0 0 10px rgba(245,189,66,.22);animation:rankGoldGlow 3s ease-in-out infinite}
.trendRankBadge:after{content:"";position:absolute;z-index:0;top:-35%;bottom:-35%;left:0;width:34%;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 80%,transparent 100%);transform:translateX(-180%) skewX(-18deg);animation:rankGoldShine 4.2s ease-in-out infinite}
.trendRankBadge>*{position:relative;z-index:1}
@keyframes rankGoldShine{0%,55%{transform:translateX(-180%) skewX(-18deg)}85%,100%{transform:translateX(430%) skewX(-18deg)}}
@keyframes rankGoldGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,224,143,.12),0 0 8px rgba(245,189,66,.18)}50%{box-shadow:0 0 0 1px rgba(255,224,143,.28),0 0 13px rgba(245,189,66,.38)}}
@media(prefers-reduced-motion:reduce){.trendRankBadge,.trendRankBadge:after{animation:none}}
@media(max-width:600px){.trendInfo{min-width:0}.trendMetaLine{gap:5px}.trendRankBadge{font-size:10px;padding:3px 7px}.trendMetaFolder{max-width:42vw}}

/* v32: Trending favorite is an icon only; keep the heart without a box. */
.trend .folderActions .heart{border:0!important;background:transparent!important;border-radius:0!important;padding:0!important;min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;box-shadow:none!important;font-size:25px;line-height:1;color:#fff}
.trend .folderActions .heart.active{border:0!important;background:transparent!important;color:#ff3aa8;box-shadow:none!important}
.trend .folderActions .heart:focus-visible{outline:2px solid #ff3aa8;outline-offset:3px;border-radius:6px!important}

/* v35: use the badge as the only rank indicator; keep it clear of action buttons. */
.trend{grid-template-columns:minmax(0,1fr) auto!important;min-width:0}
.trendInfo{min-width:0;width:100%}
.trendMetaLine{flex-wrap:wrap;white-space:normal;overflow:visible;row-gap:4px}
.trendMetaFolder{max-width:100%;min-width:0}
.trend .folderActions{flex:0 0 auto;min-width:max-content;align-self:center}
@media(max-width:600px){.trend{grid-template-columns:minmax(0,1fr) auto!important;gap:8px;padding:13px 12px}.trendMetaLine{gap:5px}.trendRankBadge{font-size:10px;padding:3px 7px}.trend .folderActions{gap:5px}.trend .folderActions .action{padding:10px 8px;font-size:12px}}