/* ═══════════════════════════════════════════════════════════
   psy.css —— 专题篇章「AI 产品心理学」样式覆盖
   背景：本章 v3 起复用审美工程的组件体系（taste.css 的
   toy / duel / quiz / mockwin / takeaways），组件颜色全部走
   --ct 系列变量，本文件只负责把章色从玫红换成青色，
   并保留旧页面在用的 --psy 别名。
   约束：必须在 taste.css 之后引入；页面特有样式写在各页 <style>。
   ═══════════════════════════════════════════════════════════ */

:root{
  --ct:#0d9488;            /* 章主色：青 */
  --ct-deep:#115e59;
  --ct-soft:rgba(13,148,136,.08);
  --ct-line:rgba(13,148,136,.28);
  /* 旧页面别名，v3 重做完成后可移除 */
  --psy:#0d9488;
  --psy-deep:#115e59;
  --psy-soft:rgba(13,148,136,.08);
  --psy-line:rgba(13,148,136,.28);
}

/* 本章仪表类教具的公共零件：许多页要显示一个「情绪 / 弃用率 / 折扣」仪表，
   拨开关看指针移动是本章工程杠杆的标准演示形态。 */
.gauge{display:flex;flex-direction:column;gap:6px;}
.gauge-head{display:flex;align-items:baseline;justify-content:space-between;}
.gauge-label{font-size:12.5px;font-weight:800;color:var(--sub);}
.gauge-num{font-size:22px;font-weight:900;color:var(--ct-deep);font-variant-numeric:tabular-nums;transition:color .25s;}
.gauge-num.bad{color:var(--bad);}
.gauge-track{height:12px;border-radius:8px;background:rgba(0,0,0,.06);overflow:hidden;}
.gauge-fill{height:100%;border-radius:8px;background:var(--ct);width:0;transition:width .45s cubic-bezier(.22,1,.36,1),background .3s;}
.gauge-fill.bad{background:var(--bad);}
.gauge-note{font-size:12px;color:var(--sub);line-height:1.7;}

/* 开关行：工程杠杆的标准形态，拨一下，上面的仪表当场动 */
.lever-list{display:flex;flex-direction:column;gap:10px;}
.lever{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;transition:border-color .18s,background .18s;}
.lever:hover{border-color:var(--ct-line);}
.lever.on{border-color:var(--ct);background:var(--ct-soft);}
.lever-sw{width:38px;height:22px;border-radius:99px;background:rgba(0,0,0,.15);flex-shrink:0;position:relative;transition:background .2s;margin-top:2px;}
.lever-sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.22,1,.36,1);}
.lever.on .lever-sw{background:var(--ct);}
.lever.on .lever-sw::after{transform:translateX(16px);}
.lever-body h6{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.5;}
.lever-body p{font-size:12.5px;color:var(--sub);line-height:1.7;margin-top:2px;}
.lever-body p b{color:var(--ct-deep);}