:root {
    --primary-color: #9E2A2B;
    --secondary-color: #F0DB4F;
    --accent-color: #3A5A40;
    --sidebar-width: 320px;
}

/* ========================================================================== */
/* 字趣味 · 2026 紧凑汉字档案卡界面                                             */
/* ========================================================================== */
:root {
    --zw-ink: #163b3a;
    --zw-ink-soft: #41625e;
    --zw-copper: #b87942;
    --zw-copper-deep: #8c572d;
    --zw-paper: #f5f7f4;
    --zw-surface: #ffffff;
    --zw-mist: #eaf0ec;
    --zw-rule: #d4dfd9;
    --zw-muted: #687873;
    --zw-serif: "Songti SC", STSong, SimSun, serif;
    --zw-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { background: var(--zw-paper); }
body {
    min-width: 320px;
    background: var(--zw-paper);
    color: var(--zw-ink);
    font-family: var(--zw-sans);
    font-size: 15px;
    line-height: 1.7;
}
a { color: var(--zw-ink-soft); }
a:hover { color: var(--zw-copper-deep); }

.site-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--zw-rule);
    background: rgba(255,255,255,.97);
}
.site-header__inner {
    width: min(1320px, calc(100% - 40px));
    min-height: 66px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 26px;
}
.site-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--zw-ink); text-decoration: none; white-space: nowrap; }
.site-brand:hover { color: var(--zw-ink); }
.site-brand__seal { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--zw-copper); color: var(--zw-copper-deep); font: 700 21px/1 var(--zw-serif); }
.site-brand strong { display: block; font: 700 20px/1.1 var(--zw-serif); letter-spacing: .04em; }
.site-brand small { display: block; margin-top: 3px; color: var(--zw-muted); font-size: 11px; letter-spacing: .12em; }
.site-nav { display: flex; align-items: center; gap: 18px; flex: 1; }
.site-nav a { padding: 20px 0 17px; border-bottom: 3px solid transparent; color: var(--zw-ink-soft); font-size: 14px; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { border-color: var(--zw-copper); color: var(--zw-ink); }
.site-search { display: flex; height: 36px; border: 1px solid var(--zw-rule); background: var(--zw-surface); }
.site-search input { width: 190px; min-width: 0; padding: 0 10px; border: 0; outline: 0; background: transparent; color: var(--zw-ink); font: 14px var(--zw-sans); }
.site-search input:focus { box-shadow: inset 0 0 0 1px var(--zw-copper); }
.site-search button { border: 0; padding: 0 12px; background: var(--zw-ink); color: #fff; cursor: pointer; font: 13px var(--zw-sans); }
.site-search button i { margin-right: 4px; }
.site-nav-toggle { display: none; border: 0; background: transparent; color: var(--zw-ink); font-size: 18px; cursor: pointer; }

/* 旧模板两栏页统一为轻量目录栏，保留所有原有 CMS 调用。 */
.layout-wrapper { width: min(1320px, calc(100% - 40px)); min-height: 0; margin: 24px auto 0; gap: 20px; align-items: flex-start; }
.main-content { order: 1; padding: 0; background: transparent; overflow: visible; }
.main-content > article { background: var(--zw-surface); border: 1px solid var(--zw-rule); padding: 28px; }
.sidebar { order: 2; width: 286px; min-width: 286px; min-height: 0; max-height: calc(100vh - 88px); padding: 0; overflow-y: auto; position: sticky; top: 16px; border: 1px solid var(--zw-rule); border-radius: 0; background: var(--zw-surface); box-shadow: none; color: var(--zw-ink); }
.sidebar .menu.box { margin: 0; padding: 0 14px 14px; border-radius: 0; box-shadow: none; }
.sidebar .menu.box + .menu.box { border-top: 1px solid var(--zw-rule); }
.sidebar .menu-label { margin: 0 -14px 10px; padding: 11px 14px; background: var(--zw-mist); border-bottom: 1px solid var(--zw-rule); color: var(--zw-ink); font: 700 16px var(--zw-serif); }
.sidebar .menu-list { margin: 0; }
.sidebar .menu-list a { border-left: 0; color: var(--zw-ink-soft); }
.sidebar .menu-list a:hover { color: var(--zw-copper-deep); background: transparent; }
.expand-button { margin-top: 8px; color: var(--zw-copper-deep); font-size: 13px; }

.main-content .title.is-2, .character-search-hero h1 { color: var(--zw-ink) !important; font-family: var(--zw-serif); font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: .02em; }
.main-content .title.is-4, .main-content .subtitle.is-5 { color: var(--zw-ink) !important; font-family: var(--zw-serif); }
.main-content .title.is-4 { padding-left: 12px; border-left: 4px solid var(--zw-copper); font-size: 22px; }
.main-content .message { margin: 16px 0 22px; background: #f3f7f4; }
.main-content .message-body { border: 0; border-left: 4px solid var(--zw-copper); color: var(--zw-ink-soft); }

/* 首页：以“查字”而非资讯内容作为视觉主语。 */
.dictionary-home__container { width: min(1320px, calc(100% - 40px)); margin: 24px auto 40px; }
.character-search-hero { padding: 34px 40px 28px; border: 1px solid var(--zw-rule); background: linear-gradient(115deg, #fff 0%, #fff 70%, #edf3ef 100%); }
.character-search-hero__eyebrow, .content-section__header p { margin: 0 0 4px; color: var(--zw-copper-deep); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.character-search-hero h1 { margin: 0; }
.character-search-hero > p:not(.character-search-hero__eyebrow):not(.character-search-hero__examples) { margin: 6px 0 19px; color: var(--zw-ink-soft); }
.character-search-form { display: flex; width: min(700px, 100%); height: 48px; }
.character-search-form input { flex: 1; min-width: 0; padding: 0 16px; border: 1px solid var(--zw-rule); border-right: 0; border-radius: 0; outline: 0; background: #fff; color: var(--zw-ink); font: 17px var(--zw-serif); }
.character-search-form input:focus { box-shadow: inset 0 0 0 1px var(--zw-copper); }
.character-search-form button { padding: 0 22px; border: 0; background: var(--zw-copper-deep); color: #fff; cursor: pointer; font: 15px var(--zw-sans); white-space: nowrap; }
.character-search-hero__examples { margin: 10px 0 0; color: var(--zw-muted); font-size: 13px; }
.character-search-hero__examples a { margin-left: 13px; color: var(--zw-ink-soft); text-decoration: underline; text-decoration-color: var(--zw-rule); text-underline-offset: 3px; }
.dictionary-home__layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 20px; margin-top: 20px; align-items: start; }
.dictionary-home__content { min-width: 0; }
.search-intent-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.search-intent-card { display: flex; min-height: 78px; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--zw-rule); background: var(--zw-surface); color: var(--zw-ink); text-decoration: none; }
.search-intent-card i { width: 28px; color: var(--zw-copper); text-align: center; font-size: 19px; }
.search-intent-card h3 { margin: 0; color: inherit; font-family: var(--zw-serif); font-size: 16px; font-weight: 700; line-height: 1.35; }
.search-intent-card small { display: block; margin-top: 2px; color: var(--zw-muted); font-size: 12px; line-height: 1.45; }
.search-intent-card:hover { border-color: var(--zw-copper); color: var(--zw-ink); }
.content-section { margin-top: 20px; padding: 22px; border: 1px solid var(--zw-rule); background: var(--zw-surface); }
.content-section__header { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 15px; }
.content-section__header h2 { margin: 0; color: var(--zw-ink); font: 700 22px/1.25 var(--zw-serif); }
.content-section__description { margin: -5px 0 15px; color: var(--zw-muted); font-size: 13px; }
.content-section__header > a { color: var(--zw-copper-deep); font-size: 13px; text-decoration: none; white-space: nowrap; }
.content-section__header > a i { margin-left: 4px; }
.character-result-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.character-result-grid .character-result-card { display: flex; flex-direction: column; align-items: center; min-height: 72px; justify-content: center; padding: 8px 4px; border: 1px solid var(--zw-rule); border-radius: 0; background: #fff; box-shadow: none; color: var(--zw-ink); text-align: center; text-decoration: none; }
.character-result-grid .character-result-card strong { display: block; font: 400 28px/1.1 var(--zw-serif); }
.character-result-grid .character-result-card span { display: block; min-height: 17px; margin-top: 5px; overflow: hidden; color: var(--zw-muted); font: 12px/1.2 var(--zw-sans); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.character-result-grid .character-result-card:hover { transform: none; border-color: var(--zw-copper); box-shadow: inset 0 -2px 0 var(--zw-copper); }
.character-lookup-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--zw-rule); border-left: 1px solid var(--zw-rule); }
.character-lookup-grid a { padding: 13px 14px; border-right: 1px solid var(--zw-rule); border-bottom: 1px solid var(--zw-rule); text-decoration: none; }
.character-lookup-grid span { display: block; color: var(--zw-ink); font: 700 17px var(--zw-serif); }
.character-lookup-grid small { color: var(--zw-muted); font-size: 12px; }
.character-lookup-grid a:hover { background: #f5f8f5; }
.query-path-section { padding-bottom: 20px; }
.query-path-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--zw-rule); border-left: 1px solid var(--zw-rule); }
.query-path-grid a { display: flex; min-height: 106px; flex-direction: column; justify-content: space-between; padding: 13px; border-right: 1px solid var(--zw-rule); border-bottom: 1px solid var(--zw-rule); color: var(--zw-ink); text-decoration: none; }
.query-path-grid i { color: var(--zw-copper); font-size: 15px; }
.query-path-grid b { display: block; margin-top: 18px; color: var(--zw-ink); font: 700 17px/1.3 var(--zw-serif); }
.query-path-grid small { display: block; margin-top: 5px; color: var(--zw-muted); font-size: 12px; line-height: 1.5; }
.query-path-grid a:hover { background: #f5f8f5; box-shadow: inset 0 -2px 0 var(--zw-copper); }
.search-page { width: min(1320px, calc(100% - 40px)); margin: 20px auto 0; }
.search-page__hero { padding: 30px 32px 27px; border: 1px solid var(--zw-rule); background: linear-gradient(115deg, #fff 0%, #fff 70%, #edf3ef 100%); }
.search-page__hero > p:first-child, .search-page__results-header p { margin: 0 0 5px; color: var(--zw-copper-deep); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.search-page__hero h1 { margin: 0; color: var(--zw-ink); font: 700 32px/1.25 var(--zw-serif); }
.search-page__form { display: flex; width: min(720px, 100%); height: 46px; margin-top: 20px; }
.search-page__form input { flex: 1; min-width: 0; padding: 0 14px; border: 1px solid var(--zw-rule); border-right: 0; outline: 0; color: var(--zw-ink); font: 16px var(--zw-serif); }
.search-page__form input:focus { box-shadow: inset 0 0 0 1px var(--zw-copper); }
.search-page__form button { padding: 0 20px; border: 0; background: var(--zw-ink); color: #fff; cursor: pointer; font: 14px var(--zw-sans); }
.search-page__form button i { margin-right: 5px; }
.search-page__hint { margin: 9px 0 0; color: var(--zw-muted); font-size: 12px; }
.search-page__guide, .search-page__results, .search-page__empty { margin-top: 16px; padding: 22px 24px; border: 1px solid var(--zw-rule); background: var(--zw-surface); }
.search-page__guide h2, .search-page__empty h2 { margin: 0; color: var(--zw-ink); font: 700 22px/1.25 var(--zw-serif); }
.search-page__guide p { max-width: 760px; margin: 9px 0 0; color: var(--zw-ink-soft); line-height: 1.8; }
.search-page__results-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.search-page__results-header h2 { margin: 0; color: var(--zw-ink); font: 700 23px/1.25 var(--zw-serif); }
.search-page__results-header > span { color: var(--zw-muted); font-size: 13px; white-space: nowrap; }
.search-result-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.search-result-card { display: flex; min-height: 105px; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink); text-align: center; text-decoration: none; }
.search-result-card strong { font: 400 29px/1.1 var(--zw-serif); }
.search-result-card span { width: 100%; margin-top: 5px; overflow: hidden; color: var(--zw-ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-card small { margin-top: 4px; color: var(--zw-muted); font-size: 11px; }
.search-result-card:hover { border-color: var(--zw-copper); box-shadow: inset 0 -2px 0 var(--zw-copper); }
.search-result-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.search-result-pagination a { min-width: 32px; padding: 6px 9px; border: 1px solid var(--zw-rule); color: var(--zw-ink-soft); font-size: 13px; text-align: center; text-decoration: none; }
.search-result-pagination a:hover, .search-result-pagination .is-current { border-color: var(--zw-copper); background: #fffaf5; color: var(--zw-copper-deep); }
.search-page__empty { text-align: center; }
.search-page__empty > p { margin: 0 0 9px; color: var(--zw-muted); }
.search-page__empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 17px; }
.search-page__empty a { padding: 7px 11px; border: 1px solid var(--zw-rule); color: var(--zw-ink-soft); text-decoration: none; }
.search-page__empty a:hover { border-color: var(--zw-copper); color: var(--zw-copper-deep); }
.lookup-index-panel { border: 1px solid var(--zw-rule); background: var(--zw-surface); }
.lookup-index-panel + .lookup-index-panel { margin-top: 14px; }
.lookup-index-panel h2 { margin: 0; padding: 10px 13px; border-bottom: 1px solid var(--zw-rule); background: var(--zw-mist); color: var(--zw-ink); font: 700 16px var(--zw-serif); }
.lookup-index-panel h2 i { margin-right: 5px; color: var(--zw-copper); font-size: 13px; }
.lookup-index-panel__body { padding: 8px 12px; }
.lookup-index-panel__body ul { margin: 0; }
.lookup-index-panel__body .column { padding: 2px 4px; }
.lookup-index-panel__body a { display: block; padding: 2px 0; border-bottom: 1px dotted var(--zw-rule); color: var(--zw-ink-soft); font-size: 13px; text-decoration: none; }
.lookup-index-panel__body a:hover { color: var(--zw-copper-deep); }

.site-footer { margin-top: 40px; border-top: 1px solid var(--zw-rule); background: #edf2ee; }
.site-footer__inner { width: min(1320px, calc(100% - 40px)); padding: 20px 0; margin: 0 auto; display: flex; align-items: center; gap: 18px; color: var(--zw-muted); font-size: 12px; }
.site-footer p { margin: 0; }.site-footer strong { color: var(--zw-ink); font-family: var(--zw-serif); font-size: 15px; }.site-footer nav { display: flex; gap: 12px; }.site-footer a { color: var(--zw-ink-soft); text-decoration: none; }.site-footer__copy { margin-left: auto !important; }

@media (max-width: 1100px) {
    .site-header__inner { gap: 16px; }.site-nav { gap: 12px; }.site-search input { width: 145px; }
    .search-intent-grid, .query-path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.character-result-grid, .search-result-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .site-header__inner { min-height: 58px; }.site-nav-toggle { display: block; margin-left: auto; order: 2; }.site-search { order: 3; }.site-nav { display: none; position: absolute; top: 58px; left: 0; right: 0; padding: 6px 20px 12px; border-bottom: 1px solid var(--zw-rule); background: #fff; box-shadow: 0 8px 14px rgba(22,59,58,.08); }.site-nav.is-open { display: flex; flex-wrap: wrap; }.site-nav a { padding: 6px 8px; border: 0; }
    .layout-wrapper, .dictionary-home__layout { display: block; }.sidebar { width: 100%; min-width: 0; max-height: none; margin-top: 20px; position: static; }.sidebar .menu.box { display: inline-block; width: 33.333%; vertical-align: top; border-top: 0; }.sidebar .menu.box + .menu.box { border-left: 1px solid var(--zw-rule); }
    .dictionary-home__sidebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }.lookup-index-panel + .lookup-index-panel { margin-top: 0; }
}

/* 条件索引页：笔画、部首、结构、拼音、五行共用“结论—筛选—分组结果”骨架。 */
.character-index-page .main-content > .character-index {
    padding: 0;
    overflow: hidden;
}

.character-index-page .character-breadcrumb {
    margin-bottom: 0;
    padding: 11px 20px;
}

.character-index-hero {
    padding: 23px 20px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: linear-gradient(108deg, #fff 0%, #fff 72%, #eef4ef 100%);
}

.character-index-hero__eyebrow {
    margin: 0 0 5px;
    color: var(--zw-copper-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
}

.character-index-hero h1 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 clamp(27px, 3vw, 35px)/1.3 var(--zw-serif);
}

.character-index-hero p:last-child {
    max-width: 720px;
    margin: 9px 0 0;
    color: var(--zw-ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

.character-index-hero strong { color: var(--zw-copper-deep); font-family: var(--zw-serif); }

.character-index-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: #fafcf9;
}

.character-index-switches > span {
    align-self: center;
    margin-right: 3px;
    color: var(--zw-muted);
    font-size: 12px;
}

.character-index-switches a {
    min-width: 38px;
    padding: 4px 7px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink-soft);
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.character-index-switches a:hover,
.character-index-switches a:focus-visible,
.character-index-switches a.is-current {
    border-color: var(--zw-copper);
    color: var(--zw-copper-deep);
}

.character-index-switches a.is-current {
    background: #fff8f0;
    font-weight: 700;
}

.character-index-switches--structure { align-items: flex-start; }
.character-index-switches--structure a { min-width: 0; text-align: left; }
.character-index-switches--five-elements { gap: 8px; }
.character-index-switches--five-elements a { min-width: 48px; font: 700 16px var(--zw-serif); }

.character-index-overview {
    padding: 12px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: #fafcf9;
}

.character-index-overview dl {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 26px;
    margin: 0;
}

.character-index-overview dl > div { display: flex; align-items: baseline; gap: 8px; }
.character-index-overview dt { color: var(--zw-muted); font-size: 13px; }
.character-index-overview dd { margin: 0; color: var(--zw-ink); font: 700 16px var(--zw-serif); }

.character-index-results { padding: 20px 20px 26px; }

.character-index-results__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
}

.character-index-results__header p {
    margin: 0 0 3px;
    color: var(--zw-copper-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.character-index-results__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 20px/1.4 var(--zw-serif);
}

.character-index-results__header small { color: var(--zw-muted); font-size: 12px; white-space: nowrap; }

.character-index-group { padding: 13px 0; border-top: 1px solid var(--zw-rule); }
.character-index-group:first-of-type { border-top: 0; }

.character-index-group > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.character-index-group h3 { margin: 0; color: var(--zw-ink); font: 700 17px var(--zw-serif); }
.character-index-group header span { color: var(--zw-muted); font-size: 12px; }

.character-index-result-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.character-index-result-grid.is-collapsed > :nth-child(n+37) { display: none; }

.character-index-group__toggle {
    display: block;
    margin: 9px auto 0;
    padding: 5px 12px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-copper-deep);
    cursor: pointer;
    font: 12px var(--zw-sans);
}

.character-index-group__toggle:hover,
.character-index-group__toggle:focus-visible { border-color: var(--zw-copper); background: #fff8f0; }

/* 笔画页首层只给出部首预览，不再一次性输出数千个汉字。 */
.stroke-radical-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.stroke-radical-preview-card {
    display: flex;
    min-height: 114px;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink);
    text-decoration: none;
}

.stroke-radical-preview-card strong { font: 700 21px/1.25 var(--zw-serif); }
.stroke-radical-preview-card span { margin-top: 8px; color: var(--zw-muted); font-size: 13px; }
.stroke-radical-preview-card small { margin-top: 12px; color: var(--zw-copper-deep); font-size: 12px; font-weight: 700; }
.stroke-radical-preview-card:hover,
.stroke-radical-preview-card:focus-visible { border-color: var(--zw-copper); background: #fffaf5; box-shadow: inset 0 -2px 0 var(--zw-copper); }

.character-index-back-link {
    color: var(--zw-copper-deep);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.character-index-back-link:hover,
.character-index-back-link:focus-visible { text-decoration: underline; }

.character-index-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}

.character-index-pagination a {
    min-width: 34px;
    padding: 6px 9px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink-soft);
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.character-index-pagination a:hover,
.character-index-pagination a:focus-visible,
.character-index-pagination a.is-current { border-color: var(--zw-copper); background: #fff8f0; color: var(--zw-copper-deep); }
.character-index-empty { margin: 0; padding: 24px 0 4px; color: var(--zw-muted); text-align: center; }

@media (max-width: 1100px) {
    .character-index-result-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .stroke-radical-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .character-index-page .character-breadcrumb { padding: 10px 12px; }
    .character-index-hero { padding: 18px 12px 16px; }
    .character-index-hero p:last-child { margin-top: 7px; font-size: 14px; }
    .character-index-switches { gap: 5px; padding: 9px 12px; }
    .character-index-switches a { min-width: 34px; padding: 4px 6px; font-size: 12px; }
    .character-index-switches--five-elements a { min-width: 42px; font-size: 15px; }
    .character-index-overview { padding: 10px 12px; }
    .character-index-overview dl { gap: 7px 16px; }
    .character-index-results { padding: 16px 12px 20px; }
    .character-index-results__header { align-items: flex-start; }
    .character-index-results__header h2 { font-size: 18px; }
    .character-index-results__header small { display: none; }
    .character-index-group { padding: 11px 0; }
    .character-index-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stroke-radical-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .stroke-radical-preview-card { min-height: 100px; padding: 12px; }
    .stroke-radical-preview-card strong { font-size: 18px; }
    .character-index-back-link { display: none; }
}
@media (max-width: 640px) {
    .site-header__inner, .dictionary-home__container, .layout-wrapper, .site-footer__inner, .search-page { width: min(100% - 24px, 1320px); }.site-brand strong { font-size: 18px; }.site-brand small { display: none; }.site-search { height: 34px; }.site-search input { width: 128px; }.site-search button span { display: none; }.site-search button i { margin: 0; }
    .dictionary-home__container { margin-top: 12px; }.character-search-hero { padding: 24px 18px 20px; }.character-search-hero h1 { font-size: 27px; }.character-search-form { height: 44px; }.character-search-form input { font-size: 15px; }.character-search-form button { padding: 0 13px; }.character-search-hero__examples a { margin-left: 8px; }
    .search-intent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.search-intent-card { min-height: 70px; padding: 9px; }.search-intent-card i { display: none; }.search-intent-card h3 { font-size: 15px; }.search-intent-card small { font-size: 11px; }.query-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.query-path-grid a { min-height: 98px; padding: 11px; }.query-path-grid b { margin-top: 14px; font-size: 16px; }.query-path-grid small { font-size: 11px; }
    .content-section { margin-top: 12px; padding: 17px; }.content-section__header h2 { font-size: 20px; }.character-result-grid, .search-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }.character-result-grid .character-result-card { min-height: 64px; }.character-result-grid .character-result-card strong { font-size: 25px; }.character-lookup-grid { grid-template-columns: repeat(2, 1fr); }.search-page { margin-top: 12px; }.search-page__hero { padding: 22px 17px 19px; }.search-page__hero h1 { font-size: 26px; }.search-page__form { height: 44px; margin-top: 16px; }.search-page__form input { padding: 0 11px; font-size: 14px; }.search-page__form button { padding: 0 13px; }.search-page__hint { line-height: 1.6; }.search-page__guide, .search-page__results, .search-page__empty { margin-top: 12px; padding: 17px; }.search-page__results-header { align-items: flex-start; }.search-page__results-header h2, .search-page__guide h2, .search-page__empty h2 { font-size: 20px; }.search-page__results-header > span { display: none; }.search-result-card { min-height: 88px; }.search-result-card strong { font-size: 25px; }.search-result-card small { font-size: 10px; }
    .dictionary-home__sidebar { grid-template-columns: 1fr; gap: 10px; }.lookup-index-panel__compact { max-height: 120px; overflow: hidden; }.sidebar .menu.box { display: block; width: auto; }.sidebar .menu.box + .menu.box { border-left: 0; border-top: 1px solid var(--zw-rule); }.main-content > article { padding: 18px; }
    .site-footer__inner { display: block; }.site-footer nav { margin: 8px 0; flex-wrap: wrap; }.site-footer__copy { margin-left: 0 !important; }
}

/* 汉字详情页：数据层次以“读—写—义—关联”为顺序。 */
.character-detail-page .main-content > .character-detail { padding: 0; border: 0; background: transparent; }
.character-detail { background: var(--zw-surface); border: 1px solid var(--zw-rule); }

/* 单字详情页沿用索引页的完整卡片骨架：面包屑、标题和正文属于同一容器。 */
.character-detail-page--profile .main-content > .character-detail {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-detail-page--profile .character-breadcrumb {
    padding: 11px 20px;
}

.character-breadcrumb { margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--zw-rule); font-size: 13px; }
.character-breadcrumb a { color: var(--zw-muted); }
.character-summary { padding: 26px 28px 22px; border-bottom: 1px solid var(--zw-rule); background: linear-gradient(110deg, #fff 0%, #fff 76%, #edf3ef 100%); }
.character-summary__eyebrow { margin: 0 0 5px; color: var(--zw-copper-deep); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.character-summary h1 { margin: 0; color: var(--zw-ink); font: 700 clamp(27px, 3vw, 36px)/1.3 var(--zw-serif); letter-spacing: .02em; }
.character-summary__intro { margin: 9px 0 0; color: var(--zw-ink-soft); font-size: 15px; }
.character-summary__intro strong { color: var(--zw-copper-deep); font-family: var(--zw-serif); font-weight: 700; }
.character-topic-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.character-topic-tag { padding: 2px 8px; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink-soft); font-size: 12px; text-decoration: none; }
.character-topic-tag:hover { border-color: var(--zw-copper); color: var(--zw-copper-deep); }
.character-facts, .character-stroke-section, .character-word-relations, .character-variant-section, .character-definition-section, .character-related-section { padding: 23px 28px; border-bottom: 1px solid var(--zw-rule); background: var(--zw-surface); }
.character-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.character-fact-card { min-width: 0; border: 1px solid var(--zw-rule); background: #fff; }
.character-fact-card h3 { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--zw-rule); background: var(--zw-mist); color: var(--zw-ink); font: 700 16px var(--zw-serif); }
.character-fact-card dl { display: block; margin: 0; padding: 4px 12px; }
.character-fact-card dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px dotted var(--zw-rule); }
.character-fact-card dl > div:last-child { border-bottom: 0; }
.character-fact-card dt, .character-fact-card dd { display: block; margin: 0; }
.character-fact-card dt { color: var(--zw-muted); font-size: 13px; text-align: left; }
.character-fact-card dt a { color: var(--zw-ink-soft); text-decoration: underline; text-decoration-color: var(--zw-rule); text-underline-offset: 3px; }
.character-fact-card dd { overflow-wrap: anywhere; color: var(--zw-ink); font-family: var(--zw-serif); font-size: 15px; }
.character-fact-card dd small { display: inline; color: var(--zw-muted); font: 12px var(--zw-sans); }
.character-phonetic { color: var(--zw-muted); font-size: 12px; }
.character-stroke-layout { display: grid; grid-template-columns: 174px minmax(0, 1fr); gap: 18px; align-items: center; }
.character-stroke-player { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--zw-rule); background: #f7faf7; }
.character-stroke-canvas { display: grid; width: 150px; height: 150px; place-items: center; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23c7d4ce"/><path d="M50 0v100M0 50h100" stroke="%23c7d4ce" stroke-dasharray="2"/><rect x="25" y="25" width="50" height="50" fill="none" stroke="%23dce5e0"/></svg>'); background-size: 100% 100%; }
.character-static-glyph { color: var(--zw-ink); font: 400 104px/1 var(--zw-serif); }
.character-stroke-replay { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--zw-copper); background: #fff; color: var(--zw-copper-deep); cursor: pointer; font: 13px var(--zw-sans); }
.character-stroke-replay:hover { background: var(--zw-copper-deep); color: #fff; }.character-stroke-replay:disabled { border-color: var(--zw-rule); color: var(--zw-muted); cursor: not-allowed; }
.character-stroke-preview { min-height: 90px; padding: 8px; border: 1px solid var(--zw-rule); background: #fff; text-align: center; }
.character-stroke-preview:empty { display: none; }
.character-stroke-preview img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.character-word-relation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.character-word-relation-card { padding: 12px 14px; border: 1px solid var(--zw-rule); }
.character-word-relation-card h3 { margin: 0 0 5px; font: 700 16px var(--zw-serif); }.character-word-relation-card p { margin: 0; color: var(--zw-ink-soft); font-size: 14px; }.character-word-relation-card a { margin-left: 5px; color: var(--zw-copper-deep); font-size: 12px; white-space: nowrap; }.character-word-relation-card--similar h3 { color: #39716b; }.character-word-relation-card--opposite h3 { color: var(--zw-copper-deep); }
.character-variant-list { display: flex; flex-wrap: wrap; gap: 8px; }.character-variant-list span { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink); font: 400 27px var(--zw-serif); }
.character-definition-content { color: var(--zw-ink-soft); font-size: 16px; line-height: 1.85; }.character-definition-content > :first-child { margin-top: 0; }.character-definition-content > :last-child { margin-bottom: 0; }.character-definition-content h3 { margin: 22px 0 9px; color: var(--zw-ink); font: 700 18px var(--zw-serif); }.character-definition-content h4 { margin: 16px 0 8px; color: var(--zw-ink-soft); font: 700 16px var(--zw-serif); }.character-definition-content p { margin: 0 0 12px; }.character-definition-content a { color: var(--zw-copper-deep); }.character-definition-content ul, .character-definition-content ol { margin: 0 0 12px 1.2em; }.character-definition-content blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--zw-copper); background: #f5f8f5; }.character-definition-content em { color: var(--zw-copper-deep); font-style: normal; font-weight: 700; }
.character-related-section { margin-top: 18px; border: 1px solid var(--zw-rule); }.character-related-group + .character-related-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--zw-rule); }.character-related-group h3 { margin: 0 0 10px; color: var(--zw-ink); font: 700 17px var(--zw-serif); }

@media (max-width: 900px) { .character-fact-grid { grid-template-columns: 1fr; }.character-fact-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }.character-fact-card dl > div { grid-template-columns: 62px minmax(0, 1fr); }.character-fact-card dl > div:last-child { border-bottom: 1px dotted var(--zw-rule); } }
@media (max-width: 640px) { .character-breadcrumb { padding: 10px 17px; }.character-summary, .character-facts, .character-stroke-section, .character-word-relations, .character-variant-section, .character-definition-section, .character-related-section { padding: 18px 17px; }.character-summary h1 { font-size: 27px; }.character-summary__intro { font-size: 14px; }.character-fact-card dl { display: block; }.character-fact-card dl > div { grid-template-columns: 70px minmax(0, 1fr); }.character-stroke-layout, .character-word-relation-grid { grid-template-columns: 1fr; }.character-stroke-preview { min-height: 0; }.character-definition-content { font-size: 15px; }.character-related-section { margin-top: 12px; }.character-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 公共查询侧栏：内容文件只提供链接，外观与展开行为集中在 sidebar.html。 */
.lookup-sidebar { width: 286px; min-width: 286px; flex: 0 0 286px; align-self: flex-start; }
.lookup-sidebar .lookup-index-panel { margin: 0; border: 1px solid var(--zw-rule); background: var(--zw-surface); }
.lookup-sidebar .lookup-index-panel + .lookup-index-panel { margin-top: 14px; }
.lookup-index-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--zw-rule); background: var(--zw-mist); }
.lookup-index-panel__header h2, .lookup-index-panel > h2 { display: flex; align-items: center; margin: 0; color: var(--zw-ink); font: 700 16px var(--zw-serif); }
.lookup-index-panel__header h2 i, .lookup-index-panel > h2 i { margin-right: 5px; color: var(--zw-copper); font-size: 13px; }
.lookup-index-panel__header small { color: var(--zw-muted); font: 12px var(--zw-sans); }
.lookup-index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 8px 12px 10px; }
.lookup-index-link { display: block; min-width: 0; padding: 5px 6px; overflow: hidden; border-bottom: 1px dotted var(--zw-rule); color: var(--zw-ink-soft); font-size: 13px; line-height: 1.35; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.lookup-index-link:hover { color: var(--zw-copper-deep); background: #f8faf8; }
.lookup-index-list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lookup-index-list--wide .lookup-index-link { padding: 5px 6px; text-align: left; white-space: normal; }
.lookup-index-list--five-elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lookup-index-list--five-elements .lookup-index-link { color: var(--zw-ink); font-family: var(--zw-serif); font-size: 16px; }
.lookup-index-panel--collapsible:not(.is-expanded) .lookup-index-link:nth-child(n+16) { display: none; }
.lookup-index-panel__toggle { display: block; width: 100%; padding: 7px; border: 0; border-top: 1px solid var(--zw-rule); background: #fff; color: var(--zw-copper-deep); cursor: pointer; font: 12px var(--zw-sans); text-align: center; }
.lookup-index-panel__toggle:hover { background: #f8faf8; }

@media (max-width: 900px) { .lookup-sidebar { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }.lookup-sidebar .lookup-index-panel + .lookup-index-panel { margin-top: 0; } }
@media (max-width: 640px) { .lookup-sidebar { grid-template-columns: 1fr; margin-top: 12px; }.lookup-index-list, .lookup-index-list--five-elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lookup-index-panel > summary, .lookup-index-panel > h2 { padding: 10px 12px; } }
body {
    overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* 核心布局 */
.layout-wrapper {
    display: flex;
    min-height: calc(100vh - 52px);
    margin-top: 52px;
}

.main-content {
    flex: 1;
    background: #f8f9fa;
    order: 2;
    max-width: 100vw; /* 新增 */
    overflow-x: hidden; /* 防止横向溢出 */
    padding: 2rem 1rem; /* 移动端减少两侧padding */    
}

.sidebar {
    _position: fixed;
    _left: 0;
    width: var(--sidebar-width);
    _height: calc(100vh - 52px);
    background: linear-gradient(180deg, var(--primary-color) 0%, rgba(158,42,43,0.95) 100%);
    color: white;
    padding: 1.5rem;
    overflow-y: auto;
    order: 1;
    height: auto; /* 自动高度 */
    min-height: 100vh; /* 桌面端保持全高 */
    position: -webkit-sticky; /* 新增粘性定位 */
    position: sticky;
    top: 52px;    
}

/* 侧边栏容器 */
.sidebar {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
/* 默认隐藏第11个及之后的列表项 */
.menu-list li:nth-child(n+16) {
  display: none;
}

/* 展开状态显示全部 */
.menu-list.is-expanded li {
  display: block !important;
}
.menu-list>.column {
    padding: 0 .75rem;
}
/* 展开按钮样式 */
.expand-button {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  cursor: pointer;
  color: #9E2A2B;
  transition: all 0.3s;
}
.expand-button:hover {
  background: #fff5f7;
}

/* 导航项交互设计 */
.menu-list a {
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.menu-list a:hover {
    color: #9E2A2B;
}

/* 激活状态指示 */
.menu-list a.is-active {
    background: linear-gradient(90deg, #e3f2fd 0%, #f8f9fa 100%);
    font-weight: 600;
}

/* 图标动态响应 */
.icon i {
    transition: transform 0.3s;
}
.menu-list a:hover .icon i {
    transform: rotate(15deg);
}


/* 文字信息模块 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
    box-sizing: border-box; /* 防止padding导致溢出 */
    justify-content: center; 
}

dl {
  display: grid;
  grid-template-columns: auto 1fr; /* 两列布局 */
  gap: 8px 15px;
}

dt {
  grid-column: 1; /* 强制dt在第一列 */
  justify-self: end; /* 右对齐 */
}

dd {
  grid-column: 2; /* 强制dd在第二列 */
}

.stroke-animation {
    font-size: 2.5rem;
    margin: 0 0.3rem;
    animation: strokeFade 1.5s infinite;
}

@keyframes strokeFade {
    0%, 100% { opacity: 0.3; transform: translateY(5px); }
    50% { opacity: 1; transform: translateY(0); }
}

/* 相关汉字样式 */
.related-section {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

.hanzi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(158,42,43,0.1);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.hanzi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(158,42,43,0.15);
}

.hanzi {
    font-size: 2rem;
    font-family: var(--zw-serif);
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.py {
    font-size: 0.85em;
    color: #666;
    font-family: "Bopomofo Sans", sans-serif;
}

.meaning {
    font-size: 0.75em;
    color: #999;
    text-align: center;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 笔顺动画容器调整 */
.stroke-animation-box {
    max-width: 150px;
    margin: 0 auto;
}

.stroke-gif {
    width: 150px;
    height: 150px;
    padding: 8px;
}

/* 异体字容器 */
.variant-box,.search-box {
    background: rgba(158,42,43,0.03);
    border: 1px solid rgba(158,42,43,0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

/* 标题样式 */
.variant-header,.search-header {
    font-family: var(--zw-serif);
    font-size: 1.25rem;
    border-bottom: 2px dashed rgba(158,42,43,0.2);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* 异体字列表 */
.variant-list,.search-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* 单个异体字项 */
.variant-item,.search-item {
    font-family: var(--zw-serif);
    font-size: 1.5rem;
    color: var(--primary-color);
    background: rgba(255,255,255,0.9);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid rgba(158,42,43,0.15);
    transition: all 0.2s ease;
}

.search-item a{
    font-size:1rem;
    font-family: var(--zw-serif);
}
/* 交互优化 */
.variant-item:hover,.search-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(158,42,43,0.1);
}

.semantic-box a{
    color: #fff;
    text-decoration: underline;
}
/* 近义词表格样式 */
.semantic-grid {
    background: linear-gradient(145deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.synonym-card {
    border: 1px solid rgba(158,42,43,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.synonym-card:hover {
    transform: translateY(-3px);
}

.synonym-header {
    padding: 0.8rem 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 2px dashed rgba(158,42,43,0.15);
    font-family: var(--zw-serif);
}

.synonym-body {
    padding: 1rem;
    color: #444;
    line-height: 1.7;
    background: rgba(255,255,255,0.9);
}

/* 表格样式 */
.custom-table-section {
    background: linear-gradient(145deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.table-card {
    border: 1px solid rgba(158,42,43,0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.table-header {
    padding: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 2px dashed rgba(158,42,43,0.2);
}

.table-body {
    padding: 1.5rem;
    line-height: 1.8;
}

.table-body dt {
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 0.8rem;
}

.table-body dd {
    color: #444;
    margin-left: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted #eee;
}

/* 新增字符详解样式 */
.character-explain .box {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(158,42,43,0.1);
}

.info-item {
    padding: 1rem;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.info-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--primary-color);
    opacity: 0.3;
}

.info-tag {
    display: inline-block;
    min-width: 4em;
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 1rem;
}

.hanzi {
    font-family: var(--zw-serif);
    font-size: 1.8rem;
}
#hanzi-canvas {
  /* 田字格背景图 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23ddd"/><path d="M50 0v100M0 50h100" stroke="%23ccc" stroke-dasharray="2"/><rect x="25" y="25" width="50" height="50" fill="none" stroke="%23999"/></svg>');
  background-size: 100% 100%;
}
.py a {
    color: #4a4a4a;
    border-bottom: 1px dashed var(--primary-color);
}

.explain-detail {
    padding: 0 1.5rem 1rem;
    border-radius: 6px;
}

.explain-text {
    color: #444;
    line-height: 1.8;
    white-space: pre-line;
}

.more-link .button {
    transition: transform 0.2s;
}

.more-link .button:hover {
    transform: translateX(5px);
}
/* 词语模块样式 */
.word-section {
    background: linear-gradient(145deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.word-card {
    border: 1px solid rgba(158,42,43,0.1);
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.3s ease;
    background: rgba(255,255,255,0.95);
}

.word-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(158,42,43,0.1);
}

.word-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px dashed rgba(158,42,43,0.2);
}

.hanzi {
    font-family: var(--zw-serif);
    font-size: 1.5rem;
    color: var(--primary-color);
}

.py {
    font-family: "Bopomofo Sans", sans-serif;
    color: #666;
    font-size: 0.9em;
}

.word-body {
    color: #444;
    line-height: 1.7;
    font-size: 0.95em;
}

/* 简繁转换容器 */
.simplified-traditional-box,.conversion-box {
    background: linear-gradient(145deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid rgba(158,42,43,0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

/* 文本输入区 */
.conversion-textarea {
    width: 100%;
    height: 180px;
    font-family: var(--zw-serif);
    padding: 1rem;
    border: 2px solid rgba(158,42,43,0.2);
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.conversion-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(158,42,43,0.1);
}

/* 按钮容器 */
.conversion-controls {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 新增输出区间距规则 */
#pinyinOutput {
    margin-top: 1.5rem; /* 与按钮区相同间距 */
    background: rgba(158,42,43,0.03); /* 浅色背景区分 */
    border: 1px solid rgba(158,42,43,0.1); /* 与输入框统一边框 */
}

/* 按钮样式 */
.conversion-btn {
    flex: 1;
    max-width: 200px;
    border: 2px solid;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-simplified {
    border-color: var(--primary-color);
    background: rgba(158,42,43,0.1);
    color: var(--primary-color);
}

.btn-traditional {
    border-color: #4a4a4a;
    background: rgba(74,74,74,0.1);
    color: #4a4a4a;
}

.btn-clear {
    border-color: #999;
    background: rgba(153,153,153,0.1);
    color: #666;
}

   /* 静态汉字样式 */
.static-hanzi {
  font-size: 120px;
  font-family: '汉仪楷体', sans-serif; /* 可替换为其他已安装字体  */
  color: #666;
  text-align: center;
  line-height: 150px;
}

/* 禁用状态图标 */
.warning-icon {
  fill: #ff4757;
  vertical-align: middle;
  margin-right: 5px;
}

/* 按钮禁用样式 */
.hanzi-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
} 
@media (max-width: 1024px) {
    .layout-wrapper {
        flex-direction: column;
        /* 新增排列顺序控制 */
        display: flex;
        flex-wrap: nowrap;
    }
    
    .main-content {
        order: 1; /* 主内容置顶 */
        margin-top: 1rem; /* 增加顶部间隔 */
        margin-left:auto;
    }
    
    .sidebar {
        order: 2; /* 侧边栏置底 */
        position: static;
        width: 100%;
        margin-top: 2rem; /* 增加间隔 */
        background: linear-gradient(180deg, 
            rgba(158,42,43,0.95) 0%,
            var(--primary-color) 100%); /* 渐变方向反转 */
       min-height: auto; /* 移动端取消最小高度 */
        position: static; /* 取消粘性定位 */
        order: 2; /* 确保在移动端显示在下方 */        
    }
    .column.is-1 {
        width: 16.666%!important;
        flex: none;
    }    
}

/* 移动端适配 */
@media (max-width: 768px) {
   .layout-wrapper {
        flex-direction: column; /* 改为垂直布局 */
    }
    
    .main-content {
        order: 1; /* 主内容在下 */
        margin-left: 0;
        width: 100%;
    }
    .sidebar {
        order: 2; /* 侧边栏在上 */
        width: 100%;
        min-height: auto; /* 移动端取消固定高度 */
        position: static; /* 移动端禁用粘性定位 */
    }	
    .info-grid {
        grid-template-columns: minmax(280px, 1fr); /* 强制单列 */
        padding: 0 1rem; /* 两侧留白 */
    }    
    .info-grid > .notification {
        width: 100% !important;
        max-width: 100%;
        padding: 0.5rem 1rem;
        margin-bottom: 0.5rem;
    }
    .stroke-animation-box {
        max-width: 120px;
        margin-bottom: 1rem;
    }
    
    .stroke-gif {
        width: 120px;
        height: 120px;
    }
    
    .animation-controls {
        bottom: 5px;
        right: 5px;
    }
    
    .replay-btn {
        width: 28px;
        height: 28px;
    }

    .related-section {
        padding: 1.5rem;
    }
    
    .column.is-1 {
        width: 25%!important;
    }
    
    .hanzi {
        font-size: 1.5rem;
    }   
    .variant-box,.search-box {
        padding: 1rem;
        margin-top: 0.5rem;
    }
    
    .variant-item,.search-item {
        font-size: 1.2rem;
        padding: 0.4rem 0.8rem;
        margin: 0.3rem;
    }
    .variant-header,.search-header {
        font-size: 1.1rem;
    } 

    .semantic-grid {
        padding: 1rem;
    }
    
    .columns.is-variable.is-2 {
        --columnGap: 0.5rem;
    }
    
    .synonym-card {
        margin-bottom: 0.5rem;
    }
    
    .synonym-header {
        padding: 0.6rem 1rem;
    }
    
    .synonym-body {
        padding: 0.8rem;
        font-size: 0.9em;
    }

    .custom-table-section {
        padding: 1.5rem;
    }
    
    .table-body {
        padding: 1rem;
    }
    
    .table-body dd {
        margin-left: 1rem;
    }
    
    .column.is-6 {
        margin-bottom: 1.5rem;
    }    
    .info-item {
        margin-bottom: 1rem;
    }
    
    .info-tag {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .explain-text {
        font-size: 0.95em;
    }
    /* 优化列间距 */
    .columns.is-multiline .column.is-4 {
        margin-bottom: 0.5rem !important;  /* 从1.5rem缩小到0.5rem */
    }

    .column{
        padding: 0
    }

    /* 优化卡片间距 */
    .word-card {
        margin-bottom: 0.2rem;
        padding: 0.8rem;
    }

    /* 调整父容器间距 */
    .word-section {
        padding: 1rem;
    }
    .word-section {
        padding: 1.5rem;
    }
    
    .column.is-4 {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .hanzi {
        font-size: 1.3rem;
    }
    
    .word-body {
        font-size: 0.9em;
    }
    .conversion-textarea {
        height: 150px;
        font-size: 0.95em;
    }
    
    .conversion-btn {
        flex: 100%;
        max-width: none;
    }    
    #bihuaList.columns,#bushouList.columns,#wuxingList.columns {
        display: flex !important;
        flex-wrap: wrap;
  }
    #bihuaList .column.is-4,#bushouList .column.is-4,#wuxingList .column.is-4{
        width: 33.33%;
        flex: 0 0 auto;
        padding: 0.5rem; /* 缩小间距适应小屏幕 */
  }
    #bihuaList a,#bushouList a,#wuxingList a {
        font-size: 0.9em; /* 调小字体 */
        padding: 0.5rem 0.3rem;
  }    
}

@media (max-width: 480px) {
    .stroke-animation-box {
        max-width: 100px;
    }
    
    .stroke-gif {
        width: 100px;
        height: 100px;
    }
    .column.is-1 {
        width: 33.333%!important;
    }  
    .column.is-6 {
        width: 100% !important;
    }
    
    .synonym-card {
        border-radius: 6px;
    }      
}

/* 最终响应式覆盖：旧样式表曾在移动端额外加入内容外框和顶部留白。 */
@media (max-width: 1024px) {
    html,
    body { background: #fff; }

    .layout-wrapper {
        width: min(calc(100% - 24px), 1320px);
        min-height: 0;
        margin: 12px auto 0;
        gap: 12px;
    }

    .main-content {
        width: 100%;
        margin-top: 0 !important;
        margin-left: 0;
        padding: 0;
        background: transparent;
    }

    .main-content > article,
    .character-detail,
    .character-summary,
    .character-facts,
    .character-stroke-section,
    .character-word-relations,
    .character-variant-section,
    .character-definition-section,
    .character-related-section { background: #fff; }

    .character-summary { background-image: none; }
}

@media (max-width: 640px) {
    .layout-wrapper { width: 100%; margin-top: 8px; }
    .character-detail { border-right: 0; border-left: 0; }
    .character-detail-page--profile .main-content > .character-detail { border-right: 0; border-left: 0; }
    .character-detail-page--profile .character-breadcrumb { padding: 10px 12px; }
    .character-breadcrumb { padding-right: 17px; padding-left: 17px; }
    .character-related-section { border-right: 0; border-left: 0; }
}

/* 布局优先级：必须放在旧模板规则之后，避免侧栏抢占正文首位。 */
.layout-wrapper {
    margin: 16px auto 0 !important;
    gap: 14px;
    align-items: flex-start;
}

.main-content {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.lookup-sidebar {
    order: 2 !important;
}

@media (max-width: 1024px) {
    .layout-wrapper {
        display: flex;
        flex-direction: column;
        width: calc(100% - 24px);
        margin: 12px auto 0 !important;
    }

    .main-content,
    .lookup-sidebar {
        width: 100%;
        min-width: 0;
    }

    .character-facts,
    .character-stroke-section,
    .character-word-relations,
    .character-variant-section,
    .character-definition-section,
    .character-related-section {
        /* 与公共索引列表保持同一条 12px 内容基线。 */
        padding-right: 12px;
        padding-left: 12px;
    }

    .character-related-section { margin-top: 12px; }
}

@media (max-width: 640px) {
    .layout-wrapper {
        width: calc(100% - 24px);
        margin-top: 8px !important;
    }
}

/* 汉字功能详情页：拼音、笔顺、部首、繁体、五行、近反义词共用的紧凑档案版式。 */
.character-tool-page .character-tool-page__content {
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

/* 功能详情页与笔画、部首等索引页共用完整外框。
   该选择器需要覆盖通用详情页“无边框容器”的兼容规则。 */
.character-detail-page.character-tool-page .main-content > .character-tool-page__content {
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

/* 子模块位于完整外框内，只保留上下分隔，避免左右边线与父级重叠成双线。 */
.character-tool-page .character-tool-page__content > .character-traditional-pair,
.character-tool-page .character-tool-page__content > .character-traditional-tool,
.character-tool-page .character-tool-page__content > .character-stroke-demo,
.character-tool-page .character-tool-page__content > .character-pinyin-tool,
.character-tool-page .character-tool-page__content > .character-word-comparison,
.character-tool-page .character-tool-page__content > .character-related-section,
.character-tool-page .character-tool-page__content > .character-latest-queries,
.character-tool-page .character-tool-page__content > .character-definition-summary {
    border-right: 0;
    border-left: 0;
}

.character-tool-page .character-tool-page__breadcrumb {
    margin: 0;
    padding: 11px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-tool-page__title {
    margin: 0;
    padding: 22px 24px 0;
    color: var(--zw-ink) !important;
    font: 700 clamp(27px, 3vw, 35px)/1.3 var(--zw-serif);
    letter-spacing: .02em;
}

.character-tool-page .character-tool-page__lead {
    margin: 12px 24px 0;
    border: 0;
    background: #f3f7f4;
}

.character-tool-page .character-tool-page__lead .message-body {
    padding: 10px 13px;
    border: 0;
    border-left: 4px solid var(--zw-copper);
    color: var(--zw-ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

.character-tool-page .character-tool-page__facts,
.character-tool-page .character-explain,
.character-tool-page .related-section,
.character-tool-page .semantic-grid,
.character-tool-page .conversion-box,
.character-tool-page .simplified-traditional-box,
.character-tool-page .search-box {
    margin: 18px 24px 0 !important;
    padding: 0;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.character-tool-page .character-tool-page__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}

.character-tool-page .character-tool-page__facts > .notification {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
}

.character-tool-page .character-tool-page__facts h3,
.character-tool-page .character-explain h3,
.character-tool-page .related-section > h3,
.character-tool-page .semantic-grid > h3,
.character-tool-page .conversion-box > h3,
.character-tool-page .simplified-traditional-box > h3 {
    margin: 0 !important;
    padding: 10px 12px;
    border-bottom: 1px solid var(--zw-rule);
    border-left: 0;
    background: var(--zw-mist);
    color: var(--zw-ink) !important;
    font: 700 16px var(--zw-serif);
}

.character-tool-page .character-tool-page__facts dl {
    margin: 0;
    padding: 5px 12px;
}

.character-tool-page .character-tool-page__facts dt,
.character-tool-page .character-tool-page__facts dd {
    padding: 7px 0;
    border-bottom: 1px dotted var(--zw-rule);
}

.character-tool-page .character-tool-page__facts dd:last-child {
    border-bottom: 0;
}

.character-tool-page .character-explain .box {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.character-tool-page .related-section,
.character-tool-page .semantic-grid {
    padding: 12px;
}

.character-tool-page .related-section > h3,
.character-tool-page .semantic-grid > h3 {
    margin: -12px -12px 12px !important;
}

.character-tool-page .related-group,
.character-tool-page .related-group.mb-3,
.character-tool-page .related-group.mb-6 {
    margin: 0 !important;
    padding: 0 0 12px;
}

.character-tool-page .related-group + .related-group {
    padding-top: 12px;
    border-top: 1px solid var(--zw-rule);
}

.character-tool-page .related-group h4 {
    margin: 0 0 9px !important;
    color: var(--zw-ink-soft) !important;
    font: 700 15px var(--zw-serif);
}

.character-tool-page .semantic-grid {
    background: #fff;
}

.character-tool-page .synonym-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
}

.character-tool-page .synonym-header {
    padding: 9px 12px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist) !important;
    color: var(--zw-ink);
    font: 700 18px var(--zw-serif);
}

.character-tool-page .synonym-body {
    padding: 11px 12px;
    color: var(--zw-ink-soft);
    font-size: 14px;
    line-height: 1.75;
}

.character-tool-page .conversion-box,
.character-tool-page .simplified-traditional-box {
    padding: 12px;
}

.character-tool-page .conversion-box > h3,
.character-tool-page .simplified-traditional-box > h3 {
    margin: -12px -12px 12px !important;
}

.character-tool-page .search-box {
    padding: 12px;
    background: #fff;
}

.character-tool-page .search-header {
    margin: -12px -12px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
    color: var(--zw-ink) !important;
    font: 700 16px var(--zw-serif);
}

.character-tool-page .character-explain,
.character-tool-page .search-box {
    margin-bottom: 24px !important;
}

@media (max-width: 900px) {
    .character-tool-page .character-tool-page__facts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .character-detail-page.character-tool-page .main-content > .character-tool-page__content {
        border-right: 0;
        border-left: 0;
    }

    .character-tool-page .character-tool-page__breadcrumb {
        padding: 10px 12px;
    }

    .character-tool-page .character-tool-page__title {
        padding: 18px 12px 0;
        font-size: 27px;
    }

    .character-tool-page .character-tool-page__lead,
    .character-tool-page .character-tool-page__facts,
    .character-tool-page .character-explain,
    .character-tool-page .semantic-grid,
    .character-tool-page .conversion-box,
    .character-tool-page .simplified-traditional-box,
    .character-tool-page .search-box {
        margin-right: 12px !important;
        margin-left: 12px !important;
    }

    .character-tool-page .character-tool-page__facts {
        padding: 8px;
    }
}

/* 最近查询：从大面积按钮改为紧凑的词条索引，适合快速继续查字。 */
.character-tool-page .search-box {
    overflow: hidden;
    padding: 0;
}

.character-tool-page .search-header {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
    color: var(--zw-ink) !important;
    font: 700 17px var(--zw-serif);
}

.character-tool-page .search-list,
.character-tool-page .variant-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px;
}

.character-tool-page .search-item {
    display: block;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.character-tool-page .search-item a {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink-soft);
    font: 15px/1.4 var(--zw-serif);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.character-tool-page .search-item a:hover {
    border-color: var(--zw-copper);
    background: #fbfaf7;
    color: var(--zw-copper-deep);
    box-shadow: inset 3px 0 0 var(--zw-copper);
    transform: none;
}

@media (max-width: 640px) {
    .character-tool-page .search-list,
    .character-tool-page .variant-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 10px;
    }

    .character-tool-page .search-item a {
        min-height: 40px;
        padding: 7px 9px;
        font-size: 14px;
    }
}

/* 汉字详解：收拢旧版彩色信息块，形成一张紧凑的字词档案。 */
.character-tool-page .character-explain .info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 12px;
}

.character-tool-page .character-explain .info-grid > .column,
.character-tool-page .character-explain .info-grid > .column.is-4,
.character-tool-page .character-explain .info-grid > .column.is-12 {
    width: auto !important;
    margin: 0 !important;
    padding: 0;
}

/* 旧 Bulma 列仅作数据循环容器，不再占据网格单元。 */
.character-tool-page .character-explain .info-grid > .column.is-4,
.character-tool-page .character-explain .info-grid > .column.is-12 {
    display: contents;
}

.character-tool-page .character-explain .info-item {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    background: #fff !important;
}

.character-tool-page .character-explain .info-item::after {
    display: none;
}

.character-tool-page .character-explain .info-tag {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    color: var(--zw-copper-deep);
    font: 700 14px var(--zw-serif);
}

.character-tool-page .character-explain .info-content {
    min-width: 0;
    color: var(--zw-ink);
}

.character-tool-page .character-explain .info-content.hanzi,
.character-tool-page .character-explain .info-content.hanzi a {
    color: var(--zw-ink);
    font: 400 29px/1 var(--zw-serif);
    text-decoration: none;
}

.character-tool-page .character-explain .info-content.py {
    font: 400 19px/1.2 var(--zw-serif);
}

.character-tool-page .character-explain .explain-detail {
    grid-column: 1 / -1;
    padding: 14px 16px;
    border: 1px solid var(--zw-rule);
    border-left: 3px solid var(--zw-copper);
    border-radius: 0;
    background: #f7faf7 !important;
}

.character-tool-page .character-explain .explain-text {
    margin: 0;
    color: var(--zw-ink-soft);
    font-size: 15px;
    line-height: 1.85;
}

.character-tool-page .character-explain .more-link {
    margin-top: 10px !important;
}

.character-tool-page .character-explain .more-link .button {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--zw-copper);
    border-radius: 0;
    background: #fff !important;
    color: var(--zw-copper-deep) !important;
    box-shadow: none;
    font: 700 13px var(--zw-serif);
}

.character-tool-page .character-explain .more-link .button:hover {
    background: #fbfaf7 !important;
    box-shadow: inset 3px 0 0 var(--zw-copper);
    transform: none;
}

@media (max-width: 640px) {
    .character-tool-page .character-explain .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .character-tool-page .character-explain .info-item {
        min-height: 44px;
        gap: 7px;
        padding: 7px 8px;
    }

    .character-tool-page .character-explain .info-tag {
        font-size: 13px;
    }

    .character-tool-page .character-explain .info-content.hanzi,
    .character-tool-page .character-explain .info-content.hanzi a {
        font-size: 24px;
    }

    .character-tool-page .character-explain .info-content.py {
        font-size: 17px;
    }

    .character-tool-page .character-explain .explain-detail {
        padding: 10px 11px;
    }

    .character-tool-page .character-explain .explain-text {
        font-size: 14px;
        line-height: 1.75;
    }

    .character-tool-page .character-explain .more-link {
        margin-top: 8px !important;
    }
}

/* 最新查询：语义化的续查索引，与相关汉字区共用内容基线。 */
.character-tool-page .character-latest-queries {
    margin: 12px 0 0;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-latest-queries__header {
    padding: 11px 14px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
}

.character-tool-page .character-latest-queries__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.character-tool-page .character-latest-queries__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px;
}

.character-tool-page .character-latest-queries__item {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    padding: 8px 11px;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink-soft);
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.character-tool-page .character-latest-queries__item:hover,
.character-tool-page .character-latest-queries__item:focus-visible {
    border-color: var(--zw-copper);
    box-shadow: inset 3px 0 0 var(--zw-copper);
    color: var(--zw-ink);
    outline: 0;
}

@media (max-width: 640px) {
    .character-tool-page .character-latest-queries {
        margin-top: 10px;
    }

    .character-tool-page .character-latest-queries__header {
        padding: 10px 12px;
    }

    .character-tool-page .character-latest-queries__header h2 {
        font-size: 16px;
    }

    .character-tool-page .character-latest-queries__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .character-tool-page .character-latest-queries__item {
        min-height: 40px;
        padding: 7px 8px;
        font-size: 13px;
    }
}

/* 汉字释义摘要：用“字形—读音—释义”三层，替换旧 Bulma 信息卡。 */
.character-tool-page .character-definition-summary {
    margin: 12px 0 0;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-definition-summary__header {
    padding: 11px 14px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
}

.character-tool-page .character-definition-summary__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 17px/1.35 var(--zw-serif);
}

.character-tool-page .character-definition-summary__body {
    padding: 12px;
}

.character-tool-page .character-definition-summary__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.character-tool-page .character-definition-summary__fact {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 54px;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--zw-rule);
    background: #fff;
}

.character-tool-page .character-definition-summary__fact dt {
    flex: 0 0 auto;
    margin: 0;
    color: var(--zw-copper-deep);
    font: 700 14px var(--zw-serif);
}

.character-tool-page .character-definition-summary__fact dd {
    min-width: 0;
    margin: 0;
    color: var(--zw-ink);
}

.character-tool-page .character-definition-summary__hanzi,
.character-tool-page .character-definition-summary__hanzi a {
    color: var(--zw-ink);
    font: 400 29px/1 var(--zw-serif);
    text-decoration: none;
}

.character-tool-page .character-definition-summary__pinyin {
    font: 400 19px/1.2 var(--zw-serif);
}

.character-tool-page .character-definition-summary__excerpt {
    margin-top: 8px;
    padding: 11px 13px;
    border: 1px solid var(--zw-rule);
    border-left: 3px solid var(--zw-copper);
    background: #f7faf7;
}

.character-tool-page .character-definition-summary__excerpt p {
    margin: 0;
    color: var(--zw-ink-soft);
    font-size: 15px;
    line-height: 1.8;
}

.character-tool-page .character-definition-summary__link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-top: 9px;
    padding: 4px 10px;
    border: 1px solid var(--zw-copper);
    color: var(--zw-copper-deep);
    font: 700 13px var(--zw-serif);
    text-decoration: none;
}

.character-tool-page .character-definition-summary__link:hover,
.character-tool-page .character-definition-summary__link:focus-visible {
    box-shadow: inset 3px 0 0 var(--zw-copper);
    color: var(--zw-ink);
    outline: 0;
}

@media (max-width: 640px) {
    .character-tool-page .character-definition-summary {
        margin-top: 10px;
    }

    .character-tool-page .character-definition-summary__header {
        padding: 10px 12px;
    }

    .character-tool-page .character-definition-summary__header h2 {
        font-size: 16px;
    }

    .character-tool-page .character-definition-summary__body {
        padding: 8px;
    }

    .character-tool-page .character-definition-summary__facts {
        gap: 6px;
    }

    .character-tool-page .character-definition-summary__fact {
        min-height: 44px;
        gap: 7px;
        padding: 7px 8px;
    }

    .character-tool-page .character-definition-summary__fact dt {
        font-size: 13px;
    }

    .character-tool-page .character-definition-summary__hanzi,
    .character-tool-page .character-definition-summary__hanzi a {
        font-size: 24px;
    }

    .character-tool-page .character-definition-summary__pinyin {
        font-size: 17px;
    }

    .character-tool-page .character-definition-summary__excerpt {
        margin-top: 6px;
        padding: 9px 10px;
    }

    .character-tool-page .character-definition-summary__excerpt p {
        font-size: 14px;
        line-height: 1.75;
    }

    .character-tool-page .character-definition-summary__link {
        margin-top: 7px;
    }
}

/* 查询要点：只呈现与当前页面任务直接相关的汉字属性。 */
.character-tool-page .character-query-facts {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-query-facts__header {
    padding: 11px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: #fafcf9;
}

.character-tool-page .character-query-facts__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 16px/1.35 var(--zw-serif);
}

.character-tool-page .character-query-facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
}

.character-tool-page .character-query-facts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 54px;
    padding: 9px 13px;
    border-right: 1px solid var(--zw-rule);
}

.character-tool-page .character-query-facts__item:last-child {
    border-right: 0;
}

.character-tool-page .character-query-facts__item dt {
    flex: 0 0 auto;
    margin: 0;
    color: var(--zw-muted);
    font-size: 12px;
}

.character-tool-page .character-query-facts__item dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--zw-ink);
    font: 700 16px/1.35 var(--zw-serif);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
.character-tool-page .character-query-facts {
        margin-top: 0;
    }

.character-tool-page .character-query-facts__header {
        padding: 10px 12px;
    }

    .character-tool-page .character-query-facts__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .character-tool-page .character-query-facts__item {
        min-height: 46px;
        padding: 7px 10px;
        border-bottom: 1px solid var(--zw-rule);
    }

    .character-tool-page .character-query-facts__item:nth-child(2n) {
        border-right: 0;
    }

    .character-tool-page .character-query-facts__item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .character-tool-page .character-query-facts__item dd {
        font-size: 15px;
    }
}

/* 五行页头：查询主题、问题与结论收拢为一个阅读单元。 */
.character-tool-page .character-query-hero {
    padding: 23px 20px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: linear-gradient(108deg, #fff 0%, #fff 72%, #eef4ef 100%);
}

.character-tool-page .character-query-hero__eyebrow {
    margin: 0 0 5px;
    color: var(--zw-copper-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

.character-tool-page .character-query-hero h1 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 clamp(29px, 3vw, 38px)/1.22 var(--zw-serif);
    letter-spacing: .02em;
}

.character-tool-page .character-query-hero__result {
    margin: 11px 0 0;
    padding: 8px 11px;
    border-left: 3px solid var(--zw-copper);
    color: var(--zw-ink-soft);
    font-size: 16px;
    line-height: 1.55;
}

.character-tool-page .character-query-hero__result strong {
    margin-left: 2px;
    color: var(--zw-copper-deep);
    font-family: var(--zw-serif);
    font-size: 1.12em;
}

@media (max-width: 640px) {
.character-tool-page .character-query-hero {
        padding: 18px 12px 16px;
    }

    .character-tool-page .character-query-hero h1 {
        font-size: 27px;
    }

    .character-tool-page .character-query-hero__result {
        margin-top: 8px;
        padding: 7px 9px;
        font-size: 15px;
    }
}

/* 相关汉字：与“最新查询”共用同一内容基线，清除旧详情页的大内边距。 */
.character-tool-page .character-related-section {
    margin: 12px 0 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-related-section > .content-section__header {
    align-items: flex-end;
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
}

.character-tool-page .character-related-section > .content-section__header p {
    margin-bottom: 3px;
    font-size: 11px;
}

.character-tool-page .character-related-section > .content-section__header h2 {
    font-size: 19px;
}

.character-tool-page .character-related-section > .character-related-group {
    margin: 0;
    padding: 12px 20px;
}

.character-tool-page .character-related-section > .character-related-group + .character-related-group {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--zw-rule);
}

.character-tool-page .character-related-section > .character-related-group h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

@media (max-width: 640px) {
    .character-tool-page .character-related-section {
        margin-top: 10px;
    }

    .character-tool-page .character-related-section > .content-section__header {
        padding: 9px 8px;
    }

    .character-tool-page .character-related-section > .content-section__header h2 {
        font-size: 18px;
    }

    .character-tool-page .character-related-section > .character-related-group {
        padding: 8px;
    }

    .character-tool-page .character-related-section > .character-related-group + .character-related-group {
        padding-top: 8px;
    }
}

/* 拼音转换工具：输入、操作、结果三步紧凑排列。 */
.character-tool-page .character-pinyin-tool {
    margin: 12px 0 0;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-pinyin-tool__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
}

.character-tool-page .character-pinyin-tool__header p {
    margin: 0 0 3px;
    color: var(--zw-copper-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

.character-tool-page .character-pinyin-tool__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 19px/1.3 var(--zw-serif);
}

.character-tool-page .character-pinyin-tool__header small {
    color: var(--zw-muted);
    font-size: 12px;
    white-space: nowrap;
}

.character-tool-page .character-pinyin-tool__body {
    padding: 12px;
}

.character-tool-page .character-pinyin-tool__field {
    display: block;
}

.character-tool-page .character-pinyin-tool__field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.character-tool-page .character-pinyin-tool__field-label strong {
    color: var(--zw-ink);
    font: 700 15px var(--zw-serif);
}

.character-tool-page .character-pinyin-tool__field-label small {
    color: var(--zw-muted);
    font-size: 12px;
}

.character-tool-page .character-pinyin-tool textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 112px !important;
    min-height: 112px;
    padding: 10px 12px;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    outline: 0;
    background: #fff;
    color: var(--zw-ink);
    font: 15px/1.65 var(--zw-sans);
    resize: vertical;
}

.character-tool-page .character-pinyin-tool textarea:focus {
    border-color: var(--zw-copper);
    box-shadow: inset 0 0 0 1px var(--zw-copper);
}

.character-tool-page .character-pinyin-tool__field--result {
    margin-top: 10px;
}

.character-tool-page .character-pinyin-tool__field--result textarea {
    height: 78px !important;
    min-height: 78px;
    margin: 0;
    border-color: #dfe7e1;
    background: #f7faf7;
    color: var(--zw-copper-deep);
    font: 500 18px/1.55 var(--zw-serif);
    letter-spacing: .03em;
}

/* 覆盖旧版 ID 规则，避免结果框被额外顶开并保留旧色系。 */
.character-tool-page #pinyinOutput {
    margin-top: 0;
    background: #f7faf7;
    border-color: #dfe7e1;
}

.character-tool-page .character-pinyin-tool__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.character-tool-page .character-pinyin-tool__actions button {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    background: #fff;
    color: var(--zw-ink-soft);
    cursor: pointer;
    font: 700 13px var(--zw-serif);
}

.character-tool-page .character-pinyin-tool__actions button:first-child {
    border-color: var(--zw-copper-deep);
    background: var(--zw-copper-deep);
    color: #fff;
}

.character-tool-page .character-pinyin-tool__actions button:hover,
.character-tool-page .character-pinyin-tool__actions button:focus-visible {
    border-color: var(--zw-copper);
    box-shadow: inset 3px 0 0 var(--zw-copper);
    color: var(--zw-ink);
    outline: 0;
}

.character-tool-page .character-pinyin-tool__actions button:first-child:hover,
.character-tool-page .character-pinyin-tool__actions button:first-child:focus-visible {
    border-color: var(--zw-copper-deep);
    color: #fff;
}

.character-tool-page .character-pinyin-tool__status {
    min-height: 18px;
    margin: 7px 0 0;
    color: var(--zw-muted);
    font-size: 12px;
}

.character-tool-page .character-pinyin-tool__status.is-error {
    color: #9a3f32;
}

@media (max-width: 640px) {
    .character-tool-page .character-pinyin-tool {
        margin-top: 10px;
    }

    .character-tool-page .character-pinyin-tool__header {
        align-items: flex-start;
        padding: 9px 8px;
    }

    .character-tool-page .character-pinyin-tool__header h2 {
        font-size: 18px;
    }

    .character-tool-page .character-pinyin-tool__body {
        padding: 8px;
    }

    .character-tool-page .character-pinyin-tool textarea {
        height: 96px !important;
        min-height: 96px;
        font-size: 14px;
    }

    .character-tool-page .character-pinyin-tool__field--result textarea {
        height: 70px !important;
        min-height: 70px;
        font-size: 16px;
    }
}

/* 近义词、反义词：以词义关系而非通用汉字资料作为首屏核心。 */
.character-tool-page .character-query-hero--synonym .character-query-hero__result strong,
.character-tool-page .character-query-hero--antonym .character-query-hero__result strong {
    font-size: inherit;
}

.character-tool-page .character-query-hero--synonym .character-query-hero__result a,
.character-tool-page .character-query-hero--antonym .character-query-hero__result a {
    margin: 0 2px;
    color: var(--zw-copper-deep);
    text-decoration: none;
}

.character-tool-page .character-word-comparison {
    margin: 12px 0 0;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-word-comparison__header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
}

.character-tool-page .character-word-comparison__header p {
    margin: 0 0 3px;
    color: var(--zw-copper-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

.character-tool-page .character-word-comparison__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 19px/1.3 var(--zw-serif);
}

.character-tool-page .character-word-comparison__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.character-tool-page .character-word-comparison__card {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.character-tool-page .character-word-comparison__card:hover,
.character-tool-page .character-word-comparison__card:focus-within {
    border-color: var(--zw-copper);
    box-shadow: inset 3px 0 0 var(--zw-copper);
}

.character-tool-page .character-word-comparison__card h3 {
    margin: 0 0 5px;
    font: 700 19px/1.25 var(--zw-serif);
}

.character-tool-page .character-word-comparison__card h3 a {
    color: var(--zw-ink);
    text-decoration: none;
}

.character-tool-page .character-word-comparison__card h3 a:hover {
    color: var(--zw-copper-deep);
}

.character-tool-page .character-word-comparison__card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--zw-ink-soft);
    font-size: 14px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.character-tool-page .character-word-comparison__empty {
    margin: 0;
    padding: 16px 12px;
    color: var(--zw-muted);
    font-size: 14px;
}

@media (max-width: 640px) {
    .character-tool-page .character-word-comparison {
        margin-top: 10px;
    }

    .character-tool-page .character-word-comparison__header,
    .character-tool-page .character-word-comparison__grid {
        padding: 8px;
    }

    .character-tool-page .character-word-comparison__header h2 {
        font-size: 18px;
    }

    .character-tool-page .character-word-comparison__grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .character-tool-page .character-word-comparison__card {
        padding: 9px 10px;
    }
}

/* 繁体查询：先呈现简繁对照，再提供不会改写原文的转换工具。 */
.character-tool-page .character-traditional-pair,
.character-tool-page .character-traditional-tool,
.character-tool-page .character-stroke-demo {
    margin: 12px 0 0;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-tool-page .character-traditional-pair__header,
.character-tool-page .character-traditional-tool__header,
.character-tool-page .character-stroke-demo__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--zw-rule);
    background: var(--zw-mist);
}

.character-tool-page .character-traditional-pair__header h2,
.character-tool-page .character-traditional-tool__header h2,
.character-tool-page .character-stroke-demo__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 19px/1.3 var(--zw-serif);
}

.character-tool-page .character-traditional-tool__header p,
.character-tool-page .character-stroke-demo__header p {
    margin: 0 0 3px;
    color: var(--zw-copper-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

.character-tool-page .character-traditional-tool__header small,
.character-tool-page .character-stroke-demo__header small {
    color: var(--zw-muted);
    font-size: 12px;
    white-space: nowrap;
}

.character-tool-page .character-traditional-pair__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px;
}

.character-tool-page .character-traditional-pair__item {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    text-align: center;
}

.character-tool-page .character-traditional-pair__item dt {
    margin: 0 0 4px;
    color: var(--zw-muted);
    font-size: 12px;
}

.character-tool-page .character-traditional-pair__item dd {
    margin: 0;
    color: var(--zw-ink);
    font: 500 42px/1.15 var(--zw-serif);
}

.character-tool-page .character-traditional-tool__body {
    padding: 12px;
}

.character-tool-page .character-traditional-tool__field {
    display: block;
}

.character-tool-page .character-traditional-tool__field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.character-tool-page .character-traditional-tool__field-label strong {
    color: var(--zw-ink);
    font: 700 15px var(--zw-serif);
}

.character-tool-page .character-traditional-tool__field-label small {
    color: var(--zw-muted);
    font-size: 12px;
}

.character-tool-page .character-traditional-tool textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 112px;
    min-height: 112px;
    padding: 10px 12px;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    outline: 0;
    background: #fff;
    color: var(--zw-ink);
    font: 15px/1.65 var(--zw-sans);
    resize: vertical;
}

.character-tool-page .character-traditional-tool textarea:focus {
    border-color: var(--zw-copper);
    box-shadow: inset 0 0 0 1px var(--zw-copper);
}

.character-tool-page .character-traditional-tool__field--result {
    margin-top: 10px;
}

.character-tool-page .character-traditional-tool__field--result textarea {
    height: 78px;
    min-height: 78px;
    border-color: #dfe7e1;
    background: #f7faf7;
    color: var(--zw-copper-deep);
    font: 500 18px/1.55 var(--zw-serif);
    letter-spacing: .03em;
}

.character-tool-page .character-traditional-tool__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.character-tool-page .character-traditional-tool__actions button,
.character-tool-page .character-stroke-demo__animation button {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--zw-rule);
    border-radius: 0;
    background: #fff;
    color: var(--zw-ink-soft);
    cursor: pointer;
    font: 700 13px var(--zw-serif);
}

.character-tool-page .character-traditional-tool__actions button:first-child,
.character-tool-page .character-stroke-demo__animation button {
    border-color: var(--zw-copper-deep);
    background: var(--zw-copper-deep);
    color: #fff;
}

.character-tool-page .character-traditional-tool__actions button:hover,
.character-tool-page .character-traditional-tool__actions button:focus-visible,
.character-tool-page .character-stroke-demo__animation button:hover,
.character-tool-page .character-stroke-demo__animation button:focus-visible {
    border-color: var(--zw-copper);
    box-shadow: inset 3px 0 0 var(--zw-copper);
    outline: 0;
}

.character-tool-page .character-traditional-tool__status,
.character-tool-page .character-stroke-demo__status {
    min-height: 18px;
    margin: 7px 0 0;
    color: var(--zw-muted);
    font-size: 12px;
}

.character-tool-page .character-traditional-tool__status.is-error,
.character-tool-page .character-stroke-demo__status.is-error {
    color: #9a3f32;
}

/* 笔顺页：动画与分步图并列呈现，分别服务动态观察与静态对照。 */
.character-tool-page .character-query-facts--stroke-order .character-query-facts__list {
    grid-template-columns: 1fr;
}

.character-tool-page .character-query-facts--stroke-order .character-query-facts__item--wide {
    border-top: 1px solid var(--zw-rule);
    border-right: 0;
}

.character-tool-page .character-query-facts--stroke-order .character-query-facts__item {
    justify-content: flex-start;
    gap: 16px;
}

.character-tool-page .character-query-facts--stroke-order .character-query-facts__item dd {
    text-align: left;
}

.character-tool-page .character-query-facts--stroke-order .character-query-facts__item--wide dd {
    overflow: visible;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
}

.character-tool-page .character-stroke-demo__body {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 0;
}

.character-tool-page .character-stroke-demo figure {
    min-width: 0;
    margin: 0;
    padding: 12px;
}

.character-tool-page .character-stroke-demo figure + figure {
    border-left: 1px solid var(--zw-rule);
}

.character-tool-page .character-stroke-demo figure h3 {
    margin: 0 0 8px;
    color: var(--zw-ink);
    font: 700 15px var(--zw-serif);
}

.character-tool-page .character-stroke-demo__canvas {
    display: grid;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    place-items: center;
    background-color: #fcfdfb;
    background-image: linear-gradient(to right, transparent 49.5%, #dfe7e1 49.5%, #dfe7e1 50.5%, transparent 50.5%), linear-gradient(to bottom, transparent 49.5%, #dfe7e1 49.5%, #dfe7e1 50.5%, transparent 50.5%), linear-gradient(45deg, transparent 49.7%, #e8ede9 49.7%, #e8ede9 50.3%, transparent 50.3%), linear-gradient(-45deg, transparent 49.7%, #e8ede9 49.7%, #e8ede9 50.3%, transparent 50.3%);
}

.character-tool-page .character-stroke-demo__canvas > div,
.character-tool-page .character-stroke-demo__canvas svg {
    width: 180px !important;
    height: 180px !important;
}

.character-tool-page .character-stroke-demo__animation button {
    display: block;
    margin: 9px auto 0;
}

.character-tool-page .character-stroke-demo__animation button:disabled {
    border-color: var(--zw-rule);
    background: #eef2ee;
    color: var(--zw-muted);
    cursor: wait;
    box-shadow: none;
}

.character-tool-page .character-stroke-demo__image {
    display: grid;
    min-height: 0;
    place-items: center;
    border: 1px solid var(--zw-rule);
    background: #fff;
}

.character-tool-page .character-stroke-demo__image img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.character-tool-page .character-stroke-demo__image p {
    display: none;
    margin: 0;
    padding: 18px;
    color: var(--zw-muted);
    font-size: 14px;
}

.character-tool-page .character-stroke-demo__image.is-empty p {
    display: block;
}

.character-tool-page .character-stroke-demo figcaption {
    margin-top: 7px;
    color: var(--zw-muted);
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .character-tool-page .character-traditional-pair,
    .character-tool-page .character-traditional-tool,
    .character-tool-page .character-stroke-demo {
        margin-top: 10px;
    }

    .character-tool-page .character-traditional-pair__header,
    .character-tool-page .character-traditional-tool__header,
    .character-tool-page .character-stroke-demo__header {
        align-items: flex-start;
        padding: 9px 8px;
    }

    .character-tool-page .character-traditional-pair__header h2,
    .character-tool-page .character-traditional-tool__header h2,
    .character-tool-page .character-stroke-demo__header h2 {
        font-size: 18px;
    }

    .character-tool-page .character-traditional-pair__list,
    .character-tool-page .character-traditional-tool__body {
        padding: 8px;
    }

    .character-tool-page .character-traditional-pair__item dd {
        font-size: 34px;
    }

    .character-tool-page .character-traditional-tool textarea {
        height: 96px;
        min-height: 96px;
        font-size: 14px;
    }

    .character-tool-page .character-traditional-tool__field--result textarea {
        height: 70px;
        min-height: 70px;
        font-size: 16px;
    }

    .character-tool-page .character-query-facts--stroke-order .character-query-facts__item--wide {
        grid-column: 1 / -1;
        border-bottom: 0;
    }

    .character-tool-page .character-stroke-demo__body {
        grid-template-columns: 1fr;
    }

    .character-tool-page .character-stroke-demo figure {
        padding: 10px 8px;
    }

    .character-tool-page .character-stroke-demo figure + figure {
        border-top: 1px solid var(--zw-rule);
        border-left: 0;
    }
}

/* 宽屏分步图自身已有田字格边线，无需再套容器框。 */
@media (min-width: 641px) {
    /* 功能详情页共用一条 20px 内容基线，兼顾资料密度与阅读留白。 */
    .character-tool-page .character-tool-page__content > .character-query-hero,
    .character-tool-page .character-tool-page__content > .character-query-facts,
    .character-tool-page .character-tool-page__content > .character-traditional-pair,
    .character-tool-page .character-tool-page__content > .character-traditional-tool,
    .character-tool-page .character-tool-page__content > .character-stroke-demo,
    .character-tool-page .character-tool-page__content > .character-pinyin-tool,
    .character-tool-page .character-tool-page__content > .character-word-comparison,
    .character-tool-page .character-tool-page__content > .character-related-section,
    .character-tool-page .character-tool-page__content > .character-latest-queries,
    .character-tool-page .character-tool-page__content > .character-definition-summary {
        box-sizing: border-box;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .character-tool-page .character-traditional-pair__header,
    .character-tool-page .character-traditional-tool__header,
    .character-tool-page .character-stroke-demo__header,
    .character-tool-page .character-pinyin-tool__header,
    .character-tool-page .character-word-comparison__header,
    .character-tool-page .character-related-section > .content-section__header,
    .character-tool-page .character-latest-queries__header,
    .character-tool-page .character-definition-summary__header {
        padding-right: 20px;
        padding-left: 20px;
    }

    .character-tool-page .character-traditional-pair__list,
    .character-tool-page .character-traditional-tool__body,
    .character-tool-page .character-stroke-demo__body,
    .character-tool-page .character-pinyin-tool__body,
    .character-tool-page .character-word-comparison__grid,
    .character-tool-page .character-related-section > .character-related-group,
    .character-tool-page .character-latest-queries__list,
    .character-tool-page .character-definition-summary__body {
        padding-right: 20px;
        padding-left: 20px;
    }

    .character-tool-page .character-query-facts--stroke-order .character-query-facts__list {
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    }

    .character-tool-page .character-query-facts__item:first-child {
        padding-left: 20px;
    }

    .character-tool-page .character-query-facts--stroke-order .character-query-facts__item--wide {
        grid-column: auto;
        border-top: 0;
    }

    .character-tool-page .character-stroke-demo__image {
        display: block;
        border: 0;
        background: transparent;
    }
}

/* 通用汉字详情：先回答“读什么、是什么意思、怎么写”，再提供扩展探索。 */
.character-detail-page.character-tool-page .character-summary {
    padding: 24px 20px 20px;
    background: linear-gradient(108deg, #fff 0%, #fff 70%, #eef4ef 100%);
}

.character-detail-page.character-tool-page .character-summary h1 {
    max-width: 760px;
}

.character-detail-page.character-tool-page .character-summary__intro {
    max-width: 780px;
    line-height: 1.75;
}

.character-detail-page.character-tool-page .character-facts,
.character-detail-page.character-tool-page .character-definition-section,
.character-detail-page.character-tool-page .character-stroke-section,
.character-detail-page.character-tool-page .character-word-relations,
.character-detail-page.character-tool-page .character-variant-section {
    padding: 20px;
}

.character-detail-page.character-tool-page .character-facts > .content-section__header,
.character-detail-page.character-tool-page .character-definition-section > .content-section__header,
.character-detail-page.character-tool-page .character-stroke-section > .content-section__header,
.character-detail-page.character-tool-page .character-word-relations > .content-section__header,
.character-detail-page.character-tool-page .character-variant-section > .content-section__header {
    margin-bottom: 12px;
}

.character-detail-page.character-tool-page .character-fact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.character-detail-page.character-tool-page .character-fact-card h3 {
    padding: 8px 11px;
    font-size: 15px;
}

.character-detail-page.character-tool-page .character-fact-card dl {
    padding: 3px 11px;
}

.character-detail-page.character-tool-page .character-fact-card dl > div {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 0;
}

.character-detail-page.character-tool-page .character-fact-card dd {
    font-size: 16px;
}

.character-detail-page.character-tool-page .character-structure-links a {
    color: var(--zw-ink-soft);
    font: 13px var(--zw-sans);
    text-decoration: underline;
    text-decoration-color: var(--zw-rule);
    text-underline-offset: 3px;
}

.character-detail-page.character-tool-page .character-code-details {
    margin-top: 10px;
    border-top: 1px dotted var(--zw-rule);
    color: var(--zw-ink-soft);
}

.character-detail-page.character-tool-page .character-code-details summary {
    width: fit-content;
    padding: 9px 0 3px;
    color: var(--zw-muted);
    cursor: pointer;
    font-size: 13px;
}

.character-detail-page.character-tool-page .character-code-details[open] summary {
    color: var(--zw-copper-deep);
}

.character-detail-page.character-tool-page .character-code-details dl {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin: 7px 0 2px;
}

.character-detail-page.character-tool-page .character-code-details dl > div {
    display: flex;
    gap: 6px;
    font-size: 13px;
}

.character-detail-page.character-tool-page .character-code-details dt,
.character-detail-page.character-tool-page .character-code-details dd {
    margin: 0;
}

.character-detail-page.character-tool-page .character-code-details dt { color: var(--zw-muted); }
.character-detail-page.character-tool-page .character-code-details dd { color: var(--zw-ink); font-family: var(--zw-serif); }

.character-detail-page.character-tool-page .character-definition-section {
    background: #fff;
}

.character-detail-page.character-tool-page .character-definition-content {
    max-width: 940px;
}

.character-detail-page.character-tool-page .character-stroke-section--compact {
    background: var(--zw-surface);
}

.character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-layout {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-canvas {
    width: 150px;
    height: 150px;
    border: 1px solid var(--zw-rule);
    background-color: #fff;
}

.character-detail-page.character-tool-page .character-stroke-copy p {
    max-width: 560px;
    margin: 0;
    color: var(--zw-ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

.character-detail-page.character-tool-page .character-stroke-copy strong {
    color: var(--zw-copper-deep);
    font-family: var(--zw-serif);
}

.character-detail-page.character-tool-page .character-stroke-copy .character-stroke-replay {
    margin: 10px 0 5px;
}

.character-detail-page.character-tool-page .character-stroke-status {
    min-height: 18px;
    color: var(--zw-muted) !important;
    font-size: 12px !important;
}

.character-detail-page.character-tool-page .character-stroke-status.is-error { color: #9a3f32 !important; }

.character-detail-page.character-tool-page .character-word-relation-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.character-detail-page.character-tool-page .character-word-relation-card {
    padding: 10px 12px;
}

.character-detail-page.character-tool-page .character-word-relation-card p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
}

.character-detail-page.character-tool-page .character-word-relation-card__terms {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.character-detail-page.character-tool-page .character-word-relation-card__term {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 1px 8px;
    border: 1px solid var(--zw-rule);
    background: #fafcf9;
    color: var(--zw-ink);
    font-family: var(--zw-serif);
}

.character-detail-page.character-tool-page .character-word-relation-card a {
    margin-left: 0;
    padding-left: 10px;
    border-left: 1px solid var(--zw-rule);
}

.character-detail-page.character-tool-page .character-variant-list span {
    width: 44px;
    height: 44px;
    font-size: 24px;
}

.character-detail-page.character-tool-page .character-related-section > .character-related-group {
    padding-top: 12px;
    padding-bottom: 12px;
}

.character-detail-page.character-tool-page .character-related-section > .content-section__description {
    margin: 0;
    padding: 10px 20px 2px;
    color: var(--zw-muted);
    font-size: 14px;
}

.character-detail-page.character-tool-page .character-related-group__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.character-detail-page.character-tool-page .character-related-group__heading h3 {
    margin: 0;
}

.character-detail-page.character-tool-page .character-related-group__heading a {
    flex: 0 0 auto;
    color: var(--zw-copper-deep);
    font-size: 12px;
    text-decoration: none;
}

.character-detail-page.character-tool-page .character-related-group__heading a:hover,
.character-detail-page.character-tool-page .character-related-group__heading a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
    .character-detail-page.character-tool-page .character-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* 单字详情页移动端采用与“相关汉字”一致的 8px 内容基线。 */
    .character-detail-page--profile .character-breadcrumb {
        padding-right: 8px;
        padding-left: 8px;
    }

    .character-detail-page.character-tool-page.character-detail-page--profile .character-summary,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-facts,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-definition-section,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-stroke-section,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-word-relations,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-variant-section {
        padding-right: 8px;
        padding-left: 8px;
    }

    /* 相关汉字分区由子区块承担内容边距，容器本身不再额外缩进。 */
    .character-detail-page.character-tool-page.character-detail-page--profile .character-related-section {
        padding-right: 0;
        padding-left: 0;
    }

    .character-detail-page.character-tool-page.character-detail-page--profile .character-related-section > .content-section__header,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-related-section > .character-related-group,
    .character-detail-page.character-tool-page.character-detail-page--profile .character-related-section > .content-section__description {
        padding-right: 8px;
        padding-left: 8px;
    }

    .character-detail-page.character-tool-page .character-summary,
    .character-detail-page.character-tool-page .character-facts,
    .character-detail-page.character-tool-page .character-definition-section,
    .character-detail-page.character-tool-page .character-stroke-section,
    .character-detail-page.character-tool-page .character-word-relations,
    .character-detail-page.character-tool-page .character-variant-section { padding: 17px 12px; }

    .character-detail-page.character-tool-page .character-facts > .content-section__header,
    .character-detail-page.character-tool-page .character-definition-section > .content-section__header,
    .character-detail-page.character-tool-page .character-stroke-section > .content-section__header,
    .character-detail-page.character-tool-page .character-word-relations > .content-section__header,
    .character-detail-page.character-tool-page .character-variant-section > .content-section__header { margin-bottom: 9px; }

    .character-detail-page.character-tool-page .character-fact-grid { grid-template-columns: 1fr; }
    .character-detail-page.character-tool-page .character-fact-card dl > div { grid-template-columns: 58px minmax(0, 1fr); }
    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-layout { grid-template-columns: 1fr; justify-items: center; }
    .character-detail-page.character-tool-page .character-stroke-copy { width: 100%; }
    .character-detail-page.character-tool-page .character-stroke-copy p { font-size: 14px; }
    .character-detail-page.character-tool-page .character-related-group__heading { align-items: flex-start; }
}

/* 字典正文兼容层：原 zi.css 的释义语义，收敛到详情页而不再加载旧样式表。 */
.character-detail-page .character-definition-content .zi-content,
.character-detail-page .character-definition-content .zi-contents {
    color: var(--zw-ink-soft);
    font-size: 16px;
    line-height: 1.85;
}

.character-detail-page .character-definition-content .zi-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 22px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--zw-rule);
}

.character-detail-page .character-definition-content .zi-heading.main {
    margin-top: 0;
}

.character-detail-page .character-definition-content .zi-heading .zi-title,
.character-detail-page .character-definition-content .zi-heading h3,
.character-detail-page .character-definition-content .zi-heading h4,
.character-detail-page .character-definition-content .zi-heading h5 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 20px/1.4 var(--zw-serif);
}

.character-detail-page .character-definition-content .zi-title-alias {
    color: var(--zw-muted);
    font-size: 14px;
}

.character-detail-page .character-definition-content .zi-basic-explain .explain,
.character-detail-page .character-definition-content .zi-content .explain {
    position: relative;
    margin: 0;
    padding: 11px 0 11px 30px;
    border-bottom: 1px solid #edf1ee;
    color: var(--zw-ink-soft);
    font-size: 16px;
    line-height: 1.85;
}

.character-detail-page .character-definition-content .zi-basic-explain .explain .no,
.character-detail-page .character-definition-content .zi-content .explain .no {
    position: absolute;
    top: 12px;
    left: 0;
    color: var(--zw-copper-deep);
    font-family: var(--zw-serif);
    font-weight: 700;
}

.character-detail-page .character-definition-content .zi-content .explain .eg {
    color: #6f7975;
    font-size: 14px;
}

.character-detail-page .character-definition-content .zi-detail-explain .cixing {
    margin: 20px 0 8px;
    color: var(--zw-copper-deep);
    font: 700 16px var(--zw-serif);
}

.character-detail-page .character-definition-content .zi-detail-explain .cixing::before { content: '〈'; }
.character-detail-page .character-definition-content .zi-detail-explain .cixing::after { content: '〉'; }

.character-detail-page .character-definition-content .zi-detail-explain .extra {
    position: relative;
    margin: 10px 0 0 10px;
    padding: 24px 0 0 15px;
    border-left: 1px solid var(--zw-rule);
    color: #6f7975;
    font-size: 14px;
    line-height: 1.65;
}

.character-detail-page .character-definition-content .zi-detail-explain .extra > label {
    position: absolute;
    top: 0;
    left: -18px;
    min-width: 34px;
    padding: 2px 6px;
    background: #697b73;
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.character-detail-page .character-definition-content .zi-detail-explain .extra.quotes { color: #80623d; }
.character-detail-page .character-definition-content .zi-detail-explain .extra.quotes > label { background: var(--zw-copper-deep); }
.character-detail-page .character-definition-content .zi-detail-explain .extra.en > label { background: #527a59; }
.character-detail-page .character-definition-content .zi-detail-explain .extra > span { display: block; padding: 6px 0; border-bottom: 1px solid #edf1ee; }
.character-detail-page .character-definition-content .zi-detail-explain .extra .author { color: var(--zw-muted); }

/* 基础信息的标题与内容沿同一左侧基线；移动端不再出现内容内缩。 */
.character-detail-page.character-tool-page .character-fact-card h3,
.character-detail-page.character-tool-page .character-fact-card dl,
.character-detail-page.character-tool-page .character-fact-card dt,
.character-detail-page.character-tool-page .character-fact-card dd {
    text-align: left;
}

.character-detail-page.character-tool-page .character-fact-card dl {
    display: block;
    padding-right: 11px;
    padding-left: 11px;
}

.character-detail-page.character-tool-page .character-fact-card dl > div {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    grid-template-columns: none;
}

.character-detail-page.character-tool-page .character-fact-card dt {
    flex: 0 0 62px;
}

.character-detail-page.character-tool-page .character-fact-card dd {
    flex: 0 1 auto;
    min-width: 0;
}

/* 通用详情页笔顺预览只占内容所需宽度，避免宽屏形成大块空白。 */
.character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-layout {
    width: min(100%, 760px);
    padding: 12px;
    border: 0;
    border-left: 3px solid var(--zw-copper);
    background: #f5f8f5;
}

@media (max-width: 640px) {
    .character-detail-page .character-definition-content .zi-content,
    .character-detail-page .character-definition-content .zi-contents,
    .character-detail-page .character-definition-content .zi-basic-explain .explain,
    .character-detail-page .character-definition-content .zi-content .explain { font-size: 15px; }

    .character-detail-page .character-definition-content .zi-heading .zi-title,
    .character-detail-page .character-definition-content .zi-heading h3,
    .character-detail-page .character-definition-content .zi-heading h4,
    .character-detail-page .character-definition-content .zi-heading h5 { font-size: 18px; }

    /* 外层分区已提供统一边距，笔顺演示不再重复叠加水平留白。 */
    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-layout {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
}

/* 单字详情页的笔顺区在手机上改为上下阅读卡片，避免画布、说明和装饰线互相挤压。 */
@media (max-width: 640px) {
    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-layout {
        gap: 12px;
        justify-items: stretch;
        padding: 12px 10px 10px;
        border: 1px solid var(--zw-rule);
        border-top: 3px solid var(--zw-copper);
        border-left: 1px solid var(--zw-rule);
        background: #f5f8f5;
    }

    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-canvas {
        margin: 0 auto;
    }

    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-copy p,
    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-copy .character-stroke-status {
        margin: 0;
    }

    .character-detail-page.character-tool-page .character-stroke-section--compact .character-stroke-copy .character-stroke-replay {
        margin: 0;
    }
}

@media (max-width: 900px) {
    .character-detail-page.character-tool-page .character-fact-card dl {
        display: block;
    }

    .character-detail-page.character-tool-page .character-fact-card dl > div {
        grid-template-columns: none;
    }
}

/* 条件索引页移动端稳定层：覆盖旧模板遗留的两栏 flex 规则。
   笔画、部首、结构、拼音、五行共用，切换设备宽度时始终按单列重排。 */
@media (max-width: 1024px), (max-device-width: 1024px) {
    html,
    body { width: 100%; max-width: 100%; overflow-x: hidden; }

    .character-index-page .layout-wrapper {
        display: block !important;
        width: min(calc(100% - 24px), 1320px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 12px auto 0 !important;
    }

    .character-index-page .main-content,
    .character-index-page .lookup-sidebar,
    .character-index-page .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .character-index-page .main-content {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .character-index-page .lookup-sidebar,
    .character-index-page .sidebar {
        position: static !important;
        margin-top: 12px;
    }

    .character-index-page .character-index,
    .character-index-page .character-index-hero,
    .character-index-page .character-index-switches,
    .character-index-page .character-index-results,
    .character-index-page .character-index-result-grid {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 640px), (max-device-width: 640px) {
    .character-index-page .layout-wrapper {
        width: 100% !important;
        margin-top: 8px !important;
    }

    .character-index-page .main-content > .character-index {
        border-right: 0;
        border-left: 0;
    }

    .character-index-page .character-index-hero h1 {
        font-size: 27px !important;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
}

/* Chrome 设备工具有时延迟更新 layout viewport；由 common.html 同步的状态类兜底。 */
html.is-compact-viewport .character-index-page .layout-wrapper {
    display: block !important;
    width: min(calc(100% - 24px), 1320px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
}

html.is-compact-viewport .character-index-page .main-content,
html.is-compact-viewport .character-index-page .lookup-sidebar,
html.is-compact-viewport .character-index-page .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html.is-compact-viewport .character-index-page .main-content {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html.is-compact-viewport .character-index-page .lookup-sidebar,
html.is-compact-viewport .character-index-page .sidebar {
    position: static !important;
    margin-top: 12px;
}

html.is-compact-viewport .character-index-page .character-index,
html.is-compact-viewport .character-index-page .character-index-hero,
html.is-compact-viewport .character-index-page .character-index-switches,
html.is-compact-viewport .character-index-page .character-index-results,
html.is-compact-viewport .character-index-page .character-index-result-grid {
    min-width: 0;
    max-width: 100%;
}

html.is-phone-viewport .character-index-page .layout-wrapper {
    width: 100% !important;
    margin-top: 8px !important;
}

html.is-phone-viewport .character-index-page .main-content > .character-index {
    border-right: 0;
    border-left: 0;
}

html.is-phone-viewport .character-index-page .character-index-hero h1 {
    font-size: 27px !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* 分类字表页：主任务是稳定、快速地浏览同一主题下的汉字集合。 */
.character-sort-page .main-content > .character-sort {
    padding: 0;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.character-sort-page .character-breadcrumb { padding: 11px 24px; }

.character-sort-hero {
    padding: 30px 28px 24px;
    border-bottom: 1px solid var(--zw-rule);
    background: linear-gradient(115deg, #fff 0%, #fff 74%, #edf3ef 100%);
}

.character-sort-hero__eyebrow,
.character-sort-results__header > div > p,
.character-sort-continue > p {
    margin: 0 0 4px;
    color: var(--zw-copper-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
}

.character-sort-hero h1,
.character-sort-results__header h2,
.character-sort-continue h2 {
    margin: 0;
    color: var(--zw-ink);
    font-family: var(--zw-serif);
}

.character-sort-hero h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.25; }
.character-sort-hero > p:last-child { max-width: 740px; margin: 8px 0 0; color: var(--zw-ink-soft); }

.character-sort-summary { padding: 12px 28px; border-bottom: 1px solid var(--zw-rule); background: #f7faf7; }
.character-sort-summary dl { display: flex; flex-wrap: wrap; gap: 7px 28px; margin: 0; }
.character-sort-summary dl > div { display: flex; align-items: baseline; gap: 8px; }
.character-sort-summary dt { color: var(--zw-muted); font-size: 13px; }
.character-sort-summary dd { margin: 0; color: var(--zw-ink); font: 700 16px var(--zw-serif); }

.character-sort-results { padding: 20px 28px 26px; }
.character-sort-results__header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.character-sort-results__header h2 { font-size: 22px; }
.character-sort-results__header small { color: var(--zw-muted); font-size: 12px; text-align: right; }

.character-sort-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.character-sort-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 72px; padding: 8px 4px; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink); text-align: center; text-decoration: none; }
.character-sort-card strong { display: block; font: 400 28px/1.1 var(--zw-serif); }
.character-sort-card span { display: block; min-width: 0; max-width: 100%; margin-top: 5px; overflow: hidden; color: var(--zw-muted); font: 12px/1.2 var(--zw-sans); text-overflow: ellipsis; white-space: nowrap; }
.character-sort-card:hover { border-color: var(--zw-copper); box-shadow: inset 0 -2px 0 var(--zw-copper); color: var(--zw-ink); }

.character-sort-empty { padding: 22px; border-left: 3px solid var(--zw-copper); background: #f7faf7; color: var(--zw-ink-soft); }
.character-sort-empty strong { display: block; color: var(--zw-ink); font-family: var(--zw-serif); font-size: 18px; }
.character-sort-empty p { margin: 5px 0 0; }

.character-sort-continue { margin: 0 28px 28px; padding: 17px 18px; border: 1px solid var(--zw-rule); background: #f7faf7; }
.character-sort-continue h2 { font-size: 20px; }
.character-sort-continue nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.character-sort-continue a { padding: 6px 10px; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink-soft); font-size: 13px; text-decoration: none; }
.character-sort-continue a:hover { border-color: var(--zw-copper); color: var(--zw-copper-deep); }

@media (max-width: 1100px) {
    .character-sort-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .character-sort-page .main-content > .character-sort { border-right: 0; border-left: 0; }
    .character-sort-page .character-breadcrumb { padding: 10px 12px; }
    .character-sort-hero { padding: 18px 12px 16px; }
    .character-sort-hero h1 { font-size: 27px; }
    .character-sort-hero > p:last-child { font-size: 14px; }
    .character-sort-summary { padding: 10px 12px; }
    .character-sort-summary dl { gap: 7px 16px; }
    .character-sort-results { padding: 16px 12px 20px; }
    .character-sort-results__header { align-items: flex-start; }
    .character-sort-results__header h2 { font-size: 18px; }
    .character-sort-results__header small { display: none; }
    .character-sort-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .character-sort-card { min-height: 64px; }
    .character-sort-card strong { font-size: 25px; }
    .character-sort-continue { margin: 0 12px 12px; padding: 14px 12px; }
    .character-sort-continue h2 { font-size: 18px; }
}

/* 部首目录页：先按笔画定位部首，再进入对应部首的汉字集合。 */
.radical-directory-layout { display: block; }
.radical-directory-page .main-content { width: 100%; }
.radical-directory-page .main-content > .radical-directory { padding: 0; border: 1px solid var(--zw-rule); background: var(--zw-surface); }
.radical-directory-page .character-breadcrumb { padding: 11px 24px; }

.radical-directory-hero { padding: 30px 28px 24px; border-bottom: 1px solid var(--zw-rule); background: linear-gradient(115deg, #fff 0%, #fff 74%, #edf3ef 100%); }
.radical-directory-hero > p, .radical-directory-results__header > div > p, .radical-directory-continue > p { margin: 0 0 4px; color: var(--zw-copper-deep); font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.radical-directory-hero h1, .radical-directory-results__header h2, .radical-directory-continue h2 { margin: 0; color: var(--zw-ink); font-family: var(--zw-serif); font-weight: 700; }
.radical-directory-hero h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.25; }
.radical-directory-hero > span { display: block; max-width: 740px; margin-top: 8px; color: var(--zw-ink-soft); }

.radical-directory-summary { padding: 12px 28px; border-bottom: 1px solid var(--zw-rule); background: #f7faf7; }
.radical-directory-summary dl { display: flex; flex-wrap: wrap; gap: 7px 28px; margin: 0; }
.radical-directory-summary dl > div { display: flex; align-items: baseline; gap: 8px; }
.radical-directory-summary dt { color: var(--zw-muted); font-size: 13px; }
.radical-directory-summary dd { margin: 0; color: var(--zw-ink); font: 700 16px var(--zw-serif); }

.radical-directory-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 11px 28px; border-bottom: 1px solid var(--zw-rule); }
.radical-directory-jump > span { margin-right: 4px; color: var(--zw-muted); font-size: 13px; }
.radical-directory-jump a { min-width: 40px; padding: 4px 7px; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink-soft); font-size: 13px; text-align: center; text-decoration: none; }
.radical-directory-jump a:hover { border-color: var(--zw-copper); color: var(--zw-copper-deep); }

.radical-directory-results { padding: 20px 28px 26px; }
.radical-directory-results__header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.radical-directory-results__header h2 { font-size: 22px; }
.radical-directory-results__header small { color: var(--zw-muted); font-size: 12px; }
.radical-directory-group { padding: 13px 0; border-top: 1px solid var(--zw-rule); scroll-margin-top: 16px; }
.radical-directory-group:first-of-type { border-top: 0; }
.radical-directory-group > header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.radical-directory-group h3 { margin: 0; color: var(--zw-ink); font: 700 17px var(--zw-serif); }
.radical-directory-group header span { color: var(--zw-muted); font-size: 12px; }
.radical-directory-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px; }
.radical-directory-card { display: grid; min-width: 0; min-height: 48px; place-items: center; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink); font: 400 24px/1 var(--zw-serif); text-decoration: none; }
.radical-directory-card:hover { border-color: var(--zw-copper); box-shadow: inset 0 -2px 0 var(--zw-copper); color: var(--zw-copper-deep); }

.radical-directory-continue { margin: 0 28px 28px; padding: 17px 18px; border: 1px solid var(--zw-rule); background: #f7faf7; }
.radical-directory-continue h2 { font-size: 20px; }
.radical-directory-continue nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.radical-directory-continue a { padding: 6px 10px; border: 1px solid var(--zw-rule); background: #fff; color: var(--zw-ink-soft); font-size: 13px; text-decoration: none; }
.radical-directory-continue a:hover { border-color: var(--zw-copper); color: var(--zw-copper-deep); }

/* 拼音、笔画、五行目录：与部首目录共享页面节奏，但按查询对象使用不同卡片。 */
.lookup-directory-page .layout-wrapper {
    display: block;
    width: min(1320px, calc(100% - 40px)) !important;
    max-width: 1320px;
}

.lookup-directory-page .main-content {
    width: 100%;
}

.lookup-directory-page .main-content > .lookup-directory {
    padding: 0;
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.lookup-directory {
    border: 1px solid var(--zw-rule);
    background: var(--zw-surface);
}

.lookup-directory .character-breadcrumb {
    padding: 11px 24px;
    border-bottom: 1px solid var(--zw-rule);
}

.lookup-directory-hero {
    padding: 30px 28px 24px;
    border-bottom: 1px solid var(--zw-rule);
    background: linear-gradient(115deg, #fff 0%, #fff 74%, #edf3ef 100%);
}

.lookup-directory-hero > p,
.lookup-directory-results__header p,
.lookup-directory-continue > p,
.element-directory-results__header > p {
    margin: 0 0 4px;
    color: var(--zw-copper-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
}

.lookup-directory-hero h1 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 clamp(28px, 3vw, 38px)/1.25 var(--zw-serif);
}

.lookup-directory-hero > span {
    display: block;
    max-width: 740px;
    margin-top: 8px;
    color: var(--zw-ink-soft);
    font-size: 17px;
    line-height: 1.7;
}

.lookup-directory-summary {
    padding: 12px 28px;
    border-bottom: 1px solid var(--zw-rule);
    background: #fff;
}

.lookup-directory-summary dl {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 28px;
    margin: 0;
}

.lookup-directory-summary dl > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.lookup-directory-summary dt {
    color: var(--zw-muted);
    font-size: 13px;
}

.lookup-directory-summary dd {
    margin: 0;
    color: var(--zw-ink);
    font: 700 16px var(--zw-serif);
}

.lookup-directory-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 11px 28px;
    border-bottom: 1px solid var(--zw-rule);
    background: #fff;
}

.lookup-directory-jump > span {
    margin-right: 4px;
    color: var(--zw-muted);
    font-size: 13px;
}

.lookup-directory-jump a {
    min-width: 40px;
    padding: 4px 7px;
    background: #fff;
    border: 1px solid var(--zw-rule);
    color: var(--zw-ink-soft);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.lookup-directory-jump a:hover,
.lookup-directory-jump a:focus-visible {
    border-color: var(--zw-copper);
    color: var(--zw-copper-deep);
}

.lookup-directory-results {
    padding: 20px 28px 26px;
}

.lookup-directory-results__header,
.element-directory-results__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.lookup-directory-results__header h2,
.element-directory-results__header h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 22px/1.25 var(--zw-serif);
}

.lookup-directory-results__header small {
    color: var(--zw-muted);
    font-size: 12px;
}

.lookup-directory-group {
    padding: 13px 0;
    border-top: 1px solid var(--zw-rule);
    scroll-margin-top: 16px;
}

.lookup-directory-group:first-of-type {
    border-top: 0;
}

.lookup-directory-group > header {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 10px;
}

.lookup-directory-group h3 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 17px var(--zw-serif);
}

.lookup-directory-group header span {
    color: var(--zw-muted);
    font-size: 12px;
}

.pinyin-directory-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 7px;
}

.pinyin-directory-card {
    min-width: 0;
    padding: 9px 7px;
    overflow: hidden;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink);
    font: 400 17px/1.2 var(--zw-serif);
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pinyin-directory-card:hover,
.pinyin-directory-card:focus-visible {
    border-color: var(--zw-copper);
    box-shadow: inset 0 -2px 0 var(--zw-copper);
    color: var(--zw-copper-deep);
}

.stroke-directory-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}

.stroke-directory-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink);
    text-align: center;
    text-decoration: none;
}

.stroke-directory-card strong {
    font: 700 20px var(--zw-serif);
}

.stroke-directory-card span {
    color: var(--zw-muted);
    font-size: 12px;
}

.stroke-directory-card:hover,
.stroke-directory-card:focus-visible {
    border-color: var(--zw-copper);
    background: #fffaf5;
    color: var(--zw-copper-deep);
}

.structure-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.structure-directory-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 116px;
    padding: 15px 16px 13px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink);
    text-decoration: none;
}

.structure-directory-card strong {
    font: 700 20px/1.3 var(--zw-serif);
}

.structure-directory-card > span {
    margin-top: 6px;
    color: var(--zw-muted);
    font-size: 12px;
}

.structure-directory-card small {
    margin-top: auto;
    padding-top: 12px;
    color: var(--zw-copper-deep);
    font-size: 12px;
}

.structure-directory-card small i {
    font-style: normal;
}

.structure-directory-card:hover,
.structure-directory-card:focus-visible {
    border-color: var(--zw-copper);
    background: #fffaf5;
    box-shadow: inset 0 -2px 0 var(--zw-copper);
}

.structure-directory-card.is-note {
    background: #f7faf7;
}

.structure-directory-card.is-note strong {
    font-size: 17px;
}

.lookup-directory-continue {
    margin: 0 28px 28px;
    padding: 17px 18px;
    border: 1px solid var(--zw-rule);
    background: #f7faf7;
}

.lookup-directory-continue h2 {
    margin: 0;
    color: var(--zw-ink);
    font: 700 20px var(--zw-serif);
}

.lookup-directory-continue nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.lookup-directory-continue a {
    padding: 6px 10px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink-soft);
    font-size: 13px;
    text-decoration: none;
}

.lookup-directory-continue a:hover,
.lookup-directory-continue a:focus-visible {
    border-color: var(--zw-copper);
    color: var(--zw-copper-deep);
}

/* 五行只有五类：全宽目录中的五张等宽选择卡，避免额外的居中窄栏。 */
.element-directory-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 12px 28px;
    border-bottom: 1px solid var(--zw-rule);
    background: #f7faf7;
}

.element-directory-summary p,
.element-directory-summary span {
    margin: 0;
    color: var(--zw-ink-soft);
    font-size: 14px;
}

.element-directory-summary strong {
    color: var(--zw-ink);
    font-family: var(--zw-serif);
}

.element-directory-results {
    margin: 0;
    padding: 20px 28px 26px;
}

.element-directory-results__header {
    display: block;
    margin-bottom: 15px;
}

.element-directory-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.element-directory-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 206px;
    padding: 18px 14px 15px;
    border: 1px solid var(--zw-rule);
    background: #fff;
    color: var(--zw-ink);
    text-align: center;
    text-decoration: none;
}

.element-directory-card strong {
    color: var(--zw-copper-deep);
    font: 700 42px/1 var(--zw-serif);
}

.element-directory-card > span {
    margin-top: 14px;
    color: var(--zw-ink-soft);
    font-size: 13px;
}

.element-directory-card small {
    margin-top: 8px;
    color: var(--zw-muted);
    font-size: 12px;
}

.element-directory-card b {
    margin-top: auto;
    padding-top: 18px;
    color: var(--zw-copper-deep);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.element-directory-card b i {
    font-style: normal;
}

.element-directory-card:hover,
.element-directory-card:focus-visible {
    border-color: var(--zw-copper);
    background: #fffaf5;
    box-shadow: inset 0 -3px 0 var(--zw-copper);
}

.element-directory-page .lookup-directory-continue {
    max-width: none;
    margin-right: 28px;
    margin-left: 28px;
}

@media (max-width: 1100px) { .radical-directory-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
    .pinyin-directory-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .stroke-directory-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .structure-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .lookup-directory-page .layout-wrapper { width: 100%; margin-top: 8px !important; }
    .lookup-directory { border-right: 0; border-left: 0; }
    .lookup-directory .character-breadcrumb { padding: 10px 12px; }
    .lookup-directory-hero { padding: 18px 12px 16px; }
    .lookup-directory-hero h1 { font-size: 27px; }
    .lookup-directory-hero > span { margin-top: 8px; font-size: 14px; line-height: 1.6; }
    .lookup-directory-summary { padding: 12px; }
    .lookup-directory-summary dl { gap: 8px 18px; }
    .lookup-directory-summary dt { font-size: 12px; }
    .lookup-directory-summary dd { font-size: 15px; }
    .lookup-directory-jump { gap: 5px; padding: 10px 12px; }
    .lookup-directory-jump > span { width: 100%; margin: 0 0 2px; font-size: 12px; }
    .lookup-directory-jump a { min-width: 31px; padding: 4px 6px; font-size: 12px; }
    .lookup-directory-results { padding: 17px 12px 22px; }
    .lookup-directory-results__header h2,
    .element-directory-results__header h2 { font-size: 20px; }
    .lookup-directory-results__header small { display: none; }
    .lookup-directory-group { padding: 12px 0; }
    .pinyin-directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .pinyin-directory-card { padding: 8px 5px; font-size: 15px; }
    .stroke-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .stroke-directory-card { padding: 10px 6px; }
    .stroke-directory-card strong { font-size: 18px; }
    .structure-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .structure-directory-card { min-height: 104px; padding: 12px 11px 10px; }
    .structure-directory-card strong { font-size: 17px; }
    .structure-directory-card small { padding-top: 9px; font-size: 11px; }
    .lookup-directory-continue { margin: 0 12px 12px; padding: 14px 12px; }
    .lookup-directory-continue h2 { font-size: 18px; }
    .element-directory-summary { display: block; margin: 14px 12px 0; padding: 12px; }
    .element-directory-summary span { display: block; margin-top: 6px; font-size: 12px; }
    .element-directory-results { padding: 22px 12px; }
    .element-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .element-directory-card { min-height: 174px; padding: 15px 10px 12px; }
    .element-directory-card strong { font-size: 34px; }
    .element-directory-card > span { margin-top: 10px; font-size: 12px; }
    .element-directory-card small { font-size: 11px; }
    .element-directory-card b { padding-top: 12px; font-size: 11px; }
    .element-directory-card:last-child { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
    .element-directory-page .lookup-directory-continue { margin-right: 12px; margin-left: 12px; }
}

@media (max-width: 640px) {
    .radical-directory-page .layout-wrapper { width: 100%; margin-top: 8px !important; }
    .radical-directory-page .main-content > .radical-directory { border-right: 0; border-left: 0; }
    .radical-directory-page .character-breadcrumb { padding: 10px 12px; }
    .radical-directory-hero { padding: 18px 12px 16px; }
    .radical-directory-hero h1 { font-size: 27px; }
    .radical-directory-hero > span { font-size: 14px; }
    .radical-directory-summary, .radical-directory-jump { padding-right: 12px; padding-left: 12px; }
    .radical-directory-jump { gap: 5px; }
    .radical-directory-jump a { min-width: 36px; padding: 4px 5px; font-size: 12px; }
    .radical-directory-results { padding: 16px 12px 20px; }
    .radical-directory-results__header { align-items: flex-start; }
    .radical-directory-results__header h2 { font-size: 18px; }
    .radical-directory-results__header small { display: none; }
    .radical-directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .radical-directory-card { min-height: 52px; font-size: 24px; }
    .radical-directory-continue { margin: 0 12px 12px; padding: 14px 12px; }
    .radical-directory-continue h2 { font-size: 18px; }
}