:root{
    --ink:#1c1a22;
    --paper:#fffaf3;
    --orange:#ff7a2f;
    --orange-deep:#e85a12;
    --plum:#3a1f3d;
    --violet:#6b4bd6;
    --sky:#2f5fd0;
    --mint:#e6f3ec;
    --line:rgba(28,26,34,.12);
    --soft:#6c6879;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    background:var(--paper);color:var(--ink);line-height:1.7;font-size:16px;
    -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 20px}
  .brand-line{display:flex;align-items:center;gap:10px}
  .brand-line img{height:34px;width:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .brand-name{font-weight:800;letter-spacing:.5px;font-size:18px}

  /* ============ HEADER ============ */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:rgba(255,250,243,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
  .site-header .brand-name{color:var(--ink)}
  .nav-desktop{display:none;gap:22px;font-size:14.5px;font-weight:600;color:#413c4c}
  .nav-desktop a:hover{color:var(--orange-deep)}
  .menu-toggle{
    display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);
    background:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
  }
  .menu-toggle .bars{display:inline-block;width:16px;height:2px;background:var(--ink);position:relative}
  .menu-toggle .bars::before,.menu-toggle .bars::after{
    content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);
  }
  .menu-toggle .bars::before{top:-5px}.menu-toggle .bars::after{top:5px}
  .nav-folder{display:none;border-top:1px dashed var(--line);padding:8px 0 14px}
  .nav-folder.open{display:block}
  .nav-folder ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  .nav-folder a{display:block;padding:9px 10px;border-radius:10px;font-size:15px;font-weight:600;color:#3d3849}
  .nav-folder a:hover{background:#fff2e6;color:var(--orange-deep)}

  /* ============ HERO ============ */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(120% 90% at 12% 0%, #ffd9b8 0%, rgba(255,217,184,0) 55%),
      radial-gradient(100% 80% at 92% 8%, #d9cdff 0%, rgba(217,205,255,0) 58%),
      linear-gradient(170deg,#fff8ef 0%,#ffeedb 45%,#f7e9ff 100%);
    padding:34px 0 44px;
  }
  .hero::after{
    content:"";position:absolute;inset:auto -10% -40% -10%;height:220px;
    background:radial-gradient(60% 100% at 50% 0%, rgba(255,122,47,.16), transparent 70%);
    pointer-events:none;
  }
  .hero-tag{
    display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid rgba(232,90,18,.35);
    color:var(--orange-deep);font-size:13px;font-weight:800;padding:5px 14px;border-radius:999px;
    box-shadow:0 4px 14px rgba(232,90,18,.10);
  }
  .hero h1{
    font-size:clamp(26px,5.4vw,46px);line-height:1.25;font-weight:900;letter-spacing:-.5px;
    margin:16px 0 12px;color:#231d2c;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(96deg,var(--orange-deep),#c2367b 70%,var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-sub{max-width:620px;color:#504a5c;font-size:15.5px}
  .hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .hero-badges span{
    background:#fff;border:1px solid var(--line);border-radius:999px;
    font-size:12.5px;font-weight:700;color:#4a4358;padding:4px 12px;
  }

  /* marquee */
  .marquee{
    margin-top:24px;background:#231d2c;border-radius:14px;overflow:hidden;
    box-shadow:0 10px 30px rgba(35,29,44,.18);
  }
  .marquee-track{
    display:flex;gap:34px;white-space:nowrap;padding:12px 0;
    animation:slide 26s linear infinite;
  }
  .marquee-track span{
    color:#ffd9b8;font-size:14px;font-weight:700;letter-spacing:.5px;
    display:inline-flex;align-items:center;gap:10px;
  }
  .marquee-track span::after{content:"◆";color:var(--orange);font-size:10px}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* download buttons */
  .dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
  .dl-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:#fff;border:1.5px solid var(--line);border-radius:13px;
    padding:12px 10px;font-size:14.5px;font-weight:800;color:#2c2638;
    box-shadow:0 4px 12px rgba(44,38,56,.06);transition:transform .18s,box-shadow .18s,border-color .18s;
  }
  .dl-btn:hover{transform:translateY(-2px);border-color:rgba(232,90,18,.5);box-shadow:0 8px 18px rgba(232,90,18,.14)}
  .dl-btn .ico{font-size:16px;line-height:1}
  .dl-btn.main{
    grid-column:1/-1;background:linear-gradient(96deg,var(--orange),#ff5c8a 65%,#c2367b);
    color:#fff;border-color:transparent;font-size:16px;padding:15px 12px;
    box-shadow:0 10px 24px rgba(232,90,18,.32);
  }
  .dl-btn.main .ico{font-size:19px}
  .dl-note{margin-top:12px;font-size:12.5px;color:#7a7288}

  /* hero poster strip */
  .poster-strip{
    display:grid;grid-auto-flow:column;grid-auto-columns:118px;gap:12px;
    margin-top:26px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;
  }
  .poster-strip::-webkit-scrollbar{display:none}
  .poster-strip figure{border-radius:12px;overflow:hidden;box-shadow:0 8px 18px rgba(35,29,44,.16);position:relative}
  .poster-strip img{width:100%;height:172px;object-fit:cover}
  .poster-strip figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;
    background:linear-gradient(transparent,rgba(20,16,26,.85));
    color:#fff;font-size:11.5px;font-weight:700;line-height:1.35;
  }

  /* ============ SECTION COMMON ============ */
  section{padding:52px 0}
  .sec-head{max-width:680px;margin-bottom:26px}
  .sec-kicker{
    display:inline-block;font-size:12.5px;font-weight:900;letter-spacing:1.5px;
    text-transform:uppercase;margin-bottom:8px;
  }
  .sec-head h2{font-size:clamp(22px,3.4vw,31px);line-height:1.3;font-weight:900;letter-spacing:-.3px}
  .sec-head p{margin-top:10px;font-size:15px;color:var(--soft)}

  /* ============ 漫改热剧社 ============ */
  .sec-hot{background:linear-gradient(180deg,#fffaf3 0%,#fdf1e4 100%)}
  .sec-hot .sec-kicker{color:var(--orange-deep)}
  .hot-layout{display:grid;gap:24px;align-items:start}
  .hot-side{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  }
  .hot-side figure{border-radius:14px;overflow:hidden;box-shadow:0 10px 22px rgba(35,29,44,.14);position:relative}
  .hot-side img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
  .hot-side figure:first-child{grid-column:1/-1}
  .hot-side figure:first-child img{aspect-ratio:16/11}
  .hot-list{list-style:none;display:grid;gap:10px}
  .hot-list li{
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;
    box-shadow:0 2px 8px rgba(44,38,56,.04);
  }
  .hot-list .no{font-weight:900;color:var(--orange);font-size:15px;grid-row:1/3}
  .hot-list .tt{font-weight:800;font-size:15px}
  .hot-list .ds{font-size:13px;color:var(--soft);grid-column:2}
  .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;grid-column:2}
  .tag{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:#fff2e6;color:#b8490f}
  .tag.date{background:#eef1ff;color:#33418f}

  /* ============ 新漫速递 时间轴 ============ */
  .sec-new{background:#f3f0ff}
  .sec-new .sec-kicker{color:var(--violet)}
  .timeline{position:relative;margin-top:8px;padding-left:26px}
  .timeline::before{
    content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
    background:linear-gradient(var(--violet),#ff7a2f);
    border-radius:2px;
  }
  .tl-item{position:relative;margin-bottom:14px;background:#fff;border-radius:12px;padding:12px 14px;border:1px solid rgba(107,75,214,.14)}
  .tl-item::before{
    content:"";position:absolute;left:-23px;top:19px;width:11px;height:11px;border-radius:50%;
    background:#fff;border:3px solid var(--violet);
  }
  .tl-time{font-weight:900;color:var(--violet);font-size:13.5px;letter-spacing:.5px}
  .tl-item h3{font-size:15.5px;margin-top:2px;line-height:1.45}
  .tl-item p{font-size:13px;color:var(--soft);margin-top:4px}
  .new-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
  .new-posters figure{border-radius:12px;overflow:hidden;box-shadow:0 8px 18px rgba(58,31,61,.16);position:relative}
  .new-posters img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .new-posters figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;
    background:linear-gradient(transparent,rgba(30,18,46,.88));color:#fff;
    font-size:11.5px;font-weight:700;
  }

  /* ============ 漫剧盲盒 ============ */
  .sec-box{background:linear-gradient(160deg,#1f1a2b 0%,#33223d 55%,#201832 100%);color:#f4eefb}
  .sec-box .sec-kicker{color:#ffb37a}
  .sec-box .sec-head p{color:#c3b8d4}
  .box-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .box-card{
    border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px;
    background:rgba(255,255,255,.055);
  }
  .box-card strong{display:block;font-size:15.5px;color:#ffd0a8;margin-bottom:4px}
  .box-card span{font-size:13.5px;color:#cfc5de}
  .box-hint{
    margin-top:18px;font-size:13.5px;color:#e8ddf5;background:rgba(255,122,47,.14);
    border:1px dashed rgba(255,179,122,.5);border-radius:12px;padding:11px 14px;
  }

  /* ============ 完结漫剧库 ============ */
  .sec-finish{background:#e9f5ef}
  .sec-finish .sec-kicker{color:#1c7a53}
  .finish-layout{display:grid;gap:22px;align-items:start}
  .finish-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .finish-gallery figure{border-radius:12px;overflow:hidden;box-shadow:0 8px 18px rgba(20,60,45,.14);position:relative}
  .finish-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .finish-gallery figcaption{
    position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(10,40,28,.86));
    color:#fff;font-size:11.5px;font-weight:700;padding:16px 8px 7px;
  }
  .finish-list{display:grid;gap:8px}
  .finish-item{
    background:#fff;border-radius:11px;padding:11px 14px;border-left:4px solid #2fa06f;
    display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;
    box-shadow:0 2px 8px rgba(20,60,45,.06);
  }
  .finish-item b{font-size:14.5px}
  .finish-item i{font-style:normal;font-size:12px;color:#2b7d5b;font-weight:700}

  /* ============ 吐槽墙 ============ */
  .sec-talk{background:#fff4f6}
  .sec-talk .sec-kicker{color:#c2367b}
  .talk-wall{display:grid;gap:12px;grid-template-columns:1fr}
  .talk-card{
    background:#fff;border:1px solid rgba(194,54,123,.16);border-radius:14px;padding:13px 15px;
    box-shadow:0 4px 14px rgba(194,54,123,.06);
  }
  .talk-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
  .talk-head img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#eee}
  .talk-head b{font-size:14px}
  .talk-head small{font-size:11.5px;color:#9b8fa4;margin-left:auto}
  .talk-card p{font-size:14px;color:#463d50}

  /* ============ 二创社 ============ */
  .sec-recreate{background:#eef3ff}
  .sec-recreate .sec-kicker{color:var(--sky)}
  .rec-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .rec-card{
    background:#fff;border-radius:14px;padding:15px 16px;border:1px solid rgba(47,95,208,.14);
    display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  }
  .rec-num{
    grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:#e3ebff;color:#2f5fd0;font-weight:900;font-size:14px;
  }
  .rec-card b{font-size:15px}
  .rec-card span{font-size:13px;color:var(--soft)}

  /* ============ 隐私安全 ============ */
  .sec-privacy{background:#f0f7f2}
  .sec-privacy .sec-kicker{color:#1f7a45}
  .privacy-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .privacy-card{
    background:#fff;border-radius:14px;padding:15px 16px;border:1px solid rgba(31,122,69,.14);
  }
  .privacy-card b{display:block;font-size:14.5px;margin-bottom:4px;color:#14603a}
  .privacy-card span{font-size:13.5px;color:#4d5a55}

  /* ============ FAQ ============ */
  .sec-faq{background:#fffdf7}
  .sec-faq .sec-kicker{color:#a8752a}
  details.faq{
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:12px 15px;margin-bottom:10px;
  }
  details.faq summary{
    font-weight:800;font-size:15px;cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;gap:12px;align-items:center;
  }
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary::after{content:"＋";color:var(--orange);font-weight:900;font-size:17px}
  details.faq[open] summary::after{content:"－"}
  details.faq p{font-size:14px;color:var(--soft);margin-top:8px}

  /* ============ 下载收尾 ============ */
  .sec-get{background:linear-gradient(150deg,#2a1f38 0%,#482a4f 50%,#2a1f38 100%);color:#f6f1fb}
  .sec-get .sec-kicker{color:#ffbe8a}
  .sec-get h2{color:#fff}
  .sec-get .sec-head p{color:#cbbfd9}
  .steps{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:24px}
  .step{
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:12px;padding:13px 16px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  }
  .step b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#ff7a2f;color:#2a1f38;font-size:13px;font-weight:900}
  .step span{font-size:14px;color:#e4d9f0}
  .dl-grid.end .dl-btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#fff}
  .dl-grid.end .dl-btn:hover{border-color:#ffb37a}
  .dl-grid.end .dl-btn.main{
    background:linear-gradient(96deg,var(--orange),#ff5c8a 65%,#c2367b);
    border-color:transparent;color:#fff;
  }
  .end-note{font-size:12.5px;color:#b6a9c9;margin-top:12px}

  /* ============ FOOTER ============ */
  footer{background:#fffaf3;border-top:1px solid var(--line);padding:34px 0 26px}
  .foot-grid{display:grid;grid-template-columns:1fr;gap:22px}
  .foot-brand{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .foot-brand img{height:28px;width:auto;border-radius:6px}
  .foot-brand b{font-size:15px}
  .foot-about{font-size:12.5px;color:#837c8e;max-width:340px;line-height:1.75}
  .foot-nav h3{font-size:13px;font-weight:900;color:#4a4358;margin-bottom:8px}
  .foot-nav ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
  .foot-nav a{font-size:12.5px;color:#837c8e}
  .foot-nav a:hover{color:var(--orange-deep)}
  .foot-bottom{
    margin-top:24px;padding-top:14px;border-top:1px dashed var(--line);
    font-size:12px;color:#9a93a5;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  }
  .foot-bottom a{color:#9a93a5}
  .foot-bottom a:hover{color:var(--orange-deep)}
  .foot-bottom time{font-size:12px;color:#9a93a5}

  /* ============ FLOAT BAR ============ */
  .float-bar{
    position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:80;
    display:flex;align-items:center;gap:10px;
    background:rgba(35,29,44,.94);border:1px solid rgba(255,255,255,.16);
    border-radius:999px;padding:7px 8px 7px 7px;
    box-shadow:0 12px 30px rgba(20,15,28,.35);backdrop-filter:blur(8px);
    max-width:calc(100% - 24px);
  }
  .float-bar img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
  .float-bar .fb-txt{color:#f2ecfa;font-size:13px;font-weight:700;white-space:nowrap}
  .float-bar a.go{
    background:linear-gradient(96deg,var(--orange),#ff5c8a);color:#fff;font-weight:900;
    font-size:13.5px;padding:9px 16px;border-radius:999px;white-space:nowrap;
  }
  body{padding-bottom:76px}

  /* ============ 复制弹窗 ============ */
  .copy-mask{
    display:none;position:fixed;inset:0;z-index:120;background:rgba(20,15,28,.55);
    padding:20px;align-items:center;justify-content:center;
  }
  .copy-mask.show{display:flex}
  .copy-box{
    background:#fff;border-radius:16px;max-width:420px;width:100%;padding:22px 20px;
    box-shadow:0 24px 60px rgba(20,15,28,.4);text-align:center;
  }
  .copy-box p{font-size:14.5px;color:#3b3448;line-height:1.7}
  .copy-box .link{
    margin:14px 0;background:#fff4ea;border:1px dashed rgba(232,90,18,.5);border-radius:10px;
    padding:10px;font-size:12.5px;color:#8a4a17;word-break:break-all;
  }
  .copy-box button{
    border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;
    padding:11px 18px;border-radius:11px;
  }
  .copy-box .btn-copy{background:linear-gradient(96deg,var(--orange),#ff5c8a);color:#fff;width:100%;margin-bottom:8px}
  .copy-box .btn-close{background:#f1eef5;color:#4a4358;width:100%}

  /* ============ RESPONSIVE ============ */
  @media(min-width:768px){
    .dl-grid{grid-template-columns:repeat(4,1fr)}
    .dl-btn.main{grid-column:1/-1}
    .poster-strip{grid-auto-columns:150px}
    .poster-strip img{height:206px}
    .hot-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
    .hot-side{grid-template-columns:1fr}
    .hot-side figure:first-child{grid-column:auto}
    .hot-side figure:first-child img{aspect-ratio:3/4}
    .box-grid{grid-template-columns:1fr 1fr}
    .finish-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
    .finish-gallery{grid-template-columns:1fr}
    .finish-gallery figure:nth-child(3){display:none}
    .talk-wall{grid-template-columns:1fr 1fr}
    .rec-grid{grid-template-columns:1fr 1fr}
    .privacy-grid{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1.2fr 1fr 1fr}
    .new-posters{grid-template-columns:repeat(3,1fr)}
  }
  @media(min-width:1024px){
    .nav-desktop{display:flex}
    .menu-toggle{display:none}
    .nav-folder{display:none !important}
    .hero{padding:52px 0 60px}
    .hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
    .marquee{margin-top:0}
    .dl-grid{grid-template-columns:repeat(3,1fr)}
    .dl-btn.main{grid-column:1/-1}
    .poster-strip{margin-top:0}
    .hot-layout{grid-template-columns:320px minmax(0,1fr);gap:28px}
    .hot-list{grid-template-columns:1fr 1fr;gap:10px}
    .hot-list li{display:block}
    .hot-list .no{display:inline-block;margin-right:6px}
    .hot-list .tt{display:inline}
    .hot-list .ds{margin-top:2px}
    .new-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
    .new-posters{grid-template-columns:1fr;margin-top:0}
    .new-posters img{aspect-ratio:4/5}
    .box-grid{grid-template-columns:repeat(3,1fr)}
    .finish-gallery{grid-template-columns:1fr 1fr}
    .finish-gallery figure:nth-child(3){display:block}
    .talk-wall{grid-template-columns:repeat(3,1fr)}
    .rec-grid{grid-template-columns:repeat(3,1fr)}
    .privacy-grid{grid-template-columns:repeat(3,1fr)}
    .steps{grid-template-columns:repeat(4,1fr)}
    section{padding:64px 0}
    .float-bar .fb-txt{font-size:13.5px}
  }