/* ==========================================================================
   题满仓 · 公共组件 v4.0.2（2026-10-18）
   依赖 xk-tokens.css。全站统一：toast / 底部五 tab / 按钮 / 卡片 / 标签 /
   分段控件 / 向导步骤条 / 判题结果 / 空状态 / 骨架屏 / 返回 / 权益徽标。
   v4.0.1：.toast 加 pointer-events:none（提示不得遮挡底部操作区，冒烟实测发现）
   v4.0.2：tab 圆点改为「仅 .on 时显示」——静态页每个 tab 都可挂 dot，
           由 .on 控制显隐，SPA 页（xk-mini）切 tab 时圆点跟随移动
   ========================================================================== */

/* ---------- 底部五 tab（全站常驻：首页/试卷/诊断/错题本/我的） ---------- */
.xk5-tab {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; background: var(--card); border-top: 1px solid var(--paper-300);
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.xk5-tab .tb {
  flex: 1; text-align: center; font-size: 10px; color: var(--ink-500);
  padding: 2px 0; text-decoration: none; font-family: var(--font);
  background: none; border: 0; cursor: pointer; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.xk5-tab .tb i { font-style: normal; font-size: 18px; line-height: 1.1; }
.xk5-tab .tb.on { color: var(--brand-600); font-weight: 700; }
.xk5-tab .tb .dot {
  display: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-600); vertical-align: 2px; margin-left: 2px;
}
.xk5-tab .tb.on .dot { display: inline-block; }
/* 挂载了底部 tab 的页面，正文底部要留位 */
.has-tab { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch); padding: 10px 18px; border: 0; border-radius: var(--r-btn);
  background: var(--brand-600); color: #fff; font: var(--t-main)/1.4 var(--font);
  font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform var(--d-micro) var(--ease), background var(--d-micro) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); background: var(--brand-800); }
.btn:disabled { background: var(--ink-300); color: #fff; cursor: default; transform: none; }
.btn.gold { background: var(--accent-500); color: var(--ink-900); }      /* 金底必配深字 */
.btn.gold:active { background: var(--accent-600); }
.btn.ghost { background: var(--card); color: var(--ink-700); border: 1px solid var(--paper-300); }
.btn.ghost:active { background: var(--paper-100); }
.btn.big { min-height: 52px; font-size: var(--t-main); }   /* 核心主动作 */
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: var(--t-aux); font-weight: 700; }
.btn.block { display: flex; width: 100%; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--paper-300);
  border-radius: var(--r-card); padding: var(--s3); margin-bottom: var(--s3);
  box-shadow: var(--sh1);
}
.card.hi { border-color: var(--accent-500); }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block; font-size: var(--t-tag); line-height: 1.5;
  padding: 2px 8px; border-radius: 20px; margin: 0 5px 4px 0;
  background: var(--paper-100); color: var(--ink-500); white-space: nowrap;
}
.tag.kp   { background: var(--info-bg); color: var(--info); }
.tag.pit  { background: var(--bad-bg); color: var(--bad); }
.tag.src  { background: var(--accent-100); color: var(--warn); }
.tag.ok   { background: var(--ok-bg); color: var(--ok); }
.tag.on   { background: var(--ok); color: #fff; }
.tag.brand{ background: var(--brand-100); color: var(--brand-600); }

/* ---------- 分段控件（试卷版/解析版、阅读/跳页/更多） ---------- */
.seg { display: flex; gap: 4px; background: var(--paper-100); border-radius: var(--r-btn); padding: 3px; }
.seg .seg-b {
  flex: 1; border: 0; background: transparent; border-radius: 9px;
  padding: 8px 4px; font: var(--t-aux)/1.3 var(--font); font-weight: 700; color: var(--ink-500);
  cursor: pointer; min-height: 36px; transition: all var(--d-micro) var(--ease);
}
.seg .seg-b.on { background: var(--card); color: var(--brand-600); box-shadow: var(--sh1); }

/* ---------- 单选 chips（横滑） ---------- */
.gchips { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.gchips::-webkit-scrollbar { display: none; }
.gchip {
  flex: 0 0 auto; background: var(--card); border: 1.5px solid var(--paper-300);
  border-radius: 10px; padding: 8px 14px; font: var(--t-aux)/1.3 var(--font);
  font-weight: 700; color: var(--ink-700); cursor: pointer; min-height: 36px;
  display: inline-flex; align-items: center;
}
.gchip.on { border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-100); }

/* ---------- 多选 chips（靶向卷知识点） ---------- */
.kwsel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.kwsel label {
  font-size: var(--t-aux); background: var(--card); border: 1px solid var(--paper-300);
  border-radius: 20px; padding: 5px 11px; cursor: pointer;
}
.kwsel label.on { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-600); font-weight: 700; }
.kwsel input { width: auto; margin: 0 4px 0 0; vertical-align: -1px; accent-color: var(--brand-600); }

