/* =========================================================
   Flusso 桥水心理 — 新心理工具共用页面框架
   纯前端、非诊断、自我整理工具。仅补充工具页所需组件。
   ========================================================= */

/* Hero 与已上线工具一致的紧凑 padding */
.tool-suite-page .tool-suite-hero {
  padding-top: clamp(20px, 2.6vw, 34px);
  padding-bottom: clamp(12px, 1.8vw, 24px);
}

.tool-suite-page .tool-suite-hero .lead {
  max-width: 68ch;
}

.tool-suite-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-16);
  margin: var(--sp-18) 0 0;
  padding: 0;
  list-style: none;
}

.tool-suite-tags li {
  /* 方案乙：属性降级为圆点文字 */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--muted);
  font-size: var(--fs-13);
  letter-spacing: 0.02em;
}
.tool-suite-tags li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.55;
}

/* ——— 布局：跟随 .wrap 自然宽度，与已上线工具一致 ——— */
.tool-suite-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 40px);
}

.tool-suite-shell[hidden] {
  display: none;
}

.tool-suite-shell.is-active {
  display: block;
}

.tool-suite-intro, .tool-suite-shell, .tool-result-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.tool-suite-intro,
.tool-suite-shell {
  padding: clamp(24px, 3.5vw, 40px);
}

.tool-suite-intro h2,
.tool-suite-shell h2,
.tool-result-card h2 {
  margin-top: 0;
}

.tool-suite-intro ul {
  margin: var(--sp-14) 0 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  line-height: 1.78;
}

/* 仅作用于 intro 内的项目符号列表，避免泄漏进 .tool-pro-grid 等网格（曾导致 Pro 首卡被拉大）。 */
.tool-suite-intro ul li + li {
  margin-top: var(--sp-6);
}

.tool-organize-block {
  margin-top: var(--sp-22);
  padding-top: var(--sp-18);
  border-top: 1px solid var(--line);
}

.tool-organize-block__title {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.tool-organize-block ul {
  margin-top: var(--sp-10);
}

.tool-privacy-notice {
  margin-top: var(--sp-20);
  padding: var(--sp-16) var(--sp-18);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-sm);
  background: rgba(230, 238, 233, 0.5);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.7;
}

.tool-privacy-notice p {
  margin: 0;
}

.tool-start-safety-note {
  margin: var(--sp-14) 0 0;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.7;
}

/* ——— Pro「咨询前预备表」开始屏 ——— */
.tool-pro-meta {
  margin: 0 0 var(--sp-10);
  color: var(--teal);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tool-pro-intro h2 { margin: 0 0 var(--sp-22); }
.tool-pro-block { margin-bottom: var(--sp-24); }
.tool-pro-section-title {
  margin: 0 0 var(--sp-14);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-15);
}
.tool-pro-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
}
.tool-pro-grid li {
  display: flex;
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-14) var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
/* 修正：.tool-suite-intro li + li 的纵向列表间距会泄漏进此网格，导致第 1 张卡无上边距、被行高拉伸而显得更大。网格项不需要该间距。 */
.tool-pro-grid li + li { margin-top: 0; }
.tool-pro-grid li p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.6;
}
.tool-pro-grid__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--paper-on-dark);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-13-5);
}
.tool-pro-fit {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  line-height: 1.78;
}
.tool-pro-fit li + li { margin-top: var(--sp-4); }
.tool-pro-notice {
  margin-bottom: var(--sp-24);
  padding: var(--sp-16) var(--sp-18);
  border: 1px solid var(--teal-a16);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-sm);
  background: rgba(230, 238, 233, 0.5);
}
.tool-pro-notice .tool-pro-section-title { margin-bottom: var(--sp-10); }
.tool-pro-notice ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.7;
}
.tool-pro-notice li + li { margin-top: var(--sp-6); }
.tool-pro-notice__safety {
  margin: var(--sp-12) 0 0;
  padding-top: var(--sp-12);
  border-top: 1px solid var(--teal-a16);
  color: var(--gold-ink);
  font-size: var(--fs-13-5);
  font-weight: 500;
  line-height: 1.7;
}
.tool-pro-deliver {
  display: flex;
  gap: var(--sp-14);
  align-items: center;
  margin-bottom: var(--sp-24);
  padding: var(--sp-16) var(--sp-18);
  border: 1px dashed var(--teal-a36);
  border-radius: var(--r-sm);
  background: var(--teal-soft);
}
.tool-pro-deliver__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--teal);
}
.tool-pro-deliver__label {
  margin: 0;
  color: var(--teal);
  font-size: var(--fs-12-5);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tool-pro-deliver__text {
  margin: var(--sp-2) 0 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .tool-pro-grid { grid-template-columns: 1fr; }
  .tool-pro-deliver { align-items: flex-start; }
}

/* ——— 进度条 ——— */
.tool-progress {
  margin-bottom: var(--sp-24);
}

.tool-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-10);
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tool-progress__total {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-10);
  color: var(--muted);
  font-size: var(--fs-12-5);
}

