:root{
  --bg:#f5f1e8; --card:#fff; --ink:#2a2a2a; --muted:#8a8170; --line:#e3ddcf;
  --green:#2e5d32; --green2:#4a8a3f; --gold:#c79a3a; --red:#c0392b; --red2:#9a2a1e;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{margin:0; font-family:"Segoe UI",Tahoma,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55}
.topbar{display:flex; align-items:center; gap:14px; padding:16px 20px; background:linear-gradient(135deg,#2e5d32,#27492a); color:#fff}
.topbar .logo{font-family:"Microsoft YaHei",serif; font-size:34px; font-weight:700; background:rgba(255,255,255,.12); padding:6px 12px; border-radius:12px}
.topbar h1{margin:0; font-size:1.5em}
.topbar .sub{margin:2px 0 0; font-size:.8em; opacity:.85}
main{max-width:760px; margin:18px auto; padding:0 14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow)}
h2{font-size:1.05em; color:var(--green); margin:0 0 10px}
.muted{color:var(--muted); font-size:.88em}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:10px 0}
label{font-size:.85em; color:var(--muted); display:flex; flex-direction:column; gap:4px; font-weight:600}
input{font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fffdf8; color:var(--ink)}
input[type=number]{width:90px}
button{font:inherit; cursor:pointer; border-radius:9px}
.primary{background:var(--green); color:#fff; border:none; padding:12px 22px; font-weight:700; font-size:1.05em; width:100%; margin-top:6px}
.primary:hover{background:var(--green2)}
.ghost{background:#fff; color:var(--green); border:1px solid var(--green); padding:9px 14px; font-weight:600}
/* modes */
.modes{display:flex; gap:8px; margin-bottom:8px}
.mode{flex:1; background:#f1ede2; border:1px solid var(--line); color:var(--muted); padding:10px; font-weight:700}
.mode.active{background:var(--gold); color:#fff; border-color:var(--gold)}
.inbox{padding:4px 0}
/* result */
.result{border-width:2px}
.result.rg{border-color:var(--green2); background:linear-gradient(135deg,#f6fbf4,#fff)}
.result.rb{border-color:var(--red); background:linear-gradient(135deg,#fdf4f2,#fff)}
.r-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px}
.r-pal{display:flex; align-items:center; gap:12px}
.r-zh{font-family:"Microsoft YaHei",serif; font-size:46px; font-weight:800; line-height:1}
.result.rg .r-zh{color:var(--green)} .result.rb .r-zh{color:var(--red)}
.r-tc{font-size:1.4em; font-weight:700}
.bd{font-size:.78em; font-weight:700; padding:3px 10px; border-radius:20px}
.bd.good{background:#e6f3e6; color:var(--green)} .bd.bad{background:#fde7e3; color:var(--red2)}
.r-meta{font-size:.85em; color:var(--muted)}
.r-sum{margin:12px 0; font-size:1.05em; font-weight:600}
.trace{display:flex; align-items:center; flex-wrap:wrap; gap:6px; background:#faf7ef; border:1px dashed var(--line); border-radius:10px; padding:8px 12px; font-size:.85em; margin-bottom:12px}
.trace-lbl{color:var(--muted)}
.trace-step{display:inline-flex; flex-direction:column; align-items:center; line-height:1.1; margin:0 2px}
.trace-step i{font-style:normal; font-size:.7em; color:var(--muted)}
.trace-step b{font-family:"Microsoft YaHei",serif; font-size:1.1em}
.trace-step u{text-decoration:none; font-size:.72em; color:var(--muted)}
.trace-arrow{color:var(--gold); font-weight:700}
.p-g{color:var(--green2)} .p-b{color:var(--red)}
.rc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
@media(max-width:560px){.rc-grid{grid-template-columns:1fr}}
.rc{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:.9em}
.rc-h{font-weight:700; color:var(--green); margin-bottom:3px}
.r-poem{font-family:"Microsoft YaHei",serif; color:var(--muted); font-size:.92em; border-top:1px solid var(--line); padding-top:10px; letter-spacing:1px}
/* ref grid */
.ref-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(max-width:560px){.ref-grid{grid-template-columns:1fr 1fr}}
.ref{border:1px solid var(--line); border-radius:10px; padding:10px; border-left:4px solid}
.ref.rg{border-left-color:var(--green2)} .ref.rb{border-left-color:var(--red)}
.ref-zh{font-family:"Microsoft YaHei",serif; font-size:1.5em; font-weight:700}
.ref-tc{font-size:.85em; font-weight:700; color:var(--muted); margin-bottom:4px}
.ref-sum{font-size:.78em; color:var(--ink)}
.disc{font-size:.78em; color:var(--muted); margin-top:12px; border-top:1px dashed var(--line); padding-top:8px}
.foot{text-align:center; color:var(--muted); font-size:.78em; padding:18px}