/* ============================================================
   全站基础样式 · 极简简约风（近白底 + 极细线条 + 红色克制强调）
   由 miniprogram/app.wxss 迁移（1rpx = 0.5px @375 设计稿）
   断点：≤767 手机 / 768–1199 平板 / ≥1200 PC
   ============================================================ */

:root{
  --bg:#fafaf9;
  --card:#ffffff;
  --line:#ececec;
  --line-soft:#f4f4f4;
  --ink:#1a1a1a;
  --ink2:#6b6b6b;
  --ink3:#a8a8a8;
  --accent:#d64545;
  --accent-soft:#fcecec;
  --tag-bg:#f4f4f4;
  --tag-ink:#6b6b6b;
  --kill-bg:#fdf6f6;
  --kill-ink:#b03030;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* hidden 属性强制生效（防止被 display:block 等类样式覆盖） */
[hidden]{ display:none !important; }

/* ---------- 页面容器：手机窄屏卡片流居中 ---------- */
.page{
  max-width:560px;
  margin:0 auto;
  padding:24px 16px 64px;
}

/* 平板/PC：放宽容器并由页面级样式继续扩展 */
@media (min-width:768px){
  .page{ padding:32px 24px 80px; }
}

/* ---------- 通用标题 ---------- */
.sec-title{
  font-size:13px;
  font-weight:600;
  color:var(--ink3);
  letter-spacing:1px;
  margin:0 0 16px;
  text-transform:uppercase;
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:12px;
}

/* ---------- chip ---------- */
.chip{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  color:var(--tag-ink);
  background:var(--tag-bg);
  border-radius:12px;
  padding:2px 8px;
  letter-spacing:.25px;
}

/* ---------- 得分条 ---------- */
.bar{ display:flex; align-items:center; gap:8px; }
.bar .track{
  width:80px;
  height:4px;
  background:#eeeeee;
  border-radius:2px;
  overflow:hidden;
}
.bar .fill{
  height:100%;
  background:var(--accent);
  border-radius:2px;
}
.bar .v{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ---------- 必死标记 ---------- */
.kill-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:var(--accent);
  border-radius:3px;
  padding:1px 6px;
  letter-spacing:.5px;
}

/* ---------- 红线提示 ---------- */
.kill-box{
  background:var(--kill-bg);
  border:none;
  border-left:2px solid var(--accent);
  border-radius:0;
  padding:4px 0 4px 12px;
  font-size:14px;
  color:var(--kill-ink);
  line-height:1.8;
}
.kill-box .label{ color:var(--ink); font-weight:600; }

/* ============================================================
   导航：手机底部 tab-bar / PC 顶部 top-nav
   ============================================================ */

/* 顶部导航（≥768px 显示） */
.top-nav{
  display:none;
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(250,250,249,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top-nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:32px;
  height:52px;
}
.top-nav .brand{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.2px;
  margin-right:8px;
}
.top-nav a.nav-link{
  font-size:15px;
  font-weight:500;
  color:var(--ink2);
  padding:4px 2px;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.top-nav a.nav-link:hover{ color:var(--ink); }
.top-nav a.nav-link.on{
  color:var(--accent);
  border-bottom-color:var(--accent);
  font-weight:600;
}

/* 底部 tab（<768px 显示，与小程序一致） */
.tab-bar{
  display:flex;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab-bar a.tab-item{
  flex:1;
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:var(--ink3);
  padding:9px 0 8px;
  transition:color .15s;
}
.tab-bar a.tab-item.on{
  color:var(--accent);
  font-weight:600;
}

/* 手机端品牌头（≤767px 显示；PC 端顶部导航已含品牌名，故此隐藏） */
.m-header{ display:none; }
.m-header .m-brand{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.2px;
  color:var(--ink);
}

/* 端切换 */
@media (max-width:767px){
  .top-nav{ display:none; }
  .tab-bar{ display:flex; }
  .m-header{
    display:flex;
    align-items:center;
    height:48px;
    padding:0 16px;
    background:rgba(250,250,249,.95);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:100;
  }
  body{ padding-bottom:48px; font-size:18px; } /* 给 fixed 底部 tab 让位；手机端整体字号 +4（基础16再+2） */
  .sec-title{ font-size:15px; }
  .chip{ font-size:14px; }
  .bar .v{ font-size:16px; }
  .kill-tag{ font-size:13px; }
  .tab-bar a.tab-item{ font-size:15px; }
  #app-toast{ font-size:17px; }
}
@media (min-width:768px){
  .top-nav{ display:block; }
  .tab-bar{ display:none; }
}

/* ---------- toast（替代 wx.showToast） ---------- */
#app-toast{
  position:fixed;
  left:50%;
  bottom:72px;
  transform:translateX(-50%) translateY(8px);
  background:rgba(26,26,26,.85);
  color:#fff;
  font-size:15px;
  padding:8px 18px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:999;
}
#app-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}