:root {
  --bg: #FAF7F2; --band: #F3EEE4; --card: #FFFDF9; --line: #E5D9C6; --gold: #A8874C; --gold2: #C5A46D;
  --text: #403A34; --dark: #322F2B; --mute: #756A5C; --good: #5F7A52; --bad: #8A5A3C; --goodbg: #EEF2E6; --badbg: #F4E9DD;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.75 "Noto Serif SC", "Songti SC", serif; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.top { background: var(--band); border-bottom: 1px solid var(--line); padding: 28px 0 22px; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand .zh { font-size: 34px; font-weight: 700; color: var(--dark); letter-spacing: 4px; }
.brand .en { font-size: 18px; color: var(--gold); letter-spacing: 2px; }
.tag { margin: 6px 0 0; color: var(--mute); }
main { padding-top: 22px; padding-bottom: 40px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 20px 22px; margin-bottom: 18px; }
h2 { font-size: 20px; color: var(--dark); margin: 4px 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card h2:not(:first-child) { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
h2 small { font-size: 13px; font-weight: 400; color: var(--mute); }
.no { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--gold); color: var(--gold); border-radius: 50%; font-size: 15px; font-weight: 400; }
.fld { display: block; font-size: 14px; color: var(--mute); margin-bottom: 10px; flex: 1 1 220px; }
.fld.small { flex: 0 1 160px; }
textarea, select, input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
textarea:focus, select:focus, input:focus, .btn:focus-visible, .tab:focus-visible, .cite:focus-visible { outline: 2px solid var(--gold2); outline-offset: 1px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.hint { font-size: 14px; color: var(--mute); margin: 4px 0 10px; }
.notice { font-size: 14px; background: var(--band); border-left: 3px solid var(--gold); padding: 8px 12px; margin: 8px 0 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { font: inherit; font-size: 15px; padding: 7px 14px; border: 1px solid var(--line); background: var(--bg); color: var(--mute); border-radius: 20px; cursor: pointer; }
.tab.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn { font: inherit; font-size: 16px; padding: 10px 22px; border: 1px solid var(--gold); background: var(--gold); color: #fff; border-radius: 6px; cursor: pointer; }
.btn:hover { background: #97783f; }
.btn.ghost { background: transparent; color: var(--gold); }
.btn:disabled { opacity: .5; cursor: default; }
.ai-row .btn { margin-bottom: 10px; }
.coin-grid { display: grid; gap: 8px; }
.coin-row { display: flex; align-items: center; gap: 10px; }
.coin-row span { width: 44px; font-size: 14px; color: var(--mute); }
.coin-row select { margin: 0; flex: 1; }
.yao-preview { margin-top: 14px; display: flex; flex-direction: column-reverse; gap: 7px; max-width: 300px; }
.yl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mute); }
.yl .bar { flex: 1; height: 12px; display: flex; gap: 14%; }
.yl .bar i { flex: 1; background: var(--dark); border-radius: 2px; }
.yl.mv .bar i { background: var(--gold); }
.yl .lab { width: 86px; }
.meta { font-size: 15px; margin: 0 0 12px; }
.meta b { color: var(--dark); }
.gname { font-size: 19px; color: var(--dark); font-weight: 600; margin: 0 0 10px; }
.gname small { font-size: 14px; font-weight: 400; color: var(--mute); }
.tblwrap { overflow-x: auto; }
table.pan { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
table.pan th, table.pan td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.pan th { font-size: 13px; font-weight: 400; color: var(--mute); background: var(--band); }
table.pan td.g { width: 78px; }
.g .bar { height: 11px; display: flex; gap: 14%; }
.g .bar i { flex: 1; background: var(--dark); border-radius: 2px; }
tr.mv .g .bar i { background: var(--gold); }
.sy { display: inline-block; min-width: 20px; padding: 0 5px; text-align: center; font-size: 12px; border-radius: 3px; background: var(--dark); color: #fff; }
.sy.y { background: var(--gold); }
.fu { color: var(--mute); font-size: 13px; }
.tagk { font-size: 12px; color: var(--bad); margin-left: 4px; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.sumbox { border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.sumbox.g { background: var(--goodbg); } .sumbox.b { background: var(--badbg); }
.sumbox h4 { margin: 0 0 4px; font-size: 15px; } .sumbox.g h4 { color: var(--good); } .sumbox.b h4 { color: var(--bad); }
.sumbox ul { margin: 0; padding-left: 18px; }
.sec { margin-bottom: 14px; }
.sec h3 { font-size: 16px; color: var(--gold); margin: 0 0 6px; }
.sec ul { list-style: none; margin: 0; padding: 0; }
.sec li { padding: 7px 0 7px 14px; border-left: 3px solid var(--line); margin-bottom: 4px; font-size: 15px; }
.sec li.g { border-left-color: var(--good); } .sec li.b { border-left-color: var(--bad); }
.tone { font-size: 12px; padding: 1px 6px; border-radius: 3px; margin-right: 6px; }
.tone.g { background: var(--goodbg); color: var(--good); } .tone.b { background: var(--badbg); color: var(--bad); }
.cite { font: inherit; font-size: 12px; padding: 1px 8px; margin-left: 6px; border: 1px solid var(--gold2); color: var(--gold); background: transparent; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.cite:hover { background: var(--band); }
.ai { margin-top: 12px; white-space: pre-wrap; font-size: 16px; }
.ai:empty { display: none; }
.ai h4 { margin: 16px 0 4px; color: var(--gold); font-size: 17px; }
.ai .err { color: var(--bad); }
.about { color: var(--mute); font-size: 14px; padding: 6px 4px; }
.about h3 { font-size: 15px; color: var(--dark); margin: 16px 0 4px; }
.about p { margin: 0; }
.foot { border-top: 1px solid var(--line); padding: 16px 0 28px; font-size: 13px; color: var(--mute); }
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(680px, 92vw); max-height: 82vh; color: var(--text); background: var(--card); font: inherit; }
dialog::backdrop { background: rgba(50, 47, 43, .45); }
.src-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--band); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.x { font-size: 22px; border: 0; background: none; color: var(--mute); cursor: pointer; line-height: 1; }
.src-body { padding: 14px 18px 20px; overflow-y: auto; max-height: calc(82vh - 52px); font-size: 15px; }
.src-body p { margin: 0 0 10px; }
.src-body p.hit { background: #FBF3DF; outline: 1px solid var(--gold2); padding: 6px 8px; border-radius: 4px; }
.src-body .pn { font-size: 12px; color: var(--gold); margin-right: 6px; }
.src-body pre { font-family: "Noto Serif SC", "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", serif; font-size: 14px; line-height: 1.75; background: var(--band); padding: 8px 10px; border-radius: 4px; overflow-x: auto; margin: 0 0 10px; }
.src-body mark { background: #F0DCA8; color: inherit; }
.src-meta { font-size: 13px; color: var(--mute); margin-bottom: 12px; }
@media (max-width: 560px) {
  .summary { grid-template-columns: 1fr; }
  .brand .zh { font-size: 28px; }
  .card { padding: 16px 14px 18px; }
}
details { border-top: 1px solid var(--line); padding: 10px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-size: 17px; color: var(--gold); padding: 4px 0; }
.gloss { margin: 8px 0 0; }
.gloss dt { font-weight: 600; color: var(--dark); margin-top: 12px; }
.gloss dd { margin: 2px 0 0; font-size: 15px; }
.principle h4 { margin: 14px 0 4px; font-size: 16px; color: var(--dark); }
.principle ul { margin: 0; padding-left: 20px; font-size: 15px; }
.principle li { margin-bottom: 6px; }
.principle p { margin: 0; font-size: 15px; }