/* =========================================================
   couplet.css — 对联与句读
   配合 base.css + tool.css 使用。强调色描金 + 绛紫（不与诗词卡的紫粉撞色）。
   平仄、断点、判定位都用小面积色块表意，颜色之外都另有文字或符号。
   ========================================================= */

body.couplet{--a1:#e3b23c;--a2:#c2557a;--cp-ping:#5fd0b3;--cp-ze:#e0768f;--cp-warn:var(--amber);--cp-bad:#ff8fa0;--cp-ok:var(--mint)}
body.couplet .grad{background:linear-gradient(96deg,#f2ce6c,var(--a1) 34%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
body.couplet [hidden]{display:none!important}
.cp__summary,.cp-verdict,.cp-al,.cp-chars,.cpq,.cpq__feedback{font-variant-numeric:tabular-nums}

/* ---------- 通用小节 ---------- */
.cp__fields{grid-template-columns:1fr}
@media (min-width:620px){.cp__fields{grid-template-columns:1fr 1fr}.cp__fields .field:nth-child(3){grid-column:1/-1}}
.cp__dqfields{grid-template-columns:1fr;max-width:460px}
.cp__caveat{margin:0 0 16px;font-size:.86rem;line-height:1.85;color:var(--ink-2);max-width:68ch}
.cp__caveat b{color:var(--a1);font-weight:660}
.cp__listnote{margin:0 0 14px;font-size:.86rem;line-height:1.8;color:var(--ink-2);max-width:64ch}
.cp__notice{margin:20px 0 0;padding:16px 18px;border-radius:var(--radius-sm);font-size:.9rem;line-height:1.8;color:var(--ink-2);background:rgba(255,255,255,.05);border:1px dashed var(--line-2)}
/* 核对一次占满一行，下面三颗并排：填叠字联 / 清空重写 / 存成卡片（手机上也是三列，字略小） */
.cp__controls{grid-template-columns:repeat(3,1fr)}
.cp__controls .ctl--main{grid-column:1/-1}
.cp__controls .ctl{font-size:.86rem;padding-inline:6px}
/* 浏览器接得住图片时多一颗「分享这张卡」：手机上四颗排成 2×2，别让它自己占一列 */
.cp__controls--share{grid-template-columns:repeat(2,1fr)}
@media (min-width:761px){
  .cp__controls .ctl{font-size:inherit;padding-inline:0}
  .cp__controls--share{grid-template-columns:repeat(4,1fr)}
  .cp__controls--dq{grid-template-columns:repeat(4,1fr)}
}
.cp__cardhint{margin:12px 0 0;font-size:.82rem;line-height:1.8;color:var(--muted);max-width:64ch}

/* ---------- 视图一：核对结论 ---------- */
.cp__summary{
  margin:18px 0 0;padding:14px 18px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.03em;line-height:1.7;color:var(--ink-2);
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-left:3px solid var(--a1);
}
.cp__summary:focus-visible{outline:2px solid var(--a2);outline-offset:3px}
.cp-verdicts{display:grid;gap:10px;margin-top:16px}
.cp-verdict{
  display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;
  padding:14px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.cp-verdict b{font-size:.98rem;font-weight:640;letter-spacing:.01em}
.cp-verdict p{grid-column:2;margin:0;font-size:.88rem;line-height:1.78;color:var(--ink-2)}
.cp-verdict__mark{
  grid-row:1/3;align-self:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  padding:.34em .62em;border-radius:6px;color:var(--muted);
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
}
.cp-verdict.is-ok{border-color:color-mix(in oklab,var(--cp-ok) 34%,transparent);background:color-mix(in oklab,var(--cp-ok) 7%,transparent)}
.cp-verdict.is-ok .cp-verdict__mark{color:#082a1e;background:var(--cp-ok);border-color:transparent}
.cp-verdict.is-bad{border-color:color-mix(in oklab,var(--cp-bad) 38%,transparent);background:color-mix(in oklab,var(--cp-bad) 8%,transparent)}
.cp-verdict.is-bad .cp-verdict__mark{color:#2c0710;background:var(--cp-bad);border-color:transparent}
.cp-verdict.is-unknown .cp-verdict__mark{color:#2a1e04;background:var(--cp-warn);border-color:transparent}

/* ---------- 视图一：逐字对齐 ---------- */
.cp-al__head{
  display:grid;grid-template-columns:42px 1fr 1fr;gap:8px;align-items:baseline;
  padding:0 6px 8px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted);
}
.cp-al__body{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.cp-al__row{display:grid;grid-template-columns:42px 1fr 1fr;gap:8px;align-items:center;padding:6px;border-radius:10px;background:rgba(255,255,255,.03)}
.cp-al__row > span{min-width:0}
.cp-al__row.is-same{background:color-mix(in oklab,var(--cp-bad) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--cp-bad) 40%,transparent)}
.cp-al__row.is-extra{background:rgba(255,255,255,.05);border-left:3px solid var(--a1)}
.cp-al__i{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);text-align:center}
.cp-al__gap{margin:12px 0 0;font-size:.86rem;line-height:1.75;color:var(--a2)}

/* ---------- 视图一 / 通用：字块 ---------- */
.cp-chars{display:grid;gap:14px;margin-top:6px}
.cp-side{padding:14px 16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.035);border:1px solid var(--line)}
.cp-side__tag{display:block;margin-bottom:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--muted)}
.cp-side__chars{display:flex;flex-wrap:wrap;gap:8px}
.cp-ch{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:6px 30px 6px 11px;border-radius:11px;
  font-family:var(--font-kai);font-size:1.16rem;line-height:1.35;letter-spacing:.04em;color:#f6f0e4;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
}
.cp-ch i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.cp-ch.is-ping i{color:var(--cp-ping)}
.cp-ch.is-ze i{color:var(--cp-ze)}
.cp-ch.is-unknown i{color:var(--cp-warn)}
.cp-ch.is-unknown{border-style:dashed}
.cp-ch.is-forced{background:color-mix(in oklab,var(--a2) 14%,transparent);border-color:color-mix(in oklab,var(--a2) 48%,transparent)}
.cp-ch.is-missing{opacity:.55;border-style:dashed;font-family:var(--font-mono);font-size:.9rem;padding-right:11px}
.cp-ch__ov{position:absolute;right:6px;top:50%;translate:0 -50%;display:grid;place-items:center;cursor:pointer}
.cp-ch__ov input{
  appearance:none;-webkit-appearance:none;margin:0;width:15px;height:15px;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--line-2);transition:background .2s,border-color .2s;
}
.cp-ch__ov input:checked{background:var(--a2);border-color:var(--a2);box-shadow:0 0 10px -2px color-mix(in oklab,var(--a2) 80%,transparent)}
.cp-ch:focus-within{outline:2px solid var(--a2);outline-offset:2px}
.cp-side__chars .cp-ch:not(.is-forced) .cp-ch__ov input{opacity:.62}
.cp-side__chars .cp-ch:not(.is-forced) .cp-ch__ov input:hover{opacity:1}

/* ---------- 视图二 / 三：检索条 ---------- */
.cp-search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.cp-search .input{flex:1 1 240px;min-width:0}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
body.couplet .chip[aria-pressed="true"]{
  color:#1b0d16;font-weight:640;border-color:transparent;
  background:linear-gradient(100deg,var(--a1),var(--a2));box-shadow:0 8px 22px -12px color-mix(in oklab,var(--a2) 80%,transparent);
}

/* ---------- 视图二：对语卡 ---------- */
.cp-pairgrid{display:grid;gap:12px}
.cp-pair{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--radius-sm);
  background:linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.02) 60%,rgba(255,255,255,.045));
  border:1px solid var(--glass-brd);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.cp-pair:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--a1) 45%,transparent)}
