:root {
  color-scheme: light dark;
  --bg:#fff; --fg:#141414; --panel:#f4f5f7; --bd:#c8ccd2; --accent:#2b6cb0;
  --hi:#c0392b; --ok:#188038; --muted:#6b7280;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#181a1b; --fg:#e8e8e8; --panel:#24272a; --bd:#3a3f44; --accent:#5b9bd5; --muted:#9aa0a6; }
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { font-family: system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--fg); display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--bd); }
.tag { font-size:11px; background:var(--accent); color:#fff; border-radius:10px; padding:1px 8px; }
.spacer { flex:1; }
.meta { color:var(--muted); font-size:12px; }
button, select, input { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--bd); border-radius:6px; padding:5px 9px; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
nav#tabs { display:flex; gap:2px; padding:6px 14px 0; border-bottom:1px solid var(--bd); }
nav#tabs button { border:none; background:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; }
nav#tabs button.active { border-bottom-color:var(--accent); font-weight:bold; }
nav#tabs button:disabled { opacity:.4; cursor:default; }
main { flex:1; overflow:hidden; }
.view { display:none; height:100%; }
.view.active { display:flex; flex-direction:column; }
.pad { padding:16px; overflow-y:auto; }
.prose { max-width:760px; line-height:1.7; }
.prose h2 { font-size:16px; margin-top:24px; }
.prose code { background:var(--panel); padding:1px 5px; border-radius:4px; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--bd); }
.chk { font-size:12px; display:flex; align-items:center; gap:4px; }
.split { flex:1; display:flex; overflow:hidden; }
.grid { flex:1; overflow-y:auto; padding:10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px; align-content:start; }
.cell { border:1px solid var(--bd); border-radius:6px; padding:4px 2px; text-align:center; cursor:pointer; background:var(--panel); }
.cell:hover { border-color:var(--accent); }
.cell.sel { outline:2px solid var(--accent); }
.cell .c { font-size:26px; line-height:1.2; }
.cell .u { font-size:9px; color:var(--muted); }
.cell .badge { display:inline-block; width:6px; height:6px; border-radius:50%; }
.cell .b-simp { background:#d08700; } .cell .b-2010 { background:#188038; } .cell .b-jis { background:#2b6cb0; }
.detail { width:320px; border-left:1px solid var(--bd); overflow-y:auto; padding:14px; }
.detail .big { font-size:64px; line-height:1; }
.detail h3 { margin:6px 0; }
.detail table { width:100%; border-collapse:collapse; font-size:13px; }
.detail th { text-align:left; color:var(--muted); font-weight:normal; padding:2px 6px 2px 0; white-space:nowrap; vertical-align:top; }
.detail td { padding:2px 0; }
.pill { display:inline-block; font-size:11px; border:1px solid var(--bd); border-radius:10px; padding:1px 8px; margin:2px 3px 0 0; }
.cand { border:1px solid var(--bd); border-radius:6px; padding:6px; margin-top:6px; font-size:12px; }
.cand .k { color:var(--accent); font-weight:bold; }
.row { display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.dropzone { border:2px dashed var(--bd); border-radius:8px; padding:28px; text-align:center; color:var(--muted); cursor:pointer; margin:12px 0; }
.dropzone.over { border-color:var(--accent); color:var(--fg); }
.fontlist { display:flex; flex-direction:column; gap:6px; }
.fontitem { border:1px solid var(--bd); border-radius:6px; padding:8px 10px; display:flex; gap:10px; align-items:center; }
.fontitem.pick { cursor:pointer; } .fontitem.pick:hover { border-color:var(--accent); }
.fontitem.pick.added { opacity:.55; cursor:default; }
.fontitem.added { border-left:3px solid var(--ok); }
.fontitem .name { font-weight:bold; }
.pad h3 { margin:18px 0 6px; font-size:14px; }
.status { padding:5px 10px; border-radius:6px; background:#18803822; color:var(--ok); font-size:13px; display:inline-block; }
.status.warn { background:#d0870022; color:#b06f00; }
.chips { padding:8px 12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; border-bottom:1px solid var(--bd); }
.chip { display:inline-flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--bd); border-radius:14px; padding:2px 6px 2px 10px; font-size:12px; }
.chip .chipx { border:none; background:none; padding:0 2px; font-size:14px; line-height:1; cursor:pointer; color:var(--muted); }
.chip .chipx:hover { color:var(--hi); }
.cmpresult { height:100%; overflow:auto; }
.diags { display:flex; flex-wrap:wrap; gap:10px; padding:12px; }
.diag { border:1px solid var(--bd); border-radius:6px; padding:8px 10px; min-width:240px; }
table.cmp { border-collapse:collapse; }
table.cmp th, table.cmp td { border:1px solid var(--bd); padding:5px; vertical-align:top; }
table.cmp thead th { position:sticky; top:0; background:var(--bg); }
table.cmp .rh { font-size:22px; white-space:nowrap; text-align:center; }
.cellwrap { display:flex; flex-wrap:wrap; gap:5px; }
.g { text-align:center; width:64px; }
.g .gb svg { width:60px; height:60px; background:#fff; border:1px solid #ddd; display:block; color:#111; }
.g.diff .gb svg { border:2px solid var(--hi); }
.g .lbl { font-size:10px; word-break:break-all; }
.g.diff .lbl { color:var(--hi); }
.miss { color:var(--hi); font-size:12px; }