/* roulang page: index */
:root{--bg:#07070c;--bg2:#0f0f17;--card:#181824;--raise:#1f1f2e;--primary:#8b5cf6;--pink:#ec4899;--teal:#2dd4bf;--warn:#fbbf24;--text:#f4f4f7;--sub:#b5b5c1;--muted:#767685;--line:rgba(255,255,255,.08);--grad:linear-gradient(135deg,#8b5cf6,#ec4899);--font-display:"Barlow Condensed","DIN Alternate","Roboto Condensed","PingFang SC",sans-serif;--font-cn:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;}
*{box-sizing:border-box;margin:0;padding:0;}body{background:var(--bg);color:var(--text);font-family:var(--font-cn);font-size:16px;line-height:1.75;overflow-x:hidden;}a{color:inherit;text-decoration:none;}img{max-width:100%;display:block;}button,input,select{font-family:inherit;font-size:inherit;}::selection{background:rgba(139,92,246,.35);}::-webkit-scrollbar{width:8px;height:6px;}::-webkit-scrollbar-track{background:#0b0b12;}::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:10px;}::-webkit-scrollbar-thumb:hover{background:#8b5cf6;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}.section{padding:90px 0;}
.site-header{position:sticky;top:0;z-index:100;background:rgba(7,7,12,.78);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);}.nav-row{display:flex;align-items:center;gap:20px;height:72px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:9px;}.logo .logo-text{font-size:24px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}.logo .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:pulse-dot 2.6s infinite;}@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.main-nav{display:flex;align-items:center;gap:6px;margin:0 auto;overflow-x:auto;scrollbar-width:none;}@media(max-width:1024px){.main-nav{order:3;flex-basis:100%;margin:0 -24px;padding:0 24px;height:52px;}.nav-row{height:auto;padding:12px 0;}}@media(max-width:640px){.nav-cta{display:none;}}
.nav-chip{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--sub);border:1px solid var(--line);background:rgba(255,255,255,.02);margin:0 3px;transition:all .22s;}.nav-chip:hover{color:#fff;border-color:rgba(139,92,246,.4);}.nav-chip.active{background:var(--raise);color:#fff;border-color:rgba(139,92,246,.55);box-shadow:0 0 14px rgba(139,92,246,.12);}
.nav-cta{display:inline-flex;background:var(--grad);color:#fff;font-weight:600;font-size:14px;padding:10px 24px;border-radius:999px;white-space:nowrap;transition:all .22s;}.nav-cta:hover{box-shadow:0 6px 24px rgba(139,92,246,.4);transform:translateY(-2px);}
.cat-hero-section{position:relative;overflow:hidden;background:linear-gradient(105deg,transparent 30%,rgba(7,7,12,.3) 60%),url('/assets/images/backpic/back-2.jpg') center/cover;padding:64px 0;border-bottom:1px solid var(--line);min-height:300px;display:flex;align-items:center;}
.cat-hero-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 88% 10%,rgba(236,72,153,.11),transparent 40%),radial-gradient(ellipse at 6% 100%,rgba(139,92,246,.13),transparent 45%);}
.cat-hero-inner{position:relative;z-index:2;}.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:20px;}.breadcrumbs a{color:var(--sub);}.breadcrumbs a:hover{color:var(--primary);}.cat-hero-inner h1{font-size:clamp(38px,4.5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px;max-width:720px;}.cat-hero-inner p{color:var(--sub);font-size:16px;max-width:680px;margin-bottom:26px;}
.stat-pills{display:flex;flex-wrap:wrap;gap:12px;}.stat-pill{padding:9px 18px;background:rgba(15,15,23,.75);border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--sub);backdrop-filter:blur(6px);}.stat-pill b{color:#fff;font-weight:700;}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:40px 0 28px;padding:16px 18px;background:rgba(15,15,23,.75);border:1px solid var(--line);border-radius:14px;}
.chip-group{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}.chip-group::-webkit-scrollbar{display:none;}
.sort-group{display:flex;gap:6px;align-items:center;}.sort-btn{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sub);padding:8px 16px;border-radius:999px;font-size:13px;cursor:pointer;transition:all .22s;white-space:nowrap;}.sort-btn:hover,.sort-btn.active{color:#fff;border-color:var(--primary);background:rgba(139,92,246,.12);}
.content-list{display:flex;flex-direction:column;gap:16px;} 
.list-item{display:grid;grid-template-columns:240px 1fr auto;gap:18px;align-items:center;background:rgba(15,15,23,.45);border:1px solid var(--line);border-radius:14px;padding:12px;transition:all .25s ease;position:relative;}
.list-item:hover{background:rgba(23,23,31,.9);border-left:3px solid var(--primary);box-shadow:0 10px 36px rgba(0,0,0,.38);transform:translateX(4px);}
.list-thumb{width:240px;height:150px;border-radius:9px;overflow:hidden;background:#1a1a24;position:relative;flex-shrink:0;}
.list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}.list-item:hover .list-thumb img{transform:scale(1.04);}
.list-info{padding:4px 0;display:flex;flex-direction:column;gap:6px;}.list-info h3{font-size:20px;font-weight:700;line-height:1.3;}.list-info h3 a:hover{color:var(--primary);}
.list-info .brief{font-size:14px;color:var(--sub);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;}.tag-row span{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--sub);font-size:12px;padding:3px 10px;border-radius:999px;}
.list-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);}
.list-meta i{font-style:normal;color:var(--pink);font-weight:600;}
.list-action{padding-right:10px;}.play-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.12);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;transition:all .25s;cursor:pointer;margin-right:8px;}.play-btn:hover{background:var(--grad);border-color:transparent;box-shadow:0 0 24px var(--glow, rgba(139,92,246,.4));}
@media(max-width:768px){.list-item{grid-template-columns:100px 1fr;gap:10px;padding:10px;}.list-thumb{width:100px;height:88px;}.list-info h3{font-size:16px;}.list-action{display:none;}.list-info .brief{display:none;}.list-meta{flex-direction:column;gap:2px;font-size:11px;}}
@media(max-width:420px){.cat-hero-inner h1{font-size:32px;}.list-meta span.hide-mobile{display:none;}}
.related-section{margin-top:64px;padding-top:40px;border-top:1px solid var(--line);}
.related-title{font-size:20px;font-weight:700;margin-bottom:18px;}
.related-chips{display:flex;flex-wrap:wrap;gap:10px;}.related-chip{padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sub);font-size:14px;transition:all .2s;}.related-chip:hover{color:#fff;border-color:var(--primary);background:rgba(139,92,246,.12);}
.all-loaded-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:40px 0 0;font-size:13px;color:var(--warn);background:rgba(251,191,36,.05);border:1px solid rgba(251,191,36,.15);padding:14px;border-radius:12px;}
.site-footer{background:#0d0d15;margin-top:60px;position:relative;}.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),rgba(236,72,153,.5),transparent);}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:40px;padding:64px 0 44px;}@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;padding:50px 0 36px;}}@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:28px;}}
.footer-brand .logo{font-size:24px;margin-bottom:12px;}.footer-desc{color:var(--sub);font-size:14px;line-height:1.75;max-width:300px;margin-bottom:18px;}
.footer-social{display:flex;gap:8px;}.footer-social a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--sub);transition:all .2s;}.footer-social a:hover{color:#fff;border-color:var(--primary);background:rgba(139,92,246,.15);}
.footer-col h4{font-size:15px;font-weight:600;color:#fff;margin-bottom:14px;}.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}.footer-col ul li{font-size:14px;color:var(--muted);}.footer-col ul li a:hover{color:var(--primary);padding-left:2px;transition:all .2s;}
.footer-copy{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);}.footer-copy .links a{margin-left:16px;color:var(--muted);}.footer-copy .links a:hover{color:var(--primary);}
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;}.fade-in.visible{opacity:1;transform:none;}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}.fade-in{opacity:1;transform:none;}}

