/* =========================================================
   未登录版门户首页 · 新模板（米色·棕金）专属组件样式
   —— 仅门户首页（index.html）引入；色系全部走 style.css 的 --brand 系变量，
      因此「色系切换 / 读者选书界面继承」由同一套变量自动完成，无需在此写死颜色。
   类名沿用模板（01-未登录版-门户首页.html），便于与原始设计稿一一对应。
   ========================================================= */

/* ---------- Hero（首屏主视觉） ---------- */
.hero{position:relative;height:360px;background:linear-gradient(135deg,#f5efe3 0%,#fff8ec 50%,#e8e0d0 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero .cover{position:absolute;box-shadow:8px 10px 26px rgba(0,0,0,.25);border-radius:3px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-align:center;padding:10px;font-size:13px;line-height:1.25;}
.hero .cover.c1{left:13%;top:40px;width:150px;height:200px;transform:rotate(-4deg);background:linear-gradient(160deg,#6b8b75,#3f5d4f);}
.hero .cover.c2{right:9%;bottom:-16px;width:138px;height:184px;transform:rotate(6deg);background:linear-gradient(160deg,#2a5d8f,#163d66);}
.hero .cover.c3{right:16%;top:34px;width:118px;height:158px;transform:rotate(-5deg);background:linear-gradient(160deg,#c9a53f,#a8884e);color:#3b2e1e;}
.hero .tblock{text-align:center;position:relative;z-index:2;}
.hero .tblock .mt{font-family:var(--font-serif);font-size:66px;color:#3b2e1e;font-weight:700;letter-spacing:8px;}
.hero .tblock .st{color:var(--brand-d);font-size:21px;margin-top:12px;letter-spacing:2px;}
.hero .tblock .dots{display:flex;gap:10px;justify-content:center;margin-top:26px;}
.hero .dot{width:12px;height:12px;border-radius:50%;background:#d0c8b8;cursor:pointer;transition:.2s;}
.hero .dot.active{background:var(--brand);transform:scale(1.2);}
.hero .vtext{position:absolute;right:6%;top:46px;writing-mode:vertical-rl;font-size:15px;color:var(--brand-d);letter-spacing:5px;line-height:2.4;text-align:left;z-index:1;}

/* ---------- 统计 / KPI ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
.stat-ic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--brand-l);color:var(--brand-d);flex-shrink:0;}
.stat-ic .ic{width:26px;height:26px;}
.stat-n{font-size:40px;font-weight:800;color:var(--dark);line-height:1;}
.stat-n small{font-size:18px;color:var(--ink-3);margin-left:3px;font-weight:600;}
.stat-l{font-size:15px;color:var(--ink-3);margin-top:6px;}

/* ---------- 精选专题（新模板：色条 + 叠放书封） ---------- */
.gtopic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.gtopic{position:relative;display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px 18px 26px;cursor:pointer;transition:.2s;overflow:hidden;}
.gtopic::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ac);}
.gtopic:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:transparent;}
.gtopic .gt-main{flex:1;min-width:0;}
.gtopic .gt-ttl{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.4;}
.gtopic .gt-desc{font-size:13px;color:var(--ink-3);line-height:1.5;padding-right:8px;}
.gtopic .gt-covs{display:flex;flex-shrink:0;}
.gtopic .gt-covs .bc{width:44px;height:62px;font-size:0;border-radius:4px;box-shadow:2px 3px 10px rgba(0,0,0,.18);margin-left:-14px;}
.gtopic .gt-covs .bc:first-child{margin-left:0;}
.gtopic .gt-more{color:var(--brand-d);font-size:13px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:3px;flex-shrink:0;}
.gtopic .gt-more .ic{width:14px;height:14px;}

/* ---------- 书封占位（渐变，无封面图时回落） ---------- */
.bc{width:100%;aspect-ratio:3/4;border-radius:4px;box-shadow:3px 4px 12px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;text-align:center;padding:8px;line-height:1.3;overflow:hidden;}
.bc1{background:linear-gradient(160deg,#6b8b75,#3f5d4f);} .bc2{background:linear-gradient(160deg,#e6cf5a,#c9a53f);color:#3b2e1e;}
.bc3{background:linear-gradient(160deg,#2a5d8f,#163d66);} .bc4{background:linear-gradient(160deg,#a8d8e8,#6fb5c9);color:#1f4a58;}
.bc5{background:linear-gradient(160deg,#f4f0e8,#d8cfbf);color:#6b5a40;} .bc6{background:linear-gradient(160deg,#f7e4a0,#dcb95f);color:#5a4210;}
.bc7{background:linear-gradient(160deg,#e8ecf0,#c0cad4);color:#4a5a6a;} .bc8{background:linear-gradient(160deg,#5e4b8b,#3a2a66);}
.bc9{background:linear-gradient(160deg,#c8d830,#8ba020);color:#2a3a0a;} .bc10{background:linear-gradient(160deg,#d4785e,#a8503a);}
.bc11{background:linear-gradient(160deg,#7a5c8e,#523a68);} .bc12{background:linear-gradient(160deg,#5891a6,#3a6d82);}

/* ---------- 页脚（米色模板：深棕底） ---------- */
.footer{background:var(--dark);color:#d0c8b8;padding:42px 0 30px;margin-top:30px;}
.footer .fbrand{font-family:var(--font-serif);font-size:24px;font-weight:700;color:var(--brand);margin-bottom:8px;}
.footer .ftag{font-size:14px;margin-bottom:14px;}
.footer .flegal{font-size:12px;color:var(--muted);}
.footer .flinks{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;}
.footer .flinks a{font-size:13px;color:#c8bda8;transition:.2s;}
.footer .flinks a:hover{color:var(--brand);}
.footer .f-brand p{color:#c8bda8;}

/* ---------- 扫码荐购二维码弹窗（复用模板） ---------- */
.qr-modal{position:fixed;inset:0;background:rgba(44,36,22,.5);z-index:300;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;}
.qr-modal.show{display:flex;opacity:1;}
.qr-card{background:#fff;border-radius:18px;padding:30px 34px 26px;width:300px;max-width:90vw;text-align:center;position:relative;box-shadow:var(--shadow-lg);}
.qr-close{position:absolute;top:12px;right:12px;cursor:pointer;color:var(--ink-3);padding:6px;border-radius:8px;display:flex;transition:.2s;}
.qr-close:hover{background:var(--brand-l);color:var(--brand);}
.qr-close .ic{width:18px;height:18px;}
.qr-ttl{font-size:19px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;}
.qr-ttl .ic{width:20px;height:20px;color:var(--brand);}
.qr-qr{width:200px;height:200px;margin:0 auto;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden;}
.qr-qr svg{width:100%;height:100%;display:block;}
.qr-qr img{width:100%;height:100%;display:block;}
.qr-hint{font-size:14px;color:var(--ink-2);margin-top:18px;line-height:1.6;}
.qr-hint b{color:var(--brand-d);}
.qr-foot{font-size:12px;color:var(--ink-3);margin-top:10px;}

/* ---------- Toast（门户首页提示，与原版对齐） ---------- */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(44,36,22,.92);color:#fff;padding:12px 28px;border-radius:9px;z-index:9999;font-size:15px;opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}

/* ---------- 版式间距 ---------- */
.pad{padding:34px 0;}
.block{margin-top:26px;}
.sec-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--ink);}
.sec-title .ic{color:var(--brand);width:20px;height:20px;}

@media(max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .gtopic-grid{grid-template-columns:1fr;}
  .hero .mt{font-size:52px;} .hero{height:300px;}
}
@media(max-width:680px){
  .nav{display:none;}
  .stat-grid{grid-template-columns:1fr;}
  .gtopic-grid{grid-template-columns:1fr;}
  .hero .cover{display:none;} .hero .mt{font-size:40px;}
}