/* ===== /hanzi/ 工具专属配色（仅限本工具内部，不污染主站；与主站暖棕绿保持同调） ===== */
		.hanzi-tool {
			--hz-warn: #b45309;         /* 辅助暖橙：频率/难度/提醒类信息的次要强调（2026-09-18 浅色对比度加深至 4.5:1） */
			--hz-warn-bg: rgba(224, 162, 75, 0.14);
			--hz-cool: #2f6fd6;         /* 反义词冷蓝：与 Synonyms（中性底）视觉分层（2026-09-17） */
			--hz-cool-bg: rgba(47, 111, 214, 0.10);
			--hz-cool-bg-hover: rgba(47, 111, 214, 0.18);
		}
		html.dark .hanzi-tool {
			--hz-warn: #e8b45f;
			--hz-warn-bg: rgba(232, 180, 95, 0.16);
			--hz-cool: #6ea8fe;
			--hz-cool-bg: rgba(110, 168, 254, 0.14);
			--hz-cool-bg-hover: rgba(110, 168, 254, 0.22);
		}
		/* ===== /hanzi/en/ English Version v3 - Learner-First Redesign ===== */
		.hanzi-page { max-width: 1080px; margin: 0 auto; padding: 20px 16px 56px; }
		.hanzi-breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
		.hanzi-breadcrumb a { color: var(--text-muted); text-decoration: none; }
		.hanzi-breadcrumb a:hover { color: var(--accent); }
		/* Card base */
		.hanzi-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
		/* ===== Hero Card - PC horizontal layout, mobile vertical ===== */
		.hanzi-hero { display: flex; align-items: center; gap: 28px; background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px 32px; margin-bottom: 18px; position: relative; }
		.hanzi-hero-char-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
		.hanzi-hero-char { font-size: 96px; font-weight: 700; color: var(--text-primary); line-height: 1.1; margin: 0; font-family: var(--font-read); }
		/* English meaning - prominent (learner sees this first) */
		.hanzi-hero-en-sub { font-size: 18px; color: var(--text-primary); text-align: center; max-width: 400px; word-wrap: break-word; line-height: 1.5; font-weight: 500; margin-top: 4px; }
		/* 中栏（Radical/Strokes/Structure/Frequency + Listen）；PC 端由 .hanzi-hero 的 align-items:center 负责垂直居中
		   ⚠️ 用 width 而非 flex-basis 控制宽度：移动端竖排（flex-direction:column）时 flex-basis 作用于高度，会强制撑高中栏产生大块空白 */
		.hanzi-hero-info { flex: 0 1 auto; width: min(360px, 100%); min-width: 260px; text-align: center; }
		.hanzi-hero-word { flex: 0 1 auto; min-width: 200px; }
		/* Meta build tags (Radical / Strokes / Structure / Frequency) —— 统一为一体式标签组 */
		.hanzi-meta-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; }
		.hanzi-meta-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; background: var(--bg-surface); border-radius: var(--radius-full); font-size: 13px; color: var(--text-secondary); font-weight: 500; }
		.hanzi-meta-pill b { color: var(--text-primary); font-weight: 600; }
		/* 字卡增强（结构/频率小标签，英文版不含繁体）——与中文版 word.htm 共用视觉体系
		   ⚠️ 与上方 Radical/Strokes 标签行拉开明显间距，保持呼吸感 */
		.hanzi-char-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; justify-content: center; align-items: center; }
		.hanzi-char-tag { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 5px 14px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; }
		.hanzi-char-tag b { color: var(--text-primary); font-weight: 600; }
		.hanzi-char-tag.hanzi-char-tag-freq { background: var(--hz-warn-bg); }
		.hanzi-char-tag.hanzi-char-tag-freq b { color: var(--hz-warn); }
		/* Character decomposition links (word/idiom pages) */
		.hanzi-word-title { font-size: 36px; font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; font-family: var(--font-read); }
		.hanzi-word-title .hw-char-link { 
			color: var(--text-primary); 
			text-decoration: none; 
			border-bottom: 1.5px solid rgba(var(--accent-rgb, 34, 197, 94), 0.3); 
			padding: 2px 6px; 
			border-radius: 4px; 
			transition: all .2s; 
			cursor: pointer;
			background: rgba(var(--accent-rgb, 34, 197, 94), 0.05);
		}
		.hanzi-word-title .hw-char-link:hover { 
			color: var(--accent); 
			background: var(--accent-bg); 
			border-bottom-color: var(--accent);
		}
		/* Word/Idiom card: English meaning + Chinese chars + pinyin */
		.hanzi-word-title-en { 
			display: flex; 
			flex-direction: column; 
			align-items: center; 
			gap: 10px;
			margin-bottom: 8px;
		}
		.hanzi-en-main { 
			font-size: 24px; 
			font-weight: 600; 
			color: var(--text-primary); 
			text-align: center; 
			line-height: 1.5; 
			max-width: 100%; 
			word-wrap: break-word;
			margin: 0;
		}
		.hanzi-cn-sub-wrap { 
			display: flex; 
			gap: 8px; 
			flex-wrap: wrap; 
			justify-content: center; 
		}
		.hanzi-cn-sub-wrap .hw-char-link { 
			font-size: 32px; 
			font-weight: 700; 
			color: var(--text-primary); 
			text-decoration: none; 
			border-bottom: 2px solid rgba(var(--accent-rgb, 34, 197, 94), 0.25); 
			padding: 4px 8px; 
			border-radius: 6px; 
			transition: all .2s; 
			cursor: pointer;
			background: rgba(var(--accent-rgb, 34, 197, 94), 0.05);
		}
		.hanzi-cn-sub-wrap .hw-char-link:hover { 
			color: var(--accent); 
			background: var(--accent-bg); 
			border-bottom-color: var(--accent);
			transform: translateY(-1px);
		}
		/* 词/成语下方拼音提示：比汉字弱、比字源标签清晰，贴合英文阅读顺序（英→汉→拼音） */
		.hanzi-hero-word .hanzi-pinyin { font-size: 20px; color: var(--text-secondary); font-weight: 500; }
		.hanzi-cn-sub-wrap .hw-char-link:hover { 
			color: var(--accent); 
			background: var(--accent-bg); 
			border-bottom-color: var(--accent);
			transform: translateY(-1px);
		}
		/* Word/Idiom tag and pinyin */
		.hanzi-word-tag {
			display: inline-block;
			padding: 6px 15px;
			background: var(--hz-warn-bg);
			color: var(--hz-warn);
			font-size: 14px;
			font-weight: 700;
			border-radius: var(--radius-full);
			margin-top: 10px;
		}
		.hanzi-hero-word .hanzi-pinyin {
			font-size: 20px;
			color: var(--accent);
			font-weight: 600;
			margin-top: 8px;
			letter-spacing: 0.02em;
		}
		/* Word/Idiom hero: centered independent card (方案②), replace leftover fav-btn spacer (方案⑥) */
		.hanzi-hero.hanzi-hero-word { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 28px 24px; }
		.hanzi-hero.hanzi-hero-word .hanzi-hero-word { flex: none; min-width: 0; width: 100%; }
		/* Pinyin styles */
		.hanzi-pinyin { 
			font-size: 24px; 
			color: var(--accent); 
			font-weight: 600; 
			margin-top: 4px; 
			letter-spacing: 0.02em; 
		}
		.hanzi-hero .hanzi-pinyin { font-size: 26px; }
		/* 拼音拆解 chips（2026-09-11 批次 2：声母/韵母/声调三链，链拼音页锚点） */
		.hz-sp { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 7px; margin-top: 8px; font-size: 13px; }
		.hz-sp-group { display: inline-flex; align-items: center; gap: 5px; }
		.hz-sp-chip { display: inline-flex; align-items: center; font-weight: 700; color: var(--accent); background: var(--accent-bg); border-radius: 999px; padding: 2px 10px; text-decoration: none; transition: all .15s; }
		.hz-sp-chip:hover { background: var(--accent); color: #fff; }
		.hz-sp-plus, .hz-sp-dot { color: var(--text-muted); font-size: 12px; }
		.hz-sp-tone { font-size: 12px; color: var(--text-muted); text-decoration: none; border-bottom: 1px dashed rgba(128,128,128,.4); }
		.hz-sp-tone:hover { color: var(--accent); border-color: var(--accent); }
		.hz-sp-note { font-size: 13px; color: var(--text-muted); }
		.hz-sp-note b { color: var(--text-primary); }
		.hz-sp-note a { color: var(--accent); text-decoration: none; }
		.hz-sp-note a:hover { text-decoration: underline; }
		.hanzi-hero .hanzi-speak-btn { margin-top: 18px; }
		.hanzi-hero .hanzi-hsk-badge { display: inline-block; padding: 3px 10px; background: var(--accent-bg); color: var(--accent); border-radius: 12px; font-size: 13px; font-weight: 600; margin-left: 8px; text-decoration: none; transition: all .15s; }
		.hanzi-hero .hanzi-hsk-badge:hover { background: var(--accent); color: #fff; }
		/* Same radical section (standalone card, outside hero) */
		.hanzi-hero-grid { flex-shrink: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
		.hanzi-hero-grid a { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 8px; font-size: 20px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); text-decoration: none; transition: all .15s; }
		.hanzi-hero-grid a:hover { background: var(--accent-bg); color: var(--accent); transform: scale(1.05); }
		.hanzi-hero-grid-wrap { margin-left: auto; flex-shrink: 0; min-width: 200px; }
		.hanzi-hero-grid-label { font-size: 13px; color: var(--text-muted); text-align: left; letter-spacing: .5px; font-weight: 600; margin-bottom: 10px; }
		/* Mobile same radical */
		.hanzi-hero-grid-mobile-wrap { display: none; margin-top: 0; min-width: 0; max-width: 100%; width: 100%; }
		.hanzi-hero-grid-mobile-label { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; font-weight: 500; }
		.hanzi-hero-grid-mobile { display: none; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 100%; }
		.hanzi-hero-grid-mobile a { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1/1; border-radius: 8px; font-size: 17px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); text-decoration: none; transition: all .15s; }
		.hanzi-hero-grid-mobile a:hover { background: var(--accent-bg); color: var(--accent); }
		/* Section title */
		.hanzi-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
		.hanzi-section-title i { color: var(--accent); font-size: 15px; }
		.hanzi-count { font-size: 13px; color: var(--text-muted); font-weight: 400; }
		/* Shuffle button for examples */
		.hanzi-shuffle-btn { margin-left: auto; padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--radius-full); background: transparent; color: var(--accent); font-size: 13px; cursor: pointer; transition: all .15s; }
		a.hanzi-action-btn, a.hanzi-shuffle-btn { text-decoration: none; } /* Link-styled buttons (chain entry): no underline */
		.hanzi-shuffle-btn:hover { background: var(--accent-bg); color: var(--accent); }
		/* Decomposition visualization */
		.hanzi-decomp-box { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg-surface); border-radius: var(--radius); margin-bottom: 12px; flex-wrap: wrap; }
		.hanzi-decomp-char { font-size: 32px; font-weight: 700; color: var(--text-primary); }
		.hanzi-decomp-eq { font-size: 24px; color: var(--text-muted); font-weight: 400; }
		.hanzi-decomp-part { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--bg-card); border-radius: 8px; font-size: 22px; font-weight: 600; color: var(--accent); }
		.hanzi-decomp-plus { font-size: 18px; color: var(--text-muted); margin: 0 4px; }
		/* Etymology */
		.hanzi-etymology { 
			padding: 16px 20px; 
			background: var(--bg-surface); 
			border-radius: var(--radius); 
			font-size: 16px;
			color: var(--text-primary);
			line-height: 1.75;
		}
		.hanzi-etymology-label { 
			font-size: 13px; 
			color: var(--text-secondary); 
			text-transform: uppercase; 
			letter-spacing: 1px; 
			margin-bottom: 8px; 
			font-weight: 700;
		}
		/* English Meanings section */
		.hanzi-en-item { 
			display: flex; 
			flex-direction: column;
			gap: 4px;
			padding: 12px 0; 
			border-bottom: 1px solid var(--bg-surface); 
		}
		.hanzi-en-item:last-child { border-bottom: none; }
		.hanzi-en-text { 
			font-size: 16px;
			font-weight: 500;
			color: var(--text-primary);
			line-height: 1.6;
			word-wrap: break-word;
			word-break: break-word;
			overflow-wrap: anywhere;
		}
		/* 义项拆行（· 分隔的多个语义逐条成行，加性 `·` 前缀作轻列表项） */
		.hanzi-en-sense {
			font-size: 15px;
			line-height: 1.55;
			padding-left: 18px;
			position: relative;
			color: var(--text-secondary);
		}
		.hanzi-en-sense::before {
			content: '·';
			position: absolute;
			left: 4px;
			color: var(--accent);
			font-weight: 700;
		}
		.hanzi-en-sense:first-child { color: var(--text-primary); font-weight: 500; }

		.hanzi-en-pinyin { 
			font-size: 13px; 
			color: var(--text-muted); 
			font-weight: 400;
		}
		/* 多音字读音卡（en 字页）：读音头行（大字拼音 + 发音按钮）+ 该读音义项 */
		.hz-pron-head {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 2px;
		}
		.hz-pron-py {
			font-size: 20px;
			font-weight: 700;
			color: var(--accent);
			letter-spacing: .5px;
		}
		.hz-pron-play {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			border: none;
			border-radius: 50%;
			background: var(--accent-bg);
			color: var(--accent);
			font-size: 13px;
			cursor: pointer;
			transition: all .2s;
		}
		.hz-pron-play:hover { background: var(--accent); color: #fff; }
		.hz-pron-play.speaking { background: var(--accent); color: #fff; }
		.hz-pron-play.loading { opacity: .7; pointer-events: none; }
		/* Word chips with English */
		.hanzi-word-chips-en { display: flex; flex-wrap: wrap; gap: 8px; }
		/* 近反义词卡行布局（Synonyms & Antonyms，与 zh 版 .hanzi-related-row 同构） */
		.hanzi-related-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
		.hanzi-related-row:last-child { margin-bottom: 0; }
		.hanzi-related-label { flex-shrink: 0; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
		.hanzi-word-chip-en { 
			display: flex; 
			flex-direction: column; 
			padding: 10px 14px; 
			background: var(--bg-surface); 
			border-radius: var(--radius); 
			text-decoration: none; 
			transition: all .15s; 
			min-width: 160px;
			max-width: 100%;
		}
		.hanzi-word-chip-en:hover { background: var(--accent-bg); transform: translateY(-2px); }
		/* ⚠️ 反义词冷色调（2026-09-17 视觉分层）：Antonyms 行与 Synonyms 行一眼区分 */
		.hanzi-word-chip-en.antonym { background: var(--hz-cool-bg); }
		.hanzi-word-chip-en.antonym:hover { background: var(--hz-cool-bg-hover); }
		.hanzi-word-chip-en .w-en { 
			font-size: 13px; 
			color: var(--text-primary); 
			line-height: 1.4; 
			margin-bottom: 4px;
			word-wrap: break-word;
			word-break: break-word;
			overflow-wrap: anywhere;
		}
		.hanzi-word-chip-en .w-char { 
			font-size: 16px; 
			font-weight: 600; 
			color: var(--text-muted); 
			font-family: var(--font-read);
		}
		.hanzi-word-chip-en .w-pin { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
		/* Idiom list with English */
		.hanzi-chengyu-list-en { display: grid; gap: 10px; }
		.hanzi-chengyu-item-en { 
			display: flex; 
			flex-direction: column; 
			padding: 12px 16px; 
			background: var(--bg-surface); 
			border-radius: var(--radius); 
			text-decoration: none; 
			transition: all .15s;
			max-width: 100%;
		}
		.hanzi-chengyu-item-en:hover { background: var(--accent-bg); }
		.hanzi-chengyu-item-en .c-en { 
			font-size: 14px; 
			color: var(--text-primary); 
			line-height: 1.5;
			margin-bottom: 6px;
			word-wrap: break-word;
			word-break: break-word;
			overflow-wrap: anywhere;
		}
		.hanzi-chengyu-item-en .c-char { 
			font-size: 16px; 
			font-weight: 600; 
			color: var(--text-muted); 
			font-family: var(--font-read);
		}
		.hanzi-chengyu-item-en .c-pin { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
		/* Tooltip */
		.hanzi-word-chip-en[data-tooltip],
		.hanzi-chengyu-item-en[data-tooltip] {
			position: relative;
		}
		.hanzi-word-chip-en[data-tooltip]:hover::after,
		.hanzi-chengyu-item-en[data-tooltip]:hover::after {
			content: attr(data-tooltip);
			position: absolute;
			bottom: calc(100% + 8px);
			left: 50%;
			transform: translateX(-50%);
			padding: 8px 12px;
			background: var(--bg-card);
			border: 1px solid var(--accent);
			border-radius: var(--radius);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			font-size: 13px;
			color: var(--text-primary);
			white-space: nowrap;
			z-index: 1000;
			pointer-events: none;
			animation: tooltipFadeIn 0.2s ease-out;
		}
		@keyframes tooltipFadeIn {
			from { opacity: 0; transform: translateX(-50%) translateY(4px); }
			to { opacity: 1; transform: translateX(-50%) translateY(0); }
		}
		/* Stroke order fold */
		.hanzi-stroke-fold { margin-bottom: 20px; background: var(--bg-card); border-radius: var(--radius-lg); padding: 16px 24px; }
		.hanzi-stroke-fold summary { font-size: 15px; font-weight: 700; color: var(--text-primary); cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; }
		.hanzi-stroke-fold summary::-webkit-details-marker { display: none; }
		.hanzi-stroke-fold summary i { color: var(--accent); font-size: 14px; }
		.hanzi-stroke-fold summary::after { content: '\25BE'; margin-left: auto; font-size: 12px; color: var(--text-dim); }
		.hanzi-stroke-fold[open] summary::after { content: '\25B4'; }
		.hanzi-stroke-fold[open] summary { margin-bottom: 16px; }
		.hz-fold-note { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
		.hanzi-writer-wrap { margin-top: 12px; }
		#hanziWriter { min-height: 200px; background: var(--bg-surface); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
		.hanzi-stroke-placeholder { color: var(--text-muted); font-size: 14px; }
		.hanzi-writer-btns { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
		.hanzi-writer-btns button { padding: 8px 16px; background: var(--accent-bg); color: var(--accent); border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
		.hanzi-writer-btns button:hover { background: var(--accent); color: #fff; }
		/* Stroke steps */
		.hanzi-stroke-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
		.hs-step { display: flex; flex-direction: column; align-items: center; gap: 2px; }
		.hs-step svg { border-radius: 4px; background: var(--bg-surface); transform: scaleY(-1); }
		.hs-step span { font-size: 13px; color: var(--text-muted); }
		/* Tatoeba example sentences */
		.tatoeba-examples { display: flex; flex-direction: column; gap: 12px; }
		.tatoeba-example { padding: 14px 16px; background: var(--bg-surface); border-radius: var(--radius); }
		.tatoeba-en { opacity: 0.85; }
		.tatoeba-text { font-size: 16px; line-height: 1.7; color: var(--text-primary); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
		.tatoeba-zh-ref { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
		.tatoeba-zh-ref .tatoeba-char-link, .tatoeba-zh-ref mark { flex-shrink: 0; }
		/* Highlight mark for word matching in examples */
		.tatoeba-text mark, .tatoeba-zh-ref mark {
			background: rgba(var(--accent-rgb, 34, 197, 94), 0.15);
			color: var(--accent);
			padding: 1px 4px;
			border-radius: 3px;
			font-weight: 600;
		}
		/* TTS button for example sentences */
		.tatoeba-tts-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 50%; font-size: 12px; margin-left: auto; flex-shrink: 0; transition: all .2s; padding: 0; }
		.tatoeba-tts-btn:hover { background: var(--accent-bg); color: var(--accent); }
		.tatoeba-tts-btn.speaking { color: var(--accent); }
		.tatoeba-tts-btn.loading { color: var(--accent); pointer-events: none; }
		.tatoeba-tts-btn .tts-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(var(--accent-rgb, 34, 197, 94), .25); border-top-color: var(--accent); border-radius: 50%; animation: hanzi-spin .6s linear infinite; }
		/* Copy button: same size as TTS (24px round icon at sentence end), copies EN + CN reference */
		.tatoeba-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 50%; font-size: 12px; flex-shrink: 0; transition: all .2s; padding: 0; margin-left: 4px; }
		.tatoeba-copy-btn:hover { background: var(--accent-bg); color: var(--accent); }
		@keyframes hanzi-spin { to { transform: rotate(360deg); } }
		/* Swap (high-frequency) primary style */
		.hanzi-action-float .hanzi-action-btn.hanzi-action-primary {
			background: var(--accent);
			color: #fff;
			border: none;
			box-shadow: 0 2px 10px rgba(var(--accent-rgb, 34, 197, 94), 0.4);
		}
		.hanzi-action-float .hanzi-action-btn.hanzi-action-primary:hover {
			background: var(--accent);
			color: #fff;
			transform: translateY(-1px);
			box-shadow: 0 4px 18px rgba(var(--accent-rgb, 34, 197, 94), 0.5);
		}
		/* Clickable Chinese characters in example references */
		.tatoeba-char-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--text-muted); transition: all .15s; cursor: pointer; }
		.tatoeba-char-link:hover { color: var(--accent); border-bottom-color: var(--accent); border-bottom-style: solid; }
		/* Tatoeba 例句加载中 */
		.hanzi-examples-loading { display: flex; align-items: center; gap: 8px; padding: 18px 4px; color: var(--text-muted); font-size: 13px; }
		.hanzi-shuffle-btn.loading { opacity: .6; pointer-events: none; }
		/* Swap button - positioned inside hero card */
		
		/* Bottom action bar (Favorites + Swap + Print) */
		.hanzi-action-bar { 
			display: flex; 
			align-items: center; 
			justify-content: center; 
			gap: 16px; 
			margin: 32px 0 24px; 
			padding: 16px; 
			background: var(--bg-card); 
			border-radius: var(--radius-lg); 
		}
		.hanzi-action-btn { 
			display: inline-flex; 
			align-items: center; 
			gap: 8px; 
			padding: 10px 20px; 
			background: var(--bg-surface); 
			color: var(--text-secondary); 
			border: 1px solid var(--border); 
			border-radius: var(--radius-full); 
			font-size: 14px; 
			cursor: pointer; 
			transition: all .2s; 
			white-space: nowrap; 
		}
		.hanzi-action-btn:hover { 
			background: var(--accent-bg); 
			color: var(--accent); 
			border-color: var(--accent); 
		}
		.hanzi-action-btn.favorited { 
			color: #ef4444; 
			border-color: #ef4444; 
		}
		.hanzi-action-btn.favorited:hover { 
			background: rgba(239, 68, 68, 0.1); 
		}
		
		/* Print styles: hide noise elements + force light mode (print white even in dark mode) */
		@media print {
			.hz-topbar-wrap, 
			.hanzi-breadcrumb,
			.hanzi-page-tabs,
			.hanzi-action-float,
			.hanzi-shuffle-btn,
			.hanzi-chengyu-shuffle-btn,
			.hanzi-example-shuffle,
			.hanzi-speak-btn,
			.tatoeba-tts-btn,
			.tatoeba-copy-btn,
			.hz-footer,
			.hanzi-card > .hanzi-section-title i,
			#hanziStrokeCanvas,
			.hanzi-stroke-controls {
				display: none !important;
			}
			.hanzi-home, .hanzi-detail {
				max-width: 100% !important;
				padding: 0 !important;
			}
			.hanzi-hero {
				padding: 20px !important;
				margin-bottom: 20px !important;
			}
			/* Dark mode prints as light: unify white background + black text */
			html, body {
				background: #fff !important;
				color: #000 !important;
			}
			body, body * {
				background-color: #fff !important;
				color: #000 !important;
				border-color: #ddd !important;
				box-shadow: none !important;
				text-shadow: none !important;
			}
			.tatoeba-text mark, .tatoeba-zh-ref mark {
				color: #0a7a33 !important;
				background: #e8f7ee !important;
				-webkit-print-color-adjust: exact !important;
				print-color-adjust: exact !important;
			}
			.hanzi-card {
				break-inside: avoid;
				border: 1px solid #ddd !important;
			}
		}
		
		/* Interactive action bar (Favorites / Swap / Print) - unified design */
		/* PC: inside hero, not screen-fixed; char page top-right vertical, word/idiom bottom horizontal */
		@media (min-width: 769px) {
			.hanzi-action-float {
				display: flex;
				flex-direction: column;
				align-self: center;
				gap: 10px;
				padding: 0;
				margin-left: auto;
				flex-shrink: 0;
				background: transparent;
				border: none;
				box-shadow: none;
			}
			.hanzi-action-float .hanzi-action-btn {
				width: auto;
				height: auto;
				border-radius: var(--radius-full);
				padding: 9px 14px;
				gap: 8px;
				justify-content: center;
				background: var(--bg-surface);
				border: none; /* no border, layer by bg color */
				box-shadow: none;
			}
			.hanzi-action-float .hanzi-action-btn span {
				display: inline;
			}
			/* Word / idiom page: horizontal bottom inside hero */
			.hanzi-hero.hanzi-hero-word .hanzi-action-float {
				flex-direction: row;
				align-self: stretch;
				margin-left: 0;
				margin-top: 18px;
				justify-content: center;
				gap: 12px;
			}
		}
		
		/* Mobile: bottom fixed bar, icon + text */
		@media (max-width: 768px) {
			.hanzi-action-float {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0;
				padding: 10px 12px;
				background: var(--bg-card);
				border-top: 1px solid var(--border);
				box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
				z-index: 900;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12px;
			}
			.hanzi-action-float .hanzi-action-btn {
				flex: 1;
				justify-content: center;
				padding: 10px 0;
				font-size: 13px;
				gap: 6px;
				border: none; /* no border, layer by bg color */
			}
			.hanzi-action-float .hanzi-action-btn span {
				display: inline;
			}
			.hanzi-action-float .hanzi-action-btn.hanzi-action-primary {
				transform: scale(1.08);
				box-shadow: 0 4px 16px rgba(var(--accent-rgb, 34, 197, 94), 0.45);
			}
			body {
				padding-bottom: 76px !important;
			}
		}
		/* Speak button */
		.hanzi-speak-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--accent-bg); color: var(--accent); border: none; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
		.hanzi-speak-btn:hover { background: var(--accent); color: #fff; }
		.hanzi-speak-btn.loading { opacity: 0.7; }
		.hanzi-speak-btn.speaking { background: var(--accent); color: #fff; }
		/* Spinner + action button loading 态：保留原图标，末尾追加加载动画，不闪 */
		.hanzi-action-btn.loading { opacity: 0.85; pointer-events: none; }
		.hanzi-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(var(--accent-rgb, 34, 197, 94), .25); border-top-color: var(--accent); border-radius: 50%; animation: hanzi-spin .6s linear infinite; vertical-align: -2px; }
		.shuffle-loading-text { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 12px; color: var(--text-muted); }
		/* Mobile */
		@media (max-width: 640px) {
			.hanzi-page { padding: 14px 12px 48px; }
			.hanzi-card { padding: 16px 14px; }
			.hanzi-hero { flex-direction: column; text-align: center; padding: 20px 16px; align-items: center; gap: 12px; }
			.hanzi-hero-info, .hanzi-hero-word { text-align: center; width: 100%; max-width: 100%; min-width: 0; }
			.hanzi-hero-char { font-size: 52px; }
			.hanzi-hero-en-sub { font-size: 16px; }
			.hanzi-hero .hanzi-pinyin { font-size: 22px; }
			.hanzi-hero-grid-wrap { display: none; }
			.hanzi-hero-grid-mobile-wrap { display: block; }
			.hanzi-hero-grid-mobile { display: grid; }
			.hanzi-speak-btn { display: flex; justify-content: center; width: 100%; }
			.hanzi-decomp-box { justify-content: center; }
			.hanzi-word-chips-en { justify-content: center; }
			.hanzi-stroke-fold { padding: 12px 14px; }
			.hanzi-meta-pills { gap: 6px; }
			.hanzi-meta-pill { font-size: 13px; padding: 3px 10px; }
			/* ⚠️ 移动端例句字体放大（易读+易点击） */
			.tatoeba-text { font-size: 17px; line-height: 1.8; }
			.tatoeba-zh-ref { font-size: 15px; }
			.tatoeba-example { padding: 16px 18px; }
		}
		/* ⚠️ Small screens further reduce character size */
		@media (max-width: 375px) {
			.hanzi-hero-char { font-size: 42px; }
			.hanzi-hero .hanzi-pinyin { font-size: 20px; }
		}
		/* 工具互链（2026-10-22 P0）：词/字页 → 练习纸 / 工具总览 / 拼音标注器。
		   目的：为 /hanzi/en/tools.html 等工具页补足站内抓取路径（此前 8,600 个已索引词页零工具入口）。
		   视觉：零边框纯背景色分层（全站设计铁律），不做额外装饰 */
		.hz-tools-cross { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
		.hz-tools-cross li { background: var(--bg-surface, rgba(127,127,127,0.08)); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
		.hz-tools-cross li i { color: var(--accent); margin-right: 6px; font-size: 12.5px; }
		.hz-tools-cross a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
		.hz-tools-cross a:hover { color: var(--accent); }
		.hanzi-italki-hint { text-align: center; margin: 30px auto 4px; font-size: 13px; line-height: 1.9; color: var(--text-muted); }
		.hanzi-italki-hint a { color: var(--accent); text-decoration: none; }
		.hanzi-italki-hint a:hover { text-decoration: underline; }
		.hanzi-italki-hint .aff-note { font-size: 11px; color: var(--text-dim); }