:root{
    --pink:#ff5f9e;
    --pink-soft:#ffe3ee;
    --yellow:#ffd23f;
    --yellow-soft:#fff6d1;
    --blue:#2f6dff;
    --blue-soft:#e2ecff;
    --ink:#151321;
    --ink-soft:#4a4658;
    --paper:#fffdfa;
    --line:#1a1726;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3{margin:0;line-height:1.25;letter-spacing:.5px;}
  p{margin:0 0 12px;color:var(--ink-soft);}

  /* ---------- 顶部导航 ---------- */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:rgba(255,253,250,.94);
    backdrop-filter:blur(8px);
    border-bottom:3px solid var(--line);
  }
  .header-top{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:10px 16px;flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{height:34px;width:auto;border-radius:8px;border:2px solid var(--line);background:#fff;}
  .brand-name{font-size:19px;font-weight:800;letter-spacing:1px;}
  .brand-tag{
    font-size:11px;background:var(--pink);color:#fff;
    padding:2px 7px;border-radius:20px;font-weight:700;
  }
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:36px;border-radius:10px;border:2px solid var(--line);
    background:var(--yellow);font-size:16px;font-weight:800;cursor:pointer;
  }
  .main-nav{
    width:100%;max-height:0;overflow:hidden;
    transition:max-height .32s ease;
  }
  .main-nav.open{max-height:520px;}
  .nav-list{
    list-style:none;margin:0;padding:6px 12px 14px;
    display:flex;flex-wrap:wrap;gap:8px;
  }
  .nav-list a{
    display:inline-block;padding:6px 12px;border-radius:20px;
    font-size:13px;font-weight:700;border:2px solid var(--line);
    background:#fff;transition:transform .18s ease,background .18s ease;
  }
  .nav-list a:hover{transform:translateY(-2px);background:var(--pink-soft);}

  /* ---------- 首屏海报墙 ---------- */
  .hero{
    position:relative;
    padding:26px 16px 34px;
    background:
      radial-gradient(circle at 12% 18%, var(--pink-soft) 0 22%, transparent 22.5%),
      radial-gradient(circle at 88% 10%, var(--yellow-soft) 0 18%, transparent 18.5%),
      linear-gradient(150deg,#fff7fb 0%,#f2f6ff 55%,#fffbe8 100%);
    border-bottom:3px solid var(--line);
    overflow:hidden;
  }
  .geo-sq,.geo-tri,.geo-circ{position:absolute;pointer-events:none;}
  .geo-sq{width:90px;height:90px;background:var(--pink);opacity:.18;top:40px;right:-20px;transform:rotate(18deg);}
  .geo-tri{width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:110px solid var(--blue);opacity:.14;bottom:-30px;left:-30px;}
  .geo-circ{width:130px;height:130px;border-radius:50%;background:var(--yellow);opacity:.3;top:-40px;left:-40px;}
  .hero-inner{position:relative;max-width:1180px;margin:0 auto;}
  .hero-grid{display:grid;gap:22px;}
  .hero-title{
    font-size:30px;font-weight:900;
    background:linear-gradient(92deg,var(--pink) 0%,var(--blue) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-wrap:balance;
  }
  .hero-lead{font-size:15px;color:var(--ink-soft);margin-top:10px;}
  .hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px;}
  .chip{
    font-size:12px;font-weight:800;padding:5px 11px;border-radius:20px;
    border:2px solid var(--line);background:#fff;
  }
  .chip.p{background:var(--pink-soft);}
  .chip.y{background:var(--yellow-soft);}
  .chip.b{background:var(--blue-soft);}
  .download-row{display:flex;flex-wrap:wrap;gap:12px;}
  .btn-dl{
    display:inline-flex;align-items:center;gap:9px;
    padding:12px 22px;border-radius:14px;font-size:15px;font-weight:800;
    border:3px solid var(--line);cursor:pointer;
    box-shadow:4px 4px 0 var(--line);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  .btn-dl:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line);}
  .btn-android{background:var(--yellow);color:var(--ink);}
  .btn-ios{background:var(--pink);color:#fff;}
  .btn-ico{font-size:17px;line-height:1;}

  .hero-collage{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    border:3px solid var(--line);border-radius:16px;background:#fff;
    padding:8px;transform:rotate(-1deg);
    box-shadow:8px 8px 0 rgba(47,109,255,.25);
  }
  .hero-collage img{
    width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;
    border:2px solid var(--line);
  }
  .checker{
    height:22px;border-radius:6px;margin-top:10px;
    background-image:
      linear-gradient(45deg,#16131f 25%,transparent 25% 75%,#16131f 75%),
      linear-gradient(45deg,#16131f 25%,transparent 25% 75%,#16131f 75%);
    background-size:22px 22px;
    background-position:0 0,11px 11px;
    background-color:#fff;
    border:2px solid var(--line);
  }

  /* ---------- 通用区块 ---------- */
  .section{padding:38px 16px;position:relative;}
  .section-inner{max-width:1180px;margin:0 auto;}
  .sec-head{margin-bottom:20px;}
  .sec-kicker{
    display:inline-block;font-size:12px;font-weight:900;letter-spacing:2px;
    color:var(--blue);text-transform:uppercase;margin-bottom:6px;
  }
  .sec-title{font-size:23px;font-weight:900;}
  .sec-desc{font-size:14px;margin-top:8px;max-width:640px;}
  .stripe{height:10px;border-top:3px solid var(--line);border-bottom:3px solid var(--line);background:repeating-linear-gradient(90deg,var(--pink) 0 24px,var(--yellow) 24px 48px,var(--blue) 48px 72px);}

  /* 卡片网格 */
  .card-grid{display:grid;gap:16px;}
  .drama-card{
    background:#fff;border:3px solid var(--line);border-radius:14px;
    overflow:hidden;box-shadow:5px 5px 0 rgba(21,19,33,.12);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .drama-card:hover{transform:translateY(-4px);box-shadow:6px 9px 0 rgba(255,95,158,.32);}
  .drama-card .thumb{position:relative;}
  .drama-card .thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .tag-flag{
    position:absolute;top:8px;left:8px;font-size:11px;font-weight:900;
    background:var(--yellow);border:2px solid var(--line);border-radius:6px;
    padding:2px 7px;
  }
  .drama-body{padding:12px 12px 14px;}
  .drama-body h3{font-size:15px;font-weight:900;margin-bottom:5px;}
  .drama-body p{font-size:12.5px;margin:0;line-height:1.55;}

  .split{display:grid;gap:20px;align-items:center;}

  /* 教程步骤 */
  .steps{display:grid;gap:14px;counter-reset:step;}
  .step{
    background:#fff;border:3px solid var(--line);border-radius:14px;
    padding:16px 16px 16px 62px;position:relative;
    box-shadow:4px 4px 0 var(--blue-soft);
  }
  .step::before{
    counter-increment:step;content:counter(step);
    position:absolute;left:14px;top:15px;
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:16px;color:#fff;
    background:var(--blue);border:3px solid var(--line);
  }
  .step h3{font-size:15.5px;font-weight:900;margin-bottom:4px;}
  .step p{font-size:13.5px;margin:0;}

  /* 滚动评论特效 */
  .marquee-wrap{
    border-top:3px solid var(--line);border-bottom:3px solid var(--line);
    background:var(--ink);padding:14px 0;overflow:hidden;
  }
  .marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite;}
  .marquee-track.rev{animation-direction:reverse;margin-top:10px;}
  .bubble{
    flex:0 0 auto;margin:0 7px;padding:8px 15px;border-radius:20px;
    font-size:13px;font-weight:700;white-space:nowrap;
    border:2px solid #fff;
  }
  .bubble.a{background:var(--pink);color:#fff;}
  .bubble.b{background:var(--yellow);color:var(--ink);}
  .bubble.c{background:var(--blue);color:#fff;}
  .bubble.d{background:#fff;color:var(--ink);}
  @keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* 排行榜 */
  .rank-list{display:grid;gap:12px;list-style:none;margin:0;padding:0;}
  .rank-item{
    display:flex;align-items:center;gap:12px;background:#fff;
    border:3px solid var(--line);border-radius:14px;padding:10px 14px;
  }
  .rank-no{
    flex:0 0 auto;width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:15px;border:3px solid var(--line);
    background:var(--yellow-soft);
  }
  .rank-item:nth-child(1) .rank-no{background:var(--pink);color:#fff;}
  .rank-item:nth-child(2) .rank-no{background:var(--blue);color:#fff;}
  .rank-item:nth-child(3) .rank-no{background:var(--yellow);}
  .rank-main{flex:1;min-width:0;}
  .rank-main strong{display:block;font-size:14.5px;font-weight:900;}
  .rank-main span{font-size:12.5px;color:var(--ink-soft);}
  .rank-bar{height:8px;border-radius:6px;background:#eceaf3;margin-top:6px;overflow:hidden;}
  .rank-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--blue));}

  /* 问答 */
  .qa-list{display:grid;gap:12px;}
  details{
    background:#fff;border:3px solid var(--line);border-radius:14px;
    padding:14px 16px;
  }
  details[open]{background:var(--yellow-soft);}
  summary{
    cursor:pointer;font-weight:900;font-size:14.5px;list-style:none;
    display:flex;justify-content:space-between;gap:10px;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+";font-weight:900;color:var(--pink);}
  details[open] summary::after{content:"–";}
  details p{font-size:13.5px;margin:10px 0 0;}

  /* 图片墙 */
  .gallery{
    display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  }
  .gallery figure{margin:0;border:3px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
  .gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;}
  .gallery figcaption{font-size:12px;font-weight:800;padding:6px 8px;background:var(--pink-soft);}

  /* 提示框 */
  .copy-modal{
    position:fixed;inset:0;z-index:120;display:none;
    background:rgba(21,19,33,.55);
    align-items:center;justify-content:center;padding:20px;
  }
  .copy-modal.show{display:flex;}
  .copy-box{
    width:100%;max-width:380px;background:#fff;border:3px solid var(--line);
    border-radius:16px;padding:20px;box-shadow:8px 8px 0 var(--pink);
  }
  .copy-box h3{font-size:16px;font-weight:900;margin-bottom:10px;}
  .copy-box p{font-size:13px;margin-bottom:12px;}
  .copy-field{
    display:flex;gap:8px;border:2px dashed var(--line);border-radius:10px;
    padding:8px;background:var(--yellow-soft);word-break:break-all;
    font-size:12.5px;font-weight:700;
  }
  .copy-actions{display:flex;gap:10px;margin-top:14px;}
  .copy-actions button{
    flex:1;padding:10px;border-radius:10px;border:3px solid var(--line);
    font-weight:900;font-size:14px;cursor:pointer;background:var(--yellow);
  }
  .copy-actions button.ghost{background:#fff;}

  /* 页脚 */
  .site-footer{
    border-top:3px solid var(--line);
    background:var(--ink);color:#cfcadb;
    padding:26px 16px 30px;font-size:12px;
  }
  .footer-inner{max-width:1180px;margin:0 auto;display:grid;gap:12px;}
  .footer-inner p{margin:0;color:#b3adc4;font-size:12px;}
  .footer-links{display:flex;flex-wrap:wrap;gap:6px 14px;}
  .footer-links span{font-size:12px;color:#9c96ae;}
  .site-footer a{color:var(--yellow);}
  .update-time{font-size:11.5px;color:#9c96ae;}

  /* ---------- 断点 ---------- */
  @media (min-width:768px){
    .header-top{padding:12px 26px;}
    .nav-toggle{display:none;}
    .main-nav{max-height:none;overflow:visible;width:auto;flex:1;}
    .nav-list{padding:0;justify-content:flex-end;gap:8px;}
    .nav-list a{font-size:13px;padding:6px 13px;}
    .hero{padding:40px 26px 46px;}
    .hero-title{font-size:40px;}
    .hero-lead{font-size:16.5px;}
    .card-grid{grid-template-columns:repeat(2,1fr);}
    .gallery{grid-template-columns:repeat(4,1fr);}
    .section{padding:52px 26px;}
    .sec-title{font-size:28px;}
    .steps{grid-template-columns:repeat(2,1fr);}
  }
  @media (min-width:1024px){
    .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:36px;}
    .hero-title{font-size:46px;}
    .hero-collage{grid-template-columns:repeat(3,1fr);}
    .card-grid{grid-template-columns:repeat(4,1fr);}
    .split{grid-template-columns:1fr 1fr;gap:34px;}
    .section{padding:64px 26px;}
    .sec-title{font-size:32px;}
    .rank-list{grid-template-columns:repeat(2,1fr);}
    .qa-list{grid-template-columns:repeat(2,1fr);}
  }