:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #65717f;
  --paper: #f6f4ef;
  --panel: #fffdf8;
  --rule: #d9d5cb;
  --accent: #173f5f;
  --focus: #cf6a32;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input { font: inherit; }
button, .button-link { border: 1px solid var(--rule); background: #fff; border-radius: 8px; padding: .55rem .75rem; color: var(--ink); cursor: pointer; }
button:hover, .button-link:hover { border-color: var(--accent); }
a { color: var(--accent); }
.topbar { min-height: 92px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.topbar h1 { margin: 2px 0 0; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(1.45rem, 2.5vw, 2.2rem); }
.topbar h1 span { color: var(--muted); font-size: .62em; font-weight: 400; }
.eyebrow { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.header-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: .88rem; }
.workspace { min-height: calc(100vh - 92px); display: grid; grid-template-columns: 240px minmax(420px, 1fr) 310px; }
.controls, .details { background: var(--panel); padding: 20px; overflow: auto; }
.controls { border-right: 1px solid var(--rule); }
.details { border-left: 1px solid var(--rule); }
.controls section + section, .details section { margin-top: 22px; }
.controls h2, .details h3 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.controls label { font-size: .8rem; font-weight: 650; }
.search-row { margin-top: 7px; display: flex; }
.search-row input { min-width: 0; width: 100%; border: 1px solid var(--rule); border-radius: 8px 0 0 8px; padding: .6rem .7rem; background: #fff; }
.search-row button { border-left: 0; border-radius: 0 8px 8px 0; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented button { border-radius: 0; padding: .45rem .25rem; font-size: .78rem; }
.segmented button:first-child { border-radius: 8px 0 0 8px; }
.segmented button:last-child { border-radius: 0 8px 8px 0; }
.segmented button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.help { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.check { display: flex; gap: 8px; align-items: center; margin: 9px 0; font-weight: 400 !important; }
.legend div { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .76rem; }
.swatch { width: 15px; height: 11px; display: inline-block; border-radius: 3px; }
.swatch.topic { background: #cbd5df; }
.swatch.definition { background: #88b8d8; }
.swatch.principle { background: #8367a8; }
.swatch.theorem { background: #6fa889; }
.line { display: inline-block; width: 20px; border-top: 2px solid #54616d; }
.line.inferred { border-top-style: dashed; }
.graph-panel { min-width: 0; position: relative; background: radial-gradient(circle at 50% 40%, #fff 0, #f6f4ef 75%); }
.graph-tools { height: 48px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); font-size: .76rem; color: var(--muted); }
.graph-tools button { padding: .35rem .55rem; font-size: .75rem; }
#cy { width: 100%; height: calc(100vh - 166px); min-height: 510px; }
.graph-tip { position: absolute; left: 14px; bottom: 4px; margin: 0; font-size: .7rem; color: var(--muted); pointer-events: none; }
.details h2 { margin: 6px 0; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.45rem; }
.english { margin-top: 0; color: var(--muted); font-style: italic; }
.badge { display: inline-block; margin: 0; padding: .22rem .5rem; border-radius: 999px; background: #e8edf1; color: var(--accent); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
dl { margin: 18px 0; }
dl div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid #ebe8df; }
dt { color: var(--muted); font-size: .75rem; }
dd { margin: 0; font-size: .82rem; overflow-wrap: anywhere; }
.note { line-height: 1.6; font-size: .86rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.button-link { text-decoration: none; background: var(--accent); color: #fff; font-size: .78rem; }
.button-link.secondary { background: #fff; color: var(--accent); }
.details ul { padding-left: 18px; font-size: .8rem; line-height: 1.55; }
.details li { margin: 6px 0; }
.rel-label { color: var(--muted); font-size: .68rem; }
.evidence-note { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.match-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: .75rem; }
.match-list button { width: 100%; text-align: left; margin: 3px 0; padding: .4rem; }
@media (max-width: 1050px) {
  .workspace { grid-template-columns: 220px 1fr; }
  .details { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
  #cy { height: 62vh; }
}
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .workspace { display: block; }
  .controls { border-right: 0; border-bottom: 1px solid var(--rule); }
  #cy { height: 66vh; min-height: 430px; }
  .details { min-height: 320px; }
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink:#edf0f2; --muted:#aeb8c2; --paper:#171a1d; --panel:#202428; --rule:#394047; --accent:#8dc6ef; }
  button, .button-link.secondary, .search-row input { background:#282d32; color:var(--ink); }
  .graph-panel { background: radial-gradient(circle at 50% 40%, #24292e 0, #171a1d 75%); }
  dl div { border-color:#343a40; }
}