:root{--blue:#1677c8;--green:#22a447;--magenta:#ec3c93;--cyan:#11a8c6;--orange:#e5862a;--ink:#17212b;--muted:#66727e;--line:#d9e0e6;--panel:#f7f9fb;--receptor-color:#b83e4b;--pocket-color:#2aa7a1;--pocket-label-color:#176f69}
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}
.pocket-label-layer{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}.pocket-label{position:absolute;left:0;top:0;display:inline-flex;align-items:baseline;gap:2px;min-width:max-content;color:#17212b;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;white-space:nowrap;text-shadow:-1px -1px 0 rgba(255,255,255,.98),1px -1px 0 rgba(255,255,255,.98),-1px 1px 0 rgba(255,255,255,.98),1px 1px 0 rgba(255,255,255,.98),0 0 4px #fff;will-change:transform}.pocket-label:after{content:"";position:absolute;left:50%;top:calc(100% + 2px);width:1px;height:8px;background:var(--pocket-color);transform:translateX(-50%)}.pocket-label-residue{padding:0;font-weight:700;letter-spacing:.01em}.pocket-label.preview{opacity:.72}.pocket-label.pinned:after{height:9px;background:var(--pocket-color)}
#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 4px 8px;border-left:4px solid var(--receptor-color);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}
.toolbar-group{display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf0f3}.toolbar-group:last-child{border-bottom:0}.toolbar-label{font-size:11px;font-weight:700;color:var(--muted);flex:0 0 92px;width:92px;text-transform:uppercase;letter-spacing:.04em}
.control-block{display:flex;align-items:center;gap:10px}.control-label{font-weight:650;flex:0 0 92px;width:92px}.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}.legend b{font-weight:400}.receptor-subtype{background:var(--receptor-color)}.pred{background:#76b947}.pocket-residue{background:var(--pocket-color)}.exp{background:var(--cyan)}.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)}#receptor{border-left:5px solid var(--receptor-color)}
.button-block{display:flex;align-items:flex-start;gap:10px;margin-top:10px}.number-buttons{display:flex;flex-wrap:wrap;gap:5px}.number-buttons button{min-width:38px}#seed{display:grid;grid-template-columns:repeat(5,38px)}
.reference-block{align-items:flex-start;margin-top:10px}.reference-block>.control-label{padding-top:7px}.reference-selection{flex:1;min-width:0}.reference-picker{position:relative}.reference-picker summary{display:inline-flex;align-items:center;gap:9px;border:1px solid #b7c1cb;border-radius:4px;padding:6px 10px;background:#fff;cursor:pointer;font-weight:650;list-style:none}.reference-picker summary::-webkit-details-marker{display:none}.reference-picker summary:after{content:'▾';color:var(--muted)}#reference-count{font-size:11px;color:var(--muted);font-weight:500}.reference-picker[open] summary{border-color:var(--blue);box-shadow:0 0 0 2px rgba(22,119,200,.12)}.reference-menu{position:absolute;z-index:5;top:calc(100% + 5px);left:0;width:min(440px,90vw);background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(23,33,43,.16);padding:10px 12px}.reference-group-title{margin:6px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.reference-option{display:flex;align-items:center;gap:8px;padding:6px;border-radius:4px;cursor:pointer}.reference-option:hover{background:#f1f7fc}.reference-option input{accent-color:var(--blue)}.reference-option strong{min-width:140px}.reference-state{font-size:11px;color:var(--muted)}.reference-empty{color:var(--muted);padding:5px 0}.reference-clear{display:block;margin:8px 0 0 6px;border:0;background:none;color:var(--blue);padding:3px 0}.reference-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.reference-chip{border:1px solid #c8d1da;background:#f7f9fb;border-radius:999px;padding:3px 8px;color:var(--ink);font-size:12px}.reference-chip span{color:var(--muted);margin-left:4px}.reference-chip:hover{border-color:#d64545;background:#fff5f5}
.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.active{color:#167b39}.state.inactive{color:#315ca8}.state.apo{color:#7a4a10}
.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}.toolbar-group{align-items:flex-start}.toolbar-label{min-width:70px;padding-top:9px}.reference-menu{left:auto;right:0;width:min(440px,calc(100vw - 24px))}}