/* roulang page: index */
*,*::before,*::after{box-sizing:border-box}
:root{
  --purple:#5B3DF5;
  --mint:#1FC8B3;
  --orange:#FF7A4D;
  --bg:#F7F4FF;
  --dark:#171226;
  --card:#FFFFFF;
  --text:#231B33;
  --muted:#6E6484;
  --line:#E6DFF5;
  --soft:#F1ECFF;
  --radius:16px;
  --shadow:0 8px 24px rgba(60,40,100,.08);
}
body{
  margin:0;padding-bottom:80px;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.75;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;line-height:1.3}
p{margin:0}
button,input{font:inherit}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:.95rem;cursor:pointer;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;
}
.btn-primary{background:var(--orange);color:#20140f}
.btn-primary:hover{background:#ff6432;transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--purple)}
.btn-ghost:hover{border-color:var(--purple);transform:translateY(-1px)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:#4a2ee0;transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(31,200,179,.75);outline-offset:2px}
.chip{
  display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:8px;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;background:var(--soft);color:var(--purple);
  font-variant-numeric:tabular-nums;
}
.chip-orange{background:#FFEDE5;color:#C4471C}
.chip-mint{background:#E3F8F5;color:#0E8E7E}

/* 顶部导航 */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(60,40,100,.05)}
.nav{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1rem;white-space:nowrap;flex:none}
.logo-mark{width:36px;height:36px;border-radius:10px;background:var(--purple);display:grid;place-items:center;color:#fff;flex:none}
.logo-mark svg{width:20px;height:20px}
.nav-links{display:flex;gap:4px;margin-left:6px}
.nav-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:.94rem;font-weight:600;color:var(--muted);transition:color .18s,background .18s}
.nav-links a:hover{color:var(--purple);background:var(--soft)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;gap:8px}
.search input{
  height:44px;width:190px;border-radius:12px;border:1px solid transparent;background:var(--soft);
  padding:0 14px;color:var(--text);transition:background .18s,border-color .18s;
}
.search input::placeholder{color:#9C93B8}
.search input:focus{background:#fff;border-color:var(--purple);box-shadow:0 0 0 3px rgba(31,200,179,.3);outline:none}
.search button{height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--purple);font-weight:700;cursor:pointer;transition:border-color .18s}
.search button:hover{border-color:var(--purple)}
.login{display:flex;align-items:center;min-height:44px;font-size:.94rem;font-weight:600;color:var(--muted)}
.login:hover{color:var(--purple)}
.nav-burger{display:none;width:44px;height:44px;place-items:center;border-radius:12px;background:var(--soft);color:var(--purple);cursor:pointer;margin-left:auto}
.nav-burger svg{width:22px;height:22px}
.nav-mobile{display:none;padding:8px 0 20px;border-top:1px solid var(--line)}
.nav-mobile a.nm-link{display:block;padding:12px 4px;font-weight:600;border-bottom:1px solid var(--line)}
.nav-mobile .search{margin-top:14px}
.nav-mobile .search input{flex:1;width:auto}
.nav-mobile .btn{width:100%;margin-top:12px}
#navToggle:checked ~ .nav-mobile{display:block}

/* 首屏 */
.hero{padding:44px 0 56px;background:
  radial-gradient(circle at 88% 12%,rgba(91,61,245,.10) 0 6px,transparent 7px),
  radial-gradient(circle at 74% 34%,rgba(31,200,179,.14) 0 4px,transparent 5px),
  radial-gradient(circle at 12% 76%,rgba(255,122,77,.14) 0 5px,transparent 6px),
  var(--bg);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.hero-main h1{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;letter-spacing:.01em;margin:16px 0 0}
.hero-main h1::after{content:"";display:block;width:74px;height:5px;border-radius:3px;background:var(--orange);margin-top:14px}
.hero-sub{font-size:1.1rem;font-weight:600;margin-top:18px}
.hero-desc{max-width:40em;color:var(--muted);margin-top:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-facts li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;display:flex;flex-direction:column;gap:2px;min-width:118px}
.hero-facts b{font-size:1.08rem;color:var(--purple);font-variant-numeric:tabular-nums}
.hero-facts span{font-size:.78rem;color:var(--muted)}
.countdown{display:flex;align-items:center;gap:14px;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;max-width:430px}
.countdown strong{display:block;font-size:.95rem}
.countdown div > span{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ring{width:54px;height:54px;border-radius:999px;flex:none;display:grid;place-items:center;background:conic-gradient(var(--mint) calc(var(--p) * 1%),#EDE7FF 0)}
.ring > span{width:42px;height:42px;border-radius:999px;background:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--purple);font-variant-numeric:tabular-nums}

/* 播放面板预览 */
.deck{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 14px 34px rgba(60,40,100,.12)}
.deck-top{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:10px}
.deck-top .chip{margin-left:auto}
.dot{width:8px;height:8px;border-radius:999px;background:var(--mint);flex:none;box-shadow:0 0 0 4px rgba(31,200,179,.16)}
.deck-cover{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#EDE7FF}
.deck-cover img{width:100%;height:100%;object-fit:cover}
.play{
  position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:999px;border:none;
  background:rgba(255,255,255,.94);color:var(--purple);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 20px rgba(23,18,38,.28);transition:transform .18s;
}
.play:hover{transform:scale(1.06)}
.play svg{width:26px;height:26px;margin-left:3px}
.deck-time{position:absolute;right:10px;bottom:10px;background:rgba(23,18,38,.8);color:#fff;font-size:.72rem;padding:2px 8px;border-radius:8px;font-variant-numeric:tabular-nums}
.deck-meta{display:flex;flex-direction:column;gap:2px;padding:12px 2px}
.deck-meta strong{font-size:1rem}
.deck-meta span{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.deck-next h3{font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:8px}
.deck-next li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.88rem}
.deck-next li > span{width:20px;height:20px;border-radius:6px;background:var(--soft);color:var(--purple);font-size:.7rem;font-weight:700;display:grid;place-items:center;flex:none}
.deck-next li i{margin-left:auto;font-style:normal;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}

/* 通用分区 */
.section{padding:64px 0}
.section-white{background:#fff}
.section-dark{background:var(--dark);color:#EDE7FF}
.sec-head{max-width:46em;margin-bottom:30px}
.sec-head h2{font-size:1.7rem;font-weight:700}
.sec-head p{margin-top:.6em;color:var(--muted)}
.section-dark .sec-head p{color:#B7AEE0}

/* 卖点三连 */
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pt-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s,border-color .18s}
.pt-card:hover{transform:translateY(-3px);border-color:rgba(91,61,245,.3);box-shadow:0 14px 30px rgba(60,40,100,.14)}
.pt-card h3{font-size:1.15rem;font-weight:700}
.pt-card p{font-size:.92rem;color:var(--muted)}
.icon-box{width:40px;height:40px;border-radius:10px;background:var(--soft);color:var(--purple);display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:none}

/* MV 卡片 */
.mv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.mv-card:hover{transform:translateY(-3px);border-color:rgba(91,61,245,.34);box-shadow:0 14px 30px rgba(60,40,100,.14)}
.mv-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#EDE7FF}
.mv-thumb img{width:100%;height:100%;object-fit:cover}
.mv-badge{position:absolute;top:10px;left:10px;background:var(--orange);color:#20140f;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:8px}
.mv-time{position:absolute;right:10px;bottom:10px;background:rgba(23,18,38,.8);color:#fff;font-size:.72rem;padding:2px 8px;border-radius:8px;font-variant-numeric:tabular-nums}
.mv-body{padding:14px}
.mv-title{font-size:.98rem;font-weight:700;line-height:1.45}
.mv-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.mv-date{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* 分类频道 */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-item{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:var(--shadow)}
.cat-item:hover{transform:translateY(-2px);border-color:rgba(91,61,245,.34);box-shadow:0 12px 26px rgba(60,40,100,.14)}
.cat-no{width:36px;height:36px;border-radius:10px;background:var(--soft);color:var(--purple);font-weight:800;font-size:.86rem;display:grid;place-items:center;flex:none}
.cat-item h3{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.cat-item p{font-size:.88rem;color:var(--muted);margin-bottom:10px}

/* 场景演示 */
.scene-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.device-tabs{display:flex;gap:8px;margin-bottom:14px}
.device-tabs span{padding:6px 14px;border-radius:999px;font-size:.8rem;border:1px solid rgba(255,255,255,.22);color:#B7AEE0}
.device-tabs .on{background:var(--mint);color:#08221f;border-color:transparent;font-weight:700}
.device{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#221B33}
.device img{width:100%;aspect-ratio:16/10;object-fit:cover}
.scene-copy h2{font-size:1.7rem;font-weight:700}
.scene-copy > p{margin-top:.6em;color:#B7AEE0}
.feat-list{margin-top:18px}
.feat-list li{display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.feat-list li:last-child{border-bottom:none}
.feat-list b{font-size:.94rem;color:#fff;min-width:82px;flex:none}
.feat-list span{font-size:.9rem;color:#B7AEE0}

/* 播放榜 */
.rank-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.rank-row{display:flex;align-items:center;gap:14px;padding:13px 8px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .18s}
.rank-row:hover{background:#FAF7FF}
.rank-no{width:32px;flex:none;font-size:1.2rem;font-weight:800;color:var(--purple);font-variant-numeric:tabular-nums}
.rank-title{flex:1;font-weight:600;font-size:.95rem}
.rank-plays{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rank-tag{font-size:.75rem;font-weight:600;color:#0E8E7E;background:#E3F8F5;padding:2px 8px;border-radius:8px;flex:none}

/* 社会认同 */
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.proof-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow)}
.proof-stat b{display:block;font-size:1.7rem;font-weight:800;color:var(--purple);font-variant-numeric:tabular-nums}
.proof-stat span{font-size:.82rem;color:var(--muted)}
.proof-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.proof-card p{font-size:.9rem;color:var(--text)}
.proof-card footer{margin-top:10px;font-size:.78rem;color:var(--muted);font-weight:600}

/* 对比表 */
.cmp-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.cmp{width:100%;min-width:600px;border-collapse:collapse;background:#fff}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
.cmp thead th{background:var(--soft);color:var(--purple);font-size:.9rem;font-weight:700}
.cmp tbody th{font-weight:600;color:var(--text);width:26%}
.cmp tbody td{color:var(--muted)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody td:last-child{color:var(--text);font-weight:600}

/* MV 资讯 */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.news-item{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);transition:transform .18s,border-color .18s}
.news-item:hover{transform:translateY(-2px);border-color:rgba(91,61,245,.32)}
.news-thumb{width:134px;flex:none;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#EDE7FF}
.news-thumb img{width:100%;height:100%;object-fit:cover}
.news-body h3{font-size:.95rem;font-weight:700;line-height:1.5}
.news-body time{display:block;margin-top:8px;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* 歌手专题 */
.artist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.artist-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:transform .18s,border-color .18s}
.artist-card:hover{transform:translateY(-2px);border-color:rgba(91,61,245,.32)}
.artist-avatar{width:56px;height:56px;border-radius:999px;overflow:hidden;flex:none;background:#EDE7FF}
.artist-avatar img{width:100%;height:100%;object-fit:cover}
.artist-card h3{font-size:1rem;font-weight:700}
.artist-card .cnt{font-size:.78rem;color:var(--muted);display:block;margin-bottom:6px}
.artist-tags{display:flex;flex-wrap:wrap;gap:6px}

/* FAQ */
.faq{max-width:860px}
.faq details{background:#fff;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--radius);padding:2px 18px;margin-bottom:12px;transition:border-color .18s}
.faq details[open]{border-left-color:var(--purple)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple);font-weight:700;font-size:1.1rem}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 16px;color:var(--muted);font-size:.94rem}

/* 保障条 */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:var(--soft);border-radius:var(--radius);padding:26px}
.assure li{display:flex;gap:10px;align-items:flex-start}
.assure b{display:block;font-size:.92rem}
.assure span{font-size:.8rem;color:var(--muted);line-height:1.6}

/* 底部固定条 */
.fixed-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--dark);color:#EDE7FF;height:64px;display:flex;align-items:center;box-shadow:0 -6px 20px rgba(23,18,38,.24)}
.fixed-bar .container{display:flex;align-items:center;gap:16px}
.fb-brand{font-weight:800;font-size:.95rem;color:#fff;white-space:nowrap}
.fb-tip{font-size:.82rem;color:#B7AEE0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-actions{margin-left:auto;display:flex;gap:10px;flex:none}
.fb-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#EDE7FF}
.fb-ghost:hover{border-color:var(--mint);color:var(--mint)}

/* 页脚 */
.site-footer{background:var(--dark);color:#CFC7EA;font-size:14px;line-height:1.8;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-grid h3{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px}
.foot-grid p{color:#A79ED0;font-size:14px}
.foot-grid a{display:block;padding:4px 0;color:#CFC7EA;transition:color .18s}
.foot-grid a:hover{color:var(--mint)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding:18px 0;color:#9A90C0;font-size:13px}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .mv-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid,.artist-grid{grid-template-columns:repeat(2,1fr)}
  .scene-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr}
  .search input{width:150px}
  .nav-links a{padding:0 9px;font-size:.9rem}
}
@media (max-width:768px){
  .nav-links,.nav-right{display:none}
  .nav-burger{display:grid}
  .section{padding:46px 0}
  .hero{padding:34px 0 44px}
  .mv-grid,.latest-grid{grid-template-columns:repeat(2,1fr)}
  .stats-strip,.proof-stats,.proof-list,.assure{grid-template-columns:1fr}
  .rank-cols{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec-head h2,.scene-copy h2{font-size:1.45rem}
  .fb-tip{display:none}
}
@media (max-width:520px){
  .mv-grid,.latest-grid,.cat-grid,.artist-grid{grid-template-columns:1fr}
  .fixed-bar{height:56px}
  body{padding-bottom:72px}
  .hero-main h1{font-size:1.9rem}
  .hero-sub{font-size:1rem}
  .hero-facts li{flex:1;min-width:0}
  .countdown{max-width:none}
  .fb-ghost{display:none}
  .fb-actions .btn{padding:0 16px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{padding:16px 0}
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}