:root{--blue:#1677c8;--green:#22a447;--magenta:#ec3c93;--cyan:#11a8c6;--orange:#e5862a;--ink:#17212b;--muted:#66727e;--line:#d9e0e6;--panel:#f7f9fb}
body{color:var(--ink);font:14px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff}
.viewer-column{position:relative}.controls-column{min-width:0}
#viewer{height:min(68vh,720px);min-height:480px;border:1px solid var(--line);background:#fff;position:relative}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.78);z-index:2;color:var(--muted)}
#viewer-status{min-height:24px;padding:4px 2px;color:var(--muted)}
.control-row{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}.control-row button,.number-buttons button{border:1px solid #b7c1cb;background:#fff;border-radius:4px;padding:5px 10px;color:var(--ink)}
.control-row button.active,.number-buttons button.active{background:var(--blue);border-color:var(--blue);color:#fff}.control-row button:disabled{opacity:.45}
.control-block{display:flex;align-items:center;gap:10px}.control-label,.button-block>span{font-weight:650;min-width:66px}
.legend{padding:5px 0;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:6px}.legend span{width:11px;height:11px;border-radius:50%;display:inline-block;margin-left:8px}.pred{background:var(--magenta)}.exp{background:var(--cyan)}.mg{background:var(--green)}.ga{background:var(--orange)}.gb{background:#7656b1}.gg{background:var(--cyan)}.ref{background:#99a5b1}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:9px}.filters label{font-size:12px;color:var(--muted)}select{display:block;width:100%;margin-top:3px;border:1px solid #b7c1cb;border-radius:4px;background:#fff;padding:6px;color:var(--ink)}
.button-block{display:flex;align-items:center;gap:10px;margin-top:10px}.number-buttons{display:flex;gap:5px}.number-buttons button{min-width:38px}
.number-buttons button.mg-site-match{background:#e5f6e9;border-color:var(--green);color:#12662a;box-shadow:inset 0 0 0 1px var(--green)}.number-buttons button.mg-site-match.active{background:var(--green);border-color:var(--green);color:#fff}.mg-site-note{margin:8px 0 0 76px;color:#12662a;font-size:12px}.mg-site-note.no-mg{color:var(--muted)}
.details{margin-top:12px;background:var(--panel);border:1px solid var(--line);padding:10px}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}.details dt{font-size:11px;color:var(--muted);margin:0}.details dd{margin:0 0 5px}.state{font-weight:700}.state.pending{color:#806000}.bw-ok,.mg-match-text{color:#167b39;font-weight:650}.bw-missing{color:#9a3b32}
.result-list-wrap{border:1px solid var(--line);margin-top:12px}.list-head{display:flex;justify-content:space-between;padding:8px 10px;background:var(--panel)}#result-list{max-height:36vh;overflow:auto}
.result-row{width:100%;border:0;border-top:1px solid var(--line);background:#fff;text-align:left;padding:8px 10px}.result-row:hover{background:#f1f7fc}.result-row.active{box-shadow:inset 4px 0 var(--green);background:#f0faf3}.result-row small{display:block;color:var(--muted);margin-top:2px}
@media(max-width:1199px){#viewer{height:60vh}.result-list-wrap{margin-bottom:20px}}@media(max-width:600px){.filters{grid-template-columns:1fr}#viewer{min-height:390px}.details-grid{grid-template-columns:1fr}}