/* =========================================================
   char.css — 汉字小查
   配合 base.css + tool.css 使用。强调色印泥红 + 米纸黄。
   ========================================================= */

body.charpage{--a1:#ef5f62;--a2:#f6c76b}
.charpage [hidden]{display:none!important}
body.charpage .grad{background:linear-gradient(96deg,var(--a1),#ff9a6b 48%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.charpage mark{background:color-mix(in oklab,var(--a2) 30%,transparent);color:#fff;border-radius:4px;padding:0 .12em}

/* ---------- 概览标签 ---------- */
.char__tags{margin:0 0 20px}

/* ---------- 全站搜索 ---------- */
.char-search{display:flex;gap:10px;align-items:center;margin-top:22px}
.char-search .input{flex:1;min-width:0;font-family:var(--font-kai);font-size:1.06rem}
.char-search + .hint{margin:10px 0 0;min-height:1.2em}
.char-results{display:grid;gap:8px;margin-top:14px;padding:14px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);border:1px solid var(--line)}
.char-res{
  display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;text-align:left;width:100%;
  padding:12px 14px;border-radius:var(--radius-sm);cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.char-res:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--a1) 60%,transparent);background:rgba(255,255,255,.07)}
.char-res__kind{grid-row:1/-1;align-self:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  padding:.3em .6em;border-radius:6px;color:var(--a2);background:color-mix(in oklab,var(--a2) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--a2) 30%,transparent);white-space:nowrap}
.char-res__title{font-family:var(--font-kai);font-size:1.12rem;font-weight:620;letter-spacing:.02em}
.char-res__sub{grid-column:2;font-size:.82rem;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 今天容易错一个 ----------
   这一条是全页随机的，跟当前栏目无关，所以排在 hero 里、栏目条之上；下面留 22px 给栏目条。 */
.char-daily{
  display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;justify-content:space-between;
  margin:8px 0 22px;padding:clamp(18px,3vw,26px);border-radius:var(--radius);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in oklab,var(--a1) 20%,transparent),transparent 62%),var(--glass);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow);
}
.char-daily__copy{flex:1 1 340px;min-width:0}
.char-daily__kicker{margin:0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--a2)}
.char-daily__title{margin:8px 0 4px;font-family:var(--font-kai);font-size:clamp(1.3rem,4.6vw,1.9rem);
  font-weight:640;letter-spacing:.03em;color:#fbf3e6}
.char-daily__desc{margin:0;font-size:.92rem;line-height:1.85;color:var(--ink-2);max-width:62ch}
.char-daily__acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 转换区 ---------- */
.char-conv{display:grid;gap:16px}
.char-conv__top{display:grid;gap:14px}
.char-conv__ta{font-family:var(--font-kai);font-size:1.18rem;line-height:2;letter-spacing:.04em;min-height:130px}
.char-conv .seg{justify-self:start;flex-wrap:wrap}
.char-out{position:relative;padding:clamp(16px,3vw,22px);border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--shadow)}
.char-out__label{margin:0 0 8px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--muted)}
.char-out__text{margin:0;font-family:var(--font-kai);font-size:clamp(1.2rem,4.4vw,1.7rem);
  line-height:2.1;letter-spacing:.05em;color:#f7f1e5;word-break:break-word;overflow-wrap:anywhere}
.char-out__ghost{color:var(--muted);font-size:.9rem}
.char-out .btn{position:absolute;right:14px;bottom:12px}
.char-out{padding-bottom:56px}
.cv{border-radius:5px;padding:0 .06em}
.cv--ok{color:var(--a2);background:color-mix(in oklab,var(--a2) 12%,transparent)}
.cv--amb{color:#fff;background:color-mix(in oklab,var(--a1) 42%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--a1) 60%,transparent)}
.cv--same{color:var(--ink-2)}

.char-warn{padding:16px 18px;border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--a1) 9%,transparent);border:1px solid color-mix(in oklab,var(--a1) 30%,transparent)}
.char-warn__head{margin:0 0 10px;font-size:.88rem;font-weight:640;color:var(--ink)}
.char-warn ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.char-warn li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;
  padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.char-warn li b{grid-row:1/-1;align-self:center;font-family:var(--font-kai);font-size:1.6rem;font-weight:600;color:#fff;line-height:1}
.char-warn li span{font-family:var(--font-kai);font-size:1.02rem;letter-spacing:.03em;color:var(--ink)}
.char-warn li i{grid-column:2;font-style:normal;font-size:.82rem;line-height:1.7;color:var(--muted)}
.char-warn__foot{margin:12px 0 0;font-size:.8rem;line-height:1.75;color:var(--ink-2)}

/* ---------- 表格与筛选 ---------- */
.char-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.char-tools .input{flex:1;min-width:180px}
.char-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.char-cats .chip[aria-pressed="true"]{color:#0a0714;font-weight:620;border-color:transparent;
  background:linear-gradient(100deg,var(--a1),var(--a2))}
.char-table{display:grid;gap:8px}
.char-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.char-row__main{
  display:grid;grid-template-columns:auto auto 1fr auto 1.4fr;gap:6px 16px;align-items:center;text-align:left;
  min-width:0;padding:14px 18px;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.char-row__main:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--a1) 60%,transparent);background:rgba(255,255,255,.07)}
