/* ═══════════════════════════════════════════════════════════
   taste.css —— 专题篇章「审美工程」共用设计系统
   背景：本章 12 页交互密度极高（每页 2~3 处以上可玩组件），
   若按成本篇的做法每页各写一套样式，A/B 找茬、迷你界面、
   点选题这些跨页组件会复制 12 遍并逐渐漂移。
   设计意图：本章讲的就是「一致性产生系统感」，篇章样式自身
   必须是正面教材——主题色、圆角、间距全部收敛在这一个文件里，
   页面特有样式才允许写在各页 <style> 中。
   约束：全章唯一主色 --ct（玫红），间距一律 8 的倍数；
   在 lesson.css 之后引入，只做增量不覆盖骨架。
   ═══════════════════════════════════════════════════════════ */

:root{
  --ct:#db2777;            /* 章主色：玫红 */
  --ct-deep:#9d174d;       /* 深玫红：正文里的强调字 */
  --ct-soft:rgba(219,39,119,.08);
  --ct-line:rgba(219,39,119,.25);
  --good:#16a34a;
  --good-soft:rgba(22,163,74,.08);
  --bad:#dc2626;
  --bad-soft:rgba(220,38,38,.07);
}

.lesson-header .kicker{color:var(--ct);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chip{padding:6px 14px;border-radius:999px;background:var(--ct-soft);color:var(--ct-deep);font-size:13px;font-weight:700;}
.desc{font-size:15px;color:var(--sub);line-height:1.8;}
.desc b{color:var(--ct-deep);}
.quote-card{background:var(--ct-soft);border:1.5px solid var(--ct-line);border-radius:14px;padding:16px 24px;font-size:16px;line-height:1.8;}
.quote-card b{color:var(--ct-deep);}

/* ── 表格（对齐成本篇的表格语言） ── */
.tbl-wrap{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.5px;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card);}
.tbl th{background:var(--ct-soft);color:var(--ct-deep);font-weight:800;text-align:left;padding:12px 16px;font-size:13px;}
.tbl td{padding:12px 16px;border-top:1px solid var(--border);color:var(--sub);line-height:1.65;vertical-align:top;}
.tbl td b{color:var(--ct-deep);}

/* ── 交互容器：所有能玩的组件统一装进 .toy ──
   头部彩条 + 「动手」徽标是全章交互区的统一识别色，
   读者扫一眼就知道这块能点。 */