.tool-progress__track {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--teal-a08);
}

.tool-progress__bar {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transition: width var(--t);
}

/* ——— 步骤与题目 ——— */
.tool-step[hidden],
.tool-result[hidden] {
  display: none;
}

.tool-step-title {
  margin: 0 0 var(--sp-18);
  font-family: var(--sans);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.tool-question {
  padding: var(--sp-18) 0;
  border-top: 1px solid var(--line);
}

.tool-question:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.tool-question h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
}

.tool-question__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  margin: 0 0 var(--sp-11);
}

.tool-question--tags > h3 {
  margin: 0 0 var(--sp-11);
}

.tool-question__number {
  flex: 0 0 auto;
  min-width: 22px;
  padding-top: 2px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: var(--fs-14);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
}

.tool-question__hint {
  margin: -4px 0 var(--sp-13);
  color: var(--muted);
  font-size: var(--fs-13-5);
}

.tool-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-8);
}

.tool-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
}

.tool-choice {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

/* 选项是 radiogroup 里的 label，与 .choice-card / .self-check-option 同类：不浮起。 */
.tool-choice:hover {
  border-color: var(--teal-a28);
}

.tool-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tool-choice:has(input:checked) {
  border-color: var(--teal-a42);
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 600;
}


.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
}

.tool-actions .btn {
  justify-content: center;
}

.tool-hint {
  min-height: 1.4em;
  margin: var(--sp-14) 0 0;
  color: #8b5b32;
  font-size: var(--fs-13-5);
}

/* =========================================================
   结果页 — 全新设计，可分享卡片风格
   ========================================================= */
.tool-result {
  display: grid;
  gap: 0;
}

.tool-result-card {
  padding: var(--sp-28) var(--sp-24);
  overflow: hidden;
}

/* 品牌头 */
.tool-result-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-20);
}

.tool-result-brand__name {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #7da99a;
  font-weight: 500;
  text-transform: uppercase;
}

/* 状态徽章 */
.tool-level {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--gold-a12);
  color: var(--gold-ink);
  font-size: var(--fs-11);
  font-weight: 500;
}

.tool-level--teal {
  background: var(--teal-a08);
  color: var(--teal);
}

/* 分隔线 */
.tool-divider {
  height: 1px;
  background: var(--teal-a06);
  margin: var(--sp-18) 0;
}

/* 结果头部 — 不再用 flex wrap + score circle */


.tool-summary {
  color: #4e5652;
  font-size: var(--fs-14);
  line-height: 1.7;
  margin-top: var(--sp-16);
}

/* 分数圆 — 重新设计为行内指标 */


/* ——— 维度进度条 ——— */


