:root{
    --bg:#0d0f14;
    --bg-soft:#141821;
    --card:#191e29;
    --card-hi:#212836;
    --line:rgba(255,255,255,.08);
    --text:#eef1f6;
    --muted:#9aa3b4;
    --accent:#5ad1a8;
    --accent-2:#ff7a9c;
    --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px;}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(13,15,20,.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;align-items:center;gap:20px;
    height:62px;
  }
  .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  .brand img{height:32px;width:32px;border-radius:8px;object-fit:cover;}
  .brand-name{font-size:15px;font-weight:700;letter-spacing:.3px;white-space:nowrap;}
  .nav{
    display:flex;gap:4px;margin-left:auto;
    overflow-x:auto;scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav a{
    font-size:14px;color:var(--muted);
    padding:8px 12px;border-radius:999px;
    white-space:nowrap;transition:color .2s,background .2s;
  }
  .nav a:hover{color:var(--text);background:var(--card);}
  .btn-dl{
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(120deg,var(--accent),#3fb9e6);
    color:#06231b;font-weight:700;font-size:14px;
    padding:9px 18px;border-radius:999px;white-space:nowrap;
    transition:transform .2s,filter .2s;
  }
  .btn-dl:hover{transform:translateY(-1px);filter:brightness(1.08);}
  .header-dl{display:none;}

  /* ---------- hero ---------- */
  .hero{
    padding:44px 0 8px;
    background:
      radial-gradient(900px 380px at 12% -10%, rgba(90,209,168,.16), transparent 65%),
      radial-gradient(700px 340px at 88% 0%, rgba(255,122,156,.13), transparent 65%);
  }
  .hero-grid{display:grid;gap:34px;}
  .hero-tag{
    display:inline-block;font-size:12px;letter-spacing:1px;
    color:var(--accent);border:1px solid rgba(90,209,168,.4);
    padding:4px 12px;border-radius:999px;margin-bottom:16px;
  }
  .hero h1{
    font-size:28px;line-height:1.35;font-weight:800;
    letter-spacing:.2px;margin-bottom:14px;
  }
  .hero h1 em{font-style:normal;color:var(--accent);}
  .hero p{color:var(--muted);font-size:15px;margin-bottom:10px;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;
    padding:9px 18px;border-radius:999px;font-size:14px;
    border:1px solid var(--line);color:var(--text);background:var(--card);
    transition:background .2s;
  }
  .btn-ghost:hover{background:var(--card-hi);}
  .hero-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:28px;}
  .stat b{display:block;font-size:20px;color:var(--text);}
  .stat span{font-size:12px;color:var(--muted);}
  .hero-cover{
    position:relative;border-radius:20px;overflow:hidden;
    border:1px solid var(--line);background:var(--card);
    aspect-ratio:16/10;
  }
  .hero-cover img{width:100%;height:100%;object-fit:cover;}
  .hero-cover-cap{
    position:absolute;left:0;right:0;bottom:0;
    padding:22px 16px 14px;
    background:linear-gradient(to top,rgba(6,8,12,.92),transparent);
    font-size:13px;color:#cfd6e4;
  }

  /* ---------- section basics ---------- */
  section{padding:46px 0;}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;}
  .sec-head h2{font-size:21px;font-weight:800;letter-spacing:.2px;}
  .sec-head span{font-size:13px;color:var(--muted);}

  /* ---------- poster cards ---------- */
  .poster-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .poster-card{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;
    transition:transform .25s,border-color .25s,background .25s;
  }
  .poster-card:hover{transform:translateY(-4px);border-color:rgba(90,209,168,.45);background:var(--card-hi);}
  .poster-card figure{aspect-ratio:3/4;overflow:hidden;background:#0a0c11;}
  .poster-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
  .poster-card:hover figure img{transform:scale(1.04);}
  .poster-body{padding:10px 12px 14px;}
  .poster-body h3{font-size:14px;font-weight:700;margin-bottom:6px;}
  .tagline{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
  .tag{
    font-size:11px;color:var(--accent);
    background:rgba(90,209,168,.1);
    border:1px solid rgba(90,209,168,.22);
    padding:1px 8px;border-radius:999px;
  }
  .tag.pink{color:var(--accent-2);background:rgba(255,122,156,.1);border-color:rgba(255,122,156,.24);}
  .poster-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;}

  /* ---------- genre ---------- */
  .genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .genre{
    display:flex;flex-direction:column;gap:4px;
    padding:16px;border-radius:var(--radius);
    background:var(--card);border:1px solid var(--line);
    transition:border-color .2s,background .2s;
  }
  .genre:hover{border-color:rgba(90,209,168,.4);background:var(--card-hi);}
  .genre b{font-size:15px;}
  .genre small{font-size:12px;color:var(--muted);}

  /* ---------- rank ---------- */
  .rank-list{display:flex;flex-direction:column;gap:8px;}
  .rank-item{
    display:flex;align-items:center;gap:14px;
    padding:12px 14px;border-radius:12px;
    background:var(--card);border:1px solid var(--line);
  }
  .rank-no{
    width:26px;height:26px;flex-shrink:0;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;
    background:var(--bg-soft);color:var(--muted);
  }
  .rank-item:nth-child(1) .rank-no{background:linear-gradient(140deg,#ffcf6b,#ff8a4c);color:#2b1a00;}
  .rank-item:nth-child(2) .rank-no{background:linear-gradient(140deg,#d8e0ea,#9aa7b8);color:#1b2230;}
  .rank-item:nth-child(3) .rank-no{background:linear-gradient(140deg,#e0a97c,#b47a4d);color:#2a1a0d;}
  .rank-info{flex:1;min-width:0;}
  .rank-info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rank-info small{font-size:12px;color:var(--muted);}
  .rank-heat{
    font-size:12px;color:var(--accent);flex-shrink:0;
    background:rgba(90,209,168,.1);padding:2px 9px;border-radius:999px;
  }

  /* ---------- new + slice strip ---------- */
  .strip{
    display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
    scrollbar-width:thin;
  }
  .strip-item{
    flex:0 0 128px;border-radius:12px;overflow:hidden;
    background:var(--card);border:1px solid var(--line);
  }
  .strip-item img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .strip-item p{font-size:12px;padding:7px 9px;color:#d7dde9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---------- detail ---------- */
  .detail-card{
    display:grid;gap:22px;
    background:linear-gradient(160deg,var(--card-hi),var(--card));
    border:1px solid var(--line);border-radius:20px;padding:20px;
  }
  .detail-cover{border-radius:14px;overflow:hidden;max-width:230px;width:100%;margin:0 auto;}
  .detail-cover img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .detail-info h2{font-size:20px;margin-bottom:10px;}
  .detail-info p{font-size:14px;color:var(--muted);margin-bottom:14px;}
  .detail-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0;}
  .fact b{display:block;font-size:13px;color:var(--text);}
  .fact span{font-size:12px;color:var(--muted);}
  .detail-actions{display:flex;flex-wrap:wrap;gap:10px;}

  /* ---------- community ---------- */
  .community{display:grid;gap:14px;}
  .cmt{
    display:flex;gap:12px;padding:14px;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
  }
  .avatar{
    width:34px;height:34px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(140deg,var(--accent),var(--accent-2));
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:#0b1a16;
  }
  .cmt-body b{font-size:13px;display:block;margin-bottom:2px;}
  .cmt-body p{font-size:13px;color:var(--muted);}
  .cmt-body small{font-size:11px;color:#6d7688;}

  /* ---------- faq ---------- */
  .faq-list{display:flex;flex-direction:column;gap:10px;}
  .faq-item{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    overflow:hidden;
  }
  .faq-q{
    width:100%;text-align:left;cursor:pointer;
    background:none;border:none;color:var(--text);
    font-size:14px;font-weight:600;font-family:inherit;
    padding:14px 16px;display:flex;justify-content:space-between;gap:12px;
  }
  .faq-q::after{content:"+";color:var(--accent);font-size:16px;line-height:1;}
  .faq-item.open .faq-q::after{content:"−";}
  .faq-a{
    display:none;padding:0 16px 14px;
    font-size:13px;color:var(--muted);
  }
  .faq-item.open .faq-a{display:block;}

  /* ---------- feature / about ---------- */
  .feature-grid{display:grid;gap:14px;}
  .feature{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:18px;
  }
  .feature b{display:block;font-size:15px;margin-bottom:6px;}
  .feature p{font-size:13px;color:var(--muted);}

  /* ---------- multi-device ---------- */
  .device-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .device{
    text-align:center;padding:20px 10px;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
  }
  .device b{display:block;font-size:14px;margin-bottom:4px;}
  .device small{font-size:12px;color:var(--muted);}

  /* ---------- footer ---------- */
  .site-footer{
    border-top:1px solid var(--line);
    padding:34px 0 40px;
    margin-top:10px;
  }
  .foot-search{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
  .foot-search a{
    font-size:12px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;
    padding:3px 11px;transition:color .2s,border-color .2s;
  }
  .foot-search a:hover{color:var(--text);border-color:rgba(90,209,168,.4);}
  .foot-bottom{font-size:12px;color:#6d7688;line-height:1.9;}
  .foot-bottom a{color:#7f8a9e;}
  .foot-bottom a:hover{color:var(--accent);}

  /* ---------- responsive ---------- */
  @media (min-width:768px){
    .header-dl{display:inline-flex;}
    .hero h1{font-size:36px;}
    .poster-row{grid-template-columns:repeat(3,1fr);}
    .genre-grid{grid-template-columns:repeat(3,1fr);}
    .community{grid-template-columns:repeat(2,1fr);}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .strip-item{flex:0 0 152px;}
  }
  @media (min-width:1024px){
    .wrap{padding:0 24px;}
    .hero{padding:64px 0 12px;}
    .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;}
    .hero h1{font-size:44px;}
    .poster-row{grid-template-columns:repeat(4,1fr);gap:16px;}
    .genre-grid{grid-template-columns:repeat(6,1fr);}
    .community{grid-template-columns:repeat(3,1fr);}
    .feature-grid{grid-template-columns:repeat(4,1fr);}
    .detail-card{grid-template-columns:240px 1fr;align-items:start;padding:26px;gap:30px;}
    .detail-cover{margin:0;}
    .detail-facts{grid-template-columns:repeat(4,1fr);}
    .rank-info b{font-size:15px;}
    section{padding:56px 0;}
  }