:root{
  --navy:#061b34;--navy2:#0b2e55;--blue:#0b4a93;--blue2:#0a3470;--gold:#f4c849;
  --line:#dce4ee;--soft:#f7fbff;--text:#0d1930;--muted:#647086;--han-blue:#053f8a;
}
*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--navy);color:var(--text)}
.pf-bg{min-height:100vh;background:linear-gradient(180deg,#041326 0,#08213d 155px,#f6f8fb 156px,#f6f8fb 100%);padding:14px 14px 0}
.pf-hero{max-width:1560px;margin:0 auto 12px;display:grid;grid-template-columns:240px 1fr 360px;gap:18px;align-items:center;color:#fff}
.pf-return{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:12px 16px;color:#fff;text-decoration:none;font-weight:900;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pf-titlebox{text-align:center}.pf-titlebox h1{margin:0;font-family:Georgia,serif;letter-spacing:.07em;font-size:clamp(26px,3.4vw,46px);line-height:1}.pf-titlebox h1 span{color:var(--gold)}.pf-titlebox p{margin:6px 0 0;color:#dce8f8;font-size:18px}.pf-searchbox{display:flex;align-items:center;border:1px solid rgba(255,255,255,.35);border-radius:28px;padding:4px 8px;background:rgba(255,255,255,.05)}.pf-searchbox input{flex:1;border:0;background:transparent;color:#fff;padding:11px 12px;font-size:15px;outline:0}.pf-searchbox input::placeholder{color:#dbe5f4}.pf-searchbox button{border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer;padding:0 8px}
.pf-filterbar,.pf-langbar{max-width:1560px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:rgba(9,36,69,.96);border:1px solid rgba(255,255,255,.09);border-radius:10px 10px 0 0;padding:11px}.pf-filterbar button,.pf-langbar button{border:0;border-radius:8px;padding:12px 16px;font-weight:900;cursor:pointer;background:linear-gradient(#243a5d,#1a2c48);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}.pf-filterbar button.active{background:linear-gradient(#166bc2,#0b4385)}.pf-langbar{background:#fff;border-color:var(--line);border-radius:0;padding:10px 110px}.pf-langbar button{background:#fff;color:#0a3270;border:1px solid var(--line);min-width:116px;box-shadow:0 1px 4px rgba(0,0,0,.07)}.pf-langbar button.active{background:#0a3270;color:#fff}
.pf-shell{max-width:1560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:0 0 10px 10px;overflow:auto;box-shadow:0 8px 28px rgba(0,0,0,.14)}.pf-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1180px}.pf-table th{position:sticky;top:0;background:#071e39;color:#fff;padding:12px 10px;font-size:14px;letter-spacing:.02em;z-index:2}.pf-table th small{font-weight:400;color:#dce7f6}.pf-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;background:#fff;padding:16px}.pf-table tr:hover td{background:#fbfdff}.pf-num{white-space:nowrap;text-align:center}.pf-icon{display:inline-flex;width:58px;height:58px;align-items:center;justify-content:center;border-radius:9px;background:#eef5ff;font-size:26px;margin-right:14px}.pf-nr{font-size:30px;font-weight:900;color:var(--blue2)}.pf-family{min-width:190px}.pf-family .pin{font-size:38px;line-height:1;font-weight:900;color:var(--blue2);letter-spacing:.02em}.pf-family .en{font-weight:800;margin-top:8px}.pf-family .de{color:var(--muted);margin-top:3px}.pf-hanzi{min-width:340px;text-align:center}.hanzi-line{font-size:32px;white-space:nowrap}.hanzi-item{font-family:"Noto Serif CJK SC","SimSun","Microsoft YaHei",serif;cursor:pointer;padding:0 4px;border-radius:6px;transition:.15s}.hanzi-item:nth-child(4n+1),.hanzi-item:nth-child(4n+3){color:#05070a}.hanzi-item:nth-child(4n+2),.hanzi-item:nth-child(4n+4){color:var(--han-blue)}.hanzi-item:hover{background:#eaf3ff;transform:translateY(-1px)}.dot{color:#0a3f86;font-weight:900;margin:0 8px}.mini-pinyin{margin-top:8px;color:#6b7280;font-size:16px;letter-spacing:.12em}.pf-words,.pf-fields{min-width:260px;line-height:1.45}.word-line{margin:0 0 5px}.word-line.en{font-weight:800}.word-line.de{color:#003f91;font-weight:700}.word{display:inline-block}.word:nth-child(odd){color:#0c1728}.word:nth-child(even){color:#003f91}.lang-extra{display:none;margin-top:7px;padding-top:7px;border-top:1px dashed #ccd8e6;color:#334155}.lang-extra.show{display:block}.pf-sound{text-align:center}.sound-btn{border:2px solid #0a4d9a;background:#fff;color:#0a4d9a;border-radius:50%;width:42px;height:42px;font-size:20px;cursor:pointer;font-weight:900}.sound-btn:hover{background:#eaf3ff}.hidden{display:none!important}.pf-foot{max-width:1560px;margin:0 auto;padding:13px 18px;color:#e8f2ff;background:#061b34;border-radius:0 0 8px 8px}
@media (max-width:900px){.pf-bg{padding:8px}.pf-hero{display:block}.pf-return{margin-bottom:10px}.pf-searchbox{margin-top:10px}.pf-langbar{padding:10px}.pf-titlebox{text-align:left}.pf-titlebox h1{font-size:28px}.pf-table{min-width:1050px}.hanzi-line{font-size:28px}.pf-family .pin{font-size:32px}}

/* Update 2026-06-28: tone marks + hover card */
.tone-syllable{font-weight:800;color:#334155;letter-spacing:.03em}
.hanzi-item:focus{outline:2px solid #f4c849;outline-offset:3px;background:#eaf3ff}
.word.muted{color:#9aa4b2;font-style:italic}
.pf-hover-card{position:fixed;z-index:50;display:none;min-width:220px;max-width:260px;background:#061b34;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 12px 30px rgba(0,0,0,.28);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.35;pointer-events:none}
.pf-hover-card.show{display:block}
.pf-hover-card .hc-hanzi{font-family:"Noto Serif CJK SC","SimSun","Microsoft YaHei",serif;font-size:42px;line-height:1;color:#fff;text-align:center}
.pf-hover-card .hc-pinyin{text-align:center;color:#f4c849;font-size:20px;font-weight:900;margin:4px 0 8px}
.pf-foot strong{color:#ffffff}.pf-foot em{color:#f4c849;font-style:normal;font-weight:800}