/* 汉字库 */
.hz-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:36px 0 8px}
.hz-filters{display:flex;gap:8px;flex-wrap:wrap}
.hz-filters button{padding:9px 16px;background:#f3f1e7;border:1px solid transparent;color:#345548;border-radius:999px}
.hz-filters button[aria-pressed=true]{background:var(--learn-green);color:#fff}
.hz-howto{margin:0 0 20px}
.hz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.hz-tile{background:#fff;border:2px solid var(--learn-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.hz-tile.is-picked{border-color:var(--learn-green)}
.hz-open{display:grid;justify-items:center;gap:2px;padding:0 0 10px;border:0;background:none;color:var(--ink);text-align:center}
.hz-open img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eef0e8}
.hz-open b{font:56px/1.25 KaiTi,STKaiti,serif;margin-top:4px}
.hz-open span{font-size:.8rem;color:var(--soft)}
.hz-open small{font-size:.72rem;color:#8a7a52;min-height:1.2em}
.hz-pick{margin-top:auto;border:0;border-top:1px solid var(--learn-line);background:#f7f8f2;color:var(--learn-green);padding:9px;font-weight:600;border-radius:0!important}
.hz-pick[aria-pressed=true]{background:var(--learn-green);color:#fff}
.hz-works-wall{margin-top:52px}
.hz-works-wall h2{font:600 1.6rem/1.5 var(--serif);margin:0 0 16px}
.hz-works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.hz-works-grid figure{margin:0;background:#fff;border:1px solid var(--learn-line);border-radius:12px;overflow:hidden}
.hz-works-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.hz-works-grid figcaption{padding:8px 10px;font-size:.8rem;color:var(--soft)}
.hanzi-page #sources{margin-top:48px}

/* 选字条：固定在底部 */
.hz-plan{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:2px solid var(--learn-green);box-shadow:0 -6px 24px #163b301f;padding:12px 0}
.hz-plan-inner{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
.hz-plan-inner b{color:var(--learn-green)}
.hz-plan-inner span{font:500 1.15rem var(--serif);letter-spacing:.08em}
.hz-plan-actions{display:flex;gap:8px;flex-wrap:wrap}
.hz-plan .is-disabled{opacity:.45;pointer-events:none}
.hz-plan-msg{width:min(1180px,calc(100% - 48px));margin:4px auto 0}
.hz-plan-msg:empty{display:none}
body.has-plan footer{padding-bottom:110px}

/* 详情窗 */
#hz-dialog{width:min(1040px,calc(100% - 24px))}
.hz-detail{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;margin-top:18px;align-items:start}
.hz-steps .step-dots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hz-steps .step-dots button{padding:8px 14px;background:#f3f1e7;border:1px solid transparent;color:#345548}
.hz-steps .step-dots button[aria-pressed=true]{background:var(--learn-green);color:#fff}
.hz-steps .picture-stage{aspect-ratio:16/9;background:#0f2a26;border-radius:14px;overflow:hidden}
.hz-steps .picture-stage img{width:100%;height:100%;object-fit:cover;display:block}
.hz-heading h2{font:4rem/1.1 KaiTi,STKaiti,serif;margin:0}
.hz-heading p{margin:6px 0 14px;color:var(--soft)}
.hz-heading.is-hidden{visibility:hidden}
.hz-side .writing-grid{margin:0}
.hz-side video{width:100%;margin-top:12px;border-radius:10px}
.hz-dialog-pick{margin-top:16px;width:100%}
.hz-dialog-pick[aria-pressed=true]{background:var(--learn-green);color:#fff}
.hz-works{border-top:1px solid var(--learn-line);margin-top:24px;padding-top:16px}
.hz-works h3{margin:0 0 12px;font-size:1rem}


@media(max-width:800px){.hz-detail{grid-template-columns:1fr}.hz-side{display:grid;justify-items:center;text-align:center}.hz-side .writer-actions{justify-content:center}}
@media(max-width:600px){.hz-filters{gap:6px}.hz-filters button{padding:6px 12px;font-size:.85rem}.hz-grid{grid-template-columns:repeat(3,1fr);gap:8px}.hz-open b{font-size:40px}.hz-open span{font-size:.7rem}.hz-pick{padding:7px;font-size:.8rem}.hz-plan-msg{width:calc(100% - 32px)}}
.hz-toolbar-right{display:flex;align-items:center;gap:12px}
.hz-toolbar-right p{margin:0}
.hz-open .py{font-size:.85rem;color:var(--soft);margin-top:6px;min-height:1.2em}
.hz-open b{margin-top:0}
/* 详情窗：看图认字 / 练笔顺 */
.hz-head{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:14px}
.hz-head .dialog-char b{font-size:3.6rem}
.hz-heading.is-hidden{visibility:hidden}
.hz-tabs{display:flex;gap:6px}
.hz-tabs button{padding:10px 18px;background:#f3f1e7;border:1px solid transparent;color:#345548;font-weight:600}
.hz-tabs button[aria-selected=true]{background:var(--learn-green);color:#fff}
.hz-head .hz-dialog-pick{margin:0 0 0 auto;width:auto}
.hz-panel{margin-top:16px}
.hz-panel .step-dots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;justify-content:flex-start}
.hz-panel .step-dots button{padding:8px 14px;background:#f3f1e7;border:1px solid transparent;color:#345548}
.hz-panel .step-dots button[aria-pressed=true]{background:var(--learn-green);color:#fff}
.hz-panel .picture-stage{aspect-ratio:16/9;background:#0f2a26;border-radius:14px;overflow:hidden;max-height:none}
.hz-panel .picture-stage img{width:100%;height:100%;object-fit:cover;display:block}
.hz-see-foot{margin-top:10px}
#hz-clip video{width:100%;margin-top:12px;border-radius:10px}
@media(max-width:600px){.hz-head .hz-dialog-pick{margin:0;width:100%}}
/* 启蒙班 / 进阶班 */
.hz-class-tabs{display:flex;gap:0;margin:28px 0 0;border-bottom:2px solid #e3e7dd}
.hz-class-tabs button{padding:12px 26px;border:0;background:none;font:600 1.05rem var(--serif);color:#6b7766;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:0!important}
.hz-class-tabs button[aria-selected=true]{color:#2f4a28;border-bottom-color:#e8737a}
.hz-jj-lesson{border:1px solid #e3e7dd;border-radius:5px;background:#fff;padding:16px 18px;margin-bottom:14px}
.hz-jj-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hz-jj-head h3{margin:0;font:600 1.15rem var(--serif);color:#2f4a28}
.hz-jj-head .xh-link{margin-left:auto;color:#cf5a64;font-size:14px;font-weight:600;text-decoration:none}
.hz-jj-label{margin:12px 0 6px;font-size:.78rem;color:#8a968f}
.hz-mini-grid{display:flex;flex-wrap:wrap;gap:8px}
.hz-mini{display:grid;justify-items:center;width:62px;padding:6px 0 8px;border:1px solid #e3e7dd;border-radius:5px;background:#fbfcf9;color:#2f4a28}
.hz-mini .py{font-size:.72rem;color:#6b7766;min-height:1.2em}
.hz-mini b{font:32px/1.2 KaiTi,STKaiti,serif}
.hz-mini.is-write{background:#fdf3f2;border-color:#f3d4d2}
.hz-mini:hover{border-color:#538047}
.hz-grid-jj{margin-top:12px}
.hz-mini.is-supplement{position:relative;border-color:#f3c9c6}
.hz-mini.is-supplement::after{content:"补";position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#e8737a;color:#fff;font-size:11px;line-height:18px;text-align:center}