/* HanziPeek · Từ Hán Việt → 汉字（越南语汉越词结构探索页）—— 色彩 / 字体照《UI 设计说明 v1.0》 */
.vh-root{--bg:#F5F3EE;--card:#FFFDF9;--line:#E6E1D8;--fg:#1F1D1A;--mute:#6F6A62;--vi:oklch(0.43 0.13 252);--han:oklch(0.5 0.13 55);--cta:#C2410C;
  --t-z:#5b6475;--t-f:#2f6db0;--t-s:#b8432f;--t-r:#7b5cc4;--t-x:#2f8a7a;--t-j:#8a5a12;
  background:var(--bg);color:var(--fg);font-family:'Be Vietnam Pro','Noto Sans SC',system-ui,sans-serif;-webkit-font-smoothing:antialiased;border-radius:18px}
.vh-root *{box-sizing:border-box}
.vh-root button{font-family:inherit;color:inherit}
.vh-root .han{font-family:'Noto Serif SC','Songti SC',serif}
.vh-root .ext{font-family:'Noto Serif SC','BabelStone Han','Songti SC','SimSun-ExtB','MingLiU-ExtB',serif}
.vh-root .vt.t-z{color:var(--t-z)} .vh-root .vt.t-f{color:var(--t-f)} .vh-root .vt.t-s{color:var(--t-s)} .vh-root .vt.t-r{color:var(--t-r)} .vh-root .vt.t-x{color:var(--t-x)} .vh-root .vt.t-j{color:var(--t-j)}
.vh-mute{color:var(--mute)} .vh-root .sp{flex:1}
.vh-wrap{max-width:1440px;margin:0 auto;padding:20px 22px 32px;display:flex;flex-direction:column;gap:16px}
.vh-loading,.vh-err{padding:40px;text-align:center;color:var(--mute)} .vh-err{color:#a33b2b}
/* 顶栏 */
.vh-head{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.vh-t1{font-weight:800;font-size:28px;letter-spacing:-.02em;white-space:nowrap} .vh-t1 .han{color:var(--han)}
.vh-t2{font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;gap:0 8px}
.vh-segs{display:flex;gap:4px;padding:4px;background:#ebe7df;border-radius:12px;flex-wrap:wrap}
.vh-seg{border:0;cursor:pointer;padding:0 12px;min-height:40px;border-radius:9px;font-size:13px;font-weight:600;background:transparent;color:var(--mute)}
.vh-seg.tall{min-height:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 14px} .vh-seg.tall small{font-size:11px;opacity:.7;font-weight:400}
.vh-seg.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.vh-seg:focus-visible,.vh-root button:focus-visible,.vh-cand:focus-visible{outline:2px solid var(--vi);outline-offset:2px}
.vh-body{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.vh-main{flex:1 1 680px;min-width:0;display:flex;flex-direction:column;gap:16px}
.vh-side{flex:1 1 300px;max-width:400px;display:flex;flex-direction:column;gap:12px}
.vh-card,.vh-panel,.vh-cands,.vh-sc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
/* 解构卡 */
.vh-card{display:flex;flex-direction:column;gap:12px;animation:vhrise .2s ease both}
@keyframes vhrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vh-wtop{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.vh-wvi{font-size:34px;font-weight:700;display:flex;align-items:center;gap:6px} .vh-wzh{display:flex;align-items:center;gap:10px} .vh-wzh>b{font-size:44px;font-weight:700} .vh-py{font-size:18px;color:var(--mute)}
.vh-spk{border:0;cursor:pointer;width:32px;height:32px;border-radius:50%;background:#ebe7df;font-size:14px;flex:none} .vh-spk.big{width:44px;height:44px;font-size:18px}
.vh-dec{margin-left:auto;border:0;cursor:pointer;min-height:44px;padding:0 20px;border-radius:12px;background:var(--fg);color:#fffdf9!important;font-weight:700;font-size:15px} .vh-dec.done{background:#ebe7df;color:var(--fg)!important}
.vh-pairs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vh-pair{border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:14px;background:var(--chip);color:var(--ink)!important;min-width:64px}
.vh-pair span{font-size:17px;font-weight:600} .vh-pair i{font-style:normal;font-size:11px;opacity:.7} .vh-pair b{font-size:28px;line-height:1.1} .vh-pair small{font-size:12px}
.vh-op{color:#9a948a;font-size:22px}
.vh-mean{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px}
.vh-ex{padding:10px 12px;border-radius:12px;background:#faf8f4} .vh-ex p{margin:2px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .vh-ex mark{background:oklch(0.9 0.075 252);border-radius:4px;padding:0 2px;font-weight:700}
.vh-dgtabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px;background:#ebe7df;border-radius:12px} .vh-dgtabs small{padding:0 8px}
.vh-hintline{margin:0;font-size:13px}
.vh-row{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:#faf8f4}
.vh-rhead{display:flex;gap:12px;align-items:center} .vh-rc{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;font-size:40px;font-weight:700;background:var(--chip);color:var(--ink);flex:none}
.vh-rmeta{display:flex;flex-direction:column;gap:6px;min-width:0} .vh-rmeta>div:first-child{display:flex;align-items:center;gap:6px;font-size:16px}
.vh-tags{display:flex;flex-wrap:wrap;gap:6px}
.vh-tag{font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid #d9d1c0;background:#fff} .vh-tag.soft{border-style:dashed;color:var(--mute)}
.vh-tag.t-xiang{border-color:#b9c3e8;color:#34489f;background:#f0f3fc} .vh-tag.t-yi{border-color:#a9d6cc;color:#2f7a6a;background:#eef8f5} .vh-tag.t-xs{border-color:#e3b2a7;color:#a33b2b;background:#fdf1ee}
.vh-tag.img{background:var(--bg);border-color:var(--edge);color:var(--ink)}
.vh-pend{font-size:11px;padding:1px 8px;border-radius:999px;border:1px dashed #d8b26a;color:#8a6a2a;background:#fffaf0;white-space:nowrap}
.vh-note{font-size:13px;line-height:1.6;padding:8px 12px;border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:2px} .vh-note span{color:var(--mute)}
.vh-cta-sm{align-self:flex-start;font-size:12px;color:var(--cta)!important;text-decoration:none;font-weight:600}
.vh-rel{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .vh-rel h5{width:100%;margin:4px 0 0;font-size:12px;color:var(--mute);font-weight:600}
.vh-chip{border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:999px;padding:4px 12px;font-size:13px;min-height:32px} .vh-chip b{font-size:16px} .vh-chip.on{border-color:var(--fg)}
.vh-chip.c{background:var(--chip);border-color:var(--edge);color:var(--ink)}
/* 图示 */
.vh-dg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0} .vh-dgn{width:100%;font-size:11px;color:#8a847a}
.vh-block{border:0;border-bottom:4px solid var(--edge);cursor:pointer;min-width:84px;padding:8px 12px;border-radius:14px;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink)!important}
.vh-block b{font-size:32px;line-height:1.1} .vh-block small{font-size:12px} .vh-role{font-size:10px;opacity:.8} .vh-pos{font-size:10px;color:var(--mute)} .vh-block.on{box-shadow:0 0 0 2px var(--ink)}
.vh-res{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;border:2.5px solid #b8432f;color:#b8432f;font-size:42px;font-weight:700;background:#fff}
.vh-gridw{gap:20px} .vh-grid{position:relative;width:168px;height:168px;flex:none} .vh-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px} .vh-cells i{border-radius:6px}
.vh-grid>b{position:absolute;inset:0;display:grid;place-items:center;font-size:128px;font-weight:700;line-height:1;color:rgba(31,29,26,.82)}
.vh-gleg{display:flex;flex-direction:column;gap:6px;flex:1 1 160px} .vh-gl{border:0;background:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:0;text-align:left} .vh-gl i{width:16px;height:16px;border-radius:4px;background:var(--chip)} .vh-gl b{font-size:22px;color:var(--ink)}
.vh-venn{flex-direction:column} .vh-vrow{display:flex;align-items:center}
.vh-vc{cursor:pointer;width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;color:var(--ink)!important}
.vh-vc b{font-size:34px;line-height:1.1} .vh-vc small{font-size:11px}
.vh-vc.a{border:0;background:var(--chip);align-items:flex-start;padding-left:26px} .vh-vc.b{border:2.5px dashed var(--edge);background:var(--bg);align-items:flex-end;padding-right:26px}
.vh-vx{width:56px;height:96px;margin:0 -28px;z-index:1;border-radius:50%;display:grid;place-items:center;background:#fffdf9;box-shadow:0 0 0 2px var(--fg);font-size:34px;font-weight:700}
.vh-vlab{display:flex;gap:110px;font-size:12px;color:var(--mute)}
.vh-shell{width:156px;height:156px;border-radius:12px;border:10px solid var(--edge);background:var(--bg);display:grid;place-items:center;position:relative}
.vh-shell-g{position:absolute;top:-4px;left:4px;border:0;background:none;cursor:pointer;font-size:16px;font-weight:700;color:var(--ink)!important}
.vh-core{border:0;cursor:pointer;width:76px;height:76px;border-radius:10px;display:grid;place-items:center;background:var(--bg);box-shadow:0 6px 0 var(--edge);font-size:38px;font-weight:700;color:var(--ink)!important}
.vh-ot{display:flex;flex-direction:column;gap:4px;font-size:14px} .vh-ot b{font-size:20px}
.vh-ins{display:flex;flex-direction:column;gap:8px}
.vh-sw{cursor:pointer;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:12px;border:1.5px solid #e0dacf;background:#fff;min-height:48px;color:#b1aa9f!important}
.vh-sw.on{border-color:var(--edge);background:var(--bg);color:var(--ink)!important} .vh-sw b{font-size:24px} .vh-sw small{font:500 12px 'JetBrains Mono',monospace;color:#5f5a51}
.vh-track{width:34px;height:20px;border-radius:99px;background:#d6cfc3;position:relative;flex:none} .vh-track i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s} .vh-sw.on .vh-track{background:var(--ink)} .vh-sw.on .vh-track i{left:16px}
.vh-wire{width:28px;height:2px;background:var(--fg)} .vh-and{padding:10px 14px;border-radius:10px 30px 30px 10px;background:var(--fg);color:#fffdf9;display:flex;flex-direction:column;align-items:center} .vh-and b{font:600 14px 'JetBrains Mono',monospace} .vh-and small{font-size:10px;opacity:.8}
.vh-bulb{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:44px;font-weight:700;background:#ece7de;color:#c9c2b6;transition:all .2s}
.vh-bulb.lit{background:oklch(0.9 0.12 85);color:oklch(0.43 0.13 55);box-shadow:0 0 0 6px oklch(0.95 0.07 85),0 0 28px oklch(0.85 0.14 85)}
.vh-formula{width:100%;font:500 13px 'JetBrains Mono',monospace;color:#4a463f}
.vh-xiang{gap:18px} .vh-meta{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:#ebe7df;font-size:40px;font-weight:700;color:#5f5a51} .vh-arr{display:flex;flex-direction:column;align-items:center;font-size:20px;color:#8a847a} .vh-arr small{font-size:11px}
.vh-big{width:96px;height:96px;border-radius:18px;display:grid;place-items:center;background:var(--chip);font-size:60px;font-weight:700;color:var(--ink)} .vh-xt{display:flex;flex-direction:column;gap:3px;flex:1 1 200px;min-width:0;font-size:14px}
.vh-tree{display:flex;flex-direction:column;align-items:center;padding:16px 8px;border-radius:14px;background:#faf8f4;overflow-x:auto}
.vh-troot{display:flex;flex-direction:column;align-items:center;padding:8px 18px;border-radius:12px;background:var(--fg);color:#fffdf9} .vh-troot b{font-size:32px} .vh-troot small{font-size:12px;opacity:.8;white-space:nowrap}
.vh-tv{display:block;width:2px;height:14px;background:#cfc8bc} .vh-tk{display:flex;align-items:flex-start;gap:12px;padding-top:6px;border-top:2px solid #cfc8bc}
.vh-tn{display:flex;flex-direction:column;align-items:center}
.vh-tb{cursor:pointer;border:1.5px solid var(--edge,#cfc8bc);background:var(--bg,#ebe7df);color:var(--ink,#4a463f)!important;border-radius:12px;padding:6px 12px;display:flex;flex-direction:column;align-items:center} .vh-tb b{font-size:26px} .vh-tb small{font-size:11px;white-space:nowrap}
/* 面板 */
.vh-panel{display:flex;flex-direction:column;gap:12px}
.vh-steps{display:flex;gap:6px;flex-wrap:wrap} .vh-step{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;font-size:12px;color:#9a948a} .vh-step i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;background:#ebe7df;color:#9a948a}
.vh-step.on{background:var(--fg);color:#fffdf9} .vh-step.on i{background:#fffdf9;color:var(--fg)} .vh-step.done{background:#ebe7df;color:var(--fg)} .vh-step.done i{background:var(--fg);color:#fffdf9}
.vh-search{display:flex;gap:6px} .vh-q{flex:1;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font-size:15px;background:#fff}
.vh-mini{border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:8px;padding:2px 8px;font-size:12px;min-height:28px}
.vh-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px}
.vh-imgc{cursor:pointer;border:1.5px solid var(--edge);background:var(--bg);color:var(--ink)!important;border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;text-align:left}
.vh-imgc.on{background:var(--chip);box-shadow:0 0 0 2px var(--ink)} .vh-imgc.empty{opacity:.45} .vh-in{font:500 11px 'JetBrains Mono',monospace;opacity:.7} .vh-imgc b{font-size:26px} .vh-iz{font-size:13px;font-weight:600} .vh-iv{font-size:12px} .vh-imgc small{font-size:11px;opacity:.75}
.vh-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.vh-let{cursor:pointer;min-height:44px;border-radius:10px;border:1.5px solid oklch(0.76 0.12 252);background:oklch(0.955 0.035 252);color:var(--vi)!important;font-size:18px;font-weight:600} .vh-let.on{background:oklch(0.9 0.075 252);box-shadow:0 0 0 2px var(--vi)} .vh-let.empty{opacity:.35}
.vh-syls{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center} .vh-syls>small{width:100%}
.vh-syl{cursor:pointer;border:1.5px solid #ece7de;background:#fffdf9;border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;min-width:66px} .vh-syl b{font-size:17px} .vh-syl span{font-size:16px;color:var(--han)} .vh-syl small{font-size:10px;color:var(--mute)} .vh-syl.on{border-color:var(--vi);background:oklch(0.9 0.075 252)}
.vh-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:44px;padding:6px 10px;border-radius:12px;background:#faf8f4}
.vh-ccols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.vh-ccol{border:1px solid var(--edge);background:var(--bg);border-radius:14px;padding:8px} .vh-cct{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px} .vh-cct small{font-weight:400}
.vh-ckeys{display:flex;flex-wrap:wrap;gap:4px}
.vh-ck{cursor:pointer;border:1px solid var(--edge);background:#fff;border-radius:10px;padding:3px 6px;display:flex;flex-direction:column;align-items:center;min-width:44px;min-height:44px;color:var(--ink)!important;position:relative}
.vh-ck b{font-size:20px;line-height:1.1} .vh-ck small{font-size:10px} .vh-ck i{position:absolute;top:1px;right:3px;font-size:9px;font-style:normal;opacity:.6} .vh-ck.on{background:var(--chip);box-shadow:0 0 0 2px var(--ink)} .vh-ck.off{opacity:.3;cursor:default}
.vh-cands .vh-ch{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .vh-clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.vh-cand{cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);min-height:48px}
.vh-cand.on{border-color:var(--fg);background:#fff} .vh-cn{font:500 11px 'JetBrains Mono',monospace;color:#9a948a;width:12px} .vh-cand>b{font-size:24px;color:var(--han)} .vh-cv{font-weight:600} .vh-cand small{flex:1;color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vh-ctag{font-size:11px;padding:1px 6px;border-radius:999px;background:#ebe7df}
/* 侧栏 */
.vh-sh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mute);margin-bottom:8px}
.vh-comp{background:var(--bg);border-color:var(--edge)} .vh-ctop{display:flex;gap:12px;align-items:center} .vh-cg{font-size:56px;color:var(--ink);line-height:1} .vh-ck2{font-size:13px;font-weight:700;color:var(--ink)}
.vh-reads{display:flex;gap:6px;margin:8px 0} .vh-rd{cursor:pointer;border:1px solid var(--edge);background:#fff;border-radius:999px;min-height:40px;padding:0 14px;font-size:14px;display:flex;align-items:center;gap:6px} .vh-rd small{font-size:10px;color:var(--mute)}
.vh-cm{font-size:13px;line-height:1.5;margin-bottom:6px}
.vh-exch{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .vh-exc{cursor:pointer;border:0;width:36px;height:36px;border-radius:8px;background:#f3efe8;font-size:20px} .vh-exc.has{background:var(--chip);color:var(--ink)!important}
.vh-dcl{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.vh-term{font-size:13px;padding:6px 8px;border-radius:8px} .vh-term.on{background:oklch(0.955 0.035 85)} .vh-term .vh-mute{font-size:12px;margin-top:2px}
.vh-rules{width:100%;border-collapse:collapse;font-size:13px} .vh-rules td{padding:4px 6px} .vh-rules tr.on{background:oklch(0.955 0.035 252)}
.vh-outl{display:flex;flex-wrap:wrap;gap:4px} .vh-help p{font-size:12px;margin:4px 0}
/* ChuSchool 引导 */
.vh-nbg{position:fixed;inset:0;background:rgba(31,29,26,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.vh-nudge{width:100%;max-width:420px;background:#fffdf9;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;text-align:center;animation:vhrise .2s ease both}
.vh-nch{font-size:44px;color:var(--han);letter-spacing:.1em} .vh-cta{display:block;padding:14px;border-radius:12px;background:var(--cta);color:#fff!important;text-decoration:none;font-weight:700}
@media (max-width:760px){.vh-wrap{padding:14px 12px 24px} .vh-side{max-width:none} .vh-wvi{font-size:28px} .vh-dec{margin-left:0} .vh-vc{width:112px;height:112px} .vh-vlab{gap:60px} .vh-grid{width:140px;height:140px} .vh-grid>b{font-size:104px}}