/* ——— 下一步建议卡片 ——— */
.tool-next-steps {
  display: grid;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-next-steps li {
  padding: var(--sp-12) var(--sp-16);
  border-left: 3px solid var(--teal);
  background: var(--teal-a03);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.65;
}

/* ——— CTA 按钮 ——— */
.tool-result-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-20);
}

.tool-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-9) var(--sp-16);
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-weight: 500;
  border: none;
  text-decoration: none;
  transition: opacity var(--t-fast);
}

.tool-cta-btn:hover {
  opacity: 0.85;
}

.tool-cta-btn--primary {
  background: var(--teal);
  color: var(--teal-soft);
}

.tool-cta-btn--ghost {
  background: transparent;
  border: 1px solid var(--teal-a16);
  color: var(--teal);
}

.tool-copy-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--teal);
  font-size: var(--fs-13);
  font-weight: 600;
}

/* ——— 小节标题 ——— */
.tool-section-title {
  font-size: var(--fs-13);
  color: var(--teal);
  font-weight: 500;
  margin: 0 0 var(--sp-12);
}

/* =========================================================
   天气卡 — 大 emoji 居中 + 标签芯片
   ========================================================= */

/* 天气卡上半段（渐变背景 + 底部分隔线） */


/* 天气卡下半段（白底，承载 summary + CTA） */


.tool-weather-emoji {
  font-size: 72px;
  line-height: 1;
  text-align: center;
  margin: var(--sp-8) 0 var(--sp-16);
}

.tool-weather-title {
  font-family: var(--sans);
  font-size: var(--fs-22);
  font-weight: 600;
  color: #26302c;
  text-align: center;
  margin: 0 0 var(--sp-4);
}

.tool-weather-sub {
  font-size: var(--fs-13);
  color: #7a7f7c;
  text-align: center;
  margin: 0 0 var(--sp-20);
}

.tool-weather-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: center;
  margin-bottom: var(--sp-16);
}

.tool-weather-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-5) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--teal-a06);
  color: #4e5652;
  font-size: var(--fs-12);
  font-weight: 500;
}

.tool-weather-sections {
  display: grid;
  gap: 0;
}

.tool-weather-row {
  padding: var(--sp-14) 0;
  border-top: 1px solid var(--teal-a06);
}

.tool-weather-row__label {
  font-size: var(--fs-11);
  color: var(--teal);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-6);
}

.tool-weather-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

/* 护理高亮区 */
.tool-weather-care {
  padding: var(--sp-16);
  border-radius: var(--r);
  background: var(--teal-a03);
  margin-top: var(--sp-14);
}

.tool-weather-care__label {
  font-size: var(--fs-11);
  color: var(--teal);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}

.tool-weather-care__text {
  font-size: var(--fs-15);
  color: #26302c;
  font-weight: 500;
}

/* 天气卡不用默认 card padding（由 section/footer 各自控制） */
.tool-result-card--weather {
  padding: 0;
  background: var(--surface);
}

/* =========================================================
   关系模式 — 环形循环图 + 维度条
   ========================================================= */

/* 环形循环视觉 */


/* 循环文字摘要 — 2×2 网格 */


/* =========================================================
   成长经历 — 四宫格标签 + 主题强度
   ========================================================= */


.tool-result-card--growth {
  background: linear-gradient(175deg, var(--surface) 0%, #f7f5ef 100%);
}


.tool-growth-tag {
  font-size: var(--fs-11);
  padding: var(--sp-3) var(--sp-8);
  border-radius: 6px;
  background: var(--teal-a06);
  color: #4e5652;
}

/* =========================================================
   留学压力 — 横向渐变条
   ========================================================= */
.tool-stress-bars {
  display: grid;
  gap: 0;
  margin-bottom: var(--sp-16);
}

.tool-stress-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-7) 0;
}

.tool-stress-row__label {
  font-size: var(--fs-12);
  color: #4e5652;
  width: 90px;
  flex-shrink: 0;
}