.cp-pair__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%}
.cp-pair__t{margin:0;font-family:var(--font-kai);font-size:1.3rem;font-weight:640;letter-spacing:.05em;line-height:1.5;color:#faf3e6}
.cp-pair__cat{
  flex:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--a2);
  padding:.3em .6em;border-radius:6px;background:color-mix(in oklab,var(--a2) 13%,transparent);
  border:1px solid color-mix(in oklab,var(--a2) 32%,transparent);
}
.cp-pair__from{margin:0;font-size:.78rem;letter-spacing:.04em;color:var(--muted)}
.cp-pair__plain{margin:0;font-size:.92rem;line-height:1.82;color:var(--ink-2)}
@media (min-width:761px){.cp-pairgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- 视图三：名联卡 ---------- */
.cp-linklist{display:grid;gap:14px}
.cp-link{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  padding:22px clamp(18px,4vw,26px);border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 0 0,color-mix(in oklab,var(--a1) 11%,transparent),transparent 58%),
    rgba(255,255,255,.04);
  border:1px solid var(--glass-brd);
}
.cp-link__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;width:100%}
.cp-link__kind{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:#1b0d16;
  padding:.3em .62em;border-radius:6px;background:linear-gradient(100deg,var(--a1),#f0d07f);
}
.cp-link__meta{font-size:.8rem;color:var(--muted)}
.cp-link__sides{
  display:grid;gap:8px;width:100%;padding:16px 18px;border-radius:var(--radius-sm);
  background:linear-gradient(110deg,color-mix(in oklab,var(--a1) 7%,transparent),rgba(255,255,255,.025));
  border:1px solid color-mix(in oklab,var(--a1) 18%,transparent);
}
.cp-link__side{display:flex;align-items:baseline;gap:12px;margin:0}
.cp-link__side i,.cp-link__heng i{flex:none;font-style:normal;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted);min-width:2.4em}
.cp-link__side span{font-family:var(--font-kai);font-size:clamp(1.1rem,4.2vw,1.34rem);font-weight:600;line-height:1.72;letter-spacing:.05em;color:#faf3e6}
.cp-link__heng{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:0 0 4px;padding:0 0 12px;border-bottom:1px dashed color-mix(in oklab,var(--a1) 26%,transparent)}
.cp-link__heng span{font-family:var(--font-kai);font-size:1.18rem;font-weight:600;line-height:1.6;letter-spacing:.18em;color:var(--a1)}
.cp-link__note{margin:0;padding-top:10px;border-top:1px dashed var(--line);width:100%;font-size:.88rem;line-height:1.82;color:var(--ink-2)}
.cp-link__note::before{content:"说 · ";font-family:var(--font-mono);font-size:.84em;letter-spacing:.08em;color:var(--a2)}
/* 名联底部两颗按钮：收藏这副 + 存成卡片（后者靠右，春节时随手存图发朋友圈） */
.cp-link__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%}
.cp-link__acts .cp-link__save{margin-left:auto}

