/* ============================================================
   第二套模板 · App 风（藏青主题）
   策略：复用 hz_theme.css / hz_h5.css 的令牌与组件基类，
   此处只覆盖「主色令牌」+「chrome（顶栏/底栏/hero）」，
   并把 hz_h5.css 里硬编码的青色渐变换成藏青，确保整站风格统一。
   DOM 钩子（.est-item/.est-tier/.est-submit/#csBtn/.h5-fixed-cta 等）
   完全保持，故 hz.js 逻辑无需改动即可工作。
   ============================================================ */

/* ---- 1. 令牌覆盖：青色 → 藏青 ---- */
:root{
  --c-primary:#1A4278;
  --c-primary-dark:#143258;
  --c-primary-50:#EAF0F8;
  --c-primary-100:#CBD8EC;
  --c-primary-200:#9DB4D8;
  --c-bg:#F4F6FA;
  --c-surface:#FFFFFF;
  --c-surface-2:#F7F9FC;
  --c-shadow:0 2px 10px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.05);
}

/* ---- 2. 全局：底部给标签栏留白 ---- */
body{
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}

/* ---- 3. 顶栏（藏青品牌栏，吸顶） ---- */
.app-topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(135deg,#143258 0%,#1A4278 70%,#24528F 100%);
  color:#fff;
}
.app-brand{display:flex;align-items:center;gap:10px;color:#fff;min-width:0}
.app-logo{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;font-family:Georgia,"Songti SC",serif;
}
.app-brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.app-brand-text b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-brand-text small{font-size:11px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-user{flex:none}
.app-user-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.32);border-radius:18px;
  padding:5px 12px;font-size:13px;white-space:nowrap;
}
.app-avatar{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.28);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}

/* ---- 4. 内容区 ---- */
.app-body{padding:12px 12px 8px}

/* ---- 5. 底部标签栏（固定底部，主导航） ---- */
.app-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:108;
  display:flex;background:#fff;
  border-top:1px solid var(--c-border);
  box-shadow:0 -4px 16px rgba(16,24,40,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
.app-tabbar a{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 2px 6px;font-size:11px;color:var(--c-text-3);line-height:1.2;
}
.app-tabbar a svg{width:22px;height:22px;display:block;stroke:currentColor;transition:transform .12s}
.app-tabbar a:active svg{transform:scale(.88)}
.app-tabbar a.active{color:var(--c-primary);font-weight:600}
.app-tabbar a.active svg{transform:translateY(-1px);stroke:var(--c-primary)}
.app-tabbar a.active::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:9px;width:16px;height:3px;border-radius:999px;background:var(--c-primary)}
.app-tabbar a{position:relative}

/* ---- 6. 页脚 ---- */
.app-footer{padding:18px 14px calc(20px + env(safe-area-inset-bottom));font-size:12px;color:var(--c-text-3);text-align:center}
.app-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:10px}
.app-footer-links a{color:var(--c-text-2)}
.app-footer-copy,.app-footer-icp{margin:4px 0;line-height:1.7}
.app-footer-icp a{color:var(--c-text-3)}

/* ---- 7. Hero（藏青 + 衬线，去 AI 感） ---- */
.h5-hero{
  background:linear-gradient(135deg,#143258 0%,#1A4278 62%,#24528F 100%);
  color:#fff;border-radius:var(--r-lg);padding:26px 20px;position:relative;overflow:hidden;
}
.h5-hero::after{
  content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.07);
}
.h5-hero h1{font-family:Georgia,"Songti SC","SimSun",serif;font-size:23px;font-weight:700;line-height:1.42;margin-bottom:8px;letter-spacing:.3px}
.h5-hero p{font-size:13px;opacity:.9;margin-bottom:16px}
.h5-search input{background:rgba(255,255,255,.95);border:none}
.h5-search .btn{background:#fff;color:var(--c-primary);border-color:#fff;font-weight:600}

/* ---- 8. 卡片 / 区块（更圆润、更轻的描边，App 手感） ---- */
.h5-card,.h5-block{
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.h5-card .hc-name{color:var(--c-text)}
.h5-card .hc-price{color:var(--c-danger)}
.h5-grid .h5-card{box-shadow:0 2px 10px rgba(16,24,40,.05)}
.h5-sec-h h2{color:var(--c-text)}
.why-item .wi-ic{background:var(--c-primary-50);color:var(--c-primary)}

/* ---- 9. 套餐档位 / 估算（藏青高亮） ---- */
.tier-opt.on{border-color:var(--c-primary);background:var(--c-primary-50)}
.tier-opt.on .tier-name{color:var(--c-primary)}
.est-item.on{border-color:var(--c-primary);background:var(--c-primary-50)}
.est-tier.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.est-bar .eb-info b{color:var(--c-primary)}
.est-total b{color:var(--c-danger)}
.est-sec h4{border-left-color:var(--c-primary)}
.tag.blue{background:var(--c-primary-50);color:var(--c-primary)}

/* ---- 10. 我的（藏青头部） ---- */
.me-head{background:linear-gradient(135deg,#143258,#1A4278);color:#fff}
.me-grid .g.active{border-color:var(--c-primary);background:var(--c-primary-50)}
.me-grid .g.active .tx{color:var(--c-primary);font-weight:600}

/* ---- 11. 办事指南 hero / 文章 ---- */
.guide-hero{background:linear-gradient(135deg,#143258 0%,#1A4278 100%);color:#fff}
.guide-hero .gh-meta span{background:rgba(255,255,255,.18)}
.guide-card{border-radius:var(--r-lg)}
.guide-card .gc-cat{background:var(--c-primary-50);color:var(--c-primary)}
.share-entry{background:var(--c-primary-50);border-color:var(--c-primary-100)}
.share-entry-ic{background:linear-gradient(135deg,#143258,#1A4278)}
.share-entry-tx b{color:var(--c-primary)}
.share-ic.sys{background:linear-gradient(135deg,#143258,#1A4278)}
.article-avatar{background:linear-gradient(135deg,#143258,#1A4278)}
.article-cat{color:var(--c-primary);background:var(--c-primary-50)}
.article-related h3::before{background:var(--c-primary)}

/* ---- 12. 固定操作条 / 客服（抬到底部标签栏之上） ---- */
.h5-fixed-cta{
  bottom:calc(56px + env(safe-area-inset-bottom));
  border-top:1px solid var(--c-border);
}
.h5-cta-space{height:120px}
/* 客服按钮：藏青，z-index 高于标签栏（200>108） */
.cs-btn{background:var(--c-primary);box-shadow:0 6px 20px rgba(26,66,120,.35)}
.cs-ic{font-size:16px;line-height:1}

/* ---- 13. 进度条（藏青） ---- */
.art-progress{background:rgba(26,66,120,.18)}
.art-progress i{background:#fff}

/* ---- 14. 估算结果价格色 ---- */
.est-total b{font-size:26px}