.tool-stress-row__track {
  flex: 1;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--teal-a03);
  overflow: hidden;
  position: relative;
}

.tool-stress-row__fill {
  height: 100%;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #b8d4c8, var(--teal));
  position: absolute;
  left: 0;
  top: 0;
}

.tool-stress-row__pct {
  font-size: var(--fs-11);
  color: #7a7f7c;
  width: 28px;
  text-align: right;
}

/* =========================================================
   安全提醒
   ========================================================= */
.tool-safety-alert {
  padding: var(--sp-14) var(--sp-18);
  border-left: 4px solid #c44;
  border-radius: var(--r-sm);
  background: rgba(204, 68, 68, 0.06);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.7;
  margin-bottom: var(--sp-16);
}

.tool-safety-alert p { margin: 0; }

/* =========================================================
   底部声明
   ========================================================= */


/* =========================================================
   关系模式地图 V2 — 亲密关系与跨文化伴侣关系循环
   ========================================================= */
.tool-result-card--relationship {
  display: grid;
  gap: var(--sp-20);
}

.tool-start-notice {
  border-left-color: var(--gold);
  background: rgba(176, 138, 69, 0.08);
}

.tool-relation-section {
  display: grid;
  gap: var(--sp-12);
}

.tool-relation-section .tool-section-title {
  margin-bottom: 0;
}

.tool-relation-hero-card {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r);
  /* 暖白/米白纸感主卡：去掉大面积浅绿/灰绿渐变，只在右上角保留极轻金色光感 */
  background:
    radial-gradient(circle at 94% 8%, rgba(176, 138, 69, 0.05), transparent 26%),
    #FFFDF8;
}

.tool-relation-hero-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.28;
}

.tool-relation-hero-card h2 strong {
  font-size: inherit;
  font-weight: 700;
}

.tool-relation-subtitle,
.tool-relation-plain,
.tool-relation-not p,
.tool-relation-need,
.tool-relation-note p,
.tool-relation-summary-card p,
.tool-relation-clinician p,
.tool-relation-name-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.72;
}

.tool-relation-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-2);
}

.tool-relation-badge-row__label {
  color: var(--muted);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
}

.tool-relation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--sp-4) var(--sp-10);
  border: 1px solid var(--teal-a16);
  border-radius: var(--r-pill);
  background: var(--teal-a06);
  color: var(--teal);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1.2;
}

.tool-relation-badge--safety {
  border-color: var(--gold-a24);
  background: var(--gold-a12);
  color: var(--gold-ink);
}

.tool-relation-underlying {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-12) var(--sp-14);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.34);
}

.tool-relation-underlying p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.68;
}

.tool-relation-underlying__title {
  color: var(--teal);
  font-weight: 600;
}

.tool-relation-underlying__title strong {
  font-size: inherit;
  font-weight: 700;
}

.tool-relation-plain {
  padding-top: var(--sp-10);
  border-top: 1px solid var(--teal-a08);
}

.tool-relation-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-10);
}

.tool-relation-dim {
  min-height: 86px;
  padding: var(--sp-14);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.tool-relation-dim__label,
.tool-relation-dim__value {
  display: block;
}

.tool-relation-dim__label {
  color: var(--ink-soft);
  font-size: var(--fs-12-5);
  line-height: 1.45;
}

.tool-relation-dim__value {
  margin-top: var(--sp-8);
  color: var(--teal);
  font-size: var(--fs-18);
  font-weight: 600;
}

.tool-relation-dim--high {
  border-color: var(--gold-a24);
  background: rgba(176, 138, 69, 0.08);
}

.tool-relation-dim--high .tool-relation-dim__value {
  color: var(--gold-ink);
}

.tool-relation-note,
.tool-relation-not {
  padding: var(--sp-16) var(--sp-18);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.42);
}

.tool-relation-note__title {
  color: var(--teal);
  font-weight: 600;
}