.char-row--amb .char-row__main{background:color-mix(in oklab,var(--a1) 8%,rgba(255,255,255,.04));border-color:color-mix(in oklab,var(--a1) 26%,transparent)}
.char-row__kind{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;white-space:nowrap;
  padding:.3em .55em;border-radius:6px;color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.char-row--amb .char-row__kind{color:var(--a1);border-color:color-mix(in oklab,var(--a1) 34%,transparent)}
.char-row__trad,.char-row__simp{font-family:var(--font-kai);font-size:1.16rem;letter-spacing:.04em;line-height:1.5;
  overflow-wrap:anywhere;word-break:break-word}
.char-row__simp{color:var(--a2)}
.char-row__arrow{color:var(--muted);font-size:.9rem}
.char-row__word{font-size:.82rem;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.char-row__note{grid-column:1/-1;margin:0;padding:10px 16px;border-radius:var(--radius-sm);
  font-size:.82rem;line-height:1.75;color:var(--ink-2);
  background:rgba(255,255,255,.03);border-left:3px solid color-mix(in oklab,var(--a1) 60%,transparent)}
.char-fav{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;min-width:66px;min-height:44px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s}
.char-fav:hover{color:var(--ink);border-color:var(--line-2)}
.char-fav[aria-pressed="true"]{color:#1a0b06;background:linear-gradient(100deg,var(--a2),#ffe4a8);border-color:transparent}
.char-row__note,.char-card__note,.char-card__eg{margin:0}

/* ---------- 卡片（多音字 / 易读错 / 易写错） ---------- */
.char-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.char-card{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--glass-brd);box-shadow:0 14px 30px -22px rgba(0,0,0,.8)}
.char-card__top{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.char-card__big{font-family:var(--font-kai);font-size:2.4rem;font-weight:640;line-height:1;color:#fff;letter-spacing:.02em}
.char-card__big--group{font-size:1.6rem;letter-spacing:.04em;line-height:1.3}
.char-card__word{font-family:var(--font-kai);font-size:1.5rem;font-weight:620;line-height:1.2;color:#fff}
.char-card__kind{margin-right:auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  padding:.34em .6em;border-radius:6px;color:var(--a2);
  background:color-mix(in oklab,var(--a2) 12%,transparent);border:1px solid color-mix(in oklab,var(--a2) 30%,transparent)}
.char-card__reads{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.char-py{display:inline-flex;align-items:baseline;gap:6px;padding:7px 11px;border-radius:10px;
  background:rgba(255,255,255,.045);border:1px solid var(--line)}
.char-py b{font-family:var(--font-mono);font-size:.94rem;font-weight:700;color:var(--a1)}
.char-py i{font-style:normal;font-family:var(--font-kai);font-size:.98rem;color:var(--ink-2)}
.char-pair{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.char-pair__right,.char-pair__wrong{font-family:var(--font-mono);font-size:.84rem;padding:.36em .7em;border-radius:8px}
.char-pair__right{color:#04140d;background:var(--mint)}
.char-pair__wrong{color:var(--pink);border:1px solid color-mix(in oklab,var(--pink) 40%,transparent);background:color-mix(in oklab,var(--pink) 10%,transparent)}
.char-card__note{font-size:.88rem;line-height:1.85;color:var(--ink-2)}
.char-card__eg{font-family:var(--font-kai);font-size:.94rem;line-height:1.8;color:var(--muted);
  padding-top:10px;border-top:1px dashed var(--line)}

/* ---------- 最近查询 ---------- */
.char-recent{margin-top:clamp(28px,4vw,40px)}
.char-recent__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  font-size:.94rem;font-weight:640;color:var(--ink-2)}
.char-recent__head .btn{margin-left:auto}
.char-recent__list{display:flex;flex-wrap:wrap;gap:8px}
.char-hist{display:inline-flex;align-items:baseline;gap:8px;padding:8px 13px;border-radius:999px;cursor:pointer;
  font-size:.86rem;color:var(--ink);background:rgba(255,255,255,.045);border:1px solid var(--line);
  transition:color .25s,border-color .25s,transform .25s var(--ease);max-width:100%}
.char-hist:hover{border-color:var(--line-2);transform:translateY(-1px)}
.char-hist span{font-family:var(--font-kai);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.char-hist i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted)}

/* ---------- 跳转高亮 ---------- */
.is-flash{animation:charflash 1.8s var(--ease) 1}
@keyframes charflash{
  0%{box-shadow:0 0 0 2px color-mix(in oklab,var(--a2) 90%,transparent);background:color-mix(in oklab,var(--a2) 16%,transparent)}
  70%{box-shadow:0 0 0 2px color-mix(in oklab,var(--a2) 40%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------- 收尾 ---------- */
#tsMore{margin-top:12px}
.charpage .history__empty{margin-top:14px}
.charpage .view__note{margin-top:22px}

@media (max-width:700px){
  .char-row__main{grid-template-columns:auto 1fr auto;gap:4px 12px}
  .char-row__trad{grid-column:2}
  .char-row__arrow{grid-column:3;justify-self:end}
  .char-row__simp{grid-column:2}
  .char-row__word{grid-column:1/-1}
  .char-cards{grid-template-columns:1fr}
  /* 窄屏把「今天容易错一个」压矮：说明留一行，两个按钮竖着贴到右上，栏目条就不会被推得太远 */
  .char-daily{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:start;padding:18px 18px 18px 20px}
  .char-daily__copy{grid-column:1;grid-row:1;flex:none}
  .char-daily__desc{margin:4px 0 0;font-size:.86rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .char-daily__title{margin:4px 0 0;font-size:1.32rem}
  .char-daily__acts{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;gap:6px}
  .char-daily__acts .btn{font-size:.8rem;padding:.45em .8em}
}
@media (prefers-reduced-motion:reduce){
  .char-res:hover,.char-row__main:hover,.char-hist:hover{transform:none}
  .is-flash{animation:none;box-shadow:0 0 0 2px var(--a2)}
}