/* ---------- 向导步骤条（五步：拍题→核对→判题→讲解→同类题） ---------- */
.wiz-steps {
  display: flex; gap: 4px; padding: var(--s2) var(--s3) 4px;
  position: sticky; top: 0; z-index: 30; background: var(--paper-50);
}
.wiz-steps .st {
  flex: 1; text-align: center; font-size: var(--t-tag); line-height: 1.35;
  padding: 6px 2px; border-radius: var(--r-tag); color: var(--ink-500);
  background: var(--card); border: 1px solid var(--paper-300); cursor: pointer;
}
.wiz-steps .st small { display: block; font-size: 9px; margin-top: 1px; opacity: .8; }
.wiz-steps .st.on { background: var(--brand-600); color: #fff; font-weight: 700; border-color: var(--brand-600); }
.wiz-steps .st.done { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); font-weight: 700; }

/* ---------- 向导屏（一步一屏） ---------- */
.wiz { display: none; padding: var(--s3) var(--s3) 0; }
.wiz.on { display: block; }
.wiz .wt { font-size: var(--t-card); font-weight: 800; }
.wiz .ws { font-size: var(--t-aux); color: var(--ink-500); margin: 2px 0 var(--s3); }

/* ---------- 判题结果 ---------- */
.verdict { border-radius: var(--r-card); padding: var(--s4) var(--s3); text-align: center; margin-top: var(--s2); }
.verdict.bad { background: var(--bad-bg); border: 1px solid var(--bad-line); }
.verdict.good { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.verdict .vv { font-size: 22px; font-weight: 800; }
.verdict.bad .vv { color: var(--bad); } .verdict.good .vv { color: var(--ok); }
.verdict .vm { font-size: var(--t-tag); color: var(--ink-500); margin-top: 4px; }
.verdict .vd {
  margin-top: var(--s2); font-size: 10.5px; color: var(--warn); background: var(--card);
  border: 1px dashed var(--warn-line); border-radius: var(--r-tag); padding: 6px 8px;
}

/* ---------- 键值行（正确答案/错在哪/该这么写/鼓励） ---------- */
.kv .r {
  display: flex; gap: var(--s2); padding: var(--s2) 0;
  border-bottom: 1px dashed var(--paper-300); font-size: var(--t-sub); line-height: 1.6;
}
.kv .r:last-child { border: 0; }
.kv .r b { flex: 0 0 62px; color: var(--ink-500); font-size: var(--t-tag); padding-top: 1px; font-weight: 700; }
.kv .r span { flex: 1; min-width: 0; }
.kv .r .em { color: var(--bad); font-weight: 700; }
.kv .r .fix { color: var(--ok); font-weight: 700; }

/* ---------- 「你的答案」金色高亮框 ---------- */
.ansbox {
  border: 2px solid var(--accent-500); background: var(--accent-50);
  border-radius: var(--r-btn); padding: var(--s3); margin-top: var(--s2);
}
.ansbox .ab-t { font-size: var(--t-tag); font-weight: 700; color: var(--warn); margin-bottom: 4px; }
.ansbox textarea, .ansbox input {
  width: 100%; border: 0; background: transparent; font: var(--t-sub)/1.6 var(--font);
  color: var(--ink-900); resize: vertical; padding: 0;
}

/* ---------- 分步讲解列表 ---------- */
.steplist { margin: 0; padding: 0; list-style: none; }
.steplist li {
  display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--paper-300);
  font-size: var(--t-sub); line-height: 1.65;
}
.steplist li:last-child { border: 0; }
.steplist .no {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 7px;
  background: var(--accent-100); color: var(--ink-500);
  display: grid; place-items: center; font-size: var(--t-tag); font-weight: 700;
}