.tool-relation-summary-card,
.tool-relation-clinician,
.tool-relation-name-card {
  padding: var(--sp-16) var(--sp-18);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.38);
}

.tool-relation-summary-card,
.tool-relation-clinician {
  display: grid;
  gap: var(--sp-8);
}

.tool-relation-clinician {
  background: var(--teal-a03);
}

.tool-relation-disclosure {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.36);
}

.tool-relation-disclosure summary {
  min-height: 44px;
  padding: var(--sp-14) var(--sp-18);
  color: var(--teal);
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}

.tool-relation-disclosure > :not(summary) {
  margin: 0 var(--sp-18) var(--sp-18);
}

.tool-relation-clinician strong {
  color: var(--teal);
  font-weight: 600;
}

.tool-relation-type {
  color: var(--teal);
  font-weight: 700;
}

.tool-relation-clinician__note {
  padding-top: var(--sp-8);
  border-top: 1px solid var(--teal-a08);
}

.tool-relation-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-10);
}

.tool-relation-name-card {
  display: grid;
  gap: var(--sp-8);
}

.tool-relation-name-card__title {
  color: var(--teal);
  font-weight: 600;
}

.tool-relation-safety {
  margin: 0;
  /* 安全提示用温和浅金，而非红色警报；不让结果页变成警报页 */
  border-left-color: var(--gold);
  background: rgba(176, 138, 69, 0.08);
}

.tool-relation-cycle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--sp-8);
}

.tool-relation-cycle__item {
  min-height: 132px;
  padding: var(--sp-14);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.tool-relation-cycle__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--r-pill);
  background: var(--teal-a08);
  color: var(--teal);
  font-size: var(--fs-12);
  font-weight: 600;
}

.tool-relation-cycle__item p {
  margin: var(--sp-10) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-13);
  line-height: 1.65;
}

.tool-relation-cycle__arrow {
  display: none;
}

.tool-relation-list li,
.tool-relation-questions li {
  color: var(--ink-soft);
  line-height: 1.68;
}

.tool-relation-questions {
  display: grid;
  gap: var(--sp-8);
  margin: 0;
  padding-left: 1.25em;
  list-style: decimal; /* <ol>，补回 styles.css 顶部 reset 里对带 class 的列表统一去掉的项目符号 */
}

/* 独立使用时（不叠加 .tool-next-steps）的“关于这份结果”免责声明列表：
   styles.css 顶部的 reset 对带 class 的 <ul> 统一清零 list-style/padding，这里从来没有
   自己的样式兜底，之前完全吃浏览器默认的圆点+缩进，现在补回来。
   :not(.tool-next-steps) 排除两个 class 叠加使用的那个卡片式变体——
   那个已经有自己的 list-style:none，不需要圆点，也不该被这条覆盖。 */
.tool-relation-list:not(.tool-next-steps) {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
}

/* =========================================================
   心理状态整理卡 Pro — 咨询前结构化整理
   ========================================================= */
.tool-result-card--state-pro {
  display: grid;
  gap: var(--sp-20);
}

.tool-state-pro-section {
  display: grid;
  gap: var(--sp-12);
}

.tool-state-pro-section .tool-section-title {
  margin-bottom: 0;
}

.tool-state-pro-hero-card {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r);
  /* 与 .tool-relation-hero-card 统一：暖白/米白纸感主卡，去掉大面积浅绿/灰绿渐变，
     只在右上角保留极轻金色光感 */
  background:
    radial-gradient(circle at 94% 8%, rgba(176, 138, 69, 0.05), transparent 26%),
    #FFFDF8;
}

.tool-state-pro-hero-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.28;
}

.tool-state-pro-hero-card h2 strong {
  font-size: inherit;
  font-weight: 700;
}

