.hanzi-stroke-wrap{width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;}
.hanzi-stroke-layout{display:grid;grid-template-columns:3fr 1fr;gap:14px;align-items:start;}
.hanzi-stroke-main{min-width:0;display:flex;flex-direction:column;gap:12px;}
.hanzi-stroke-side{min-width:0;display:flex;flex-direction:column;gap:12px;}
@container (max-width:860px){.hanzi-stroke-layout{grid-template-columns:1fr;}}
.hanzi-stroke-panel{background:var(--bg-card,#fff);border:1px solid var(--border,#e5e7eb);
border-radius:var(--radius,10px);padding:14px;min-width:0;}
.hanzi-stroke-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.hanzi-stroke-headt{font-size:14px;font-weight:600;color:var(--text,#333);}
.hanzi-stroke-heads{font-size:12px;color:var(--text-secondary,#6b7281);}
.hanzi-stroke-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
/* 汉字输入 + 书写速度 + 画布尺寸：固定三列，三者同处一条水平线 */
.hanzi-stroke-grid3{grid-template-columns:repeat(3,minmax(0,1fr));}
/* 检索框在前、画布方向在后，二者同一行 */
.hanzi-stroke-gridqr{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
@container (max-width:560px){
  .hanzi-stroke-grid3{grid-template-columns:minmax(0,1fr);}
  .hanzi-stroke-gridqr{grid-template-columns:minmax(0,1fr);}
}
.hanzi-stroke-cell{display:flex;flex-direction:column;gap:4px;min-width:0;justify-content:flex-start;}
.hanzi-stroke-cell.hanzi-stroke-wide{grid-column:1/-1;}
.hanzi-stroke-lbl{display:block;font-size:12px;color:var(--text-secondary,#6b7281);}
.hanzi-stroke-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.hanzi-stroke-btn{padding:7px 14px;font-size:13px;font-family:inherit;cursor:pointer;
color:var(--text,#333);background:var(--bg-btn,#f3f4f6);
border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-sm,6px);}
.hanzi-stroke-btn:hover{background:var(--bg-btn-hover,#e5e7eb);}
.hanzi-stroke-btn.hanzi-stroke-primary{color:var(--text-on-accent,#fff);background:var(--primary,#2563eb);
border-color:var(--primary,#2563eb);}
.hanzi-stroke-btn.hanzi-stroke-primary:hover{background:var(--primary-hover,#1d4ed8);}
.hanzi-stroke-btn:disabled{opacity:.5;cursor:not-allowed;}
.hanzi-stroke-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-shadow,rgba(37,99,235,.15));}
.hanzi-stroke-checks{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}
.hanzi-stroke-chk{display:flex;align-items:center;gap:5px;font-size:12px;
color:var(--text-secondary,#6b7281);cursor:pointer;}
.hanzi-stroke-msg{margin:8px 0 0;font-size:12px;min-height:16px;color:var(--text-secondary,#6b7281);
overflow-wrap:anywhere;}
.hanzi-stroke-msg.hanzi-stroke-ok{color:var(--success,#16a34a);}
.hanzi-stroke-msg.hanzi-stroke-err{color:var(--danger,#dc2626);}
.hanzi-stroke-msg.hanzi-stroke-warn{color:var(--warning-fg,#92400e);}
.hanzi-stroke-empty{margin:0;font-size:12px;color:var(--text-secondary,#6b7281);}
.hanzi-stroke-res{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow:auto;}
.hanzi-stroke-big{font-size:26px;font-weight:700;line-height:1.2;color:var(--primary,#2563eb);
overflow-wrap:anywhere;}
.hanzi-stroke-bigsub{font-size:12px;color:var(--text-secondary,#6b7281);}
.hanzi-stroke-card{background:var(--bg-page,#f7f8fa);border-radius:var(--radius-sm,6px);
padding:10px;min-width:0;}
.hanzi-stroke-cardt{font-size:12px;font-weight:600;color:var(--text,#333);margin-bottom:6px;}
.hanzi-stroke-kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;
padding:3px 0;border-bottom:1px dashed var(--border,#e5e7eb);}
.hanzi-stroke-kv:last-child{border-bottom:0;}
/* 标签禁止换行：字义等两字标签曾被右侧长释义挤到只剩一个字宽，
   渲染成上下两行（垂直排列）。固定不收缩 + nowrap 后与「结构」一致水平排列。 */
.hanzi-stroke-kv span:first-child{color:var(--text-secondary,#6b7281);
flex:0 0 auto;white-space:nowrap;}
.hanzi-stroke-kv span:last-child{font-weight:600;color:var(--text,#333);overflow-wrap:anywhere;
text-align:right;flex:1 1 auto;min-width:0;}
.hanzi-stroke-note{margin:8px 0 0;font-size:11px;line-height:1.6;
color:var(--text-secondary,#6b7281);}
.hanzi-stroke-tbl{width:100%;border-collapse:collapse;font-size:12px;}
.hanzi-stroke-tbl th,.hanzi-stroke-tbl td{padding:5px 6px;text-align:left;
border-bottom:1px solid var(--border,#e5e7eb);overflow-wrap:anywhere;}
.hanzi-stroke-tbl th{color:var(--text-secondary,#6b7280);font-weight:600;}
.hanzi-stroke-tag{display:inline-block;padding:2px 7px;font-size:11px;border-radius:var(--radius,10px);
background:var(--bg-btn,#f3f4f6);color:var(--text-secondary,#6b7281);}
.hanzi-stroke-tag.hanzi-stroke-ok{color:var(--success,#16a34a);}
.hanzi-stroke-tag.hanzi-stroke-warn{color:var(--warning-fg,#92400e);}
.hanzi-stroke-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@container (max-width:520px){.hanzi-stroke-cmp{grid-template-columns:minmax(0,1fr);}}
.hanzi-stroke-cmpc{background:var(--bg-page,#f7f8fa);border-radius:var(--radius-sm,6px);
padding:10px;text-align:center;border:2px solid transparent;box-sizing:border-box;min-width:0;}
.hanzi-stroke-cmpc.hanzi-stroke-best{border-color:var(--primary,#2563eb);}
.hanzi-stroke-cmpt{font-size:11px;color:var(--text-secondary,#6b7281);overflow-wrap:anywhere;}
.hanzi-stroke-cmpv{font-size:20px;font-weight:700;color:var(--text,#333);margin:4px 0;overflow-wrap:anywhere;}
.hanzi-stroke-cmpv.hanzi-stroke-best{color:var(--primary,#2563eb);}


/* ===== 本批次通用补充 ===== */
.hanzi-stroke-cvbox{width:100%;min-width:0;overflow:auto;background:var(--bg-page,#f7f8fa);
border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-sm,6px);padding:8px;box-sizing:border-box;}
.hanzi-stroke-cvbox canvas,.hanzi-stroke-cvbox svg{max-width:100%;height:auto;display:block;margin:0 auto;}
.hanzi-stroke-cv{display:block;max-width:100%;height:auto;}
.hanzi-stroke-big2{font-size:22px;font-weight:700;line-height:1.35;color:var(--text,#333);overflow-wrap:anywhere;
word-break:break-all;}
.hanzi-stroke-ok{color:var(--success,#16a34a);}
.hanzi-stroke-wrong{color:var(--danger,#dc2626);background:var(--danger-bg,rgba(220,38,38,.1));border-radius:var(--radius-sm,2px);}
.hanzi-stroke-cur{background:var(--primary-shadow,rgba(37,99,235,.18));border-radius:var(--radius-sm,2px);}
.hanzi-stroke-target{font-size:14px;line-height:2;color:var(--text-secondary,#6b7281);overflow-wrap:anywhere;
word-break:break-all;background:var(--bg-page,#f7f8fa);border-radius:var(--radius-sm,6px);padding:10px;}
.hanzi-stroke-sep{height:1px;background:var(--border,#e5e7eb);margin:10px 0;}
.hanzi-stroke-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;}
.hanzi-stroke-statc{background:var(--bg-page,#f7f8fa);border-radius:var(--radius-sm,6px);padding:8px;text-align:center;min-width:0;}
.hanzi-stroke-statv{font-size:18px;font-weight:700;color:var(--text,#333);overflow-wrap:anywhere;}
.hanzi-stroke-statt{font-size:11px;color:var(--text-secondary,#6b7281);margin-top:2px;}
.hanzi-stroke-note2{margin:6px 0 0;font-size:11px;line-height:1.7;color:var(--text-secondary,#6b7281);overflow-wrap:anywhere;}

/* ===== 控件样式（V3.9 补全） ===== */
.hanzi-stroke-in,.hanzi-stroke-sel,.hanzi-stroke-ta{
  width:100%;box-sizing:border-box;padding:7px 9px;font-size:13px;line-height:1.4;
  font-family:inherit;color:var(--text,#333);background:var(--bg-input,#fff);
  border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-sm,6px);
  transition:border-color .15s,box-shadow .15s;
}
.hanzi-stroke-ta{resize:vertical;min-height:96px;line-height:1.6;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.hanzi-stroke-sel{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:26px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary,#6b7281) 50%),
    linear-gradient(135deg,var(--text-secondary,#6b7281) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.hanzi-stroke-in:hover,.hanzi-stroke-sel:hover,.hanzi-stroke-ta:hover{border-color:var(--primary,#2563eb);}
.hanzi-stroke-in:focus,.hanzi-stroke-sel:focus,.hanzi-stroke-ta:focus{
  outline:none;border-color:var(--primary,#2563eb);
  box-shadow:0 0 0 3px var(--primary-shadow,rgba(37,99,235,.15));
}
.hanzi-stroke-in:focus-visible,.hanzi-stroke-sel:focus-visible,.hanzi-stroke-ta:focus-visible{
  outline:none;border-color:var(--primary,#2563eb);
  box-shadow:0 0 0 3px var(--primary-shadow,rgba(37,99,235,.15));
}
.hanzi-stroke-in::placeholder,.hanzi-stroke-ta::placeholder{color:var(--text-secondary,#9ca3af);}
.hanzi-stroke-in:disabled,.hanzi-stroke-sel:disabled,.hanzi-stroke-ta:disabled{
  opacity:.55;cursor:not-allowed;background:var(--bg-btn,#f3f4f6);
}
.hanzi-stroke-in[type=number]{-moz-appearance:textfield;}
.hanzi-stroke-in[type=number]::-webkit-outer-spin-button,
.hanzi-stroke-in[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* 滑块保持滑块本身的细条形态（16px 轨道区），不做成输入框高度。
   对齐靠外层 .hanzi-stroke-speedrow 固定 34px 行高 + align-items:center，
   使滑块中心线与 .hanzi-stroke-in 中心线重合，视觉上三列控件在同一水平线上。
   滑块仍自绘轨道与圆钮，避免站点 input[type=range] 主题（如绿色轨道）覆盖；
   用 input[type=range].hanzi-stroke-range::-webkit-slider-thumb (0,0,2,2)
   压过站点 input[type=range]::-webkit-slider-thumb (0,0,1,2)。 */
.hanzi-stroke-range{
  display:block;width:100%;box-sizing:border-box;
  height:16px;max-height:34px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;
  accent-color:var(--primary,#2563eb);
}
input[type=range].hanzi-stroke-range{height:16px;max-height:34px;
  -webkit-appearance:none;appearance:none;background:transparent;border:none;}
/* 轨道 */
input[type=range].hanzi-stroke-range::-webkit-slider-runnable-track{
  height:6px;border:none;border-radius:99px;background:var(--border,#e5e7eb);}
input[type=range].hanzi-stroke-range::-moz-range-track{
  height:6px;border:none;border-radius:99px;background:var(--border,#e5e7eb);}
/* 滑块 */
input[type=range].hanzi-stroke-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  width:16px;height:16px;margin-top:-5px;border-radius:50%;
  background:var(--primary,#2563eb);border:2px solid var(--bg-card,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.18);cursor:pointer;}
input[type=range].hanzi-stroke-range::-moz-range-thumb{
  box-sizing:border-box;width:16px;height:16px;border-radius:50%;
  background:var(--primary,#2563eb);border:2px solid var(--bg-card,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.18);cursor:pointer;}
input[type=range].hanzi-stroke-range:hover::-webkit-slider-thumb{background:var(--primary-hover,#1d4ed8);}
input[type=range].hanzi-stroke-range:hover::-moz-range-thumb{background:var(--primary-hover,#1d4ed8);}
input[type=number].hanzi-stroke-ms{height:34px;min-height:34px;}
.hanzi-stroke-range:hover{accent-color:var(--primary-hover,#1d4ed8);}
.hanzi-stroke-range:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--primary-shadow,rgba(37,99,235,.15));
  border-radius:var(--radius-sm,6px);
}
.hanzi-stroke-range:disabled{opacity:.55;cursor:not-allowed;}
/* 书写速度/画布尺寸格：细条滑块 + 数值输入框并排。
   行高固定 34px（与 .hanzi-stroke-in 一致），滑块以 align-items:center 垂直居中，
   这样滑块仍是细条，但中心线与输入框中心线重合，三列控件统一水平位置。 */
.hanzi-stroke-speedrow{display:flex;align-items:center;gap:6px;min-width:0;height:34px;}
.hanzi-stroke-speedrow .hanzi-stroke-range{flex:1 1 auto;min-width:0;width:auto;}
.hanzi-stroke-ms{flex:0 0 auto;width:76px;min-width:0;box-sizing:border-box;
  height:34px;padding:6px 4px;font-size:12px;text-align:center;}
.hanzi-stroke-cbx{
  width:14px;height:14px;flex:0 0 auto;margin:0;cursor:pointer;accent-color:var(--primary,#2563eb);
}
.hanzi-stroke-cbx:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:2px;}
.hanzi-stroke-cbx:disabled{opacity:.5;cursor:not-allowed;}

/* ===== 代码输出区 ===== */
.hanzi-stroke-code{margin:0;padding:10px;font-size:12px;line-height:1.6;white-space:pre-wrap;
overflow-wrap:anywhere;background:var(--bg-page,#f7f8fa);
border-radius:var(--radius-sm,6px);color:var(--text,#333);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
max-height:340px;overflow:auto;}
.hanzi-stroke-seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.hanzi-stroke-segb{padding:5px 11px;font-size:12px;font-family:inherit;cursor:pointer;
color:var(--text-secondary,#6b7281);background:var(--bg-btn,#f3f4f6);
border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-sm,6px);}
.hanzi-stroke-segb.hanzi-stroke-on{color:var(--text-on-accent,#fff);background:var(--primary,#2563eb);
border-color:var(--primary,#2563eb);}
.hanzi-stroke-segb:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-shadow,rgba(37,99,235,.15));}
.hanzi-stroke-hl{background:var(--primary-shadow,rgba(37,99,235,.15));border-radius:var(--radius-sm,2px);}
.hanzi-stroke-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
overflow-wrap:anywhere;}

.hanzi-stroke-ok{color:var(--success,#16a34a);}
.hanzi-stroke-bad{color:var(--danger,#dc2626);text-decoration:underline;}
.hanzi-stroke-cur{background:var(--primary-shadow,rgba(37,99,235,.15));border-radius:var(--radius-sm,2px);}

.hanzi-stroke-canvasbox{width:100%;min-width:0;overflow:auto;background:var(--bg-page,#f7f8fa);
border-radius:var(--radius-sm,6px);padding:8px;}
.hanzi-stroke-canvasbox svg{max-width:100%;height:auto;display:block;}
.hanzi-stroke-src{width:100%;box-sizing:border-box;min-height:170px;resize:vertical;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;}

.hanzi-stroke-prev{width:100%;min-width:0;overflow:auto;background:var(--bg-page,#f7f8fa);
border-radius:var(--radius-sm,6px);padding:8px;box-sizing:border-box;}
.hanzi-stroke-prev img{max-width:100%;height:auto;display:block;}
.hanzi-stroke-prev svg{max-width:100%;height:auto;display:block;}
.hanzi-stroke-prev canvas{max-width:100%;height:auto;display:block;}
.hanzi-stroke-thumbs{display:flex;gap:6px;flex-wrap:wrap;}
.hanzi-stroke-thumb{width:48px;height:48px;object-fit:contain;background:var(--bg-page,#f7f8fa);
border-radius:var(--radius-sm,4px);padding:2px;box-sizing:border-box;}
.hanzi-stroke-bar{height:8px;border-radius:var(--radius-sm,4px);background:var(--bg-btn,#f3f4f6);overflow:hidden;}
.hanzi-stroke-bari{height:100%;background:var(--primary,#2563eb);}
.hanzi-stroke-sub{font-size:12px;color:var(--text-secondary,#6b7281);margin:2px 0 0;overflow-wrap:anywhere;}
.hanzi-stroke-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;}
.hanzi-stroke-diff{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto;}
.hanzi-stroke-drow{font-size:12px;padding:6px 8px;border-radius:var(--radius-sm,4px);background:var(--bg-page,#f7f8fa);}
.hanzi-stroke-drow b{color:var(--text,#333);}
.hanzi-stroke-old{color:var(--danger,#dc2626);text-decoration:line-through;}
.hanzi-stroke-new{color:var(--success,#16a34a);font-weight:600;}
.hanzi-stroke-sumrow td{font-weight:600;background:var(--bg-btn,#f3f4f6);}

/* ===== 内联样式迁移（消除 inline style） ===== */
.hanzi-stroke-hide{display:none!important;}
.hanzi-stroke-mt10{margin-top:10px;}
.hanzi-stroke-mt6{margin-top:6px;}
.hanzi-stroke-mt8{margin-top:8px;}
.hanzi-stroke-scrollbox{max-height:340px;overflow:auto;}

.hanzi-stroke-cwrap{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;}
.hanzi-stroke-sel{width:100%;padding:6px 8px;font-size:13px;font-family:inherit;color:var(--text,#333);background:var(--bg-input,#fff);border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-sm,6px);}
.hanzi-stroke-cwrap svg{max-width:100%;height:auto;display:block;}
.hanzi-stroke-cv{display:block;margin:0 auto;}

/* ===== SQLite + Canvas 渲染（1.4.0） ===== */
.hanzi-stroke-box{display:flex;justify-content:center;align-items:center;width:100%;
box-sizing:border-box;padding:8px;background:var(--bg-page,#f7f8fa);
border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-sm,6px);min-height:140px;}
.hanzi-stroke-canvas{max-width:100%;height:auto;display:block;
background:var(--bg-card,#fff);border-radius:var(--radius-sm,4px);touch-action:none;}
.hanzi-stroke-store{margin-left:auto;font-size:12px;color:var(--text-secondary,#6b7281);}
.hanzi-stroke-sug{max-height:132px;overflow:auto;flex-wrap:wrap;gap:6px;}
.hanzi-stroke-sug:empty{display:none;}
.hanzi-stroke-chip{display:inline-flex;align-items:center;gap:4px;min-width:52px;
font-size:16px;padding:4px 8px;line-height:1.2;}
.hanzi-stroke-chips{font-size:11px;color:var(--text-secondary,#6b7281);}
.hanzi-stroke-vars{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;}
.hanzi-stroke-vars .hanzi-stroke-chip{min-width:34px;padding:2px 6px;font-size:15px;}