/* ============================================================
   荐片 jiaanpian.cn —— 「灯下选片书房」主题
   纸白 #faf7f0 · 墨黑 #1c1822 · 荐片红 #e11d2a · 青瓷绿 #1e8e73
   索引卡 + 书签飘带 + 印章 + 细线格栅 + 索引卡抽屉 + 问答卡墙 + 观影手账 + 馆藏卡
   圆润语言 12-20px / 错落阴影 / 区块明暗交替
   ============================================================ */
:root{
  --ink:#1c1822;
  --ink2:#241f2b;
  --ink3:#332c3c;
  --paper:#faf7f0;
  --paper2:#f0ebdf;
  --red:#e11d2a;
  --red-d:#b3101d;
  --red-l:#ff4a54;
  --grn:#1e8e73;
  --grn-d:#15705b;
  --grn-l:#2fbf9c;
  --txt:#2a2530;
  --line:rgba(28,24,34,.14);
  --line-d:rgba(250,247,240,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:var(--txt);background:var(--paper);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:12px;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap;border:2px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-pri{background:var(--red);color:#fff;box-shadow:0 12px 26px rgba(225,29,42,.32)}
.btn-pri:hover{background:var(--red-l)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(28,24,34,.26)}
.btn-ink:hover{background:var(--ink3)}
.btn-line{background:transparent;color:var(--paper);border-color:rgba(250,247,240,.42)}
.btn-line:hover{border-color:var(--grn-l);color:var(--grn-l)}
.btn-lg{padding:13px 32px;font-size:16px}
.btn-xl{padding:17px 46px;font-size:19px}

/* ---------- 头部 ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(28,24,34,.97);backdrop-filter:blur(8px);border-bottom:3px solid var(--red)}
.hd-in{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand img{border-radius:12px}
.brand-t{display:flex;flex-direction:column;line-height:1.2}
.brand-t strong{font-size:20px;letter-spacing:1px}
.brand-t small{font-size:10px;letter-spacing:2px;color:rgba(250,247,240,.56)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 11px;font-size:14px;color:rgba(250,247,240,.78);border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
.nav a.on{color:var(--red-l);border-bottom-color:var(--red-l)}
.hd-cta{padding:9px 22px;font-size:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;margin-left:14px;padding:6px}
.burger span{width:24px;height:2px;background:#fff;transition:.25s}

/* ---------- 区块通用 ---------- */
.sec{padding:82px 0}
.sec-white{background:#fff}
.sec-paper{background:var(--paper)}
.sec-paper2{background:var(--paper2)}
.sec-ink{background:var(--ink);color:var(--paper);border-top:4px solid var(--red)}
.sec-ink#faq{border-top-color:var(--grn)}
.sec-h{max-width:760px;margin-bottom:42px}
.sec-ink .sec-h{margin-left:auto;margin-right:auto;text-align:center}
.kick{font-size:12px;letter-spacing:3px;font-weight:700;color:var(--red-d);margin-bottom:14px;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.sec-ink .kick{justify-content:center;color:var(--grn-l)}
.sec-h h2{font-size:32px;line-height:1.35;letter-spacing:.5px;color:var(--ink)}
.sec-ink .sec-h h2{color:#fff}
.sec-p{margin-top:12px;color:#6c6670;font-size:15.5px}
.sec-ink .sec-p{color:rgba(250,247,240,.66)}

/* ---------- 英雄区 · 灯下选片书房 ---------- */
.hero{background:radial-gradient(700px 460px at 88% 6%,rgba(225,29,42,.10),transparent 62%),radial-gradient(560px 420px at 2% 94%,rgba(30,142,115,.10),transparent 58%),var(--paper);padding:72px 0;position:relative;overflow:hidden;border-bottom:4px solid var(--red)}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;position:relative}
.hero h1{font-size:70px;line-height:1.06;letter-spacing:5px;color:var(--ink);margin:18px 0 16px;position:relative;display:inline-block}
.hero h1::after{content:"";position:absolute;left:0;bottom:-6px;width:68px;height:5px;background:linear-gradient(90deg,var(--red),var(--grn));border-radius:3px}
.hero-slogan{font-size:23px;font-weight:700;color:var(--ink);margin-bottom:20px}
.hero-slogan i{font-style:normal;color:var(--red)}
.kick-lab{background:var(--red);color:#fff;font-style:normal;font-size:11px;letter-spacing:2px;padding:3px 10px;border-radius:6px}
.lead{color:#5b5561;font-size:15.5px;max-width:560px}
.hero-acts{display:flex;gap:16px;margin:28px 0 20px;flex-wrap:wrap}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.hero-tags li{font-size:13px;padding:4px 13px;border:1px solid rgba(30,142,115,.5);border-radius:20px;color:var(--grn-d)}
.hero-note{font-size:13px;color:#8b8590;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(225,29,42,.18);flex:0 0 auto}

/* 选片书房视觉 · 索引卡叠放 */
.hero-r{position:relative}
.stack{position:relative;height:486px}
.stack-card{position:absolute;overflow:hidden;background:var(--paper);border-radius:10px}
.sc-main{left:9%;top:22px;width:242px;height:424px;border:3px solid var(--red);box-shadow:0 28px 56px rgba(28,24,34,.30);z-index:2}
.sc-main img{width:100%;height:100%;object-fit:cover}
.sc-mini{right:2%;bottom:14px;width:152px;height:268px;border:3px solid var(--grn);border-radius:12px;transform:rotate(6deg);box-shadow:0 20px 42px rgba(28,24,34,.26);z-index:3}
.sc-mini img{width:100%;height:100%;object-fit:cover}
.stack-ribbon{position:absolute;left:4%;top:-8px;width:26px;height:126px;background:var(--red);z-index:4;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.stack-stamp{position:absolute;right:15%;top:4px;width:80px;height:80px;border:3px double var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:36px;font-weight:800;transform:rotate(-12deg);z-index:4;background:rgba(250,247,240,.72)}
.stack-tab{position:absolute;left:4%;bottom:30px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:7px 13px;border:1px solid var(--line);border-left:4px solid var(--red);z-index:4;box-shadow:0 12px 26px rgba(28,24,34,.16)}
.stack-line{position:absolute;left:2%;bottom:2px;width:62%;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);z-index:1}
.chip{position:absolute;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 14px 30px rgba(28,24,34,.2);z-index:5}
.chip b{color:var(--red-d)}
.chip-a{left:0;bottom:104px}
.chip-b{right:0;bottom:6px;background:var(--grn);color:#fff}

/* ---------- 片库频道 ---------- */
.chans{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;grid-auto-rows:minmax(150px,auto);gap:1px;background:var(--ink);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ch-tile{background:#fff;padding:22px 20px;position:relative;transition:background .2s}
.ch-tile:hover{background:#f7f4ec}
.ch-tile b{display:block;font-size:15px;margin-bottom:8px;letter-spacing:.5px;color:var(--ink)}
.ch-tile p{font-size:13.6px;color:#5b5561;line-height:1.7}
.ch-no{position:absolute;top:12px;right:16px;font-size:28px;font-weight:800;color:rgba(28,24,34,.08);letter-spacing:-1px}
.ch-big{grid-row:span 2;background:linear-gradient(160deg,#fff 0%,#f4efdf 100%);padding:28px 24px}
.ch-big b{font-size:20px}
.ch-big p{font-size:14.2px;color:#514b56;max-width:94%}
.ch-big .ch-no{font-size:40px}
.ch-fig{display:inline-block;margin-top:16px;font-size:12px;font-weight:700;letter-spacing:1px;color:#fff;background:var(--red);padding:4px 12px;border-radius:6px}
.ch-grn{background:linear-gradient(160deg,var(--grn) 0%,var(--grn-d) 100%)}
.ch-grn b,.ch-grn p{color:#fff}
.ch-grn .ch-no{color:rgba(255,255,255,.26)}

/* ---------- 本周热榜 ---------- */
.rk{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
.rk-top{position:relative;grid-row:span 2;display:grid;grid-template-columns:150px 1fr;gap:20px;padding:24px;border:2px solid var(--red);border-radius:14px;background:var(--ink2);box-shadow:0 22px 50px rgba(0,0,0,.42)}
.no1{position:absolute;top:-13px;left:20px;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:1px;padding:5px 13px;border-radius:8px}
.rk-poster{position:relative;border-radius:10px;overflow:hidden;align-self:start;border:1px solid var(--line-d)}
.rk-poster img{width:100%}
.stamp{position:absolute;bottom:8px;right:8px;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--grn);padding:3px 9px;border-radius:6px}
.rk-info h3{font-size:20px;color:#fff;margin-bottom:6px}
.rk-info h3 small{font-size:12px;font-weight:400;color:var(--grn-l);margin-left:8px}
.rk-meta{font-size:13px;color:rgba(250,247,240,.6);margin-bottom:10px}
.rk-score{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.rk-score b{font-size:34px;color:var(--red-l);line-height:1}
.rk-score span{font-size:12.5px;color:rgba(250,247,240,.6)}
.rk-desc{font-size:14px;color:rgba(250,247,240,.78)}
.rk-tag{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--grn-l);border-left:3px solid var(--grn-l);padding-left:10px}
.rk-shot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border-radius:14px;background:var(--ink2);border:1px solid var(--line-d)}
.ph-shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(250,247,240,.16)}
.rk-shot .ph-shot{width:168px}
.ph-shot img{width:100%}
.rk-shot p{font-size:12.5px;color:rgba(250,247,240,.6)}
.rk-list{border-radius:14px;background:var(--ink2);border:1px solid var(--line-d);padding:8px 20px}
.rk-list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line-d)}
.rk-list li:last-child{border-bottom:0}
.rl-no{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--grn-l);border:1px solid rgba(47,191,156,.5);border-radius:8px}
.rk-list li div{flex:1;min-width:0}
.rk-list li b{display:block;font-size:14px;color:#fff}
.rk-list li em{font-style:normal;font-size:12px;color:rgba(250,247,240,.55)}
.rk-list li strong{font-size:17px;color:var(--red-l)}

/* ---------- 数字绸带 ---------- */
.ribbon{background:var(--red);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.ribbon-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.22);padding:0}
.rb-i{background:var(--red);padding:30px 18px;text-align:center;color:#fff}
.rb-i b{font-size:40px;font-weight:800;line-height:1;letter-spacing:-1px}
.rb-i i{font-style:normal;font-size:16px;font-weight:700;margin-left:2px}
.rb-i span{display:block;margin-top:10px;font-size:13px;color:rgba(255,255,255,.86)}

/* ---------- 内容分区 ---------- */
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.zone{background:#fff;border-radius:14px;padding:24px 24px 26px;border:1px solid var(--line);border-left:5px solid var(--red);transition:transform .2s,box-shadow .2s}
.zone:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,24,34,.12)}
.zone.z2{border-left-color:var(--grn)}
.zone.z3{border-left-color:var(--ink)}
.zone.z4{border-left-color:var(--grn-d)}
.z-ico{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:var(--paper2);color:var(--ink);font-size:19px;font-weight:800;border-radius:10px;margin-bottom:12px}
.zone h3{font-size:17px;color:var(--ink);margin-bottom:8px;letter-spacing:.5px}
.zone p{font-size:13.8px;color:#5b5561}
.z-new{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:center;margin-top:20px;background:var(--ink);color:var(--paper);border-radius:16px;padding:30px 30px;border-left:5px solid var(--grn);box-shadow:0 22px 48px rgba(0,0,0,.3)}
.zn-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--grn-l);border:1px solid rgba(47,191,156,.5);border-radius:20px;padding:3px 12px;margin-bottom:14px}
.z-new h3{font-size:23px;color:#fff;margin-bottom:12px}
.z-new p{font-size:14.2px;color:rgba(250,247,240,.76);margin-bottom:18px}
.zn-r{position:relative}
.zn-r img{width:100%;border-radius:12px;border:2px solid var(--grn);transform:rotate(-2deg)}

/* ---------- 精选专题 ---------- */
.tps{display:grid;grid-template-columns:1.45fr .55fr;gap:26px;align-items:start}
.tps-l{display:flex;flex-direction:column;gap:18px}
.tp-i{display:grid;grid-template-columns:130px 1fr;gap:18px;background:#fff;border-radius:14px;padding:18px;border:1px solid var(--line);transition:box-shadow .2s,transform .2s}
.tp-i:hover{box-shadow:0 16px 36px rgba(28,24,34,.12);transform:translateY(-3px)}
.tp-img{border-radius:10px;overflow:hidden;align-self:start}
.tp-img img{width:100%}
.tp-no{display:inline-block;font-size:11px;font-weight:800;letter-spacing:2px;color:var(--red-d);margin-bottom:6px}
.tp-t h3{font-size:17px;color:var(--ink);margin-bottom:8px}
.tp-t p{font-size:13.8px;color:#5b5561}
.tps-r{position:sticky;top:88px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--paper2);border-radius:14px;padding:18px;border:1px solid var(--line)}
.tps-r .ph-shot{width:190px;border:1px solid var(--line);border-radius:12px}
.tps-cap{font-size:12.5px;color:#8b8590;text-align:center}

/* ---------- 应用画面长卷 ---------- */
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rl-f{background:var(--ink2);border:1px solid var(--line-d);border-radius:14px;overflow:hidden}
.rl-f figcaption{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:3px solid var(--red)}
.rl-f:nth-child(even) figcaption{border-bottom-color:var(--grn)}
.rl-f figcaption b{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--grn-l)}
.rl-f figcaption span{font-size:12px;color:rgba(250,247,240,.7)}
.rl-f img{width:100%}

/* ---------- 功能四格 ---------- */
.funcs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fn-i{background:#fff;border-radius:14px;padding:24px 22px 26px;border:1px solid var(--line);border-top:4px solid var(--red);transition:transform .2s,box-shadow .2s}
.fn-i:nth-child(even){border-top-color:var(--grn)}
.fn-i:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,24,34,.12)}
.fn-no{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.5px;color:#a49eaa;margin-bottom:12px}
.fn-i h3{font-size:17px;color:var(--ink);margin-bottom:9px}
.fn-i p{font-size:13.8px;color:#5b5561}

/* ---------- 上手四步 · 索引卡抽屉（GUIDE 范式 K） ---------- */
.catdrawer{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 22px 48px rgba(28,24,34,.12)}
.cd-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;background:var(--ink);color:var(--paper);flex-wrap:wrap}
.cd-spine{font-size:14px;font-weight:700;letter-spacing:1px;border-left:4px solid var(--red);padding-left:10px}
.cd-hint{font-size:12px;color:rgba(250,247,240,.6)}
.cd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.cd-card{background:#fff;padding:22px 18px;cursor:pointer;position:relative;transition:background .25s,border-color .25s;border-top:3px solid transparent}
.cd-card:hover{background:#f7f4ec}
.cd-card.on{background:linear-gradient(180deg,#fff 0%,#f2ecda 100%);border-top-color:var(--red)}
.cd-card:focus-visible{outline:2px solid var(--grn);outline-offset:-2px}
.cd-tab{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--paper2);color:var(--ink);font-weight:800;border-radius:8px;font-size:15px;margin-bottom:12px;transition:background .25s,color .25s}
.cd-card.on .cd-tab{background:var(--red);color:#fff}
.cd-card h3{font-size:16px;color:var(--ink);margin-bottom:8px;letter-spacing:.5px}
.cd-brief{font-size:13.4px;color:#5b5561;line-height:1.7}
.cd-more{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease;border-top:1px dashed var(--line)}
.cd-card.on .cd-more{max-height:280px;opacity:1;margin-top:12px}
.cd-more p{font-size:13px;color:#4a4550;line-height:1.75;padding-top:10px}
.cd-foot{margin:0;padding:13px 22px;background:var(--paper2);color:var(--red-d);font-size:12.5px;font-weight:700;letter-spacing:1px;text-align:center;border-top:1px solid var(--line)}

/* ---------- 常见疑问 · 问答卡墙（FAQ 范式 L） ---------- */
.qwall{columns:2;column-gap:20px}
.qw-i{break-inside:avoid;background:var(--paper);border:1px solid rgba(0,0,0,.05);border-radius:12px;padding:20px 20px 24px;margin:0 0 20px;position:relative;box-shadow:0 16px 34px rgba(0,0,0,.34);transition:transform .2s}
.qw-i:hover{transform:translateY(-4px)}
.qw-bar{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px dashed var(--line);margin-bottom:12px}
.qw-no{flex:0 0 auto;background:var(--red);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:6px;letter-spacing:1px}
.qw-bar b{font-size:15.5px;color:var(--ink)}
.qw-i p{font-size:13.8px;color:#4a4550;line-height:1.78}
.qw-stamp{position:absolute;right:16px;bottom:14px;font-size:11px;font-weight:800;color:var(--grn-d);border:1.5px solid var(--grn);border-radius:20px;padding:2px 9px;transform:rotate(-6deg);background:rgba(30,142,115,.08)}

/* ---------- 观众留言 · 观影手账（NOTES 范式 M） ---------- */
.journal{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 50px rgba(28,24,34,.13)}
.journal::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--red) 0 10px,transparent 10px 20px);transform:translateX(-1px);z-index:1}
.jr-i{padding:24px 26px;border-bottom:1px dashed var(--line);position:relative}
.jr-i:nth-child(odd){border-right:1px dashed var(--line)}
.jr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.jr-date{font-size:12px;color:#8b8590;letter-spacing:.5px}
.jr-star{font-style:normal;color:var(--red);font-size:13px;letter-spacing:1px}
.jr-i h4{font-size:15.5px;color:var(--ink);margin-bottom:6px}
.jr-i p{font-size:13.6px;color:#4a4550;line-height:1.78}
.journal-note{margin-top:16px;text-align:center;font-size:12.5px;color:#8b8590}

/* ---------- 下载 · 馆藏卡（GET 范式 N） ---------- */
.sec-get{background:var(--ink);color:var(--paper);padding:82px 0;border-top:4px solid var(--red)}
.get-h{max-width:760px;margin:0 auto 42px;text-align:center}
.get-h .kick{justify-content:center;color:var(--grn-l)}
.get-h h2{font-size:32px;line-height:1.35;color:#fff}
.get-p{margin-top:12px;color:rgba(250,247,240,.66);font-size:15.5px}
.libcard{position:relative;max-width:730px;margin:0 auto;background:var(--paper);border-radius:16px;padding:26px 26px 24px;border-top:6px solid var(--red);box-shadow:0 30px 66px rgba(0,0,0,.5)}
.lc-stamp{position:absolute;right:20px;top:20px;color:var(--red);border:3px double var(--red);border-radius:10px;padding:7px 11px;font-size:14px;font-weight:800;letter-spacing:2px;transform:rotate(-10deg);background:rgba(225,29,42,.06);z-index:2}
.lc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:18px;flex-wrap:wrap}
.lc-lab{font-size:13px;font-weight:800;letter-spacing:3px;color:var(--ink);text-transform:uppercase}
.lc-no{font-size:12px;color:#8b8590;letter-spacing:1px}
.lc-body{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start}
.lc-l{border-right:1px dashed var(--line);padding-right:22px}
.lc-logo{border-radius:12px;border:1px solid var(--line);margin-bottom:12px}
.lc-l h3{font-size:22px;color:var(--ink);margin-bottom:6px;letter-spacing:1px}
.lc-s{font-size:13.2px;color:#5b5561;line-height:1.7;margin-bottom:12px}
.lc-tags{display:flex;flex-wrap:wrap;gap:8px}
.lc-tags span{font-size:12px;color:var(--grn-d);border:1px solid var(--grn);border-radius:20px;padding:3px 11px}
.lc-list li{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.6px;color:#4a4550;line-height:1.7}
.lc-list li:last-child{border-bottom:0}
.lc-list li span{flex:0 0 auto;height:fit-content;font-size:12px;font-weight:800;color:#fff;background:var(--ink);border-radius:6px;padding:3px 9px;letter-spacing:1px}
.lc-bar{height:34px;margin:20px 0 18px;border-radius:3px;opacity:.86;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 7px,transparent 7px 12px,var(--ink) 12px 13px,transparent 13px 18px)}
.lc-foot{text-align:center;border-top:1px dashed var(--line);padding-top:20px}
.lc-note{margin-top:12px;font-size:12.5px;color:#8b8590}
.get-upd{margin-top:18px;text-align:center;font-size:12px;color:rgba(250,247,240,.5)}

/* ---------- 页脚 ---------- */
.ft{background:var(--ink);color:var(--paper);border-top:4px solid var(--red);padding-top:52px}
.ft-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px}
.ft-brand .brand{margin-bottom:14px}
.ft-brand p{font-size:13.4px;color:rgba(250,247,240,.66);line-height:1.8;max-width:420px}
.ft-col h4{font-size:14px;color:#fff;margin-bottom:14px;letter-spacing:1px}
.ft-col ul li{margin-bottom:9px}
.ft-col ul a{font-size:13.4px;color:rgba(250,247,240,.66)}
.ft-col ul a:hover{color:var(--grn-l)}
.ft-b{border-top:1px solid var(--line-d);padding:16px 0}
.ft-icp{font-size:12.5px;color:rgba(250,247,240,.6);text-align:center;margin-bottom:4px}
.ft-copy{font-size:12.5px;color:rgba(250,247,240,.44);text-align:center}

/* ---------- 悬浮投诉 / 返回顶部 ---------- */
.backtop{position:fixed;right:24px;bottom:24px;z-index:70;width:44px;height:44px;border-radius:12px;border:0;background:var(--ink3);color:var(--grn-l);font-size:19px;box-shadow:0 10px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .15s}
.backtop.show{opacity:1;pointer-events:auto}
.backtop:hover{transform:translateY(-2px)}

/* ---------- 入场动画 ---------- */
.io{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.io.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .hero-in{grid-template-columns:1fr;gap:40px}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;background:rgba(28,24,34,.99);padding:10px 24px 18px;gap:2px;margin:0;border-bottom:3px solid var(--red);z-index:65}
  .nav.open a{padding:11px 4px;border-bottom:1px solid var(--line-d)}
  .burger{display:flex}
  .rk{grid-template-columns:1fr}
  .rk-top{grid-row:auto}
  .tps{grid-template-columns:1fr}
  .tps-r{position:static;flex-direction:row;justify-content:center}
  .funcs{grid-template-columns:repeat(2,1fr)}
  .cd-row{grid-template-columns:repeat(2,1fr)}
  .lc-body{grid-template-columns:1fr}
  .lc-l{border-right:0;padding-right:0;border-bottom:1px dashed var(--line);padding-bottom:16px}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .sec{padding:60px 0}
  .hero{padding:52px 0}
  .hero h1{font-size:52px}
  .hero-slogan{font-size:20px}
  .stack{height:430px}
  .sc-main{width:210px;height:372px}
  .sc-mini{width:132px;height:232px}
  .chip-a{bottom:88px}
  .chans{grid-template-columns:1fr 1fr}
  .ch-big{grid-column:span 2;grid-row:auto}
  .sec-h h2{font-size:25px}
  .ribbon-in{grid-template-columns:1fr 1fr}
  .zones{grid-template-columns:1fr}
  .z-new{grid-template-columns:1fr;padding:24px}
  .reel{grid-template-columns:1fr 1fr}
  .qwall{columns:1}
  .journal{grid-template-columns:1fr}
  .journal::before{display:none}
  .jr-i:nth-child(odd){border-right:0}
  .tp-i{grid-template-columns:110px 1fr;gap:14px}
  .lc-note{font-size:12px}
  .backtop{right:18px;bottom:24px;width:40px;height:40px}
}
@media(max-width:420px){
  .chans{grid-template-columns:1fr}
  .ch-big{grid-column:auto}
  .ribbon-in{grid-template-columns:1fr}
  .reel{grid-template-columns:1fr}
  .funcs{grid-template-columns:1fr}
  .cd-row{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .hero-acts .btn{width:100%}
}