/* 安全提示用温和浅金，而非红色警报；不让结果页变成警报页 */
.tool-state-pro-safety-alert {
  border-left-color: var(--gold);
  background: rgba(176, 138, 69, 0.08);
}

.tool-state-pro-plain,
.tool-state-pro-summary p,
.tool-state-pro-clinician p,
.tool-state-pro-boundary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.72;
}

.tool-state-pro-plain {
  padding-top: var(--sp-10);
  border-top: 1px solid var(--teal-a08);
}

.tool-state-pro-dims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--sp-10);
}

.tool-state-pro-dim {
  min-height: 86px;
  padding: var(--sp-14);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.tool-state-pro-dim__label,
.tool-state-pro-dim strong {
  display: block;
}

.tool-state-pro-dim__label {
  color: var(--ink-soft);
  font-size: var(--fs-12-5);
  line-height: 1.45;
}

.tool-state-pro-dim strong {
  margin-top: var(--sp-8);
  color: var(--teal);
  font-size: var(--fs-18);
  font-weight: 650;
}

.tool-state-pro-dim--high:not(.tool-state-pro-dim--support),
.tool-state-pro-dim--safety.tool-state-pro-dim--medium {
  border-color: var(--gold-a24);
  background: rgba(176, 138, 69, 0.08);
}

.tool-state-pro-dim--high:not(.tool-state-pro-dim--support) strong,
.tool-state-pro-dim--safety.tool-state-pro-dim--medium strong {
  color: var(--gold-ink);
}

.tool-state-pro-dim--support.tool-state-pro-dim--low {
  border-color: var(--gold-a24);
  background: rgba(176, 138, 69, 0.08);
}

.tool-state-pro-dim--support.tool-state-pro-dim--low strong {
  color: var(--gold-ink);
}

.tool-state-pro-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-8);
}

.tool-state-pro-map__item {
  min-height: 118px;
  padding: var(--sp-14);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.tool-state-pro-map__item span {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--r-pill);
  background: var(--teal-a08);
  color: var(--teal);
  font-size: var(--fs-12);
  font-weight: 600;
}

.tool-state-pro-map__item p {
  margin: var(--sp-10) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-13);
  line-height: 1.65;
}

.tool-state-pro-summary,
.tool-state-pro-clinician,
.tool-state-pro-boundary {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-18);
  border: 1px solid var(--teal-a08);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.38);
}

.tool-state-pro-clinician {
  background: var(--teal-a03);
}

.tool-state-pro-clinician strong {
  color: var(--teal);
  font-weight: 600;
}

.tool-state-pro-questions {
  display: grid;
  gap: var(--sp-8);
  margin: 0;
  padding-left: 1.25em;
  list-style: decimal; /* <ol>，补回 styles.css 顶部 reset 里对带 class 的列表统一去掉的项目符号 */
}

.tool-state-pro-questions li {
  color: var(--ink-soft);
  line-height: 1.68;
}

.tool-state-pro-boundary {
  border-color: var(--gold-a24);
  background: rgba(176, 138, 69, 0.07);
}

/* =========================================================
   Legacy — 保持向下兼容（旧结构，不再主动生成）
   ========================================================= */


/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 720px) {
  .tool-progress__meta,
  .tool-progress__total {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .tool-scale {
    grid-template-columns: 1fr;
  }

  .tool-choice-grid {
    grid-template-columns: 1fr;
  }

  

  .tool-actions .btn,
  .tool-result-cta .btn,
  .tool-result-cta .tool-cta-btn {
    width: 100%;
  }

  

  .tool-stress-row__label {
    width: 80px;
    font-size: 11px;
  }

  .tool-result-card--relationship {
    gap: var(--sp-18);
  }

  .tool-relation-dim-grid,
  .tool-relation-cycle,
  .tool-state-pro-dims,
  .tool-state-pro-map {
    grid-template-columns: 1fr;
  }

  .tool-relation-dim,
  .tool-state-pro-dim {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-14);
  }

  .tool-relation-dim__value,
  .tool-state-pro-dim strong {
    margin-top: 0;
    flex: 0 0 auto;
  }

  .tool-relation-cycle__item,
  .tool-state-pro-map__item {
    min-height: 0;
  }

  .tool-relation-cycle__arrow {
    display: block;
    color: var(--teal-a42);
    line-height: 1;
    text-align: center;
    transform: rotate(90deg);
  }
}

