:root{
  --bg:#15091f; --bg2:#1f0d2e; --purple:#5b2a86; --grape:#8a3fd0;
  --pink:#e85a9e; --rose:#ff5c8a; --peach:#ff8fb1; --cream:#f6e9ff;
  --ink:#f4eaff; --mute:#c2a8db; --line:rgba(232,90,158,.28);
  --glass:rgba(255,255,255,.06); --hot:#ff3d77;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:86px}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); overflow-x:hidden; line-height:1.75;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
  text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(232,90,158,.30), transparent 60%),
    radial-gradient(1000px 600px at 8% 22%, rgba(138,63,208,.32), transparent 62%),
    radial-gradient(900px 900px at 50% 95%, rgba(255,92,138,.18), transparent 65%),
    linear-gradient(180deg,#130720 0%, #1c0a2c 45%, #16071f 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 35%, transparent 78%);
}
.wrap{width:min(100% - 48px,1320px);margin:0 auto}
img{display:block;max-width:100%;border-radius:inherit}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.sec{padding:clamp(68px,8vw,104px) 0;position:relative;scroll-margin-top:82px}
.sec-h{display:flex;align-items:flex-end;gap:clamp(16px,2.5vw,28px);flex-wrap:wrap;margin-bottom:clamp(30px,4vw,50px)}
.sec-h .no{font-family:monospace;font-size:15px;color:var(--rose);letter-spacing:.16em;writing-mode:vertical-rl;transform:rotate(180deg);border-left:2px solid var(--rose);padding-left:10px;height:auto;min-height:72px;}
.sec-h h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.14;letter-spacing:-.5px; color: #fff;}
.sec-h h2 em{font-style:normal;background:linear-gradient(92deg,#ffe0e6 0%,#ff8fb1 45%,#c77dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-h .sub{font-size:15px;color:var(--mute);max-width:420px;margin-bottom:12px;line-height:1.8}
.sec-h .all{margin-left:auto;font-size:13.5px;color:var(--peach);border-bottom:1px solid var(--line);padding-bottom:4px;transition:.3s}
.sec-h .all:hover{color:#fff;letter-spacing:.06em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:700;padding:17px 38px;border-radius:999px;border:0;cursor:pointer;background:linear-gradient(95deg,#ff3d77 0%,#e85a9e 45%,#8a3fd0 100%);color:#fff;box-shadow:0 14px 40px -12px rgba(232,90,158,.75),inset 0 1px 0 rgba(255,255,255,.4);transition:.35s;text-align:center;min-height:54px;}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 50px -14px rgba(232,90,158,.9)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.marq{background:linear-gradient(90deg,#ff3d77,#e85a9e 35%,#8a3fd0 70%,#5b2a86);padding:10px 0;overflow:hidden;position:relative}
.marq-track{display:flex;gap:56px;white-space:nowrap;animation:scroll 34s linear infinite;font-size:13.5px;color:#fff;letter-spacing:.1em;font-weight:600}
.marq-track span{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.marq-track b{color:#ffe0ee}
@keyframes scroll{to{transform:translateX(-50%)}}
.nav{position:sticky;top:0;z-index:80;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(19,7,32,.78);border-bottom:1px solid rgba(255,255,255,.07);isolation:isolate;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.nav-in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);height:72px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;}
.logo img{width:auto;height:34px;border-radius:9px;object-fit:contain;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 24px rgba(232,90,158,.16)}
.logo-txt{display:flex; flex-direction:column; justify-content:center; line-height:1.1;}
.logo-txt b{font-size:19px;letter-spacing:.02em;font-weight:800;white-space:nowrap; color:#fff;}
.logo-txt span{font-size:10px; font-family:monospace; color:var(--peach); letter-spacing:2px; margin-top:2px;}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.menu a{font-size:14.5px;padding:9px 15px;border-radius:11px;color:var(--mute);transition:.25s;white-space:nowrap; font-weight:600;position:relative}
.menu a:hover,.menu a.on{color:#fff;background:rgba(255,255,255,.07)}
.menu a:after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rose),#c77dff);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu a:hover:after,.menu a.on:after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.nav-cta{flex-shrink:0;font-size:14px;font-weight:700;padding:10px 24px;border-radius:999px;background:linear-gradient(95deg,#ff3d77,#8a3fd0);color:#fff;white-space:nowrap;transition:.3s;box-shadow:0 8px 22px rgba(232,90,158,.22)}
.nav-cta:hover{transform:scale(1.05);box-shadow:0 8px 26px -8px rgba(232,90,158,.8)}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:11px;background:var(--glass);color:#fff;font-size:20px;cursor:pointer;place-items:center}
.hero-new{
  position: relative; min-height: min(860px,calc(100svh - 72px)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; padding: clamp(60px,8vw,100px) 20px clamp(52px,7vw,84px);
}
.hero-bg-grid{
  position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; transform:scale(1.015);
}
.hero-bg-grid img{ width: 100%; height: 100%; object-fit: cover; object-position:center 35%; filter:saturate(.92); border-radius:0;}
.hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,rgba(15,5,22,.88) 0%,rgba(15,5,22,.65) 38%,rgba(15,5,22,.73) 68%,#15091f 100%);
}
.hero-content{ position: relative; z-index: 2; max-width: 960px; width:min(100%,960px); }
.hero-tags{ display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.hero-tags span{font-size: 13px; padding: 6px 16px; border-radius: 99px; background: rgba(0,0,0,0.5); color: var(--peach); border: 1px solid rgba(255,143,177,.4); font-weight: 600; backdrop-filter: blur(8px);}
.hero-title h1{font-size: clamp(40px, 6vw, 76px); font-weight: 900; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 24px; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.6);}
.hero-title h1 em{font-style: normal; display: block; margin-top: 8px; background: linear-gradient(92deg,#ffe0ee 0%,#ff8fb1 40%,#c77dff 78%,#8be9fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.hero-p{ font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.9; max-width: 700px; margin: 0 auto 40px; text-shadow: 0 2px 10px rgba(0,0,0,.8);}
.hero-btns{ display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; }
.hero-stats-bottom{ display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
.hero-stats-bottom div{ text-align: center; }
.hero-stats-bottom b{ display: block; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #ff8fb1; line-height: 1.2; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0,0,0,.5);}
.hero-stats-bottom b small{ font-size: 14px; font-weight: 600; color: #fff; margin-left: 2px; }
.hero-stats-bottom p{ font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: .1em; }
.pick-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:stretch}
.pick-list{display:flex;flex-direction:column;gap:12px}
.pick-item{display:grid;grid-template-columns:40px 88px minmax(0,1fr) 38px;gap:14px;align-items:center;padding:14px;border-radius:18px;cursor:pointer;transition:.3s;border:1px solid transparent;background:rgba(255,255,255,.035);min-width:0}
.pick-item:hover{background:rgba(255,255,255,.07)}
.pick-item.on{background:linear-gradient(100deg,rgba(255,61,119,.22),rgba(138,63,208,.14));border-color:var(--line)}
.pick-item .rk{font-family:monospace;font-size:22px;font-weight:800;color:rgba(255,143,177,.45)}
.pick-item.on .rk{color:var(--rose)}
.pick-item .cv{border-radius:12px;overflow:hidden;width:88px;height:62px}
.pick-item .cv img{width:100%;height:100%;object-fit:cover}
.pick-item .info{min-width:0}
.pick-item .info h4{font-size:16px;font-weight:700;margin-bottom:5px;line-height:1.4}
.pick-item .info .meta{font-size:12px;color:var(--mute);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pick-item .info .meta b{color:var(--peach);font-weight:700}
.pick-item .info .meta .hot-dot{color:var(--hot);font-weight:700;font-family:monospace}
.pick-item .play{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid var(--line);color:#fff;font-size:13px;transition:.3s}
.pick-show{position:relative;border-radius:26px;overflow:hidden;min-height:clamp(380px,44vw,540px); display:block; text-decoration:none;background:#24132f;}
.pick-show>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:0;}
.pick-show .grad{position:absolute;inset:auto 0 0 0;height:64%; z-index:2;background:linear-gradient(0deg,rgba(13,4,22,.96) 22%,rgba(13,4,22,.7) 55%,transparent); pointer-events:none;}
.pick-info{position:absolute;left:36px;right:36px;bottom:32px; z-index:3;}
.pick-info .cat{font-family:monospace;font-size:12px;letter-spacing:.24em;color:var(--peach);text-transform:uppercase}
.pick-info h3{font-size:clamp(26px,3.2vw,40px);font-weight:800;margin:10px 0 12px;line-height:1.25; color:#fff;}
.pick-info p{font-size:14.5px;color:#ead5f5;max-width:560px;line-height:1.9;margin-bottom:18px}
.pick-info .acts{display:flex;gap:8px;flex-wrap:wrap}
.pick-info .acts i{font-style:normal;font-size:12.5px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.pick-info .row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:20px;font-size:13px;color:#d9c0e8}
.pick-info .row b{font-family:monospace;color:#fff;font-weight:700}
.topic-list{display:flex;flex-direction:column;gap:20px}
.topic-item{
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;padding:32px 40px;border-radius:20px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:all .3s ease;text-decoration:none;
  min-height:180px;overflow:hidden;position:relative;
}
.topic-item:hover{
  background:rgba(255,255,255,.06);border-color:var(--rose);
  transform:translateY(-2px);box-shadow:0 20px 40px -20px rgba(232,90,158,.4);
}
.topic-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.topic-text .vol{font-size:13px;font-weight:800;letter-spacing:.15em;color:#c77dff;text-transform:uppercase}
.topic-text h3{font-size:clamp(22px,2.5vw,28px);font-weight:900;color:#fff;display:flex;align-items:center;gap:16px;flex-wrap:wrap;line-height:1.3}
.topic-text h3 span{
  font-size:12px;font-weight:500;color:var(--mute);padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);white-space:nowrap;
}
.topic-text p{font-size:14.5px;line-height:1.75;color:var(--mute);max-width:680px;margin:0}
.topic-text .link{font-size:14px;font-weight:700;color:var(--peach);display:flex;align-items:center;gap:8px}
.topic-text .link::after{content:"→";transition:transform .2s ease}
.topic-item:hover .topic-text .link::after{transform:translateX(4px)}
.topic-covers{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;height:130px}
.topic-covers .cover-item{
  width:96px;height:130px;border-radius:10px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.15);box-shadow:-8px 8px 20px rgba(0,0,0,.6);
  transition:all .3s ease;background:#231f33;flex-shrink:0;
}
.topic-covers .cover-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.topic-covers .cover-item:nth-child(1){transform:rotate(-6deg) translateY(5px);z-index:1}
.topic-covers .cover-item:nth-child(2){transform:rotate(-2deg) translateY(-3px);z-index:2;margin-left:-36px}
.topic-covers .cover-item:nth-child(3){transform:rotate(2deg) translateY(4px);z-index:3;margin-left:-36px}
.topic-covers .cover-item:nth-child(4){transform:rotate(6deg) translateY(-4px);z-index:4;margin-left:-36px}
.topic-item:hover .topic-covers .cover-item{transform:rotate(0deg) translateY(0)}
.topic-item:hover .topic-covers .cover-item + .cover-item{margin-left:-12px}
.topic-item:hover .cover-item img{transform:scale(1.045)}
.topic-more-tip{text-align:center;margin-top:32px;font-size:14.5px;color:var(--mute)}
.topic-more-tip a{color:var(--peach);font-weight:700;margin-left:6px}
.genre-accordion{ display: flex; height: 480px; gap: 12px; width: 100%; border-radius: 24px; overflow: hidden; }
.acc-item{ position: relative; border-radius: 20px; overflow: hidden; flex: 1; transition: flex .5s ease; cursor: pointer; display: block; border: 1px solid var(--line); }
.acc-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .5s; opacity: 0.7; border-radius:0;}
.acc-item:hover{ flex: 3; }
.acc-item:hover img{ opacity: 1; transform: scale(1.05); }
.acc-item .sc{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,4,22,.95) 0%, transparent 60%); pointer-events: none; }
.acc-item .lb{ position: absolute; bottom: 24px; left: 24px; white-space: nowrap; }
.acc-item .lb b{ font-size: 22px; font-weight: 800; color: #fff; display: block; margin-bottom: 4px; }
.acc-item .lb span{ font-size: 13px; color: var(--peach); opacity: 0; transition: .3s; transition-delay: .2s; display: block;}
.acc-item:hover .lb span{ opacity: 1; }
.mg{display:grid;grid-template-columns:1fr 78px 1fr;gap:22px;align-items:stretch; margin-top: 40px;}
.mg-col{position:relative;border-radius:22px;overflow:hidden;min-height:380px; display:block; border:1px solid var(--line);}
.mg-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:1;transition:transform .55s cubic-bezier(.2,.7,.2,1);border-radius:0;}
.mg-col:hover img{transform:scale(1.045)}
.mg-col .sc{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,4,22,.94),rgba(13,4,22,.18) 60%,transparent); z-index:2;}
.mg-col .in{position:absolute;left:30px;right:30px;bottom:30px; z-index:3;}
.mg-col .in h4{font-size:24px;font-weight:800;margin:7px 0 8px; color: #fff;}
.mg-col .in p{font-size:14px;color:#ead5f5;line-height:1.8}
.mg-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:22px;border:1px dashed var(--line);background:rgba(255,255,255,.035)}
.mg-vs b{font-size:34px;font-weight:900;background:linear-gradient(95deg,#ff3d77,#c77dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.chart-container{ display: flex; flex-direction: column; gap: 24px; }
.chart-top3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chart-card-top{ position: relative; border-radius: 20px; overflow: hidden; display: block; aspect-ratio: 3/4; border: 1px solid var(--line); transition: .3s;}
.chart-card-top:hover{ border-color: var(--rose); transform: translateY(-5px); }
.chart-card-top img{ width: 100%; height: 100%; object-fit: cover; transition:transform .55s cubic-bezier(.2,.7,.2,1); border-radius:0;}
.chart-card-top:hover img{transform:scale(1.045)}
.chart-card-top .overlay{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 50%, transparent 100%); }
.chart-card-top .num-badge{ position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; background: #FFD700; color: #000; font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-family: monospace; }
.chart-card-top:nth-child(2) .num-badge{ background: #C0C0C0; }
.chart-card-top:nth-child(3) .num-badge{ background: #CD7F32; }
.chart-card-top .score{ position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.6); color: #FFD700; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); }
.chart-card-top .info{ position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap:12px;}
.chart-card-top .info h4{ font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.chart-card-top .info p{ font-size: 12px; color: var(--mute); }
.chart-card-top .info .hot-val{ color: #FFD700; font-size: 16px; font-weight: 800; font-family: monospace; }
.chart-rest{ display: flex; flex-direction: column; gap: 12px; }
.chart-row{ display: flex; align-items: center; gap: 20px; background: rgba(255,255,255,.03); padding: 16px 24px; border-radius: 12px; border: 1px solid var(--line); transition: .2s; text-decoration: none; }
.chart-row:hover{ background: rgba(255,255,255,.08); }
.chart-row .num{ width: 30px; font-size: 22px; font-weight: 900; color: var(--mute); text-align: center; }
.chart-row .thumb{ width: 48px; height: 64px; border-radius: 8px; overflow: hidden; }
.chart-row .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.chart-row .text{ flex: 1; min-width:0;}
.chart-row .text h4{ font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.chart-row .text p{ font-size: 12px; color: var(--mute); }
.chart-row .bar-wrap{ width: 200px; height: 6px; background: rgba(255,255,255,.1); border-radius: 4px; display: flex; align-items: center; margin-right: 20px; flex-shrink:0;}
.chart-row .bar{ height: 100%; background: #FFD700; border-radius: 4px; }
.chart-row .val{ color: #FFD700; font-weight: 800; font-size: 15px; font-family: monospace; }
.dev-feature-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; margin-top: 40px; }
.dev-single{
  position: relative; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line); background: #231f33;
  box-shadow: 0 30px 70px -30px rgba(232,90,158,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  aspect-ratio: 16 / 10; display:block;
}
.dev-single img{ width: 100%; height: 100%; object-fit: cover; display: block; transition:transform .55s cubic-bezier(.2,.7,.2,1); border-radius:0;}
.dev-single:hover img{transform:scale(1.045)}
.dev-single::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,61,119,.18), transparent 40%, rgba(138,63,208,.22));
  pointer-events: none;
}
.why{ display: flex; flex-direction: column; gap: 36px; }
.why-item{ position: relative; padding-left: 70px; }
.why-item .num{ position: absolute; left: 0; top: -10px; font-size: 48px; font-weight: 900; font-family: monospace; color: transparent; -webkit-text-stroke: 1.5px var(--rose); opacity: 0.8; line-height: 1; }
.why-item h4{ font-size: 24px; font-weight: 800; margin-bottom: 10px; color: #fff; }
.why-item p{ font-size: 15px; color: var(--mute); line-height: 1.8; }
.news-list{ display: flex; flex-direction: column; gap: 16px; }
.news-row{ display: flex; gap: 30px; background: var(--glass); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: .3s; cursor: pointer; align-items: center; padding-right: 30px; }
.news-row:hover{ background: rgba(255,255,255,.08); border-color: var(--rose); transform: translateX(6px); }
.news-row img{ width: 240px; height: 140px; object-fit: cover; flex-shrink: 0; transition:transform .55s cubic-bezier(.2,.7,.2,1); border-radius:0;}
.news-row:hover img{transform:scale(1.045)}
.news-row .info{ flex: 1; padding: 20px 0; min-width:0;}
.news-row .tag{ display: inline-block; font-size: 12px; color: var(--peach); border: 1px solid var(--peach); padding: 2px 8px; border-radius: 4px; margin-bottom: 10px; }
.news-row h4{ font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.news-row p{ font-size: 14px; color: var(--mute); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row .date{ font-size: 13px; color: rgba(255,255,255,.3); font-family: monospace; margin-top: 14px; display: block; }
.review-faq-grid{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.rev-side h3,.faq-side h3{ font-size: 28px; font-weight: 800; margin-bottom: 20px; color: #fff; }
.rev-side h3 em,.faq-side h3 em{ font-style: normal; color: var(--rose); }
.rev-scroll{ display: flex; flex-direction: column; gap: 16px; max-height: 500px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--rose) transparent; }
.rev-scroll::-webkit-scrollbar{ width: 4px; }
.rev-scroll::-webkit-scrollbar-thumb{ background: var(--rose); border-radius: 4px; }
.rev-card{
  background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 16px; padding: 24px; position: relative;
}
.rev-card p{ font-size: 14.5px; color: #ead5f5; line-height: 1.8; margin-bottom: 16px; }
.rev-user{ display: flex; align-items: center; gap: 12px; }
.rev-user .av{ width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(140deg, #8a3fd0, #e85a9e); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink:0;}
.rev-user .name{ font-size: 13.5px; font-weight: 700; color: #fff; }
.rev-user .stars{ color: #FFD700; font-size: 12px; margin-left: auto; letter-spacing: 1px; }
.faq-side .fq{ margin-bottom: 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); transition: .3s; overflow:hidden;}
.faq-side .fq.on{ border-color: rgba(255,92,138,.55); background: rgba(255,255,255,.08); }
.faq-side .fq-q{ width:100%; padding: 20px 24px; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; cursor: pointer; color: #fff; text-align:left; align-items:center; gap:18px; font-family:inherit; border:0; background:transparent;}
.faq-side .fq-q .ic{ color: var(--peach); font-size: 20px; transition: .3s; line-height: 1; }
.faq-side .fq.on .fq-q .ic{ transform: rotate(45deg); }
.faq-side .fq-a{ max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-side .fq.on .fq-a{ max-height: 500px; }
.faq-side .fq-a div{ padding: 0 24px 20px; font-size: 14px; color: var(--mute); line-height: 1.8; }
.cta-sec{ position: relative; padding: 120px 0; overflow: hidden; isolation:isolate;}
.cta-bg{ position: absolute; inset: 0; z-index: 0; }
.cta-bg img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.8; filter: saturate(1.2); transform:scale(1.02); border-radius:0;}
.cta-overlay{ position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at center, rgba(21,9,31,.2) 0%, rgba(21,9,31,.85) 90%); }
.cta-box{ position: relative; z-index: 2; text-align: center; max-width: 860px; margin: 0 auto; }
.cta-box h2{ font-size: clamp(40px, 5vw, 64px); font-weight: 900; margin-bottom: 20px; line-height: 1.15; color: #fff; letter-spacing: -1px; text-shadow: 0 4px 20px rgba(0,0,0,.6);}
.cta-box h2 em{ font-style: normal; background: linear-gradient(92deg, #ffe0ee, #ff8fb1 50%, #c77dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-box p{ font-size: 16px; color: rgba(255,255,255,0.9); margin-bottom: 40px; text-shadow: 0 2px 10px rgba(0,0,0,.6);}
.cta-btns{ display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px;}
footer{ border-top: 1px solid rgba(255,255,255,.05); background: #09030f; padding: clamp(48px,6vw,76px) 0 0; }
.footer-top{ display: flex; justify-content: space-between; gap: clamp(32px,5vw,64px); padding-bottom: 60px; }
.footer-brand{ max-width: 400px; }
.footer-brand .logo-wrap{ display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.footer-brand .logo-wrap img{ width: auto; height: 52px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); object-fit:contain;}
.footer-brand .logo-wrap .txt{display:flex;flex-direction:column;justify-content:center}
.footer-brand .logo-wrap .txt b{ font-size: 26px; font-weight: 900; color: #fff; letter-spacing: 1px; display: block; line-height: 1.1; }
.footer-brand .logo-wrap .txt span{ font-size: 11px; color: var(--peach); font-family: monospace; letter-spacing: 3px; margin-top: 6px; display: block; }
.footer-brand p{ font-size: 14.5px; color: var(--mute); line-height: 1.8; margin-bottom: 24px; }
.footer-brand .btn{ padding: 12px 28px; font-size: 14px; min-height:auto;}
.footer-links{ display: flex; gap: clamp(28px,5vw,68px); }
.footer-col h5{ font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 24px; letter-spacing: 1px; }
.footer-col ul{ list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-col a{ font-size: 14px; color: var(--mute); transition: .2s; }
.footer-col a:hover{ color: var(--rose); padding-left: 4px; }
.footer-search{ padding: 30px 0; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: flex-start; gap: 24px; }
.footer-search b{ font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; margin-top: 4px; }
.search-tags{ display: flex; flex-wrap: wrap; gap: 12px; }
.search-tags a{ display: inline-block; font-size: 13px; color: var(--mute); padding: 6px 16px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: .2s; }
@media (hover: hover){.search-tags a:hover{ color: #fff; border-color: var(--rose); background: rgba(232,90,158,.1); transform: translateY(-2px); }}
.footer-bottom{ padding: 30px 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.3); line-height:1.8;}
.footer-bottom time{font-family:monospace}
.mobile-dl{display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(19,7,32,.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); z-index:100; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); box-sizing:border-box;}
.mobile-dl a{display:flex; align-items:center; justify-content:center; min-height:48px; background:linear-gradient(95deg,#ff3d77,#8a3fd0); color:#fff; font-weight:900; text-align:center; padding:14px; border-radius:99px; font-size:16px; box-shadow:0 8px 20px -8px rgba(232,90,158,.8);}
#backTop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;font-size:18px;z-index:90;cursor:pointer;backdrop-filter:blur(8px);transition:.25s}
#backTop:hover{background:rgba(232,90,158,.25);border-color:var(--rose)}
::selection{background:rgba(232,90,158,.38);color:#fff}
:focus-visible{outline:3px solid rgba(255,143,177,.9);outline-offset:4px}
@media (max-width: 1100px){
.genre-accordion{ flex-wrap: wrap; height: auto; }
.acc-item{ flex: 0 0 calc(50% - 6px); height: 240px; }
.acc-item:hover{ flex: 0 0 calc(50% - 6px); }
.acc-item .lb span{ opacity: 1; }
.review-faq-grid{ grid-template-columns: 1fr; }
.rev-scroll{ max-height: none; }
.footer-top{ flex-direction: column; }
.footer-links{ gap: 40px; justify-content: space-between; }
.dev-feature-grid{ gap:42px;}
}
@media (max-width: 860px){
.wrap{ width: calc(100% - 36px); }
.sec{ padding: 76px 0; }
.nav-in{ height: 64px; gap:10px; display:flex; align-items:center;}
.menu{ display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; padding: 20px; background: rgba(19,7,32,.98); border-bottom: 1px solid var(--line); max-height:calc(100dvh - 64px); overflow-y:auto; box-shadow:0 18px 30px rgba(0,0,0,.25);}
.menu.open{ display: flex; }
.menu a{ padding: 13px 16px; width: 100%; font-size:15px; }
.menu a:after{display:none}
.nav-toggle{ display: grid; margin-left:auto; flex:0 0 40px; }
.nav-actions{margin-left:auto;gap:8px}
.nav-actions .nav-cta{padding:10px 13px;font-size:12px;min-height:38px}
.logo img{height:30px}
.logo-txt b{font-size:17px}
.logo-txt span{font-size:9px;letter-spacing:1.5px}
.hero-bg-grid{ grid-template-columns: repeat(3, 1fr); inset: 0; transform: none; }
.hero-new{ min-height:calc(100svh - 64px); padding:70px 18px 56px;}
.hero-stats-bottom{gap:24px 38px}
.pick-grid{ grid-template-columns: 1fr; gap:24px;}
.pick-show{min-height:420px}
.mg{ grid-template-columns: 1fr; }
.mg-vs{ flex-direction: row; padding: 20px; }
.chart-top3{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;}
.chart-card-top .info{display:block;left:12px;right:12px;bottom:14px}
.chart-card-top .info h4{font-size:16px}
.chart-card-top .info .hot-val{display:block;margin-top:4px}
.chart-card-top .score{top:10px;right:10px}
.chart-row{ flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; position: relative; }
.chart-row .num{ position: absolute; top: 12px; left: 12px; color: #fff; background: rgba(0,0,0,.55); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 16px;}
.chart-row .thumb{ width: 100%; height: 160px; }
.chart-row .text{ width: 100%; margin-top: 10px; }
.chart-row .bar-wrap{ width: 100%; margin-right: 0; margin-top: 10px;}
.chart-row .val{ position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: 99px;}
.dev-feature-grid{ grid-template-columns: 1fr; gap: 50px; }
.dev-single{ aspect-ratio: 16 / 11; }
.news-row{ flex-direction: column; align-items: flex-start; padding: 0; gap:0;}
.news-row img{ width: 100%; height: 200px; }
.news-row .info{ padding: 20px; }
.topic-item{ flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 24px; }
.topic-covers{ width: 100%; justify-content: flex-start; height: 120px; }
.topic-covers .cover-item{ width: 86px; height: 116px; }
.topic-covers .cover-item:nth-child(n){ margin-left: -30px; }
.topic-covers .cover-item:first-child{ margin-left: 0; }
.topic-item:hover .topic-covers .cover-item:nth-child(n){ margin-left: -16px; }
.footer-top{gap:36px}
}
@media (max-width: 560px){
.wrap{ width: calc(100% - 32px); }
.sec{ padding:62px 0; }
.sec-h{ margin-bottom:28px; gap:14px; }
.sec-h .no{ font-size:11px; min-height:54px; }
.sec-h h2{ font-size:clamp(26px,7vw,34px); }
.sec-h .sub{ font-size:13px; margin-top:8px; }
.sec-h .all{ margin-left:0; font-size:12px; }
.hero-new{ padding:58px 16px 48px; min-height:auto; }
.hero-bg-grid{ grid-template-columns:repeat(2,1fr); gap:4px; }
.hero-title h1{ font-size:clamp(34px,9vw,46px); line-height:1.12; }
.hero-p{ font-size:14px; line-height:1.85; margin-bottom:28px; }
.hero-tags{ gap:7px; margin-bottom:20px; }
.hero-tags span{ font-size:11px; padding:5px 10px; }
.hero-btns{ gap:10px; margin-bottom:36px; }
.hero-btns .btn{ width:100%; min-height:50px; padding:13px 18px; font-size:15px; }
.hero-stats-bottom{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
.hero-stats-bottom div b{ font-size:28px; }
.hero-stats-bottom p{ font-size:11px; }
.pick-grid{ grid-template-columns:minmax(0,1fr); gap:18px; }
.pick-list{ gap:8px; }
.pick-item{ grid-template-columns:28px 68px minmax(0,1fr) 32px; gap:10px; padding:10px; border-radius:14px; }
.pick-item .rk{ font-size:16px; }
.pick-item .cv{ width:68px; height:56px; }
.pick-item .info h4{ font-size:13px; line-height:1.35; }
.pick-item .info .meta{ font-size:10px; gap:6px; }
.pick-item .play{ width:30px; height:30px; font-size:11px; }
.pick-show{ min-height:390px; border-radius:20px; }
.pick-info{ left:20px; right:20px; bottom:22px; }
.pick-info h3{ font-size:26px; }
.pick-info p{ font-size:13px; line-height:1.75; }
.topic-item{ padding:22px 18px; gap:18px; }
.topic-text h3{ font-size:21px; gap:8px; }
.topic-text p{ font-size:13px; }
.topic-covers .cover-item{ width:72px; height:100px; }
.topic-covers .cover-item:nth-child(n){ margin-left:-24px; }
.topic-covers .cover-item:first-child{ margin-left:0; }
.genre-accordion{ gap:8px; }
.acc-item{ flex: 0 0 100%; height:170px; border-radius:14px; }
.acc-item:hover{ flex: 0 0 100%; }
.acc-item .lb{ left:14px; bottom:14px; }
.acc-item .lb b{ font-size:17px; }
.acc-item .lb span{ font-size:11px; white-space:normal; opacity:1;}
.mg{ gap:12px; }
.mg-col{ min-height:300px; border-radius:18px; }
.mg-col .in{ left:20px; right:20px; bottom:20px; }
.mg-col .in h4{ font-size:21px; }
.chart-top3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.chart-card-top:first-child{ grid-column:1/-1; aspect-ratio:16/9; }
.chart-card-top{ border-radius:14px; }
.chart-card-top .num-badge{ top:10px; left:10px; width:29px; height:29px; font-size:16px; }
.chart-card-top .info h4{ font-size:14px; }
.chart-card-top .info p{ font-size:10px; }
.chart-row{ display:grid; grid-template-columns:26px 62px minmax(0,1fr); align-items:center; gap:10px; padding:12px; }
.chart-row .num{ position:static; background:none; width:auto; height:auto; font-size:17px; }
.chart-row .thumb{ width:62px; height:76px; }
.chart-row .text{ margin:0; }
.chart-row .text h4{ font-size:14px; line-height:1.4; }
.chart-row .text p{ font-size:11px; }
.chart-row .bar-wrap{ grid-column:2/4; width:100%; margin:0; }
.chart-row .val{ position:static; grid-column:1/-1; justify-self:end; font-size:12px; }
.dev-feature-grid{ gap:28px; }
.dev-single{ aspect-ratio:4/3; border-radius:18px; }
.why{ gap:26px; }
.why-item{ padding-left:52px; }
.why-item .num{ font-size:36px; }
.why-item h4{ font-size:20px; }
.why-item p{ font-size:13px; }
.news-row{ border-radius:16px; }
.news-row img{ height:180px; }
.news-row .info{ padding:17px; }
.news-row h4{ font-size:17px; }
.news-row p{ font-size:13px; }
.review-faq-grid{ gap:30px; }
.rev-side h3,.faq-side h3{ font-size:23px; }
.rev-card{ padding:18px; }
.faq-side .fq-q{ padding:17px; font-size:14px; }
.faq-side .fq-a div{ padding:0 17px 17px; font-size:13px; }
.cta-sec{ padding:76px 0; }
.cta-box h2{ font-size:36px; }
.cta-box p{ font-size:14px; margin-bottom:28px; }
.cta-btns .btn{ width:100%; }
footer{ padding-top:44px; }
.footer-brand .logo-wrap img{ height:44px; }
.footer-brand .logo-wrap .txt b{ font-size:22px; }
.footer-brand p{ font-size:13px; }
.footer-links{ flex-direction:column; gap:26px; }
.footer-col h5{ margin-bottom:14px; }
.footer-col ul{ gap:10px; }
.footer-search{ flex-direction:column; gap:12px; padding:22px 0; }
.search-tags{ gap:8px; }
.search-tags a{ font-size:12px; padding:5px 11px; }
.footer-bottom{ font-size:11px; padding:22px 0; }
.mobile-dl{ display:block; }
footer{ padding-bottom:100px; }
#backTop{ right:14px; bottom:92px; width:42px; height:42px; }
}
@media (max-width:380px){
.nav-actions{gap:6px}
.nav-actions .nav-cta{padding:9px 10px;font-size:11px}
.logo{gap:7px}
.logo img{height:26px}
.logo-txt b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}