/* =========================================================
   你为什么一直脱不了单 · 专属样式
   ---------------------------------------------------------
   本文件只在「脱单阻碍测试」相关页面加载（封面页 + 答题页），
   加载顺序放在 style.css / market.css 之后，用于：

   1. 把这个测试单独切换成浅蓝配色（整站其余页面保持粉紫）
      —— 通过覆盖 :root 变量实现，不需要改任何组件规则
   2. 提供维度横向柱状进度条（5 档）的样式
   ========================================================= */

/* ── 1. 浅蓝配色覆盖（男女皆宜的中性色）───────────────────
   同名变量直接改写，style.css / market.css 里所有
   var(--pink*) / var(--m-*) 引用会自动变成蓝色            */
body[data-test="single-block"],
body.sb-blue {
  /* 底色 / 文字 */
  --bg:        #f6fafd;
  --ink:       #22303d;
  --ink-2:     #5f7284;
  --ink-3:     #93a5b5;

  /* 主色：浅蓝 */
  --pink:      #3d9bd6;
  --pink-2:    #6cb8e6;
  --pink-mid:  #a8d5f0;
  --pink-soft: #e6f3fb;

  /* 辅色：青绿 */
  --purple:      #4fc3c0;
  --purple-soft: #e4f7f6;

  /* 线条 / 阴影 */
  --line:        #e2eef6;
  --shadow:      0 8px 24px rgba(61, 155, 214, .10), 0 2px 6px rgba(34, 48, 61, .04);
  --shadow-lift: 0 18px 40px rgba(61, 155, 214, .22), 0 4px 12px rgba(34, 48, 61, .06);
  --grad: linear-gradient(135deg, #63b3e8 0%, #3d9bd6 45%, #4fc3c0 100%);

  /* market.css 的相亲/复合专用变量 */
  --m-bg:       #f6fafd;
  --m-ink:      #22303d;
  --m-ink-2:    #5f7284;
  --m-ink-3:    #93a5b5;
  --m-line:     #e2eef6;
  --m-rose:     #3d9bd6;
  --m-rose-bg:  #e6f3fb;
  --m-purple:   #6cb8e6;
  --m-purple-bg:#eaf6ff;
  --m-green:    #4fc3c0;
  --m-amber:    #6cb8e6;
  --m-amber-bg: #eaf6ff;
  --m-orange:   #2b7fb8;
  --m-indigo:   #2b6fa8;
}

/* 背景光斑也一起换蓝（style.css 里是硬编码的粉/紫） */
body[data-test="single-block"]::before,
body.sb-blue::before {
  background: radial-gradient(circle, rgba(108, 184, 230, .45), transparent 70%);
}
body[data-test="single-block"]::after,
body.sb-blue::after {
  background: radial-gradient(circle, rgba(79, 195, 192, .24), transparent 70%);
}

/* 密码门渐变背景（market.css 里是硬编码的粉调） */
body[data-test="single-block"] .gate-ov,
body.sb-blue .gate-ov {
  background: linear-gradient(135deg, #f6fafd, #e6f3fb);
}

/* ── 2. 答题页：返回上一题按钮 ─────────────────────────── */
.q-foot {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: .18s;
}
.btn-back:hover:not(:disabled) {
  color: var(--pink);
  border-color: var(--pink-mid);
  background: var(--pink-soft);
}
.btn-back:disabled {
  opacity: .38;
  cursor: not-allowed;
}

/* 已选选项的高亮（style.css 里是硬编码粉色渐变，这里换成蓝色） */
body[data-test="single-block"] .option.is-picked {
  border-color: var(--pink);
  background: linear-gradient(135deg, #fff 30%, #f2f9ff 100%);
  box-shadow: 0 6px 18px rgba(61, 155, 214, .18);
}
body[data-test="single-block"] .option.is-picked .option__key {
  background: var(--grad);
  color: #fff;
}

/* ── 3. 结果页：导出按钮栏（位于页面最末）─────────────────── */
.export-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.ex-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 130px;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: .18s;
}
.ex-btn:hover:not(:disabled) {
  border-color: var(--pink-mid);
  background: var(--pink-soft);
  color: var(--pink);
}
.ex-btn:disabled { opacity: .55; cursor: wait; }

/* 导出前隐藏按钮栏，避免把按钮也画进图里 */
.is-exporting .export-bar,
.is-exporting .actions,
.is-exporting .more { display: none !important; }

/* ── 4. 维度横向柱状进度条（5 档）────────────────────────
   档位：几乎不卡 / 轻微 / 中等 / 明显 / 严重卡点
   配色按「阻碍程度」递进：青绿 → 蓝 → 琥珀 → 橙 → 红，
   深浅差异明显，一眼能看出哪一项最重                     */
.tbar { display: grid; gap: 14px; }

/* 5 档色阶：从低到高，色相和明度都拉开，辨识度更高 */
.tbar__seg[data-tier="0"],
.tbar__lg i[data-tier="0"] { background: #7fd4c1; }   /* 几乎不卡：青绿 */
.tbar__seg[data-tier="1"],
.tbar__lg i[data-tier="1"] { background: #6cb8e6; }   /* 轻微：浅蓝 */
.tbar__seg[data-tier="2"],
.tbar__lg i[data-tier="2"] { background: #f0c14b; }   /* 中等：琥珀 */
.tbar__seg[data-tier="3"],
.tbar__lg i[data-tier="3"] { background: #ef8a4b; }   /* 明显：橙 */
.tbar__seg[data-tier="4"],
.tbar__lg i[data-tier="4"] { background: #e4574f; }   /* 严重卡点：红 */

.tbar__row {
  display: grid;
  grid-template-columns: 66px 1fr 40px;
  align-items: center;
  gap: 10px;
}
.tbar__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbar__track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: #f1f5f8;
  overflow: hidden;
  display: flex;
  border: 1px solid #e6edf3;
}
/* 5 段等宽分块，用白色细线分隔 */
.tbar__seg {
  flex: 1;
  height: 100%;
  border-right: 2px solid #fff;
}
.tbar__seg:last-of-type { border-right: none; }
/* 未点亮的档位淡化到很浅，点亮的档位保持满色 —— 对比强烈 */
.tbar__seg:not(.is-on) { opacity: .16; }

/* 覆盖层：按真实分数填充，半透明叠加在档位色上 */
.tbar__fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  border-right: 2px solid rgba(255, 255, 255, .9);
  width: 0;
  transition: width .9s cubic-bezier(.2, .8, .3, 1);
}
.tbar__val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 分数按档位着色，强化「哪一项最重」的视觉信号 */
.tbar__row[data-ti="0"] .tbar__val { color: #2b9d8f; }
.tbar__row[data-ti="1"] .tbar__val { color: #2b7fb8; }
.tbar__row[data-ti="2"] .tbar__val { color: #b8860b; }
.tbar__row[data-ti="3"] .tbar__val { color: #d2691e; }
.tbar__row[data-ti="4"] .tbar__val { color: #c9302c; }

/* 底部 5 档图例 */
.tbar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}
.tbar__lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-3);
}
.tbar__lg i {
  width: 11px; height: 11px;
  border-radius: 3px;
  display: inline-block;
}