@supports not selector(:has(*)) {
  .tool-choice input:checked + span {
    font-weight: 600;
    color: var(--teal);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-choice, .tool-progress__bar, .tool-actions .btn {
    transition-duration: 1ms !important;
  }
}

/* =========================================================
   第二批重做补充：键盘焦点 / 步骤说明 / 资源路由 / 结果脚注
   ========================================================= */
.tool-choice:has(input:focus-visible) {
  outline: var(--flusso-focus-ring);
  outline-offset: var(--flusso-focus-offset);
}

.tool-step-intro {
  margin: -6px 0 var(--sp-18);
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.7;
}

.tool-next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-8);
}

.tool-next-steps li {
  padding: var(--sp-10) var(--sp-14);
  border-left: 3px solid var(--teal);
  background: var(--teal-a03);
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.7;
}

.tool-resource-links {
  display: grid;
  gap: var(--sp-8);
}

.tool-resource-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-11) var(--sp-14);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--teal);
  font-size: var(--fs-13-5);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.tool-resource-link:hover {
  border-color: var(--teal-a36);
  background: var(--teal-soft);
}

.tool-result-foot {
  margin: var(--sp-14) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-12);
  line-height: 1.6;
}

.tool-safety-alert a {
  color: inherit;
  text-decoration: underline;
}

/* 资源路由三分组 */
.tool-resource-groups {
  display: grid;
  gap: var(--sp-16);
}

.tool-resource-group {
  display: grid;
  gap: var(--sp-8);
}

.tool-resource-group__label {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* =========================================================
   天气结果卡（网页版）：天气背景 + 玻璃面板，与 PNG 同款
   ========================================================= */
.tool-result-card--weather {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--teal-a08);
}

.tool-weather-hero {
  text-align: center;
  padding: 24px 22px 8px;
}

.tool-weather-brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-30);
}

.tool-weather-brand {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: #7da99a;
}

.tool-result-card--weather .tool-weather-emoji {
  font-size: 64px;
  line-height: 1;
}

.tool-result-card--weather .tool-weather-title {
  margin: var(--sp-12) 0 var(--sp-4);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
}

.tool-result-card--weather .tool-weather-sub {
  margin: 0;
  font-size: var(--fs-13-5);
  color: var(--muted);
}

