:root{color-scheme:dark;font-family:"Microsoft YaHei",Inter,Arial,sans-serif;background:#0b1220;color:#eef3fa;font-size:13px}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;overflow:hidden}
header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #2d3b50;background:#111c2c;gap:16px}
.brand{display:flex;align-items:baseline;gap:14px;white-space:nowrap}.brand b{font-size:24px;letter-spacing:-1px}.brand span{font-size:16px;font-weight:600}.brand small{color:#92a8c4}
nav{display:flex;gap:7px;align-items:center;white-space:nowrap}button,a{font:inherit}button{cursor:pointer;border:1px solid #384b63;background:#1c2c42;color:#eaf2fd;border-radius:5px;padding:7px 10px}button:hover{background:#2c405b;border-color:#7da1cc}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #9bd6ff;outline-offset:3px}a{color:#a7d5ff;text-decoration:none}
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer;margin-right:9px;color:#dce9f9}.toggle input{appearance:none;width:34px;height:20px;min-width:34px;padding:0;border-radius:12px;background:#293b51;border:1px solid #526781;position:relative;cursor:pointer}.toggle input:before{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:#b7c9df;border-radius:50%;transition:transform .18s,background .18s}.toggle input:checked{background:#28628a;border-color:#63b9e5}.toggle input:checked:before{transform:translateX(14px);background:#fff}
main{display:flex;height:calc(100dvh - 62px)}aside{width:310px;flex-shrink:0;display:flex;flex-direction:column;background:#111c2c;border-right:1px solid #2d3b50;overflow:hidden;container-type:inline-size;container-name:sidebar}.filters{padding:16px 14px 12px}select{color:#eaf1fa;background:#0b1423;border:1px solid #34465e;border-radius:5px;padding:9px;font:inherit;min-width:0}.selects{display:flex;gap:7px}.selects select:first-child{flex:1;width:130px}.selects select:last-child{width:115px}
.list-head{padding:8px 16px;color:#93a9c5;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #29384c}.list-head button{font-size:11px;padding:3px 6px}#results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:8px;overflow:auto;flex:1;min-height:70px;padding:0 10px 12px;scrollbar-color:#6687a6 #13253a}.item{width:100%;min-width:0;align-self:start;text-align:left;display:flex;flex-direction:column;padding:0;border:1px solid #30455d;background:#152237;border-left:3px solid var(--group);border-radius:6px;overflow:hidden}.item:hover{background:#263b54;border-color:#7798bb;border-left-color:var(--group)}.item.active{background:#263b54;border-color:var(--group);box-shadow:inset 0 0 0 1px var(--group),0 0 0 1px var(--group)}.thumb-frame{display:block;width:100%;aspect-ratio:16/9;background:#060b13}.thumb-frame img{display:block;width:100%;height:100%;object-fit:contain}.item-info{display:block;width:100%;padding:8px 7px}.item b{display:block;color:var(--group);font-size:14px;margin-bottom:4px}.item small{display:block;color:#a9bfd9;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-meta{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:7px;color:#b9cbe0;font-size:10px}.item em{font-style:normal;white-space:nowrap}.item-meta>span{color:#96b2d1;white-space:nowrap}.empty{grid-column:1/-1;padding:20px 8px;text-align:center;color:#93a9c5;line-height:1.7}
@container sidebar (width < 220px){#results{grid-template-columns:minmax(0,1fr)}}
#selection{border-top:1px solid #34465e;border-bottom:1px solid #34465e;padding:12px 14px;max-height:51vh;overflow:auto}#selection h2{margin:0 0 7px;font-size:18px}#selection .tag{font-size:11px;color:#a7bdd7;margin-bottom:10px}#selection img{width:100%;max-height:170px;object-fit:contain;background:#060b13;border-radius:4px}#selection p{font-size:12px;color:#b6c8de;line-height:1.65;margin:9px 0}#selection .actions{display:flex;gap:6px;margin:8px 0}#selection .actions button{flex:1;font-size:12px;padding:6px}#selection details{font-size:11px;color:#91acca;line-height:1.7}#selection summary{cursor:pointer;color:#c7dbf2}#selection .evidence{margin:7px 0;overflow-wrap:anywhere}#selection .source-note{padding:8px;background:#293a4c;border-left:2px solid #d5b56f}
#viewport{position:relative;flex:1;min-width:0;overflow:hidden;background:#071321;touch-action:none}canvas{width:100%;height:100%;display:block;cursor:grab}canvas.dragging{cursor:grabbing}#hint{position:absolute;top:14px;left:14px;background:#101d2ce0;border:1px solid #48617d;border-radius:5px;padding:8px 12px;color:#c1d3e9;pointer-events:none;font-size:12px;z-index:5}#hud{position:absolute;bottom:16px;right:16px;display:flex;gap:16px;padding:8px 12px;background:#0b1627e8;border:1px solid #344c6b;border-radius:5px;color:#bed4ed;pointer-events:none;z-index:5}#error{position:absolute;bottom:65px;right:16px;max-width:350px;padding:12px;background:#782d34;color:white;border-radius:6px;font-size:12px;z-index:6}
#markers,#connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#connectors{z-index:2;overflow:visible;filter:drop-shadow(0 1px 2px #051222)}#markers{z-index:3}
.marker{position:absolute;transform:translate(-50%,-50%);padding:8px;width:36px;height:36px;background:transparent!important;border:0!important;pointer-events:auto;display:grid;place-items:center;cursor:pointer;touch-action:manipulation}.marker span{display:grid;place-items:center;min-width:12px;height:12px;background:var(--group);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 5px #0009;color:#071321;font-size:10px;font-weight:800;transition:box-shadow .18s,transform .18s}.marker:has(span:not(:empty)) span{min-width:24px;height:24px}.marker.cluster span{background:#173e5f;color:#e8f3ff;border-color:#b0cde6}.marker.region span{border-radius:3px;background:#183047;border-color:var(--group);transform:rotate(45deg)}.marker.region:has(span:not(:empty)) span{transform:none;outline:1px dashed #ffe3b5;outline-offset:3px}.marker:hover span,.marker.hovered span,.marker.active span{box-shadow:0 0 0 5px #fff3,0 1px 6px #0009}.marker.active{z-index:2}
#photo-panel{position:absolute;z-index:4;background:#0e1c2cf5;border:1px solid #54718d;border-radius:10px;box-shadow:0 16px 45px #02091170;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;touch-action:auto}#photo-panel.visible{opacity:1;transform:translateY(0)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#15283d;flex-shrink:0}.panel-head strong{display:block;font-size:15px}.panel-head span{display:block;font-size:11px;color:#a8bfd8;margin-top:5px}.panel-head button{padding:2px 8px;font-size:21px;background:transparent;border-color:transparent;line-height:1.2}#panel-region{padding:9px 13px;background:#57412a66;color:#ffe0aa;font-size:12px;flex-shrink:0}
#photo-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;gap:10px;padding:11px;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-color:#6687a6 #13253a}#photo-grid.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-card{border:1px solid #34516b;border-left:3px solid var(--group);border-radius:6px;background:#101f30;overflow:hidden;min-width:0;align-self:start}.photo-card.chosen{border-color:var(--group);box-shadow:0 0 0 1px var(--group)}.photo-label{padding:8px 9px;display:flex;align-items:baseline;justify-content:space-between;gap:7px}.photo-label strong{color:var(--group);font-size:13px;white-space:nowrap}.photo-label small{font-size:10px;color:#a0b9d1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo-button{display:block;width:100%;border:0;border-radius:0;padding:0;background:#050b12!important}.photo-button img{display:block;width:100%;height:auto;max-height:270px;object-fit:contain;pointer-events:none}.photo-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 9px;color:#9fb9d3;font-size:10px}.photo-foot button{font-size:11px;border:0;background:transparent;padding:3px 0;color:#bedfff;white-space:nowrap}
#connectors path.drawn{stroke-dasharray:var(--length);stroke-dashoffset:0;animation:draw-line .25s ease both}#connectors path.region-line{stroke-dasharray:7 5;animation:region-line .25s ease both}@keyframes draw-line{from{stroke-dashoffset:var(--length)}to{stroke-dashoffset:0}}@keyframes region-line{from{opacity:0}to{opacity:1}}
#photo-dialog{padding:0;border:1px solid #6783a0;border-radius:10px;background:#0c1827;color:#e6f0fb;width:min(1200px,94vw);max-width:94vw;max-height:94dvh;overflow:auto;box-shadow:0 22px 70px #0009}#photo-dialog::backdrop{background:#02070fd9;backdrop-filter:blur(4px)}.dialog-head{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-head button{font-size:21px;line-height:1;padding:4px 10px}#dialog-photo{display:block;width:100%;height:auto;max-height:calc(94dvh - 110px);object-fit:contain;background:#02060a}#dialog-caption{margin:0;padding:12px 16px;color:#9fbad6;font-size:12px}
@media(max-width:1150px){.brand small,.brand span{display:none}header{padding:0 12px}aside{width:280px}}
@media(max-width:850px){aside{width:240px}.selects{flex-direction:column}.selects select:first-child,.selects select:last-child{width:100%}#hint{display:none}}
@media(max-width:600px){header{height:94px;align-items:flex-start;padding-top:10px;position:relative}.brand b{font-size:20px}nav{position:absolute;left:10px;right:10px;bottom:10px;justify-content:space-between;gap:4px}nav button{padding:5px}.toggle{margin-right:0}main{height:calc(100dvh - 94px)}aside{width:165px}.filters{padding:12px 8px 10px}#selection{padding:10px 8px}#selection .actions{flex-wrap:wrap}#selection .actions button{min-width:54px}#hud{font-size:10px;gap:8px;right:8px;bottom:8px;padding:6px}}
#panel-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;filter:drop-shadow(0 0 1px #ffffff70)}.panel-head,#panel-region,#photo-grid{position:relative;z-index:2}#connectors path,#panel-connectors path{stroke-linejoin:round;stroke-linecap:round}#panel-connectors path.drawn{stroke-dasharray:var(--length);animation:draw-line .25s ease both}#panel-connectors path.region-line{stroke-dasharray:7 5;animation:region-line .25s ease both}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}#photo-panel{transform:none}}