/* ---------- 视图四：断句板 ---------- */
.cp__dqfields + .cpq{margin-top:18px}
.cpq{
  padding:clamp(20px,5vw,34px);border-radius:var(--radius);
  background:
    radial-gradient(120% 80% at 100% 0,color-mix(in oklab,var(--a1) 16%,transparent),transparent 60%),
    var(--glass);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.cpq:focus-visible{outline:2px solid var(--a2);outline-offset:3px}
.cpq__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 18px}
.cpq__head b{font-family:var(--font-kai);font-size:1.16rem;font-weight:640;letter-spacing:.04em}
.cpq__lv{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--a2);
  padding:.28em .6em;border-radius:6px;background:color-mix(in oklab,var(--a2) 13%,transparent);
  border:1px solid color-mix(in oklab,var(--a2) 32%,transparent);
}
.cpq__head .num{font-size:.74rem;color:var(--muted)}
.cpq__line{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px 0;line-height:1.5}
.cpq__ch{
  font-family:var(--font-kai);font-size:clamp(1.45rem,6vw,2rem);font-weight:600;letter-spacing:.04em;
  padding:2px 1px;color:#faf3e6;
}
.cpq__gap{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  width:22px;min-height:2.1em;padding:2px 0 0;margin:0 1px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
/* 断句点只有 22 宽，手指按不准；左右各撑 10px（中间隔着一个字，撑不到邻位） */
.cpq__gap::after{content:"";position:absolute;inset:-8px -10px}
.cpq__gap::before{content:"";width:2px;height:.9em;border-radius:2px;background:rgba(255,255,255,.24)}
.cpq__gap i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;line-height:1;color:var(--a1)}
.cpq__gap:hover:not([disabled]){background:rgba(255,255,255,.11);transform:translateY(-1px)}
.cpq__gap:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.cpq__gap[aria-pressed="true"]{background:color-mix(in oklab,var(--a1) 26%,transparent)}
.cpq__gap[aria-pressed="true"]::before{background:var(--a1)}
.cpq__gap[disabled]{cursor:default}
.cpq__gap.is-hit{background:color-mix(in oklab,var(--cp-ok) 24%,transparent)}
.cpq__gap.is-hit i{color:var(--cp-ok)}
.cpq__gap.is-hit::before{background:var(--cp-ok)}
.cpq__gap.is-miss{background:color-mix(in oklab,var(--cp-warn) 24%,transparent)}
.cpq__gap.is-miss i{color:var(--cp-warn)}
.cpq__gap.is-miss::before{background:var(--cp-warn)}
.cpq__gap.is-false{background:color-mix(in oklab,var(--cp-bad) 24%,transparent)}
.cpq__gap.is-false i{color:var(--cp-bad)}
.cpq__gap.is-false::before{background:var(--cp-bad)}
.cpq__gap.is-none{background:rgba(255,255,255,.03);opacity:.6}
.cpq__gap.is-none i{display:none}
.cpq__mark{align-self:center;padding:0 1px;font-family:var(--font-mono);font-size:.9rem;color:var(--a2)}
.cpq__mark--end{color:var(--a1)}
@media (max-width:400px){.cpq__gap{width:18px}}

/* ---------- 视图四：反馈 ---------- */
.cpq__feedback{margin-top:18px;display:grid;gap:12px}
.cpq__tip{margin:0;font-size:.86rem;line-height:1.8;color:var(--muted);max-width:62ch}
.cpq__answer{
  margin:0;padding:16px 18px;border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--a2) 9%,transparent);border-left:3px solid var(--a2);
}
.cpq__answer b{display:block;font-family:var(--font-kai);font-size:clamp(1.08rem,4vw,1.32rem);font-weight:600;line-height:1.95;letter-spacing:.04em;color:#faf3e6}
.cpq__score{margin:0;font-size:.94rem;font-weight:640;letter-spacing:.01em;color:var(--ink-2)}
.cpq__score.is-good{color:var(--cp-ok)}
.cpq__score.is-bad{color:var(--cp-bad)}
.cpq__why{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-2);max-width:66ch}
.cpq__why::before{content:"解 · ";font-family:var(--font-mono);font-size:.84em;letter-spacing:.08em;color:var(--a1)}