/* ==========================================================
   汉字拆字 · 样式（朱红金褐，纸白底，与平台视觉一致）
   ========================================================== */
.cz-container { box-sizing: border-box; width: min(var(--brand-content-width), calc(100% - 32px)); margin: 0 auto; padding: 0 0 60px; }

/* ---------- 工具条 / 字库切换 ---------- */
.cz-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 16px; flex-wrap: wrap; }
.cz-lib-switch { display: inline-flex; padding: 4px; border-radius: 12px; background: #f4e9d6; border: 1px solid rgba(139,105,20,.24); }
.cz-lib-switch button {
    font-family: inherit; font-size: 13.5px; letter-spacing: 1px; cursor: pointer;
    padding: 7px 18px; border: none; border-radius: 9px; background: transparent; color: #8b7355;
    transition: all .22s;
}
.cz-lib-switch button:hover { color: #6b5a42; }
.cz-lib-switch button.on { background: linear-gradient(135deg,#b83a2b,#992e22); color: #fff; box-shadow: 0 3px 10px rgba(184,58,43,.28); }
.cz-meta { font-size: 12.5px; color: var(--text-muted); letter-spacing: .5px; }

/* ---------- 页签 ---------- */
.cz-tabs { display: flex; gap: 6px; margin: 0 0 20px; border-bottom: 1px solid rgba(139,105,20,.2); flex-wrap: wrap; }
.cz-tabs button {
    font-family: var(--brand-title-font); font-size: 16px; letter-spacing: 2px; cursor: pointer;
    padding: 10px 18px; border: none; background: transparent; color: #8b7355; position: relative;
    transition: color .22s;
}
.cz-tabs button:hover { color: #b83a2b; }
.cz-tabs button.on { color: #b83a2b; }
.cz-tabs button.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg,#b83a2b,#8b6914); }

/* ---------- 搜索行 ---------- */
.cz-searchrow { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.cz-input {
    flex: 1; min-width: 220px; padding: 12px 16px; font-family: inherit; font-size: 15px;
    color: var(--text-primary); background: #fffdf8;
    border: 1.5px solid rgba(139,105,20,.25); border-radius: 10px; outline: none;
    transition: border-color .25s, box-shadow .25s;
}
.cz-input:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(139,105,20,.08); }
.cz-btn {
    font-family: var(--brand-title-font); font-size: 16px; letter-spacing: 3px; cursor: pointer;
    padding: 11px 26px; border: none; border-radius: 10px; color: #fff;
    background: linear-gradient(135deg,#b83a2b,#922c21); box-shadow: 0 5px 16px rgba(184,58,43,.24);
    transition: transform .2s, box-shadow .2s;
}
.cz-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(184,58,43,.32); }
.cz-btn:active { transform: translateY(0); }
.cz-tip { font-size: 12.5px; color: var(--text-muted); margin: 0 0 20px; letter-spacing: .3px; }

/* ---------- 结果：字卡 ---------- */
.cz-result { display: block; }
.cz-charcard {
    padding: 20px 22px 22px; margin-bottom: 16px; border-radius: 12px; background: #fffdf8;
    border: 1px solid rgba(139,105,20,.22); box-shadow: 0 8px 26px rgba(60,50,35,.06);
    position: relative;
}
.cz-charcard::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(139,105,20,.12); border-radius: 8px; pointer-events: none; }
.cz-charcard-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.cz-charcode {
    font-family: var(--brand-title-font); font-size: 46px; line-height: 1; color: #3a3025; letter-spacing: 2px;
    width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 30% 20%, #fff8ee, #f6ead6); border-radius: 12px;
    border: 1px solid rgba(139,105,20,.3); box-shadow: inset 0 0 0 3px rgba(253,250,245,.9);
}
.cz-charcard-head .count { font-size: 13px; color: var(--accent-gold); letter-spacing: 1px; }
.cz-charcard-head .count b { font-size: 16px; color: #8b6914; }
.cz-charcard-head .pinyin-hint { font-size: 12.5px; color: var(--text-muted); }

/* 拆法行 */
.cz-splitrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; flex-wrap: wrap; border-top: 1px dashed rgba(139,105,20,.2); }
.cz-splitrow:first-of-type { border-top: none; }
.cz-splitrow .no { font-size: 11.5px; color: rgba(139,105,20,.65); width: 46px; flex: none; letter-spacing: .5px; }
.cz-parts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cz-part {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    min-width: 42px; height: 42px; padding: 0 10px; font-family: var(--brand-title-font); font-size: 24px;
    color: #fff; background: linear-gradient(140deg,#b83a2b,#922c21); border-radius: 9px;
    border: none; box-shadow: 0 3px 10px rgba(184,58,43,.26);
    transition: transform .2s, box-shadow .2s;
}
.cz-part:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px rgba(184,58,43,.34); }
.cz-plus { color: #b0894f; font-size: 15px; }

/* ---------- 结果：字网格（反查 / 繁简） ---------- */
.cz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.cz-charbtn {
    font-family: var(--brand-title-font); font-size: 26px; cursor: pointer; color: #3a3025;
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(168deg,#fbf6ec,#f4e9d6); border: 1px solid rgba(139,105,20,.24);
    border-radius: 10px; transition: transform .18s, box-shadow .18s, border-color .18s, color .18s;
}
.cz-charbtn:hover { transform: translateY(-2px); color: #b83a2b; border-color: rgba(184,58,43,.4); box-shadow: 0 8px 18px rgba(60,50,35,.12); }

/* ---------- 统计表 ---------- */
.cz-statwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cz-statrow {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer;
    background: #fffdf8; border: 1px solid rgba(139,105,20,.16); border-radius: 10px;
    transition: transform .18s, box-shadow .18s, border-color .18s; text-align: left; font-family: inherit;
}
.cz-statrow:hover { transform: translateY(-2px); border-color: rgba(139,105,20,.4); box-shadow: 0 8px 20px rgba(60,50,35,.1); }
.cz-statrow .rank { font-size: 12px; color: rgba(139,105,20,.6); width: 26px; text-align: right; flex: none; }
.cz-statrow .glyph {
    width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
    font-family: var(--brand-title-font); font-size: 24px; color: #fff;
    background: linear-gradient(140deg,#8b7355,#6f5b41); border-radius: 9px;
}
.cz-statrow .glyph.top { background: linear-gradient(140deg,#b83a2b,#922c21); }
.cz-statrow .info { flex: 1; min-width: 0; }
.cz-statrow .bar { height: 6px; border-radius: 3px; margin-top: 6px; background: rgba(139,105,20,.14); overflow: hidden; }
.cz-statrow .bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg,#b83a2b,#8b6914); }
.cz-statrow .n { font-size: 15px; font-weight: 700; color: #8b6914; letter-spacing: .5px; }

/* ---------- 对照卡 ---------- */
.cz-fjpair { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: #fbf6ec; border: 1px solid rgba(139,105,20,.18); margin-bottom: 10px; }
.cz-fjpair .arrow { color: #b83a2b; font-size: 20px; }

.cz-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.cz-loading { padding: 50px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.cz-count-tip { font-size: 13px; color: var(--accent-gold); margin: 0 0 14px; letter-spacing: .5px; }

@media (max-width: 640px) {
    .cz-charcode { width: 56px; height: 56px; font-size: 38px; }
    .cz-statwrap { grid-template-columns: 1fr; }
    .cz-tabs button { padding: 9px 12px; font-size: 15px; }
}