/* ---------- 列表行 ---------- */
.rowli { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px dashed var(--paper-300); }
.rowli:last-child { border: 0; }
.rowli .rn { flex: 1; min-width: 0; font-size: var(--t-sub); }
.rowli .rn small { display: block; color: var(--ink-500); font-size: var(--t-tag); margin-top: 2px; }

/* ---------- 空状态（空 ≠ 白屏，永远带引导） ---------- */
.empty { padding: 34px var(--s4); text-align: center; color: var(--ink-500); font-size: var(--t-aux); line-height: 1.8; }
.empty .ei { font-size: 30px; display: block; margin-bottom: var(--s2); }

/* ---------- 骨架屏 ---------- */
.sk {
  background: linear-gradient(90deg, #EFE8D9, #F6F1E7, #EFE8D9);
  background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px;
}
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- toast ---------- */
/* pointer-events:none：toast 是纯提示，绝不能挡住底部操作区
   （2026-10-18 实测：缩放提示弹出时，「更多」抽屉的取消/跳页按钮被 toast 盖住点不着） */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-900); color: #FAF7F0; padding: 10px var(--s4);
  border-radius: var(--r-btn); font-size: var(--t-sub); z-index: 999;
  max-width: 88%; box-shadow: var(--sh2); display: none; pointer-events: none;
}
.toast.on { display: block; }
.toast .ti { margin-right: 6px; font-weight: 700; }
.toast .ti.err { color: #F0B4AC; }
.toast .ti.warn { color: #F2D9A0; }

/* ---------- 返回 / 权益徽标 / 配额 ---------- */
.back {
  background: var(--card); border: 1px solid var(--paper-300); color: var(--ink-700);
  border-radius: var(--r-btn); padding: 8px 14px; font: var(--t-aux)/1 var(--font);
  font-weight: 700; cursor: pointer; min-height: 36px; text-decoration: none;
  display: inline-flex; align-items: center;
}
.badge-ent {
  font-size: 10.5px; padding: 4px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--paper-100); border: 1px solid var(--paper-300); color: var(--ink-500);
}
.badge-ent.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.quota-pill {
  font-size: 10.5px; padding: 4px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--accent-100); color: var(--ink-900); border: 1px solid var(--accent-500);
}

/* ---------- 页面标题区 ---------- */
.pg-head { padding: calc(12px + env(safe-area-inset-top, 0px)) var(--s4) var(--s2); }
.pg-head h1 { font-size: var(--t-title); font-weight: 800; margin: 0 0 2px; }
.pg-head .sub { font-size: var(--t-aux); color: var(--ink-500); }
.pg-body { padding: 0 var(--s4); }

/* ---------- 输入（纸感） ---------- */
input[type=text], input[type=number], textarea, select {
  width: 100%; background: var(--card); color: var(--ink-900);
  border: 1px solid var(--paper-300); border-radius: var(--r-btn);
  padding: 10px; font: var(--t-body)/1.6 var(--font); margin: 6px 0;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-100); border-color: var(--brand-600); }
::placeholder { color: var(--ink-300); }