/* 深色天气（大雨 / 雷暴）：白字 + 柔影 */
.tool-result-card--weather-dark .tool-weather-title {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.tool-result-card--weather-dark .tool-weather-sub {
  color: rgba(255, 255, 255, 0.82);
}

.tool-result-card--weather-dark .tool-weather-brand {
  color: rgba(255, 255, 255, 0.78);
}

.tool-result-card--weather-dark .tool-level {
  background: rgba(252, 251, 247, 0.88);
}

/* 玻璃面板 */
.tool-weather-glass {
  margin: var(--sp-20) var(--sp-18) var(--sp-20);
  padding: var(--sp-24) var(--sp-22);
  border-radius: var(--r-lg);
  background: rgba(252, 251, 247, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tool-weather-glass {
    background: rgba(252, 251, 247, 0.68);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
}

.tool-weather-glass .tool-weather-tags {
  justify-content: center;
}

.tool-weather-level {
  margin: var(--sp-16) 0 0;
  font-size: var(--fs-13);
  line-height: 1.7;
  color: var(--muted);
}

/* 操作区独立卡片（结果卡下方） */
.tool-weather-actions {
  margin-top: var(--sp-14);
}

/* =========================================================
   关系模式地图：断环出口结果卡
   ========================================================= */
.tool-cycle-note {
  margin: 0 0 var(--sp-18);
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.75;
}


.tool-cycle-exit {
  padding: var(--sp-18) var(--sp-20);
  border-radius: var(--r);
  background: var(--gold-a12);
  margin-bottom: var(--sp-22);
}

.tool-cycle-exit__label {
  margin: 0 0 var(--sp-8);
  color: var(--gold-ink);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tool-cycle-exit__need {
  margin: 0 0 var(--sp-8);
  color: var(--ink, var(--ink));
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: 1.5;
}


/* 关系模式地图：垂直循环流 */
.tool-flow {
  display: grid;
  gap: var(--sp-6);
  margin: var(--sp-4) 0 var(--sp-20);
}

.tool-flow-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-14);
}

.tool-flow-chip {
  flex: 0 0 auto;
  background: var(--teal);
  color: var(--surface);
  border-radius: var(--r-pill);
  padding: var(--sp-5) var(--sp-14);
  font-size: var(--fs-12-5);
  font-weight: 600;
  line-height: 1.4;
}

.tool-flow-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.7;
}

.tool-flow-arrow {
  color: var(--teal-a42);
  font-size: var(--fs-14);
  line-height: 1;
  padding-left: var(--sp-22);
}


.tool-cycle-exit__say {
  margin: 0 0 var(--sp-8);
  color: var(--ink-soft);
  font-size: var(--fs-13-5);
  line-height: 1.7;
}

.tool-cycle-exit__enc {
  margin: 0;
  color: var(--ink-soft);
  opacity: 0.7;
  font-size: var(--fs-12);
}

/* 关系流排版微调：芯片定宽对齐箭头、引导词降级 */
.tool-flow-chip {
  min-width: 58px;
  text-align: center;
}

.tool-flow-arrow {
  padding-left: var(--sp-26);
}

.tool-flow-pre {
  font-style: normal;
  color: var(--muted);
}

/* 关系流分岔胶囊 */
.tool-flow-fork {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
  margin: var(--sp-16) 0 0;
}

.tool-flow-fork__loop {
  border: 1.5px dashed var(--teal-a36);
  color: var(--ink-soft);
  opacity: 0.85;
  border-radius: var(--r-pill);
  padding: var(--sp-7) var(--sp-15);
  font-size: var(--fs-12-5);
  line-height: 1.5;
}

.tool-flow-fork__stop {
  background: var(--gold-a12);
  border: 1px solid var(--gold-a50);
  color: var(--gold-ink);
  border-radius: var(--r-pill);
  padding: var(--sp-7) var(--sp-15);
  font-size: var(--fs-12-5);
  font-weight: 600;
  line-height: 1.5;
}

/* =========================================================
   成长经历整理图：桥 · 那时 → 现在
   ========================================================= */
.tool-bridge-zone {
  margin-bottom: var(--sp-4);
}

.tool-bridge-zone__label {
  margin: 0 0 var(--sp-12);
  color: var(--teal);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tool-bridge-group {
  margin-bottom: var(--sp-14);
}

.tool-bridge-group__label {
  margin: 0 0 var(--sp-8);
  color: var(--ink-soft);
  font-size: var(--fs-12-5);
  font-weight: 500;
}

.tool-bridge-group__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.tool-bridge-svg {
  display: block;
  width: min(320px, 86%);
  margin: var(--sp-10) auto 0;
}

.tool-bridge-caption {
  margin: var(--sp-4) 0 var(--sp-18);
  text-align: center;
  color: var(--ink-soft);
  opacity: 0.75;
  font-size: var(--fs-12-5);
}

.tool-bridge-empty {
  margin: 0 0 var(--sp-12);
  color: var(--ink-soft);
  opacity: 0.7;
  font-size: var(--fs-13);
}