/* roulang page: category1 */
:root{--bg:#07070c;--bg2:#0f0f17;--card:#181824;--raise:#1f1f2e;--primary:#8b5cf6;--pink:#ec4899;--teal:#2dd4bf;--warn:#fbbf24;--text:#f4f4f7;--sub:#b5b5c1;--muted:#767685;--line:rgba(255,255,255,.08);--grad:linear-gradient(135deg,#8b5cf6,#ec4899);--font-display:"Barlow Condensed","DIN Alternate","Roboto Condensed","PingFang SC",sans-serif;--font-cn:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-cn);font-size:16px;line-height:1.75;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font-family:inherit;font-size:inherit}
::selection{background:rgba(139,92,246,.45);color:#fff}
::-webkit-scrollbar{width:7px;height:6px}
::-webkit-scrollbar-track{background:#0a0a12}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:99px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:70px 0}

/*滚动进入动画,仅在支持时*/
.fade-up{opacity:1}
@media (prefers-reduced-motion: reduce){
*{transition:none!important;animation:none!important}
}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(7,7,12,.78);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;gap:20px;height:72px;flex-wrap:normal;justify-content:flex-start}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo .logo-text{font-size:24px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.logo .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:pulse-dot 2.6s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.main-nav{display:flex;align-items:center;gap:6px;margin:0 auto;overflow-x:auto;scrollbar-width:none;flex:1;justify-content:center}
.main-nav::-webkit-scrollbar{display:none}
.nav-chip{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--sub);border:1px solid var(--line);background:rgba(255,255,255,.02);margin:0 3px;transition:all .22s}
.nav-chip:hover{color:#fff;border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.08)}
.nav-chip.active{background:var(--raise);color:#fff;border-color:rgba(139,92,246,.55);box-shadow:0 0 14px rgba(139,92,246,.12)}
.nav-cta{background:var(--grad);color:#fff;font-weight:600;font-size:14px;padding:10px 24px;border-radius:999px;white-space:nowrap;transition:all .22s;display:inline-flex}
.nav-cta:hover{box-shadow:0 6px 24px rgba(139,92,246,.4);transform:translateY(-2px)}

/*footer*/
.site-footer{background:#0d0d15;border-top:1px solid var(--line);margin-top:60px}
.site-footer .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:40px;padding:56px 0 40px}
.site-footer .footer-brand .logo{margin-bottom:14px}
.footer-desc{color:var(--muted);font-size:14px;line-height:1.7;margin:10px 0 16px;max-width:270px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:16px;transition:all .22s}
.footer-social a:hover{color:#fff;border-color:var(--primary);transform:translateY(-3px);background:rgba(139,92,246,.12)}
.footer-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;letter-spacing:.5px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px}
.footer-col a{color:var(--sub);font-size:13px;font-size:14px;transition:all .2s}
.footer-col a:hover{color:var(--primary);padding-left:4px}
.footer-copy{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:8px}
.footer-copy .links a{margin-left:16px;color:var(--muted);transition:color .2s}
.footer-copy .links a:hover{color:var(--pink)}

/*分类hero*/
.cat-hero-section{position:relative;padding:60px 0;background:linear-gradient(110deg,transparent 40%,rgba(7,7,12,.55)),url('/assets/images/backpic/back-2.jpg') center/cover;border-bottom:1px solid var(--line);margin-top:0}
.cat-hero-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% 10%,rgba(139,92,246,.18),transparent 45%),radial-gradient(ellipse at 8% 90%,rgba(236,72,153,.1),transparent 40%)}
.cat-hero-inner{position:relative;z-index:2}
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.breadcrumbs a{color:var(--sub)}
.breadcrumbs a:hover{color:var(--primary)}
.cat-hero-inner h1{font-size:clamp(36px,5vw,54px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px;max-width:800px}
.cat-hero-inner h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cat-hero-inner p{color:var(--sub);font-size:16px;max-width:700px;margin-bottom:24px;line-height:1.8}
.stat-pills{display:flex;flex-wrap:wrap;gap:10px}

/*toolbar*/
.list-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:36px 0 24px;padding:14px 16px;background:rgba(15,15,23,.8);border:1px solid var(--line);border-radius:14px}
.chip-group{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chip-group::-webkit-scrollbar{display:none}
.tool-chip{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sub);padding:7px 15px;border-radius:999px;font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap}
.tool-chip:hover{color:#fff;border-color:rgba(139,92,246,.5)}
.tool-chip.active{background:var(--raise);color:#fff;border-color:var(--primary)}
.sort-actions{display:flex;gap:8px;align-items:center}
.sort-btn{border:1px solid var(--line);background:transparent;color:var(--sub);padding:7px 14px;border-radius:999px;font-size:12px;cursor:pointer;transition:.2s;white-space:nowrap}
.sort-btn:hover,.sort-btn.active{color:#fff;border-color:var(--primary);background:rgba(139,92,246,.12)}

/*list*/
.content-list{display:flex;flex-direction:column;gap:16px}
.list-item{display:flex;gap:18px;background:rgba(15,15,23,.55);border:1px solid var(--line);border-radius:14px;padding:12px;align-items:center;transition:all .25s;position:relative}
.list-item:hover{background:rgba(24,24,36,.92);border-color:rgba(139,92,246,.35);box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateX(3px)}
.list-item::before{content:"";width:3px;height:0;border-radius:4px;background:var(--grad);position:absolute;left:-1px;top:50%;transform:translateY(-50%);transition:height .3s}
.list-item:hover::before{height:70%}
.list-thumb{width:240px;height:150px;border-radius:10px;overflow:hidden;background:#1a1a24;position:relative;flex-shrink:0}
.list-thumb img{width:100%;height:100%;object-fit:cover}
.thumb-badge{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);font-size:11px;padding:2px 10px;border-radius:999px;color:#fff;border:1px solid rgba(255,255,255,.15)}
.list-info{flex:1;display:flex;flex-direction:column;gap:6px}
.list-info h3{font-size:18px;font-weight:700;line-height:1.3}
.list-info h3 a:hover{color:var(--primary)}
.brief{font-size:13px;color:var(--sub);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}
.tag-row span{background:rgba(255,255,255,.06);color:var(--sub);font-size:11px;padding:2px 10px;border-radius:999px}
.tag-row span:first-child{background:rgba(139,92,246,.15);color:#c4b5fd;border:1px solid rgba(139,92,246,.25)}
.list-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted)}
.list-meta i{font-style:normal;color:var(--pink);font-weight:600}
.hot-val{color:#fbbf24!important;font-weight:700}
.list-action{display:flex;align-items:center;gap:6px;flex-direction:column}
.play-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(139,92,246,.4);background:rgba(139,92,246,.1);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.25s;cursor:pointer}
.play-btn:hover{background:var(--grad);box-shadow:0 0 18px rgba(139,92,246,.4);border-color:rgba(139,92,246,.3)}
.action-fav{font-size:11px;color:var(--muted);background:none;border:none;cursor:pointer;transition:.2s}
.action-fav:hover{color:#ec4899}

/*sec-block components*/
.lead-wrap{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sec-cap{display:inline-block;padding:3px 14px;border-radius:999px;background:rgba(139,92,246,.12);color:var(--primary);font-size:12px;font-weight:600;letter-spacing:.4px}
.sec-title{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.2;margin-bottom:12px;color:#fff}
.sec-sub{color:var(--sub);font-size:15px;max-width:560px;line-height:1.75;margin-bottom:32px}

/* feature highlight bands + promo added */
.promo-strip{background:rgba(15,15,23,.6);border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:6px;padding:20px 28px;margin:34px 0;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.promo-strip .lead-txt{font-size:16px;font-weight:600;color:#fff;line-height:1.5;flex:1;min-width:260px}
.promo-strip .lead-txt small{color:var(--sub);font-weight:400;display:block;font-size:13px}

/* quick cards */
.quick-collection{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.quick-card{background:linear-gradient(145deg,rgba(24,24,36,.8),rgba(15,15,23,.9));border:1px solid var(--line);padding:18px 20px;border-radius:14px;transition:.25s;position:relative;overflow:hidden}
.quick-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad);opacity:0;transition:.25s}
.quick-card:hover::before{opacity:1}
.quick-card h3{font-size:16px;font-weight:700;margin-bottom:6px}
.quick-card span{color:var(--sub);font-size:13px}

/*editor-pick*/
.editor-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.edit-one{background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.3s}
.edit-one:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.4);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.edit-cover{height:140px;overflow:hidden}
.edit-cover img{width:100%;height:100%;object-fit:cover;transition:.6s}
.edit-one:hover .edit-cover img{transform:scale(1.06)}
.edit-body{padding:18px 20px 22px}
.edit-body h3{font-size:17px;font-weight:700;margin-bottom:6px}
.edit-body p{font-size:13px;color:var(--sub);line-height:1.6;margin-bottom:12px}
.rank-num{display:inline-block;font-family:var(--font-display);font-size:28px;font-style:italic;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px;line-height:1}

/* tabs live block */
.viewed-tabs .covers-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.viewed-tabs .grid-item{position:relative;aspect-ratio:1/1.2;border-radius:10px;overflow:hidden;cursor:pointer}
.viewed-tabs .grid-item img{width:100%;height:100%;object-fit:cover}
.grid-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,12,.8),transparent 45%)}
.grid-item .g-label{position:absolute;bottom:4px;left:6px;z-index:2;color:#eee;font-size:12px;font-weight:500;background:none}
.grid-item:hover img{transform:scale(1.05)}
.grid-item img{transition:.3s}

/*rule tabs accordion block used under contrast? not needed main*/
/*tips*/
.tip-banner{margin-top:30px;background:rgba(15,15,23,.7);border:1px dashed rgba(139,92,246,.3);padding:18px 24px;border-radius:10px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.tip-banner strong{color:#fff}
.tip-banner p{color:var(--sub);font-size:14px}
.tip-banner .arrow{font-size:22px;color:var(--primary);font-weight:800}

/*faq*/
.faq-grid{display:grid;grid-template-columns:340px 1fr;gap:44px}
details.faq-item{background:rgba(15,15,23,.4);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;transition:.25s}
details.faq-item[open]{background:rgba(16,16,24,.9);border-color:rgba(139,92,246,.28)}
.faq-item summary{list-style:none;padding:16px 20px;display:flex;align-items:center;gap:14px;cursor:pointer;font-weight:600;font-size:15px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .arr{margin-left:auto;font-family:monospace;display:inline-block;color:#ec4899;transition:.25s}
.faq-item[open] .arr{transform:rotate(180deg)}
.faq-body{padding:0 20px 16px;color:var(--sub);font-size:14px;line-height:1.8}

/*cta section*/
.cta-block{background:linear-gradient(135deg,#11101c,#1a1028 60%,#160d1e);border:1px solid rgba(139,92,246,.22);border-radius:24px;padding:54px 0;overflow:hidden;position:relative;margin:40px 0;padding-left:32px;padding-right:32px}
.cta-inner{max-width:660px;position:relative;z-index:2;margin:0 auto;text-align:center}
.cta-inner h2{font-size:clamp(30px,3.6vw,56px);font-weight:800;line-height:1.2;color:#fff;margin-bottom:16px}
.cta-inner p{color:var(--sub);font-size:15px;line-height:1.8;max-width:560px;margin:0 auto 28px}
.cta-btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.btn-grad{background:var(--grad);color:#fff!important;font-weight:600;display:inline-block;padding:13px 34px;border-radius:999px;transition:.25s;cursor:pointer;border:none;font-size:15px}
.btn-grad:hover{box-shadow:0 6px 28px rgba(139,92,246,.5);transform:translateY(-3px)}
.btn-ghost-back{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;padding:13px 28px;border-radius:999px;cursor:pointer;transition:.22s;font-size:14px;display:inline-flex;align-items:center}
.btn-ghost-back:hover{border-color:var(--primary);background:rgba(139,92,246,.1);color:#fff}

/*loading more placeholder*/
.note-end{font-size:13px;color:var(--muted);padding:14px 0;text-align:center}

/*related*/
.related-section{margin-top:20px;padding-top:38px;border-top:1px dashed var(--line)}
.related-title{font-size:20px;font-weight:700;margin-bottom:14px}
.related-chip{display:inline-block;margin:0 8px 8px 0;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:8px 18px;color:var(--sub);font-size:13px;transition:.2s}
.related-chip:hover{color:#fff;border-color:var(--primary);background:#1e1e2e;transform:translateY(-2px)}

/*responsive*/
@media (max-width:1024px){
.quick-collection,.editor-blocks{grid-template-columns:repeat(2,1fr)}
.viewed-tabs .covers-row{grid-template-columns:repeat(3,1fr)}
.faq-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
.main-nav{order:3;flex-basis:100%;width:100%;justify-content:flex-start;margin-top:0;padding-top:6px;padding-bottom:6px}
.nav-row{height:auto;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:768px){
.list-item{flex-direction:row;flex-wrap:nowrap}
.list-thumb{width:110px;height:95px}
.list-action{display:none}
.list-info h3{font-size:16px}
.brief{display:-webkit-box;-webkit-line-clamp:2;font-size:12px}
.list-meta{gap:6px;flex-wrap:wrap}
.list-meta span:last-child{display:none}
.stat-pills{gap:6px}
.cat-hero-inner h1{font-size:36px}
}
@media (max-width:620px){
.main-nav .nav-chip{padding:8px 14px;font-size:13px}
.quick-collection,.editor-blocks{grid-template-columns:1fr}
.viewed-tabs .covers-row{grid-template-columns:repeat(2,1fr)}
.footer-brand .footer-desc{margin-left:0}
.footer-copy{flex-direction:column;gap:4px;text-align:left}
.section{padding:50px 0}
.list-item{gap:10px;padding:9px}
.list-thumb{width:92px;height:80px}
.list-meta .hide-sm{display:none}
.nav-cta{padding-left:14px;padding-right:14px;font-size:13px}
.logo-text{font-size:21px}
}