.toy{background:var(--card);border:1.5px solid var(--border);border-radius:14px;margin-top:16px;box-shadow:var(--shadow-card);overflow:hidden;}
.toy-head{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.015);}
.toy-head .toy-ic{width:26px;height:26px;border-radius:8px;background:var(--ct-soft);color:var(--ct);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toy-head .toy-ic svg{width:15px;height:15px;}
.toy-head .toy-t{font-size:14px;font-weight:800;color:var(--text);}
.toy-head .toy-badge{margin-left:auto;font-size:11px;font-weight:800;padding:3px 12px;border-radius:999px;background:var(--ct-soft);color:var(--ct-deep);white-space:nowrap;}
.toy-head .toy-badge.solved{background:var(--good-soft);color:var(--good);}
.toy-body{padding:20px;}
.toy-hint{font-size:12.5px;color:var(--sub);font-weight:600;margin-bottom:12px;}

/* ── A/B 对决（找茬）：两块界面选出更好的那块 ── */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.duel-side{position:relative;border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s;background:var(--bg);}
.duel-side:hover{border-color:var(--ct-line);transform:translateY(-2px);box-shadow:var(--shadow-pop);}
.duel.done .duel-side{cursor:default;}
.duel.done .duel-side:hover{transform:none;box-shadow:none;}
.duel-side .duel-tag{position:absolute;top:8px;left:8px;z-index:2;font-size:11px;font-weight:800;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--sub);border:1px solid var(--border);}
.duel-side.win{border-color:var(--good);}
.duel-side.lose{border-color:var(--bad);opacity:.75;}
.duel-side.win .duel-tag{background:var(--good);color:#fff;border-color:var(--good);}
.duel-side.lose .duel-tag{background:var(--bad);color:#fff;border-color:var(--bad);}
.duel-verdict{margin-top:14px;padding:14px 18px;border-radius:10px;font-size:13.5px;line-height:1.8;display:none;}
.duel-verdict.show{display:block;}
.duel-verdict.good{background:var(--good-soft);border:1.5px solid rgba(22,163,74,.25);color:var(--text);}
.duel-verdict.good b{color:var(--good);}
.duel-verdict.miss{background:rgba(100,116,139,.07);color:var(--sub);}
.duel-verdict.miss b{color:var(--text);}

/* ── 迷你界面积木：页内所有「假界面」的统一零件 ──
   pointer-events 关掉，读者点的是整块卡片而不是假按钮。 */
.mock{background:#fff;padding:16px;min-height:150px;pointer-events:none;user-select:none;font-size:12px;line-height:1.5;}
.mock *{box-sizing:border-box;}
.mock-bar{height:8px;border-radius:4px;background:#e5e7eb;}
.mock-dot{width:24px;height:24px;border-radius:50%;background:#e5e7eb;flex-shrink:0;}
.mock-h{font-weight:800;color:#111827;}
.mock-p{color:#6b7280;}
.mock-btn{display:inline-block;padding:5px 14px;border-radius:8px;font-size:11px;font-weight:700;background:#111827;color:#fff;}
.mock-btn.ghost{background:transparent;color:#6b7280;border:1px solid #d1d5db;}
.mock-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px;}
.mock-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;}

/* ── 点选题（多选项挑一个） ── */
.quiz-opts{display:flex;flex-direction:column;gap:10px;}
.quiz-opt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;background:var(--card);font-size:14px;line-height:1.65;color:var(--text);}
.quiz-opt:hover{border-color:var(--ct-line);background:var(--ct-soft);}
.quiz-opt .qo-key{width:24px;height:24px;border-radius:8px;background:rgba(0,0,0,.05);color:var(--sub);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:1px;}
.quiz-opt.right{border-color:var(--good);background:var(--good-soft);cursor:default;}
.quiz-opt.right .qo-key{background:var(--good);color:#fff;}
.quiz-opt.wrong{border-color:var(--bad);background:var(--bad-soft);cursor:default;opacity:.8;}
.quiz-opt.wrong .qo-key{background:var(--bad);color:#fff;}
.quiz-fb{margin-top:12px;padding:12px 16px;border-radius:10px;font-size:13.5px;line-height:1.8;display:none;}
.quiz-fb.show{display:block;}
.quiz-fb.good{background:var(--good-soft);border:1.5px solid rgba(22,163,74,.25);color:var(--text);}
.quiz-fb.good b{color:var(--good);}
.quiz-fb.miss{background:rgba(100,116,139,.07);color:var(--sub);}

/* ── 迷你浏览器外壳：所有 mock 教具的统一画框 ──
   背景：v1.3 验收打回，裸的 mock 读起来像没画完的线框图。
   设计意图：三个圆点 + 地址栏的顶栏让读者一眼认出「这是展品」，
   正反案例的差距才会读成档次差而非完成度差。
   用法：<div class="mockwin"><div class="mockwin-bar"><i></i><i></i><i></i>
   <span class="mockwin-url">yoga.example.com</span></div>
   <div class="mock">…</div></div> */
.mockwin{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.mockwin-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#f4f4f5;border-bottom:1px solid var(--border);}
.mockwin-bar i{width:9px;height:9px;border-radius:50%;background:#d4d4d8;flex-shrink:0;}
.mockwin-bar i:first-child{background:#fca5a5;}
.mockwin-bar i:nth-child(2){background:#fcd34d;}
.mockwin-bar i:nth-child(3){background:#86efac;}
.mockwin-url{margin-left:8px;flex:1;min-width:0;font-size:10.5px;color:#a1a1aa;background:#fff;border-radius:6px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,monospace;}

/* ── 滑块行 ── */
.sl-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.sl-row label{font-size:14px;font-weight:700;color:var(--text);min-width:96px;}
.sl-row input[type=range]{flex:1;min-width:160px;accent-color:var(--ct);}
.sl-row .sl-val{font-size:14px;font-weight:800;min-width:88px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ct-deep);}

/* ── 分段切换 ── */
.seg{display:inline-flex;background:rgba(0,0,0,.05);border-radius:10px;padding:3px;gap:2px;}
.seg button{border:none;background:transparent;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;font-family:inherit;transition:background .15s,color .15s;}
.seg button.on{background:#fff;color:var(--ct-deep);box-shadow:0 1px 3px rgba(0,0,0,.1);}

/* ── 要点回顾 ── */
.takeaways{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.tk-item{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-card);}
.tk-ic{width:22px;height:22px;border-radius:7px;background:var(--ct-soft);color:var(--ct);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:13px;margin-top:1px;}
.tk-item p{font-size:14px;line-height:1.75;color:var(--text);margin:0;}
.tk-item p b{color:var(--ct-deep);}

/* ── 图片对比 / 挑选 ── */
.pic-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pic-cell{position:relative;border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s;background:#000;}
.pic-cell:hover{border-color:var(--ct-line);transform:translateY(-2px);}
.pic-cell img{width:100%;display:block;aspect-ratio:1;object-fit:cover;}
.pic-cell .pic-tag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:800;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px);}
.pic-cell.win{border-color:var(--good);}
.pic-cell.lose{border-color:var(--bad);opacity:.7;}
.pic-grid.done .pic-cell{cursor:default;}
.pic-grid.done .pic-cell:hover{transform:none;}
.pic-cap{font-size:12.5px;color:var(--sub);padding:8px 4px 0;line-height:1.6;}

/* ── 出处注脚 ── */
.src-note{margin-top:32px;font-size:13px;color:var(--sub);line-height:1.85;}
.src-note b{color:var(--text);}

@media (max-width:768px){
  .duel{grid-template-columns:1fr;}
  .pic-grid{grid-template-columns:1fr;}
  .toy-body{padding:16px;}
  .toy-head .toy-badge{display:none;}
}