howard
/
Agent


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392
							<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>搜索评估 · 案例总览</title>
  <style>
    :root {
      --ink: #24211d;
      --muted: #6f6961;
      --line: #ded8ce;
      --paper: #fbfaf7;
      --panel: #ffffff;
      --mint: #1f8a70;
      --rose: #b24b63;
      --amber: #b87918;
      --cyan: #2a6f8f;
      --soft-mint: #e9f5f0;
      --soft-rose: #f8e9ee;
      --soft-amber: #fff2d9;
      --soft-cyan: #e7f2f7;
      --shadow: 0 18px 45px rgba(41, 35, 28, .08);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.55;
    }

    header {
      padding: 40px 32px 22px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
    }

    .wrap {
      max-width: 1220px;
      margin: 0 auto;
    }

    .eyebrow {
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--mint);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    h1 {
      margin: 10px 0 10px;
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1.06;
      letter-spacing: 0;
    }

    .lede {
      max-width: 860px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

    .stat {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      box-shadow: var(--shadow);
      min-height: 86px;
    }

    .stat strong {
      display: block;
      font-size: 26px;
      line-height: 1.1;
    }

    .stat span {
      color: var(--muted);
      font-size: 13px;
    }

    main {
      padding: 24px 32px 48px;
    }

    .toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    .filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    button,
    select {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      border-radius: 8px;
      padding: 9px 12px;
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    button.active {
      color: #fff;
      background: var(--ink);
      border-color: var(--ink);
    }

    select {
      min-width: 190px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .result {
      min-height: 500px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.25s ease;
    }

    .result:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 50px rgba(41, 35, 28, .12);
    }

    .result.discard {
      border-color: rgba(178, 75, 99, 0.15);
    }

    .discard-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(251, 250, 247, 0.85);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
      z-index: 5;
      opacity: 1;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .result.discard:hover .discard-overlay {
      opacity: 0;
    }

    .discard-badge {
      background: var(--soft-rose);
      color: var(--rose);
      border: 1px solid rgba(178, 75, 99, 0.25);
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(178, 75, 99, 0.1);
    }

    .discard-reason {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      max-width: 90%;
      margin: 0 auto;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-weight: 500;
    }

    .thumbs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      height: 150px;
      background: #eee7dc;
      overflow: hidden;
    }

    .thumbs img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #eee7dc;
    }

    .thumbs img:first-child:nth-last-child(1) {
      grid-column: 1 / -1;
    }

    .body {
      padding: 15px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 8px;
    }

    .platform {
      color: #fff;
      border-radius: 999px;
      padding: 2px 8px;
      font-weight: 700;
      white-space: nowrap;
    }

    .p-xhs {
      background: var(--rose);
    }

    .p-gzh {
      background: var(--mint);
    }

    .p-x {
      background: var(--cyan);
    }

    h2 {
      margin: 0 0 8px;
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: 0;
    }

    .excerpt {
      color: var(--muted);
      font-size: 13px;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 12px 0;
    }

    .tag {
      background: #f2eee7;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 12px;
      color: #514a42;
    }

    .scorebar {
      margin-top: auto;
    }

    .overall {
      display: flex;
      align-items: end;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      padding-top: 12px;
    }

    .score {
      font-size: 36px;
      line-height: .9;
      font-weight: 800;
    }

    .decision {
      color: var(--mint);
      font-weight: 800;
    }

    .decision.discard {
      color: var(--amber);
    }

    .mini-bars {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      margin-top: 10px;
    }

    .mini-bars span {
      height: 7px;
      border-radius: 999px;
      background: #eee;
      overflow: hidden;
      position: relative;
    }

    .mini-bars span .fill {
      display: block;
      height: 100%;
      background: var(--mint);
      border-radius: 999px;
    }

    .group-snapshot {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      margin-top: 10px;
    }

    .mini-bars.new-schema {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .group-snapshot.new-schema {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .group-pill {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 5px 6px;
      background: #fff;
      min-width: 0;
    }

    .group-pill span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .group-pill strong {
      display: block;
      font-size: 14px;
      line-height: 1.1;
    }

    .actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .actions a,
    .actions button {
      flex: 1;
      text-align: center;
      text-decoration: none;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
    }

    dialog {
      width: min(980px, calc(100vw - 28px));
      max-height: calc(100vh - 32px);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0;
      box-shadow: 0 28px 90px rgba(0, 0, 0, .25);
    }

    dialog::backdrop {
      background: rgba(38, 33, 27, .42);
    }

    .modal-head {
      position: sticky;
      top: 0;
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 16px;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: start;
    }

    .modal-head h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.25;
    }

    .modal-content {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
      padding: 16px;
    }

    .modal-content > section,
    .modal-content > aside {
      min-width: 0;
    }

    .section-title {
      margin: 18px 0 8px;
      font-weight: 800;
    }

    .raw {
      white-space: pre-wrap;
      background: #faf7f1;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      max-height: 330px;
      overflow: auto;
      color: #3d3831;
      font-size: 13px;
    }

    .images {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .images img {
      width: 100%;
      max-height: 260px;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f1ece4;
    }

    .scores {
      display: grid;
      gap: 12px;
    }

    .score-group {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .score-group-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding: 10px 11px;
      background: #faf7f1;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      font-weight: 800;
    }

    .score-group-head small {
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .score-group-body {
      display: grid;
      gap: 8px;
      padding: 10px;
    }

    .score-row {
      display: grid;
      grid-template-columns: 128px 1fr 34px;
      gap: 10px;
      align-items: center;
      font-size: 13px;
    }

    .score-row.missing {
      color: #a39b91;
    }

    .score-row.missing .meter span {
      display: none;
    }

    .meter {
      height: 9px;
      border-radius: 999px;
      background: #eee7dc;
      overflow: hidden;
    }

    .meter span {
      display: block;
      height: 100%;
      width: calc(var(--v) * 20%);
      background: var(--rose);
    }

    .rubric-note {
      background: var(--soft-cyan);
      border-left: 4px solid var(--cyan);
      padding: 10px 12px;
      color: #254c5d;
      border-radius: 4px;
      font-size: 13px;
    }

    @media (max-width: 980px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .modal-content {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {

      header,
      main {
        padding-left: 16px;
        padding-right: 16px;
      }

      .grid,
      .stats {
        grid-template-columns: 1fr;
      }

      .toolbar {
        align-items: stretch;
      }

      select {
        width: 100%;
      }

      .result {
        min-height: auto;
      }

      .group-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* Extra styles for interactive navigation & matrix */
    .stats {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .stats .stat {
      min-width: 0;
    }

    .p-zhihu {
      background: #2a6f8f;
    }

    .p-x {
      background: #2a6f8f;
    }

    .p-bili {
      background: #b24b63;
    }

    .p-douyin {
      background: #24211d;
    }

    .p-sph {
      background: #07c160;
    }

    .p-youtube {
      background: #c4302b;
    }

    .p-github {
      background: #24292e;
    }

    .p-toutiao {
      background: #f04142;
    }

    .p-weibo {
      background: #e6162d;
    }

    .nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 14px;
    }

    .navrow {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .navlab {
      width: 54px;
      flex: 0 0 54px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .navrow .tab {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      cursor: pointer;
    }

    .navrow .tab.on {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .navrow .tab .q {
      font-family: ui-monospace, Menlo, monospace;
    }

    .navrow .tab small {
      color: var(--muted);
      margin-left: 4px;
    }

    .navrow .tab.on small {
      color: #cfd8dc;
    }

    #navQ .qtab {
      max-width: 100%;
      white-space: normal;
      text-align: left;
      line-height: 1.4;
    }

    .navrow .tab {
      white-space: normal;
    }

    #refresh {
      cursor: pointer;
    }

    /* 1:1 Morandi Matrix Replicated Style Rules */
    .btn {
      padding: 3px 10px;
      border-radius: 14px;
      border: 1px solid #d1d5db;
      background: #fff;
      cursor: pointer;
      font-size: .74rem;
      color: #444;
    }

    .g-form .btn.on {
      background: #4f46e5;
      border-color: #4f46e5;
      color: #fff;
    }

    .g-lens .btn.on {
      background: #be185d;
      border-color: #be185d;
      color: #fff;
    }

    .g-mod .btn.on {
      background: #2e7d32;
      border-color: #2e7d32;
      color: #fff;
    }

    .g-tool .btn.on {
      background: #c2410c;
      border-color: #c2410c;
      color: #fff;
    }

    .g-tier .btn.on {
      background: #374151;
      border-color: #374151;
      color: #fff;
    }

    .g-mxview .btn.on {
      background: var(--mint);
      border-color: var(--mint);
      color: #fff;
    }

    .mxwrap {
      max-height: 55vh;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 0 0 8px 8px;
      margin-bottom: 12px;
      background: #fff;
      position: relative;
    }

    table#comboMx {
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
      font-size: .65rem;
      width: 100%;
    }

    table#comboMx th,
    table#comboMx td {
      border-right: 1px solid #f0f1f5;
      border-bottom: 1px solid #f0f1f5;
      text-align: center;
    }

    table#comboMx thead th {
      position: sticky;
      background: #fff;
    }

    table#comboMx thead tr.l1 th {
      top: 0;
      z-index: 11;
      background: #eef2ff;
      color: #4338ca;
      font-weight: 700;
      font-size: .72rem;
      height: 20px;
      border-bottom: 1px solid #c7d2fe;
    }

    table#comboMx thead tr.l2 th {
      top: 20px;
      z-index: 11;
      background: #f5f7ff;
      color: #6366f1;
      font-weight: 600;
      font-size: .66rem;
      height: 18px;
      border-bottom: 1px solid #e0e7ff;
    }

    table#comboMx thead tr.leaf th {
      top: 38px;
      z-index: 9;
      background: #fff;
      color: #1f2937;
      font-size: .66rem;
      min-width: 120px;
      max-width: 120px;
      height: 24px;
      padding: 3px;
    }

    table#comboMx thead .corner {
      left: 0;
      top: 0;
      z-index: 13;
      background: #fff;
      min-width: 96px;
    }

    .l1div {
      border-left: 3px solid #818cf8 !important;
    }

    .l2div {
      border-left: 1.5px solid #cbd5e8 !important;
    }

    table#comboMx tbody th.rh {
      position: sticky;
      left: 0;
      z-index: 8;
      background: #fffaf0;
      color: #92580c;
      text-align: left;
      padding: 4px 8px;
      font-weight: 600;
      white-space: nowrap;
      min-width: 96px;
      border-right: 1px solid #e6e8ef;
    }

    table#comboMx tbody tr.l1row td {
      background: #eef2ff;
      color: #4338ca;
      font-weight: 700;
      font-size: .7rem;
      text-align: left;
      padding: 3px 8px;
      position: sticky;
      left: 0;
    }

    td.cell {
      min-width: 120px;
      max-width: 120px;
      height: 30px;
      padding: 2px 5px;
      cursor: pointer;
      font-family: ui-monospace, Menlo, monospace;
      font-size: .65rem;
      color: #1f2937;
      text-align: left;
      line-height: 1.25;
      border-left: 4px solid transparent;
      overflow: hidden;
      position: relative;
    }

    td.cell:hover {
      box-shadow: inset 0 0 0 2px #f59e0b;
    }

    td.cell.t0 {
      border-left-color: #e5e7eb;
      background: #fbfbfc;
      color: #aeb3bd;
    }

    td.cell.t1 {
      border-left-color: #bbf7d0;
    }

    td.cell.t2 {
      border-left-color: #4ade80;
      background: #f3fdf6;
    }

    td.cell.t3 {
      border-left-color: #15803d;
      background: #ecfdf3;
    }

    td.cell.tNA {
      border-left-color: #fcd34d;
      background: repeating-linear-gradient(45deg, #fff, #fff 4px, #fef9ec 4px, #fef9ec 8px);
      color: #b6bac4;
    }

    td.cell.gq-cell {
      color: #15803d;
      font-weight: 600;
    }

    td.cell.rowdim {
      opacity: .26;
    }

    td.cell.hide {
      visibility: hidden;
    }

    td.cell.sel {
      outline: 2px solid var(--ink);
      outline-offset: -2px;
      font-weight: bold;
    }

    td.cell.rowsel,
    td.cell.colsel {
      box-shadow: inset 0 0 0 999px rgba(255, 193, 7, .12);
    }

    td.cell.rowsel.colsel {
      box-shadow: inset 0 0 0 999px rgba(255, 193, 7, .22);
    }

    th.rh.rowsel {
      background: rgba(255, 193, 7, .22);
      color: var(--ink);
      font-weight: 700;
    }

    thead th.colsel {
      background: rgba(255, 193, 7, .22);
      color: var(--ink);
      font-weight: 700;
    }

    /* Database hit badge inside matrix cells */
    td.cell .hit-badge {
      position: absolute;
      right: 2px;
      top: 2px;
      background: #10b981;
      color: #fff;
      font-size: 9px;
      font-weight: bold;
      border-radius: 3px;
      padding: 0 3px;
      line-height: 1.2;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Pop-up floating panel styling */
    .pop {
      position: fixed;
      background: #fff;
      border: 1px solid #d1d5db;
      border-radius: 9px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
      padding: 13px 15px;
      max-width: 450px;
      z-index: 200;
      display: none;
      font-size: .82rem;
      line-height: 1.5;
    }

    .pop .pt {
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 7px;
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      padding-right: 18px;
    }

    .pop .path {
      font-size: .66rem;
      padding: 1px 6px;
      border-radius: 3px;
    }

    .pop .path.a {
      background: #eef2ff;
      color: #4338ca;
    }

    .pop .path.t {
      background: #fef3c7;
      color: #92400e;
    }

    .pop .tier {
      font-size: .64rem;
      padding: 1px 7px;
      border-radius: 3px;
      font-weight: 600;
    }

    .tb0 {
      background: #e5e7eb;
      color: #6b7280;
    }

    .tb1 {
      background: #dcfce7;
      color: #166534;
    }

    .tb2 {
      background: #bbf7d0;
      color: #14532d;
    }

    .tb3 {
      background: #15803d;
      color: #fff;
    }

    .tbNA {
      background: #fef3c7;
      color: #92400e;
    }

    .pop .reason {
      background: #fffbeb;
      border-left: 3px solid #f59e0b;
      padding: 7px 11px;
      border-radius: 3px;
      color: #78350f;
      margin: 7px 0;
      font-size: .8rem;
    }

    .pop .reason.inv {
      background: #fef2f2;
      border-left-color: #ef4444;
      color: #991b1b;
    }

    .pop .gq {
      background: #ecfdf3;
      border: 1px solid #a7f3d0;
      border-radius: 6px;
      padding: 7px 11px;
      margin: 7px 0;
      font-family: ui-monospace, Menlo, monospace;
      font-size: .84rem;
      color: #15803d;
    }

    .pop .gq .t {
      font-family: inherit;
      font-size: .64rem;
      color: #6b7280;
      display: block;
      margin-bottom: 2px;
    }

    .pop .small {
      font-size: .7rem;
      color: #9aa0ad;
      margin: 4px 0;
    }

    .pop .lbl {
      font-size: .66rem;
      color: #6b7280;
      font-weight: 600;
      margin: 9px 0 3px;
    }

    .pop ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .pop li {
      padding: 3px 8px;
      background: #f9fafb;
      border-radius: 4px;
      margin-bottom: 3px;
      font-family: ui-monospace, Menlo, monospace;
      font-size: .78rem;
      color: #1f2937;
    }

    .pop li.gen {
      background: #eef0ff;
      color: #3730a3;
    }

    .pop li.cur {
      box-shadow: inset 0 0 0 2px #818cf8;
    }

    .pop li .fm {
      font-size: .62rem;
      color: #4f46e5;
      margin-right: 6px;
    }

    .pop .note {
      font-size: .7rem;
      color: #2e7d32;
      margin-top: 6px;
    }

    .pop .close {
      position: absolute;
      top: 6px;
      right: 9px;
      cursor: pointer;
      color: #9ca3af;
      font-size: 1.15rem;
    }

    .fac {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 999px;
      padding: 4px 11px;
      font-size: 12px;
      cursor: pointer;
      color: var(--ink);
    }

    .fac.on {
      background: var(--mint);
      color: #fff;
      border-color: var(--mint);
    }

    .fac small {
      opacity: .65;
      margin-left: 3px;
    }

    #navQ .qtab .hit {
      display: inline-block;
      margin-left: 7px;
      background: var(--soft-mint);
      color: var(--mint);
      border-radius: 999px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 700;
    }

    #navQ .qtab.on .hit {
      background: rgba(255, 255, 255, .22);
      color: #fff;
    }

    .modal-tabs {
      display: flex;
      gap: 4px;
      padding: 0 16px;
      border-bottom: 1px solid var(--line);
      background: #faf7f1;
    }
    .modal-tab {
      background: transparent;
      border: none;
      border-bottom: 3px solid transparent;
      border-radius: 0;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .modal-tab:hover {
      color: var(--ink);
      background: rgba(0, 0, 0, 0.02);
    }
    .modal-tab.active {
      color: var(--mint);
      border-bottom-color: var(--mint);
    }

    /* 新版评估分数卡片可视化样式 */
    .sc-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    }
    
    .sc-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      border-bottom: 1px solid #f3f0ea;
      padding-bottom: 10px;
    }
    
    .sc-card-head .title {
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .sc-card-head .badge {
      background: #eef2ff;
      color: #2563eb;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }
    
    .sc-card-head .avg-score {
      font-size: 14px;
      color: var(--muted);
      font-weight: 600;
    }
    
    .sc-card-head .avg-score strong {
      font-size: 26px;
      color: #2563eb;
      font-weight: 800;
      margin-left: 6px;
    }
    
    .sc-sub-header {
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      margin: 14px 0 8px;
      border-bottom: 1px dashed #f0ebd8;
      padding-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .sc-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      font-size: 13.5px;
      gap: 10px;
    }
    
    .sc-row .label {
      color: var(--ink);
      font-weight: 500;
      flex: 1;
      min-width: 100px;
      word-break: break-all;
    }
    
    .sc-row .bar-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 170px;
      flex-shrink: 0;
    }
    
    .sc-row .bar {
      height: 6px;
      background: #eee7dc;
      border-radius: 999px;
      flex: 1;
      overflow: hidden;
    }
    
    .sc-row .bar-fill {
      height: 100%;
      background: #2563eb;
      border-radius: 999px;
      width: calc(var(--v) * 10%);
    }
    
    .sc-row .value {
      font-weight: 700;
      font-size: 13.5px;
      width: 20px;
      text-align: right;
    }
    
    .sc-row .info-icon {
      cursor: pointer;
      color: #9ca3af;
      transition: color 0.15s ease;
      font-size: 13px;
      user-select: none;
    }
    
    .sc-row .info-icon:hover {
      color: #3b82f6;
    }
    #reevalBtn {
      background: #faf7f1;
      color: var(--amber);
      border-color: rgba(184, 121, 24, 0.3);
      height: 38px;
      padding: 0 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
    #reevalBtn:hover {
      background: var(--soft-amber);
      color: var(--amber);
      border-color: var(--amber);
    }
    #editSpecBtn {
      background: #f0f7f6;
      color: var(--cyan);
      border-color: rgba(42, 111, 143, 0.3);
      height: 38px;
      padding: 0 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
    #editSpecBtn:hover {
      background: var(--soft-cyan);
      color: var(--cyan);
      border-color: var(--cyan);
    }
  </style>
</head>

<body>
  <header>
    <div class="wrap">
      <div class="eyebrow">Content Search · 固定 query · 同义扩展 + 合并去重 · query → 渠道</div>
      <h1>固定 Query 搜索评估 · 案例总览</h1>
      <p class="lede" id="lede" style="margin:0">加载中…</p>
      <div class="stats" id="stats"></div>
    </div>
  </header>

  <main>
    <div class="wrap">
      <div class="nav">
        <!-- fixed_query_eval：隐藏原正交矩阵导航，改用固定 query 选择条 #navQ。
             矩阵 DOM 保留（display:none）以免 loadData 里的 getElementById 取空崩脚本。 -->
        <style>#mxRow, .mx-header, .mxwrap, #pop { display: none !important; }</style>
        <div class="navrow" id="navQRow" style="margin-bottom:4px;">
          <span class="navlab">Query</span>
          <div id="navQ" style="display:flex;gap:8px;flex-wrap:wrap;flex:1"></div>
          <button id="toolBatchBtn" onclick="openToolBatchModal()" style="margin-right:8px">🔧 工具解构</button>
          <button id="refresh2" onclick="loadData(true)">↻ 刷新 runs</button>
        </div>
        <div class="navrow" id="mxRow" style="margin-bottom:4px;">
          <span class="navlab">组合矩阵</span>
          <span style="color:var(--muted);font-size:12px;flex:1">行=类型　列=动作　格子色=评分，角标=帖子数/工序数。点击选组合且弹出详情。</span>
          <span class="g-mxview" style="display:inline-flex;gap:4px;margin-right:12px;align-items:center;">
            <button class="btn on" id="btnMxFull" onclick="setMatrixView('full')">完整矩阵</button>
            <button class="btn" id="btnMxHits" onclick="setMatrixView('hits')">只看帖子命中</button>
            <button class="btn" id="btnMxProcedures" onclick="setMatrixView('procedures')">只看工序</button>
          </span>
          <button id="refresh" onclick="loadData(true)">↻ 刷新 runs</button>
        </div>

        <div class="mx-header"
          style="background:#fff; border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding:12px 16px 8px; border-bottom: none;">
          <h4
            style="margin:0 0 4px; font-size:13px; color:#1f2937; display:flex; justify-content:space-between; align-items:center; font-weight:700;">
            <span>动作 × 类型 · 组合矩阵 <span style="font-weight:400;font-size:11px;color:#9aa0ad">基于 <b
                  id="gm">gemini-3.1-flash-lite</b></span></span>
            <span class="legend" style="display:flex;gap:9px;align-items:center;color:#6b7280;font-size:11px;">
              <span><span class="sw"
                  style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#15803d;vertical-align:middle;margin-right:3px;"></span>高
                · <b id="s3" style="color:#15803d;">0</b></span>
              <span><span class="sw"
                  style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#4ade80;vertical-align:middle;margin-right:3px;"></span>中
                · <b id="s2" style="color:#4ade80;">0</b></span>
              <span><span class="sw"
                  style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#bbf7d0;vertical-align:middle;margin-right:3px;"></span>低
                · <b id="s1" style="color:#10b981;">0</b></span>
              <span><span class="sw"
                  style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#e5e7eb;vertical-align:middle;margin-right:3px;"></span>无效
                · <b id="s0" style="color:#9ca3af;">0</b></span>
              <span><span class="sw"
                  style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#fcd34d;vertical-align:middle;margin-right:3px;"></span>未判
                · <b id="sna" style="color:#b87918;">0</b></span>
            </span>
          </h4>
          <div class="sub" style="font-size:11px;color:#6b7280;margin-bottom:8px;">
            共 1350 格 · 形式①原词不替换 · ②句子套模板 · ③同义池替换。
          </div>
          <div class="ctl"
            style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11px;border-top:1px solid #f3f4f6;padding-top:8px;">
            <span class="lab" style="color:#9aa0ad;font-weight:600;">query生成方式</span>
            <span class="g-form">
              <button class="btn on" data-k="form" data-v="A">①原词</button>
              <button class="btn" data-k="form" data-v="B">②句子</button>
              <button class="btn" data-k="form" data-v="C">③同义</button>
            </span>
            <span class="lab" style="color:#9aa0ad;font-weight:600;margin-left:8px;">知识类型</span>
            <span class="g-lens">
              <button class="btn on" data-k="lens" data-v="工序">工序</button>
              <button class="btn" data-k="lens" data-v="工具">工具</button>
              <button class="btn" data-k="lens" data-v="能力">能力</button>
            </span>
            <span class="lab" style="color:#9aa0ad;font-weight:600;margin-left:8px;">约束·工具类型</span>
            <span class="g-tool">
              <button class="btn on" data-k="tool" data-v="">无</button>
              <span id="toolBtns"></span>
            </span>
            <span class="lab" style="color:#9aa0ad;font-weight:600;margin-left:8px;">搜索优先级</span>
            <span class="g-tier">
              <button class="btn on" data-k="tier" data-v="0">全部</button>
              <button class="btn" data-k="tier" data-v="2">≥中</button>
              <button class="btn" data-k="tier" data-v="3">仅高</button>
            </span>
          </div>
        </div>

        <div class="mxwrap"
          style="max-height:55vh; overflow:auto; border:1px solid var(--line); border-radius: 0 0 8px 8px; margin-bottom:12px; background:#fff; position:relative;">
          <table id="comboMx"></table>
        </div>

        <div class="pop" id="pop"></div>

        <div class="navrow"><span class="navlab">渠道</span>
          <div id="navC" style="display:flex;gap:8px;flex-wrap:wrap"></div>
        </div>
      </div>
      <div class="toolbar">
        <div class="filters"></div>
        
        <!-- 动态相关性过滤阈值 -->
        <div class="threshold-control" style="display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow);">
          <span style="color: var(--muted); font-size: 12px; font-weight: 700;">相关性过滤阈值:</span>
          <input type="number" id="relThreshold" min="0" max="10" step="0.5" value="4.0" 
                 oninput="renderGrid(); renderHead();" 
                 style="width: 55px; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 6px; font-weight: 700; text-align: center; color: #2563eb; outline: none; transition: border-color 0.2s;"
                 onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#d1d5db'">
        </div>

        <button id="reevalBtn" onclick="reevalCurrentQuery()" title="只对当前 query 的所有 form/帖子复评（不重新搜索）">♻️ 重评当前 query</button>
        <button id="editSpecBtn" onclick="openSpecEditor()" title="查看或修改 spec/ 提示词规范文件">📝 编辑 Spec 提示词</button>
        <select id="sort">
          <option value="score">按综合分排序</option>
          <option value="date">按发布时间排序</option>
          <option value="platform">按平台排序</option>
        </select>
      </div>
      <div class="grid" id="grid"></div>
    </div>
  </main>

  <!-- fixed_query_eval：图片放大灯箱（用 dialog 才能叠在详情 modal 之上）-->
  <style>
    #imgLightbox { border:none; background:transparent; padding:0; max-width:100vw; max-height:100vh; overflow:visible; }
    #imgLightbox::backdrop { background: rgba(0,0,0,.85); }
    #imgLightbox img { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:8px; cursor:zoom-out; box-shadow:0 10px 40px rgba(0,0,0,.5); display:block; }
  </style>
  <dialog id="imgLightbox" onclick="this.close()">
    <img id="imgLightboxImg" referrerpolicy="no-referrer" alt="">
  </dialog>

  <!-- fixed_query_eval：批量工具解构 · 选帖弹层 -->
  <dialog id="toolBatchDialog" style="width: min(720px, 92vw); border:1px solid var(--line); border-radius:12px; padding:0;">
    <div style="padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;">
      <div>
        <h3 style="margin:0; font-size:17px;">🔧 工具解构 · 选择帖子</h3>
        <div id="toolBatchSub" style="color:var(--muted); font-size:13px; margin-top:2px;"></div>
      </div>
      <button onclick="toolBatchDialog.close()">关闭</button>
    </div>
    <div style="padding:10px 20px; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:center;">
      <label style="display:flex; gap:6px; align-items:center; cursor:pointer; font-size:13px;">
        <input type="checkbox" id="toolBatchAll" onchange="toolBatchToggleAll(this.checked)"> 全选
      </label>
      <span id="toolBatchCount" style="color:var(--muted); font-size:12px;"></span>
      <span style="flex:1"></span>
      <span style="color:var(--muted); font-size:12px;">模型：gemini-3.1-flash-lite</span>
    </div>
    <div id="toolBatchList" style="max-height:50vh; overflow-y:auto; padding:4px 20px;"></div>
    <div style="padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;">
      <button onclick="toolBatchDialog.close()">取消</button>
      <button id="toolBatchConfirm" onclick="confirmToolExtract()" style="background:var(--mint); color:#fff; border-color:var(--mint); padding:8px 20px; font-weight:bold; border-radius:8px; cursor:pointer;">确认解构</button>
    </div>
  </dialog>

  <dialog id="detailDialog">
    <div class="modal-head">
      <div>
        <div id="modalMeta" class="meta"></div>
        <h3 id="modalTitle"></h3>
      </div>
      <button onclick="detailDialog.close()">关闭</button>
    </div>
    
    <div class="modal-tabs" id="modalTabs" style="display: none;">
      <button class="modal-tab active" onclick="switchModalTab('detail')" id="tabDetailBtn">帖子详情</button>
      <button class="modal-tab" onclick="switchModalTab('procedure')" id="tabProcedureBtn">对应工序</button>
      <button class="modal-tab" onclick="switchModalTab('tools')" id="tabToolsBtn">工具解构</button>
    </div>

    <div class="modal-content" id="modalContentDetail">
      <section>
        <div class="rubric-note" id="modalReason"></div>
        <div class="section-title">抓取文本节选</div>
        <div class="raw" id="modalText"></div>
        <div class="section-title">图片预览</div>
        <div class="images" id="modalImages"></div>
      </section>
      <aside>
        <div class="section-title" style="display: flex; justify-content: space-between; align-items: center;">
          <span>评分详情</span>
          <span id="modalOverallScore" style="font-size: 13.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 4px; background: #faf7f1; border: 1px solid var(--line); padding: 3px 10px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.01);">
            综合评分 <strong style="font-size: 19px; color: #2563eb; font-weight: 900; line-height: 1;" id="modalOverallScoreVal">—</strong>
          </span>
        </div>
        <div class="scores" id="modalScores"></div>
        <div class="section-title">类型 / 命中 query</div>
        <div class="tags" id="modalTags"></div>
      </aside>
    </div>

    <!-- fixed_query_eval：工具解构 tab 内容（JS 填充）-->
    <div id="modalContentTools" style="display: none; min-height: 400px; max-height: calc(100vh - 180px); overflow-y: auto; padding: 16px; box-sizing: border-box;"></div>

    <div id="modalContentProcedure" style="display: none; min-height: 500px; height: calc(100vh - 180px); max-height: 700px; padding: 16px; box-sizing: border-box; flex-direction: column;">
      <!-- Top Action Bar (inside tab) -->
      <div id="procActionBar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); flex-shrink: 0;">
        <div style="font-size: 14px; font-weight: bold; color: var(--ink);" id="procStatusText">工序状态: 检测中...</div>
        <div style="display: flex; gap: 8px;" id="procActionBtns">
          <!-- Dynamically populated buttons (Regenerate, View Logs, etc) -->
        </div>
      </div>
      
      <!-- Main view container -->
      <div style="flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column;">
        <!-- Configuration / Setup panel (when not generated) -->
        <div id="procSetupPanel" style="display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 40px 20px;">
          <div style="font-size: 36px; margin-bottom: 16px;">✨</div>
          <h4 style="margin: 0 0 10px; font-size: 18px;">提取本帖工序</h4>
          <p style="color: var(--muted); font-size: 14px; max-width: 500px; margin: 0 0 24px;">该帖子目前尚未生成对应的结构化工序。请在下方选择提取引擎和模型，点击开始提取。</p>
          
          <div style="display: flex; gap: 16px; margin-bottom: 24px; text-align: left; background: #fff; border: 1px solid var(--line); padding: 16px; border-radius: 8px; box-shadow: var(--shadow);">
            <div>
              <label style="display: block; font-size: 12px; font-weight: bold; margin-bottom: 6px; color: var(--muted);">提取引擎 (Engine)</label>
              <select id="procEngineSelect" style="min-width: 180px; padding: 6px 10px;" onchange="onProcEngineChange()">
                <option value="cyber_runner">Cyber Runner (自研/OpenRouter)</option>
                <option value="claude_sdk">Claude SDK (OAuth)</option>
              </select>
            </div>
            <div>
              <label style="display: block; font-size: 12px; font-weight: bold; margin-bottom: 6px; color: var(--muted);">AI 模型 (Model)</label>
              <select id="procModelSelect" style="min-width: 240px; padding: 6px 10px;">
                <!-- Dynamically populated options -->
              </select>
            </div>
          </div>
          
          <button id="startProcBtn" onclick="startProcedureExtraction()" style="background: var(--mint); color: #fff; border-color: var(--mint); padding: 10px 24px; font-size: 15px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.2s;">开始提取工序</button>
        </div>
        
        <!-- Live Log Terminal View -->
        <div id="procConsolePanel" style="display: none; flex-direction: column; height: 100%; min-height: 0; background: #1e1b18; border: 1px solid #3d352e; border-radius: 8px; overflow: hidden; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);">
          <!-- Console header -->
          <div style="background: #2b2520; padding: 6px 12px; border-bottom: 1px solid #3d352e; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; font-family: monospace; font-size: 12px; color: #a3968d;">
            <span>TERMINAL CONSOLE</span>
            <span id="procConsoleStatus">idle</span>
          </div>
          <!-- Console log output -->
          <pre id="procConsoleOutput" style="flex: 1; margin: 0; padding: 12px; overflow: auto; font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.45; color: #cbbba9; background: #1e1b18; white-space: pre-wrap; word-break: break-all;"></pre>
        </div>
        
        <!-- Iframe Panel for completed HTML -->
        <iframe id="procedureIframe" style="display: none; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff;" referrerpolicy="no-referrer"></iframe>
      </div>
    </div>
  </dialog>

  <!-- Spec Editor Dialog -->
  <dialog id="specEditorDialog" style="width: 850px; max-width: 95%; border: 1px solid var(--line); border-radius: 12px; padding: 0; box-shadow: var(--shadow); background: var(--panel);">
    <div style="display: flex; justify-content: space-between; align-items: center; background: #faf7f1; border-bottom: 1px solid var(--line); padding: 16px 20px;">
      <h3 style="margin: 0; font-size: 18px; color: var(--ink); font-weight: 800;">📝 编辑 Spec 提示词规范</h3>
      <button onclick="document.getElementById('specEditorDialog').close()" style="background: none; border: 1px solid var(--line); padding: 5px 14px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12px;">关闭</button>
    </div>
    <div style="padding: 20px;">
      <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
        <span style="font-size: 13.5px; font-weight: 700; color: var(--ink);">选择提示词文件:</span>
        <select id="specFileSelect" onchange="loadSpecFileContent()" style="padding: 6px 12px; border-radius: 8px; border: 1px solid #d1d5db; outline: none; min-width: 320px; font-family: monospace; font-size: 13px; font-weight: 600;">
          <!-- Spec files options will be populated -->
        </select>
        <span id="specLoadStatus" style="font-size: 13px; font-weight: 600;"></span>
      </div>
      <div style="position: relative; margin-bottom: 20px;">
        <textarea id="specContentTextarea" style="width: 100%; height: 500px; font-family: ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; line-height: 1.55; padding: 14px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; outline: none; background: #fafaf9; color: #1f2937; resize: vertical; border-left: 4px solid var(--cyan); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);"></textarea>
      </div>
      <div style="display: flex; justify-content: flex-end; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 16px;">
        <span id="specSaveStatus" style="font-size: 13.5px; font-weight: 700; margin-right: auto;"></span>
        <button onclick="document.getElementById('specEditorDialog').close()" class="btn" style="background: #f3f4f6; height: 38px; padding: 0 18px; border-radius: 8px; font-weight: 600;">取消</button>
        <button onclick="saveSpecFileContent()" class="btn" style="background: var(--mint); color: #fff; border-color: var(--mint); font-weight: bold; height: 38px; padding: 0 20px; border-radius: 8px; box-shadow: var(--shadow);">💾 保存修改</button>
      </div>
    </div>
  </dialog>

  <script>
    let DATA = { queries: [], actions: [], types: [], matrix: [] }, st = { form: 'A', lens: '工序', tools: [], tier: 0, qi: 0, fi: 0, channel: "all", matrixView: 'full' }, VIEW = [];
    let currentProcTask = null;
    let procPollInterval = null;
    let isLogViewActive = false;
    let reevalPollIntervals = {};

    function startReevalPolling(q) {
      if (reevalPollIntervals[q]) return;
      const btn = document.getElementById('reevalBtn');
      
      const poll = () => {
        fetch(`/api/reeval_status?q=${q}`)
          .then(r => r.json())
          .then(d => {
            const isCurrent = DATA.queries[st.qi] && DATA.queries[st.qi].key === q;
            if (d.status === "success") {
              clearInterval(reevalPollIntervals[q]);
              delete reevalPollIntervals[q];
              if (isCurrent) {
                btn.disabled = false;
                btn.textContent = '♻️ 重评当前 query';
              }
              // Mark local status as finished
              if (DATA.active_reevals) {
                delete DATA.active_reevals[q];
              }
              loadData(true);
              alert(`Query ${q} 重评完成！已自动重新扫描并更新数据。`);
            } else if (d.status === "failed") {
              clearInterval(reevalPollIntervals[q]);
              delete reevalPollIntervals[q];
              if (isCurrent) {
                btn.disabled = false;
                btn.textContent = '♻️ 重评当前 query';
              }
              if (DATA.active_reevals) {
                delete DATA.active_reevals[q];
              }
              alert(`Query ${q} 重评失败：${d.error}`);
            } else if (d.status === "running") {
              if (isCurrent) {
                btn.disabled = true;
                btn.textContent = `♻️ 重评中 ${q}...`;
              }
            }
          })
          .catch(err => console.error("Poll error:", err));
      };
      
      poll();
      reevalPollIntervals[q] = setInterval(poll, 3000);
    }

    // Spec Prompt Editor Functions
    const ALLOWED_SPEC_FILES = [
      "README.md",
      "tools.md",
      "extraction/phase1-skeleton.md",
      "extraction/phase2-normalize.md",
      "extraction/phase3-finalize.md",
      "taxonomy/type_suggestions.md"
    ];

    function openSpecEditor() {
      const select = document.getElementById("specFileSelect");
      select.innerHTML = ALLOWED_SPEC_FILES.map(f => `<option value="${esc(f)}">${esc(f)}</option>`).join("");
      
      document.getElementById("specLoadStatus").textContent = "";
      document.getElementById("specSaveStatus").textContent = "";
      document.getElementById("specContentTextarea").value = "";
      
      const dialog = document.getElementById("specEditorDialog");
      dialog.showModal();
      loadSpecFileContent();
    }

    function loadSpecFileContent() {
      const file = document.getElementById("specFileSelect").value;
      const status = document.getElementById("specLoadStatus");
      const textarea = document.getElementById("specContentTextarea");
      
      status.textContent = "⏳ 正在读取...";
      status.style.color = "var(--amber)";
      textarea.disabled = true;
      
      fetch(`/api/spec_content?file=${encodeURIComponent(file)}`)
        .then(r => r.json().then(d => ({ ok: r.ok, d })))
        .then(({ ok, d }) => {
          textarea.disabled = false;
          if (ok) {
            textarea.value = d.content || "";
            status.textContent = "✓ 读取成功";
            status.style.color = "var(--mint)";
          } else {
            status.textContent = "❌ 读取失败: " + (d.error || "未知错误");
            status.style.color = "var(--rose)";
          }
        })
        .catch(err => {
          textarea.disabled = false;
          status.textContent = "❌ 读取失败: " + err;
          status.style.color = "var(--rose)";
        });
    }

    function saveSpecFileContent() {
      const file = document.getElementById("specFileSelect").value;
      const content = document.getElementById("specContentTextarea").value;
      const status = document.getElementById("specSaveStatus");
      
      status.textContent = "⏳ 正在保存到磁盘...";
      status.style.color = "var(--amber)";
      
      fetch("/api/save_spec", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ file, content })
      })
      .then(r => r.json().then(d => ({ ok: r.ok, d })))
      .then(({ ok, d }) => {
        if (ok) {
          status.textContent = "✅ 保存成功！新的 Prompt 规则已在本地生效。";
          status.style.color = "var(--mint)";
          setTimeout(() => {
            if (status.textContent.includes("保存成功")) {
              status.textContent = "";
            }
          }, 4000);
        } else {
          status.textContent = "❌ 保存失败: " + (d.error || "未知错误");
          status.style.color = "var(--rose)";
        }
      })
      .catch(err => {
        status.textContent = "❌ 网络错误: " + err;
        status.style.color = "var(--rose)";
      });
    }

    function esc(s) { return (s === undefined || s === null ? "" : String(s)).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

    const ACTIONS = [{ "name": "检索", "l1": "获取", "l2": "搜索" }, { "name": "下载", "l1": "获取", "l2": "搜索" }, { "name": "调取", "l1": "获取", "l2": "查询" }, { "name": "上传", "l1": "获取", "l2": "录入" }, { "name": "拍摄", "l1": "获取", "l2": "录入" }, { "name": "录音", "l1": "获取", "l2": "录入" }, { "name": "键入", "l1": "获取", "l2": "录入" }, { "name": "选取", "l1": "获取", "l2": "引用" }, { "name": "裁切", "l1": "提取", "l2": "物理提取" }, { "name": "抠取", "l1": "提取", "l2": "物理提取" }, { "name": "抽帧", "l1": "提取", "l2": "物理提取" }, { "name": "识别", "l1": "提取", "l2": "化学提取" }, { "name": "反推", "l1": "提取", "l2": "化学提取" }, { "name": "解构", "l1": "提取", "l2": "化学提取" }, { "name": "元素生成", "l1": "生成", "l2": "元素生成" }, { "name": "数组生成", "l1": "生成", "l2": "关系生成" }, { "name": "结构生成", "l1": "生成", "l2": "关系生成" }, { "name": "添加", "l1": "修改", "l2": "增" }, { "name": "叠加", "l1": "修改", "l2": "增" }, { "name": "抹除", "l1": "修改", "l2": "删" }, { "name": "剪除", "l1": "修改", "l2": "删" }, { "name": "重述", "l1": "修改", "l2": "变" }, { "name": "风格化", "l1": "修改", "l2": "变" }, { "name": "转换", "l1": "修改", "l2": "变" }, { "name": "替换", "l1": "修改", "l2": "变" }, { "name": "调整", "l1": "修改", "l2": "变" }, { "name": "增强", "l1": "修改", "l2": "变" }];
    const TYPES = [{ "name": "提示词", "l1": "程序控制类型", "l2": "指令" }, { "name": "负向提示词", "l1": "程序控制类型", "l2": "指令" }, { "name": "描述", "l1": "程序控制类型", "l2": "指令" }, { "name": "生成参数", "l1": "程序控制类型", "l2": "参数" }, { "name": "规格参数", "l1": "程序控制类型", "l2": "参数" }, { "name": "模型权重", "l1": "程序控制类型", "l2": "参数" }, { "name": "评分", "l1": "程序控制类型", "l2": "评估" }, { "name": "评语", "l1": "程序控制类型", "l2": "评估" }, { "name": "工作流", "l1": "程序控制类型", "l2": "流程" }, { "name": "批处理", "l1": "程序控制类型", "l2": "流程" }, { "name": "数字人", "l1": "数据复用类型", "l2": "原子" }, { "name": "版式", "l1": "数据复用类型", "l2": "原子" }, { "name": "模板", "l1": "数据复用类型", "l2": "序列" }, { "name": "参考图", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "参考视频", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "参考音频", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "对标内容", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "分镜图", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "转场", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "蒙版", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "控制图", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "运动轨迹", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "滤镜", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "构图布局", "l1": "内容类型", "l2": "素材/化学变化" }, { "name": "截图", "l1": "内容类型", "l2": "素材/物理变化" }, { "name": "视频片段", "l1": "内容类型", "l2": "素材/物理变化" }, { "name": "转场片段", "l1": "内容类型", "l2": "素材/物理变化" }, { "name": "关键帧", "l1": "内容类型", "l2": "素材/物理变化" }, { "name": "音效", "l1": "内容类型", "l2": "素材/物理变化" }, { "name": "特效", "l1": "内容类型", "l2": "素材/物理变化" }, { "name": "大纲", "l1": "内容类型", "l2": "半成品/序列" }, { "name": "脚本", "l1": "内容类型", "l2": "半成品/序列" }, { "name": "分镜脚本", "l1": "内容类型", "l2": "半成品/序列" }, { "name": "剪辑脚本", "l1": "内容类型", "l2": "半成品/序列" }, { "name": "配音文案", "l1": "内容类型", "l2": "半成品/序列" }, { "name": "底图", "l1": "内容类型", "l2": "半成品/原子" }, { "name": "样图", "l1": "内容类型", "l2": "半成品/原子" }, { "name": "分镜视频", "l1": "内容类型", "l2": "半成品/原子" }, { "name": "图层组合", "l1": "内容类型", "l2": "半成品/组合" }, { "name": "拼图", "l1": "内容类型", "l2": "半成品/组合" }, { "name": "歌词", "l1": "内容类型", "l2": "准成品" }, { "name": "配音", "l1": "内容类型", "l2": "准成品" }, { "name": "BGM", "l1": "内容类型", "l2": "准成品" }, { "name": "字幕", "l1": "内容类型", "l2": "准成品" }, { "name": "标题", "l1": "内容类型", "l2": "准成品" }, { "name": "正文", "l1": "内容类型", "l2": "准成品" }, { "name": "成品图", "l1": "内容类型", "l2": "成品" }, { "name": "视频成品", "l1": "内容类型", "l2": "成品" }, { "name": "合成图", "l1": "内容类型", "l2": "成品" }, { "name": "知识库", "l1": "知识类型", "l2": "知识库" }];
    const POOLS = { "action_leaves": { "检索": ["找", "搜", "哪里找", "在哪找", "搜索"], "下载": ["下载", "怎么下载", "获取", "导入"], "调取": ["复用", "调用", "套用", "加载"], "上传": ["上传", "导入", "怎么导入", "用自己的"], "拍摄": ["拍", "拍摄", "录制", "录屏", "怎么拍"], "录音": ["录音", "录", "怎么录", "录制"], "键入": ["写", "输入", "怎么写", "编写"], "选取": ["挑选", "怎么选", "筛选", "选"], "裁切": ["裁剪", "截取", "怎么裁", "切片"], "抠取": ["抠图", "抠", "分割", "怎么抠"], "抽帧": ["抽帧", "提取帧", "怎么抽帧", "导出帧"], "识别": ["识别", "检测", "OCR", "提取文字", "转录"], "反推": ["反推", "分析", "推断", "怎么反推"], "解构": ["拆解", "解构", "分析结构"], "元素生成": ["生成", "制作", "怎么做", "做", "创作"], "数组生成": ["批量生成", "生成多张", "怎么批量", "批量做"], "结构生成": ["生成", "搭建", "怎么生成", "构建"], "添加": ["添加", "加", "怎么加", "加上"], "叠加": ["叠加", "合成", "叠", "加"], "抹除": ["去除", "去掉", "怎么去掉", "抹除", "消除"], "剪除": ["剪掉", "删掉", "怎么剪", "截短"], "重述": ["改写", "润色", "怎么改", "重写"], "风格化": ["风格化", "转风格", "风格迁移", "怎么转风格"], "转换": ["转换", "转", "怎么转", "转格式"], "替换": ["替换", "换", "怎么换", "替换成"], "调整": ["调整", "调", "怎么调", "优化"], "增强": ["增强", "提升画质", "怎么增强", "修复", "超分"] }, "types": { "提示词": ["提示词", "prompt", "咒语"], "负向提示词": ["负向提示词", "反向提示词", "negative prompt"], "描述": ["描述", "描述词", "提示描述"], "生成参数": ["参数", "出图参数", "生成参数", "seed"], "规格参数": ["尺寸", "分辨率", "画幅", "规格"], "模型权重": ["模型", "LoRA", "底模", "checkpoint"], "评分": ["评分", "打分", "评级"], "评语": ["评语", "点评", "反馈", "修改意见"], "工作流": ["工作流", "workflow", "流程图", "节点"], "批处理": ["批处理", "批量", "batch"], "数字人": ["数字人", "虚拟人", "数字分身", "AI分身"], "版式": ["版式", "排版", "版面", "layout"], "模板": ["模板", "template", "套版"], "参考图": ["参考图", "参考", "垫图", "ref"], "参考视频": ["参考视频", "参考片", "参考素材"], "参考音频": ["参考音频", "参考音色", "音色样本"], "对标内容": ["对标", "爆款参考", "竞品", "标杆案例"], "分镜图": ["分镜图", "分镜", "故事板", "storyboard"], "转场": ["转场", "转场效果", "transition"], "蒙版": ["蒙版", "抠像", "遮罩", "mask"], "控制图": ["控制图", "ControlNet", "结构图", "线稿"], "运动轨迹": ["运镜", "运动轨迹", "运动笔刷", "motion brush"], "滤镜": ["滤镜", "filter", "调色", "LUT"], "构图布局": ["构图", "布局", "构图布局"], "截图": ["截图", "屏幕截图", "截屏"], "视频片段": ["视频片段", "片段", "素材", "clip"], "转场片段": ["转场片段", "转场素材"], "关键帧": ["关键帧", "帧", "视频帧"], "音效": ["音效", "声音", "SFX", "音效素材"], "特效": ["特效", "视频特效", "VFX", "effect"], "大纲": ["大纲", "内容大纲", "提纲"], "脚本": ["脚本", "文案脚本", "剧本"], "分镜脚本": ["分镜脚本", "分镜表", "分镜"], "剪辑脚本": ["剪辑脚本", "剪辑表", "卡点表", "时间轴"], "配音文案": ["配音文案", "口播文案", "旁白文案"], "底图": ["底图", "背景图", "打底图"], "样图": ["样图", "效果图", "候选图", "draft"], "分镜视频": ["分镜视频", "分镜片段"], "图层组合": ["图层组合", "图层", "图层合成"], "拼图": ["拼图", "九宫格", "长图", "对比图"], "歌词": ["歌词", "词", "lyrics"], "配音": ["配音", "旁白", "解说", "人声"], "BGM": ["BGM", "背景音乐", "配乐"], "字幕": ["字幕", "视频字幕", "字幕条"], "标题": ["标题", "文案标题", "爆款标题"], "正文": ["正文", "文案", "内容正文"], "成品图": ["成品图", "出图", "图", "海报"], "视频成品": ["视频成品", "成片", "视频"], "合成图": ["合成图", "拼合图", "融合图", "合成"], "知识库": ["知识库", "资料库", "knowledge base"] }, "knowledge": { "工序": { "单步": ["教程", "流程", "步骤", "怎么做", "方法", "教学"], "全程": ["完整流程", "全流程", "pipeline", "SOP"] }, "能力": { "标记": ["一键", "自动", "直出", "秒出"], "达成": ["同款", "复刻", "效果"], "载体": ["提示词", "参数", "预设", "公式"] }, "工具": { "发现": ["用什么软件", "用什么工具", "工具推荐", "哪个好用", "有哪些工具"] } }, "tool_type": { "AI 模型": ["AI"], "桌面 APP": ["软件", "电脑端"], "云端 Web": ["在线", "网页版"], "API·CLI": ["代码", "命令行"], "插件扩展": ["插件"] } };
    const TOOL_TYPES = ["AI 模型", "桌面 APP", "云端 Web", "API·CLI", "插件扩展"];
    const GMODEL = "gemini-3.1-flash-lite";
    const AL = POOLS.action_leaves, TP = POOLS.types, KN = POOLS.knowledge, TQ = POOLS.tool_type;
    function aPool(a) { return AL[a] || [a]; }
    function tPool(t) { return TP[t] || [t]; }
    function pick(arr, i) { return arr[Math.min(i, arr.length - 1)]; }
    function toolPrefix(lens) { return (st.tools.length && lens !== '工具') ? st.tools.map(t => TQ[t][0]).join('/') + ' ' : ''; }

    function genForms(leaf, ty, lens, tq) {
      tq = tq || ''; const aP = aPool(leaf), tP = tPool(ty);
      const aNat = aP[0], tNat = tP[0], aSyn = pick(aP, 1), tSyn = pick(tP, 1), K = KN[lens];
      if (lens === '工序') {
        const s = K['单步'];
        return [['①原词', `${tq}${leaf} ${ty} 流程`], ['②句子', `${tq}怎么${aNat}${tNat}`], ['③同义', `${tq}${aSyn} ${tSyn} ${pick(s, 2)}`]];
      }
      if (lens === '能力') {
        const mk = K['标记'];
        return [['①原词', `${tq}${leaf} ${ty} 技巧`], ['②句子', `${tq}有没有能${mk[0]}${aNat}${tNat}的功能`], ['③同义', `${tq}${pick(mk, 1)} ${aSyn}${tSyn}`]];
      }
      const fd = K['发现'];
      return [['①原词', `${leaf} ${ty} 工具`], ['②句子', `${aNat}${tNat}用什么软件好`], ['③同义', `${aSyn} ${tSyn} ${pick(fd, 2)}`]];
    }
    const FIDX = { A: 0, B: 1, C: 2 };
    function genQ(leaf, ty) { return genForms(leaf, ty, st.lens, toolPrefix(st.lens))[FIDX[st.form]][1]; }
    // 兼容老版 1-5 维度的英文和中文对应标签
    const commonLabels = { relevance: "相关性", result_quality: "成品质量", credibility: "可信度", novelty_coverage: "新增覆盖", concrete_use_case: "具体用例", completeness: "流程完整", step_structure: "步骤结构", step_reproducibility: "可复现性", capability_definition: "能力定义", implementation_depth: "实现深度", boundary_failure_eval: "边界/踩坑", generality: "通用性", capability_coverage: "工具覆盖", effective_comparison: "有效对比", param_specificity: "参数具体", worked_example: "示例完整", version_limits: "限制说明" };
    const filterLabels = { production_relevance: "制作相关性", recency_hard: "发布时效", overall: "综合均分" };
    const filterMax = { production_relevance: 3, recency_hard: 3, overall: 5 };
    
    // 新版 0-10 分数维度的中文标签
    const newLabels = {
      relevance_production: "和内容制作知识相关",
      relevance_query: "和 query 相关",
      recency: "时效性",
      popularity: "热度性",
      feedback: "评论反馈",
      realism: "真实感 (非AI)",
      expressiveness: "表现力",
      procedure_completeness: "流程完整性",
      procedure_input: "输入完整性",
      procedure_implementation: "实现完整性",
      procedure_output: "输出完整性",
      procedure_generality: "泛化性",
      step_input: "输入完整性",
      step_implementation: "实现完整性",
      step_output: "输出完整性",
      step_generality: "泛化性",
      tool_boundary: "能力边界覆盖",
      tool_comparison: "有效比较",
      tool_specificity: "参数/接口具体性",
      tool_example: "实操示例",
      tool_limits: "版本&限制"
    };

    const scoreGroupsOld = [
      { id: "filter", title: "过滤指标", short: "过滤", hint: "独立于通用维度·过滤逻辑待定", topLevelKeys: ["production_relevance", "recency_hard", "overall"] },
      { id: "common", title: "通用维度", short: "通用", keys: ["relevance", "result_quality", "credibility", "novelty_coverage", "concrete_use_case"] },
      { id: "procedure", title: "工序维度", short: "工序", keys: ["completeness", "step_structure", "step_reproducibility"] },
      { id: "step", title: "步骤维度", short: "步骤", keys: ["capability_definition", "implementation_depth", "boundary_failure_eval", "generality"] },
      { id: "tool", title: "工具维度", short: "工具", keys: ["capability_coverage", "effective_comparison", "param_specificity", "worked_example", "version_limits"] }
    ];

    const scoreGroupsNew = [
      { id: "relevance", title: "相关性", short: "相关", keys: ["relevance_production", "relevance_query"] },
      { id: "fixed", title: "固定维度", short: "固定", keys: ["recency", "popularity", "feedback"] },
      { id: "usecase", title: "用例维度", short: "用例", keys: ["realism", "expressiveness"] },
      { id: "dynamic", title: "动态维度", short: "动态", keys: [] }
    ];

    function makeRow(label, scoreKey, it) {
      const rawV = it.scores[scoreKey];
      const v = (rawV !== undefined && rawV !== null) ? parseFloat(rawV) : NaN;
      const hasScore = !isNaN(v);
      const valStr = hasScore ? (Number.isInteger(v) ? v : v.toFixed(1)) : '-';
      const barV = hasScore ? v : 0;
      const reason = it.score_reasons ? it.score_reasons[scoreKey] : '';
      const infoIcon = reason ? `<span class="info-icon" onclick="pinScoreReason(this, '${esc(label)}', '${esc(scoreKey)}')" title="点击定格查看评判理由" style="margin-left: 5px; cursor: pointer; color: var(--muted); opacity: 0.7; font-size: 13px; font-weight: normal; user-select: none;">ⓘ</span>` : '';
      return `
        <div class="sc-row ${!hasScore ? 'missing' : ''}">
          <span class="label">${esc(label)}</span>
          <div class="bar-wrap">
            <div class="bar">
              <div class="bar-fill" style="--v: ${barV}"></div>
            </div>
            <span class="value">${valStr}</span>
            ${infoIcon}
          </div>
        </div>
      `;
    }

    function getQualityAverage(it) {
      if (!it.scores) return null;
      const keys = ["recency", "popularity", "feedback", "realism", "expressiveness"];
      if (it.knowledge_type && (it.knowledge_type.includes("procedure") || it.knowledge_type.includes("工序"))) {
        keys.push("procedure_completeness", "procedure_input", "procedure_implementation", "procedure_output", "procedure_generality");
      }
      if (it.knowledge_type && (it.knowledge_type.includes("step") || it.knowledge_type.includes("能力") || it.knowledge_type.includes("步骤"))) {
        keys.push("step_input", "step_implementation", "step_output", "step_generality");
      }
      if (it.knowledge_type && (it.knowledge_type.includes("tool") || it.knowledge_type.includes("工具"))) {
        keys.push("tool_boundary", "tool_comparison", "tool_specificity", "tool_example", "tool_limits");
      }
      const vs = keys.map(k => parseFloat(it.scores[k])).filter(v => !isNaN(v));
      return vs.length ? vs.reduce((a, b) => a + b, 0) / vs.length : null;
    }

    function renderNewScores(it) {
      // 1. Relevance Card
      const relAvg = groupAverage(it, scoreGroupsNew[0], true);
      const relAvgStr = relAvg !== null ? relAvg.toFixed(1) : 'N/A';
      
      let relevanceHtml = `
        <div class="sc-card">
          <div class="sc-card-head">
            <div class="title"><span class="badge">01</span>相关性</div>
            <div class="avg-score">avg <strong>${relAvgStr}</strong><span style="font-size: 13px; color: #9ca3af; font-weight: 500;">/10</span></div>
          </div>
          <div class="sc-card-body">
            ${makeRow("和内容制作知识相关", "relevance_production", it)}
            ${makeRow("和 query 相关", "relevance_query", it)}
          </div>
        </div>
      `;

      // 2. Quality Card
      const qualAvg = getQualityAverage(it);
      const qualAvgStr = qualAvg !== null ? qualAvg.toFixed(1) : 'N/A';

      let qualityHtml = `
        <div class="sc-card">
          <div class="sc-card-head">
            <div class="title"><span class="badge">02</span>质量</div>
            <div class="avg-score">avg <strong>${qualAvgStr}</strong><span style="font-size: 13px; color: #9ca3af; font-weight: 500;">/10</span></div>
          </div>
          <div class="sc-card-body">
            <div class="sc-sub-header">固定维度</div>
            ${makeRow("时效性", "recency", it)}
            ${makeRow("热度性", "popularity", it)}
            ${makeRow("评论反馈", "feedback", it)}
            
            <div class="sc-sub-header">用例</div>
            ${makeRow("真实感 (非AI)", "realism", it)}
            ${makeRow("表现力", "expressiveness", it)}
      `;

      // Dynamic Dimensions
      let dynamicHtml = '';
      if (it.knowledge_type && (it.knowledge_type.includes("procedure") || it.knowledge_type.includes("工序"))) {
        dynamicHtml += `
          <div class="sc-sub-header">工序</div>
          ${makeRow("流程完整性", "procedure_completeness", it)}
          ${makeRow("输入完整性", "procedure_input", it)}
          ${makeRow("实现完整性", "procedure_implementation", it)}
          ${makeRow("输出完整性", "procedure_output", it)}
          ${makeRow("泛化性", "procedure_generality", it)}
        `;
      }
      if (it.knowledge_type && (it.knowledge_type.includes("step") || it.knowledge_type.includes("能力") || it.knowledge_type.includes("步骤"))) {
        dynamicHtml += `
          <div class="sc-sub-header">能力</div>
          ${makeRow("输入完整性", "step_input", it)}
          ${makeRow("实现完整性", "step_implementation", it)}
          ${makeRow("输出完整性", "step_output", it)}
          ${makeRow("泛化性", "step_generality", it)}
        `;
      }
      if (it.knowledge_type && (it.knowledge_type.includes("tool") || it.knowledge_type.includes("工具"))) {
        dynamicHtml += `
          <div class="sc-sub-header">工具</div>
          ${makeRow("能力边界覆盖", "tool_boundary", it)}
          ${makeRow("有效比较", "tool_comparison", it)}
          ${makeRow("参数/接口具体性", "tool_specificity", it)}
          ${makeRow("实操示例", "tool_example", it)}
          ${makeRow("版本&限制", "tool_limits", it)}
        `;
      }

      qualityHtml += dynamicHtml + `
          </div>
        </div>
      `;

      return relevanceHtml + qualityHtml;
    }

    function isItemDiscarded(it) {
      if (it.anomaly) return false;
      
      const input = document.getElementById("relThreshold");
      const userThreshold = input ? parseFloat(input.value) : NaN;
      
      const isNewSchema = it.scores && (it.scores.relevance_production !== undefined || it.scores.relevance_query !== undefined);
      
      let isDiscard = false;
      
      // 1. Relevance check
      const relVal = it.production_relevance !== null && it.production_relevance !== undefined ? parseFloat(it.production_relevance) : null;
      if (relVal !== null && !isNaN(relVal)) {
        const activeThreshold = !isNaN(userThreshold) ? userThreshold : (isNewSchema ? 4.0 : 2.0);
        if (relVal < activeThreshold) {
          isDiscard = true;
        }
      }
      
      // 2. Recency check
      if (it.recency_hard !== null && it.recency_hard !== undefined && it.recency_hard < 2) {
        isDiscard = true;
      }
      
      // 3. Overall average check
      if (it.overall !== null && it.overall !== undefined) {
        const threshold_ov = isNewSchema ? 6.0 : 3.0;
        if (it.overall < threshold_ov) {
          isDiscard = true;
        }
      }
      
      return isDiscard;
    }

    function updateThresholdLimits() {
      const f = curForm();
      const input = document.getElementById("relThreshold");
      if (!f || !f.results || f.results.length === 0 || !input) return;
      const isNew = f.results.some(r => r.scores && (r.scores.relevance_production !== undefined || r.scores.relevance_query !== undefined));
      const schemaKey = isNew ? "new" : "old";
      if (input.dataset.schema !== schemaKey) {
        input.dataset.schema = schemaKey;
        input.max = isNew ? "10" : "5";
        input.value = isNew ? "4.0" : "2.0";
        input.step = isNew ? "0.5" : "1";
      }
    }

    const PLATC = { xhs: "小红书", gzh: "公众号", zhihu: "知乎", x: "X", bili: "B站", douyin: "抖音", sph: "视频号", youtube: "YouTube", github: "GitHub", toutiao: "头条", weibo: "微博" };
    const FN = { A: "原词", B: "句子", C: "同义" };
    const NOIMG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect width='600' height='400' fill='%23eee7dc'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%236f6961' font-size='28'%3ENo image%3C/text%3E%3C/svg%3E";

    function curForm() { return st.qi === -1 ? null : (DATA.queries[st.qi] ? DATA.queries[st.qi].forms[st.fi] : null); }
    
    function groupAverage(it, g, isNewSchema) {
      if (!it.scores) return null;
      let keys = g.keys;
      if (isNewSchema && g.id === "dynamic") {
        keys = [];
        if (it.knowledge_type && (it.knowledge_type.includes("procedure") || it.knowledge_type.includes("工序"))) {
          keys.push("procedure_completeness", "procedure_input", "procedure_implementation", "procedure_output", "procedure_generality");
        }
        if (it.knowledge_type && (it.knowledge_type.includes("step") || it.knowledge_type.includes("能力") || it.knowledge_type.includes("步骤"))) {
          keys.push("step_input", "step_implementation", "step_output", "step_generality");
        }
        if (it.knowledge_type && (it.knowledge_type.includes("tool") || it.knowledge_type.includes("工具"))) {
          keys.push("tool_boundary", "tool_comparison", "tool_specificity", "tool_example", "tool_limits");
        }
      }
      const vs = keys.map(k => parseFloat(it.scores[k])).filter(v => !isNaN(v));
      return vs.length ? vs.reduce((a, b) => a + b, 0) / vs.length : null;
    }
    
    function fmt(v) { return v === null ? "N/A" : v.toFixed(1); }
    
    function groupSnapshot(it) {
      const isNewSchema = it.scores && (it.scores.relevance_production !== undefined || it.scores.relevance_query !== undefined);
      if (isNewSchema) {
        const relAvg = groupAverage(it, scoreGroupsNew[0], true);
        const qualAvg = getQualityAverage(it);
        return `
          <div class="group-pill"><span>相关</span><strong>${fmt(relAvg)}</strong></div>
          <div class="group-pill"><span>质量</span><strong>${fmt(qualAvg)}</strong></div>
        `;
      }
      const groups = scoreGroupsOld;
      return groups.map(g => {
        if (!isNewSchema && g.id === 'filter') {
          const pr = it.production_relevance, rh = it.recency_hard, ov = it.overall;
          const f = (v, max) => (v == null || !Number.isFinite(v)) ? '-' : (max === 5 ? (typeof v === 'number' ? v.toFixed(1) : v) : v);
          return `<div class="group-pill" title="${g.hint || ''}"><span>${g.short}</span><strong style="font-size:12px;">${f(pr, 3)}·${f(rh, 3)}·${f(ov, 5)}</strong></div>`;
        }
        const a = groupAverage(it, g, isNewSchema);
        return `<div class="group-pill"><span>${g.short}</span><strong>${fmt(a)}</strong></div>`;
      }).join("");
    }
    // filter 组：数据从 it 顶层、量程按 filterMax 归一化到 5 量程（meter 的 --v*20% 公式不动）
    function renderScoreGroup(it, g) {
      const isFilter = g.id === 'filter';
      const keys = g.topLevelKeys || g.keys;
      const src = isFilter ? it : it.scores;
      if (!src) return '';
      const labels = isFilter ? filterLabels : commonLabels;
      const rows = keys.map(k => {
        const v = src[k];
        const m = !Number.isFinite(v);
        const max = isFilter ? (filterMax[k] || 5) : 5;
        const meterV = m ? 0 : (v * 5 / max);
        const suffix = isFilter && max !== 5 ? `/${max}` : '';
        const valStr = m ? '-' : (typeof v === 'number' ? (Number.isInteger(v) ? v : v.toFixed(1)) : v);

        const reason = (it.score_reasons) ? it.score_reasons[k] : '';
        const infoIcon = reason ? `<span class="info-icon" onclick="pinScoreReason(this, '${esc(labels[k] || k)}', '${esc(k)}')" title="点击定格查看评判理由" style="margin-left: 5px; cursor: pointer; color: var(--muted); opacity: 0.7; font-size: 11px; font-weight: normal; user-select: none;">ⓘ</span>` : '';

        return `<div class="score-row ${m ? 'missing' : ''}"><span>${labels[k] || k}</span><div class="meter" style="--v:${meterV}"><span></span></div><strong style="display: inline-flex; align-items: center;">${valStr}${suffix}${infoIcon}</strong></div>`;
      }).join("");
      const headRight = isFilter ? (g.hint ? `<small>${g.hint}</small>` : '') : `<small>均分 ${fmt(groupAverage(it, g))}</small>`;
      return `<section class="score-group"><div class="score-group-head"><span>${g.title}</span>${headRight}</div><div class="score-group-body">${rows}</div></section>`;
    }
    function curDims() {
      if (st.qi === -1) { if (openCell) { const ai = +openCell.dataset.ai, ti = +openCell.dataset.ti; return { type: TYPES[ti].name, action: ACTIONS[ai].name }; } return {}; }
      const q = DATA.queries[st.qi]; return (q && q.dims) ? q.dims : {};
    }
    function spans(arr, key) { const o = []; let cur = null, s = 0; arr.forEach((x, i) => { if (x[key] !== cur) { if (cur !== null) o.push([cur, s, i - s]); cur = x[key]; s = i; } }); o.push([cur, s, arr.length - s]); return o; }
    const l1sp = spans(ACTIONS, 'l1'), l2sp = spans(ACTIONS, 'l2');
    const l1Start = new Set(l1sp.map(s => s[1])), l2Start = new Set(l2sp.map(s => s[1]));
    function detectLens(q) {
      const text = (q.original_q || (q.forms && q.forms[0] && q.forms[0].query) || "").toLowerCase();
      if (/流程|步骤|教程|方法|教学|SOP|pipeline|工序/.test(text)) return '工序';
      if (/一键|自动|直出|秒出|同款|复刻|效果|技巧|能力/.test(text)) return '能力';
      if (/用什么|软件|工具|推荐|哪个好用|有哪些/.test(text)) return '工具';
      return '工序';
    }

    function findQuery(aName, tName, lens, tool) {
      const matches = DATA.queries.filter(q => {
        if (!q.dims || q.dims.action !== aName || q.dims.type !== tName) return false;
        const qLens = detectLens(q);
        if (qLens !== lens) return false;
        
        const hasToolConstraint = q.dims.constraint && q.dims.constraint.kind === "工具类型";
        if (tool) {
          if (!hasToolConstraint || q.dims.constraint.value !== tool) return false;
        }
        return true;
      });
      if (matches.length > 0) {
        matches.sort((x, y) => {
          if (!tool) {
            const hasX = x.dims.constraint && x.dims.constraint.kind === "工具类型";
            const hasY = y.dims.constraint && y.dims.constraint.kind === "工具类型";
            if (hasX !== hasY) return hasX ? 1 : -1;
          }
          return (y.hits || 0) - (x.hits || 0);
        });
        return matches[0];
      }
      return null;
    }

    function selectQueryByActiveCellAndControls(aName, tName) {
      const activeTool = st.tools[0] || null;
      let match = findQuery(aName, tName, st.lens, activeTool);
      
      const isProcedureView = st.matrixView === 'procedures';
      const isHitsView = st.matrixView === 'hits';
      const hasContent = q => {
        if (isProcedureView) return getFormProcedureCount(q) > 0;
        if (isHitsView) return getFormReportCount(q) > 0;
        return q.hits > 0;
      };

      if (match) {
        st.qi = DATA.queries.indexOf(match);
        const fi = match.forms.findIndex(f => f.form === st.form);
        st.fi = fi >= 0 ? fi : 0;
        st.selectedAction = aName;
        st.selectedType = tName;
      } else {
        // Fallback: search for any query matching active lens & tool constraint with hits
        const matches = DATA.queries.filter(q => {
          if (!q.dims || !q.dims.action || !q.dims.type) return false;
          const qLens = detectLens(q);
          if (qLens !== st.lens) return false;
          
          const hasToolConstraint = q.dims.constraint && q.dims.constraint.kind === "工具类型";
          if (activeTool) {
            if (!hasToolConstraint || q.dims.constraint.value !== activeTool) return false;
          } else {
            if (hasToolConstraint) return false;
          }
          return hasContent(q);
        });

        if (matches.length > 0) {
          matches.sort((x, y) => {
            if (!activeTool) {
              const hasX = x.dims.constraint && x.dims.constraint.kind === "工具类型";
              const hasY = y.dims.constraint && y.dims.constraint.kind === "工具类型";
              if (hasX !== hasY) return hasX ? 1 : -1;
            }
            const countX = isProcedureView ? getFormProcedureCount(x) : (isHitsView ? getFormReportCount(x) : x.hits);
            const countY = isProcedureView ? getFormProcedureCount(y) : (isHitsView ? getFormReportCount(y) : y.hits);
            return countY - countX;
          });
          const anyMatch = matches[0];
          st.qi = DATA.queries.indexOf(anyMatch);
          const fi = anyMatch.forms.findIndex(f => f.form === st.form);
          st.fi = fi >= 0 ? fi : 0;
          st.selectedAction = anyMatch.dims.action;
          st.selectedType = anyMatch.dims.type;
        } else {
          st.qi = -1;
          st.fi = 0;
        }
      }
    }

    function getFormReportCount(q) {
      const f = q.forms && q.forms.find(x => x.form === st.form);
      if (!f || !f.results) return 0;
      return f.results.filter(r => !r.anomaly && !isItemDiscarded(r)).length;
    }
    function getFormProcedureCount(q) {
      const f = q.forms && q.forms.find(x => x.form === st.form);
      if (!f || !f.results) return 0;
      return f.results.filter(r => !r.anomaly && !isItemDiscarded(r) && r.procedure_html).length;
    }
    function getFilteredHitsMap() {
      const cm = {};
      const activeTool = st.tools[0] || null;
      const isProcedureView = st.matrixView === 'procedures';
      DATA.queries.forEach((q, i) => {
        const d = q.dims;
        if (!d || !d.type || !d.action) return;

        // Filter by lens
        if (detectLens(q) !== st.lens) return;

        // Filter by active tool constraint
        const hasToolConstraint = d.constraint && d.constraint.kind === "工具类型";
        if (activeTool) {
          if (!hasToolConstraint || d.constraint.value !== activeTool) return;
        } else {
          if (hasToolConstraint) return;
        }

        const k = d.type + '|' + d.action;
        const h = isProcedureView ? getFormProcedureCount(q) : getFormReportCount(q);
        if (!cm[k] || h > cm[k].hits) {
          cm[k] = { i, hits: h };
        }
      });
      return cm;
    }

    function renderMatrix() {
      const viewMode = st.matrixView || 'full';
      const showFull = viewMode === 'full';
      const cm = getFilteredHitsMap();

      const activeActions = showFull ? ACTIONS : ACTIONS.filter(a => TYPES.some(t => {
        const c = cm[t.name + '|' + a.name];
        return c && c.hits > 0;
      }));
      const activeTypes = showFull ? TYPES : TYPES.filter(t => ACTIONS.some(a => {
        const c = cm[t.name + '|' + a.name];
        return c && c.hits > 0;
      }));

      const displayActions = activeActions.length ? activeActions : ACTIONS;
      const displayTypes = activeTypes.length ? activeTypes : TYPES;

      const l1sp = spans(displayActions, 'l1'), l2sp = spans(displayActions, 'l2');
      const l1Start = new Set(l1sp.map(s => s[1])), l2Start = new Set(l2sp.map(s => s[1]));

      let h = '<thead><tr class="l1"><th class="corner" rowspan="3">类型 ＼ 动作</th>' + l1sp.map(([v, s, c]) => `<th colspan="${c}" class="l1div">${v}</th>`).join('') + '</tr>';
      h += '<tr class="l2">' + l2sp.map(([v, s, c]) => `<th colspan="${c}" class="${l1Start.has(s) ? 'l1div' : 'l2div'}">${v}</th>`).join('') + '</tr>';
      h += '<tr class="leaf">' + displayActions.map((a, i) => `<th data-ai="${ACTIONS.indexOf(a)}" class="${l1Start.has(i) ? 'l1div' : (l2Start.has(i) ? 'l2div' : '')}">${a.name}</th>`).join('') + '</tr></thead><tbody>';

      const typeCategories = ['程序控制类型', '数据复用类型', '内容类型', '知识类型'];
      typeCategories.forEach(l1 => {
        const catTypes = displayTypes.filter(t => t.l1 === l1);
        if (catTypes.length === 0) return;
        h += `<tr class="l1row"><td colspan="${displayActions.length + 1}">${l1}</td></tr>`;
        catTypes.forEach((t) => {
          h += `<tr data-type="${t.name}"><th class="rh" data-ti="${TYPES.indexOf(t)}">${t.name}</th>` + displayActions.map((a) => {
            const ai = ACTIONS.indexOf(a);
            const ti = TYPES.indexOf(t);
            const cell = (DATA.matrix && DATA.matrix[ai]) ? (DATA.matrix[ai][ti] || {}) : {};
            const s = cell.tier !== undefined ? cell.tier : cell.s;
            const cls = (s === null || s === undefined) ? 'tNA' : ('t' + s);
            const isSel = (st.selectedAction === a.name && st.selectedType === t.name) ? ' sel' : '';
            return `<td class="cell ${cls}${isSel}" data-ai="${ai}" data-ti="${ti}"></td>`;
          }).join('') + '</tr>';
        });
      });
      document.getElementById('comboMx').innerHTML = h + '</tbody>';
      refresh();
      applyCrosshair();
    }

    // 点中 cell 时浅高亮整行整列（含 row/col 表头），方便定位
    function applyCrosshair() {
      document.querySelectorAll('.rowsel,.colsel').forEach(el => el.classList.remove('rowsel', 'colsel'));
      const ai = st.selectedAction ? ACTIONS.findIndex(a => a.name === st.selectedAction) : -1;
      const ti = st.selectedType ? TYPES.findIndex(t => t.name === st.selectedType) : -1;
      if (ai < 0 && ti < 0) return;
      document.querySelectorAll(`#comboMx [data-ai="${ai}"]`).forEach(el => el.classList.add('colsel'));
      document.querySelectorAll(`#comboMx [data-ti="${ti}"]`).forEach(el => el.classList.add('rowsel'));
    }

    function refresh() {
      const cm = getFilteredHitsMap();

      document.querySelectorAll('tr[data-type]').forEach(tr => {
        const ty = tr.dataset.type;
        tr.querySelectorAll('td.cell').forEach(td => {
          const ai = +td.dataset.ai, ti = +td.dataset.ti, a = ACTIONS[ai];
          const cell = (DATA.matrix && DATA.matrix[ai]) ? (DATA.matrix[ai][ti] || {}) : {};
          const s = cell.tier !== undefined ? cell.tier : cell.s;
          const c = cm[ty + '|' + a.name];
          const hits = c ? c.hits : 0;

          td.textContent = genQ(a.name, ty);
          if (hits > 0) {
            const badge = document.createElement('span');
            badge.className = 'hit-badge';
            badge.textContent = hits;
            td.appendChild(badge);
          }

          td.classList.toggle('hide', (s == null ? 0 : s) < (+st.tier));
          const hitsLabel = st.matrixView === 'procedures' ? '有工序' : '命中';
          td.title = `${ty} × ${a.name}\nGemini评分: ${(s === null || s === undefined) ? '未判' : ['无效', '低', '中', '高'][s]}\n当前 form(${st.form}) ${hitsLabel}: ${hits} 篇`;
        });
      });
    }

    const pop = document.getElementById('pop'); let openCell = null;
    function showPop(td, x, y) {
      openCell = td;
      const ai = +td.dataset.ai, ti = +td.dataset.ti, a = ACTIONS[ai], t = TYPES[ti];
      const cell = (DATA.matrix && DATA.matrix[ai]) ? (DATA.matrix[ai][ti] || {}) : {};
      const s = cell.tier !== undefined ? cell.tier : cell.s;
      const tn = (s == null) ? '未判' : ['无效', '低', '中', '高'][s], tb = (s == null) ? 'NA' : s;
      const gen = genForms(a.name, t.name, st.lens, toolPrefix(st.lens));

      // Find matching query in database for this cell
      const activeTool = st.tools[0] || null;
      const matches = DATA.queries.filter(q => {
        if (!q.dims || q.dims.action !== a.name || q.dims.type !== t.name) return false;
        const qLens = detectLens(q);
        if (qLens !== st.lens) return false;
        const hasToolConstraint = q.dims.constraint && q.dims.constraint.kind === "工具类型";
        if (activeTool) {
          if (!hasToolConstraint || q.dims.constraint.value !== activeTool) return false;
        } else {
          if (hasToolConstraint) return false;
        }
        return true;
      });

      let dbQuery = null;
      if (matches.length > 0) {
        matches.sort((x, y) => (y.hits || 0) - (x.hits || 0));
        dbQuery = matches[0];
      }

      const dbFormMap = {};
      if (dbQuery) {
        dbQuery.forms.forEach(f => {
          dbFormMap[f.form] = f.query;
        });
      }

      const formKeys = ['A', 'B', 'C'];
      let html = `<span class="close">×</span>
        <div class="pt">
          <span class="path a">${a.l1}›${a.l2}›${a.name}</span>
          <span class="path t">${t.l1}›${t.name}</span>
          <span class="path" style="background: var(--soft-amber); color: var(--amber); font-family: monospace; font-weight: bold; border: 1px solid rgba(184, 121, 24, 0.2);">${dbQuery ? dbQuery.key : '未匹配'}</span>
          <span class="tier tb${tb}">gemini·${tn}</span>
        </div>
        <div class="reason${s === 0 ? ' inv' : ''}">${esc(cell.r || '(模型未给该格评分)')}</div>
        <div class="lbl">系统生成 · 知识类型=${st.lens}${st.tools.length ? ' · 工具类型=' + st.tools.join('/') : ''}</div>
        <ul>` + gen.map(([fName, genQStr], idx) => {
        const formKey = formKeys[idx];
        const actualQ = dbFormMap[formKey];
        const isCurrent = formKey === st.form;
        let content = `<span class="fm">${fName}</span>${esc(genQStr)}`;
        if (actualQ) {
          if (actualQ !== genQStr) {
            content += `<div style="font-size: 13px; margin-top: 6px; color: #047857; font-weight: 600; font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; line-height: 1.45; background: #ecfdf5; border: 1px dashed #34d399; padding: 6px 10px; border-radius: 6px; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 4px; box-shadow: inset 0 1px 2px rgba(4, 120, 87, 0.04);">
                <span style="background: #10b981; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #fff; font-weight: bold; font-family: -apple-system, sans-serif; white-space: nowrap;">实际搜索</span>
                <span style="word-break: break-all; font-family: inherit;">${esc(actualQ)}</span>
              </div>`;
          } else {
            content += `<div style="font-size: 13px; margin-top: 6px; color: #374151; font-weight: 600; font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; line-height: 1.45; background: #f9fafb; border: 1px dashed #d1d5db; padding: 6px 10px; border-radius: 6px; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);">
                <span style="background: #9ca3af; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #fff; font-weight: bold; font-family: -apple-system, sans-serif; white-space: nowrap;">实际搜索</span>
                <span style="font-style: italic; font-family: inherit; color: #6b7280;">（同上）</span>
              </div>`;
          }
        }
        return `<li class="gen${isCurrent ? ' cur' : ''}" style="display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px;">${content}</li>`;
      }).join('') + '</ul>';

      pop.innerHTML = html;
      pop.style.display = 'block';
      pop.style.left = Math.max(8, Math.min(x, window.innerWidth - 466)) + 'px';
      pop.style.top = Math.max(8, Math.min(y, window.innerHeight - pop.offsetHeight - 12)) + 'px';
      pop.querySelector('.close').onclick = () => {
        pop.style.display = 'none';
        openCell = null;
      };
    }

    function computeStats() {
      const stat = { "0": 0, "1": 0, "2": 0, "3": 0, "na": 0 };
      if (DATA.matrix) {
        DATA.matrix.forEach(row => row.forEach(cell => {
          const s = cell ? (cell.tier !== undefined ? cell.tier : cell.s) : null;
          if (s === null || s === undefined) stat["na"]++;
          else if (stat[s] !== undefined) stat[s]++;
        }));
      }
      document.getElementById('s3').textContent = stat['3'];
      document.getElementById('s2').textContent = stat['2'];
      document.getElementById('s1').textContent = stat['1'];
      document.getElementById('s0').textContent = stat['0'];
      document.getElementById('sna').textContent = stat['na'];
    }

    function renderFormsChan() {
      const q = st.qi === -1 ? null : DATA.queries[st.qi];
      if (!q) {
        document.getElementById("navC").innerHTML = '';
        return;
      }
      const f = curForm();
      if (!f) {
        document.getElementById("navC").innerHTML = '';
        return;
      }
      
      const isProcedureView = st.matrixView === 'procedures';
      const resultsFilter = r => {
        if (isProcedureView) {
          return r.procedure_html && r.procedure_html !== "";
        }
        return true;
      };
      
      const filteredResults = f.results.filter(resultsFilter);
      const chans = ["all", ...f.platforms];
      document.getElementById("navC").innerHTML = chans.map(c => {
        const n = c === "all" ? filteredResults.length : filteredResults.filter(r => r.platformKey === c).length;
        return `<span class="tab ${c === st.channel ? 'on' : ''}" data-c="${c}">${c === "all" ? "全部" : (PLATC[c] || c)} <small>${n}</small></span>`;
      }).join("");
    }

    function renderNav() { renderMatrix(); renderFormsChan(); }

    function renderHead() {
      const f = curForm();
      if (!f) return;
      
      const q = DATA.queries[st.qi];
      if (q) {
        document.getElementById("lede").innerHTML = `当前选中 Query ID: <span style="font-family: monospace; font-weight: 700; background: var(--soft-amber); color: var(--amber); padding: 2px 8px; border-radius: 4px; font-size: 15px; border: 1px solid rgba(184, 121, 24, 0.2);">${esc(q.key)}</span> · 检索语句: <span style="font-weight: 600; color: var(--ink);">${esc(q.original_q)}</span>`;
      } else {
        document.getElementById("lede").textContent = "";
      }
      
      let it = f.results;
      if (st.matrixView === 'procedures') {
        it = it.filter(r => r.procedure_html && r.procedure_html !== "");
      }
      if (st.channel !== "all") it = it.filter(r => r.platformKey === st.channel);
      const valid = it.filter(r => !r.anomaly);
      const rep = valid.filter(r => !isItemDiscarded(r)).length;
      const dis = valid.filter(r => isItemDiscarded(r)).length;
      const anom = it.filter(r => r.anomaly).length;
      const avg = (valid.reduce((s, r) => s + r.overall, 0) / (valid.length || 1)).toFixed(1);
      const lab = st.channel === "all" ? "该形式结果数" : (PLATC[st.channel] || st.channel) + " 结果数";
      document.getElementById("stats").innerHTML = [[it.length, lab], [rep, "建议上报"], [avg, "平均综合分 / 5"], [dis, "丢弃"], [anom, "异常"]].map(([n, l]) => `<div class="stat"><strong>${n}</strong><span>${l}</span></div>`).join("");
    }

    // POST /api/reeval —— 后台只对当前 query 的所有 form 文件复评（不重新搜索）；
    // server.py 立即返回 {status:'started', pid, log}，前端开启轮询自动扫描刷新。
    function reevalCurrentQuery() {
      if (st.qi === -1 || !DATA.queries[st.qi]) { alert('请先选一个 query 再重评'); return; }
      const q = DATA.queries[st.qi].key;
      if (!confirm(`重评 ${q} 的所有帖子（A/B/C 三种 form）?\n约 1-3 分钟（视帖子数），过程中页面可继续浏览。\n完成后会自动重新扫描并更新页面。`)) return;
      const btn = document.getElementById('reevalBtn');
      btn.disabled = true; btn.textContent = '♻️ 提交中…';
      fetch('/api/reeval', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ q }),
      }).then(r => r.json().then(d => ({ ok: r.ok, d }))).then(({ ok, d }) => {
        if (ok && d.status === 'started') {
          if (!DATA.active_reevals) DATA.active_reevals = {};
          DATA.active_reevals[q] = "running";
          btn.textContent = `♻️ 重评中 ${q}...`;
          startReevalPolling(q);
        } else {
          btn.disabled = false; btn.textContent = '♻️ 重评当前 query';
          alert('启动失败：' + (d.error || JSON.stringify(d)));
        }
      }).catch(e => {
        btn.disabled = false; btn.textContent = '♻️ 重评当前 query';
        alert('请求失败：' + e);
      });
    }

    function sortedItems() {
      const f = curForm();
      if (!f) return [];
      let it = f.results.slice();
      if (st.matrixView === 'procedures') {
        it = it.filter(r => r.procedure_html && r.procedure_html !== "");
      }
      if (st.channel !== "all") it = it.filter(r => r.platformKey === st.channel);

      const s = document.getElementById("sort").value;
      const decWeight = r => (r.anomaly ? 2 : (isItemDiscarded(r) ? 1 : 0));

      it.sort((a, b) => {
        const wA = decWeight(a), wB = decWeight(b);
        if (wA !== wB) return wA - wB;
        if (s === "score") return b.overall - a.overall;
        if (s === "date") return (b.date || "").localeCompare(b.date || "");
        if (s === "platform") return (a.platform || "").localeCompare(b.platform || "", "zh-Hans") || b.overall - a.overall;
        return 0;
      });
      return it;
    }

    function renderGrid() {
      VIEW = sortedItems();
      document.getElementById("grid").innerHTML = VIEW.map((it, idx) => {
        const imgs = it.images.length ? it.images.slice(0, 3).map(s => `<img src="${esc(s)}" referrerpolicy="no-referrer" loading="lazy" onerror="this.src='${NOIMG}'">`).join("") : `<img src="${NOIMG}">`;
        
        const isNewSchema = it.scores && (it.scores.relevance_production !== undefined || it.scores.relevance_query !== undefined);
        let bars = "";
        if (isNewSchema) {
          const relAvg = groupAverage(it, scoreGroupsNew[0], true) || 0;
          const qualAvg = getQualityAverage(it) || 0;
          
          const newBars = [
            { label: "相关性评分 (均分)", v: relAvg },
            { label: "质量评分 (均分)", v: qualAvg }
          ];
          bars = newBars.map(b => {
            const w = b.v * 10;
            return `<span title="${esc(b.label)} ${b.v.toFixed(1)}"><span class="fill" style="width:${w}%; background: #2563eb;"></span></span>`;
          }).join("");
        } else {
          const oldKeys = ["relevance", "result_quality", "credibility", "novelty_coverage", "concrete_use_case"];
          bars = oldKeys.map(k => {
            const val = it.scores[k] !== undefined ? parseFloat(it.scores[k]) : 0;
            const w = val * 20;
            return `<span title="${esc(commonLabels[k] || k)} ${val}"><span class="fill" style="width:${w}%;"></span></span>`;
          }).join("");
        }
        
        const isDiscard = isItemDiscarded(it);
        let discardReason = it.reason || '未提供过滤原因';
        if (it.production_relevance !== null && it.production_relevance !== undefined) {
          const input = document.getElementById("relThreshold");
          const threshold = input ? parseFloat(input.value) : (isNewSchema ? 4.0 : 2.0);
          const relVal = parseFloat(it.production_relevance);
          if (!isNaN(relVal) && relVal < threshold) {
            discardReason = `相关性得分 (${relVal}) 低于过滤阈值 (${threshold})`;
          }
        }
        const discardOverlayHtml = isDiscard ? `
          <div class="discard-overlay">
            <div class="discard-badge">Discarded</div>
            <div class="discard-reason">${esc(discardReason)}</div>
          </div>
        ` : '';
        return `<article class="result ${isDiscard ? 'discard' : ''}">
          ${discardOverlayHtml}
          <div class="thumbs">${imgs}</div>
          <div class="body">
            <div class="meta"><span class="platform p-${esc(it.platformKey)}">${esc(it.platform)}</span><span>${esc(it.date)} · ${esc(it.engagement)}</span></div>
            <h2>${esc(it.title)}</h2>
            <div class="excerpt">${esc(it.text)}</div>
            <div class="tags">${it.tools.slice(0, 4).map(t => `<span class="tag">${esc(t)}</span>`).join("")}</div>
            <div class="scorebar">
              <div class="overall">
                <div>
                  <div class="score">${it.anomaly ? '—' : it.overall.toFixed(1)}</div>
                  <small>综合分</small>
                </div>
                <div class="decision ${it.anomaly ? '' : it.decision}">${it.anomaly ? '异常' : esc(it.decision)}</div>
              </div>
              <div class="mini-bars ${isNewSchema ? 'new-schema' : ''}">${bars}</div>
              <div class="group-snapshot ${isNewSchema ? 'new-schema' : ''}">${groupSnapshot(it)}</div>
              <div class="actions">
                <button onclick="openDetail(${idx})">查看详情</button>
                <a href="${esc(it.url)}" target="_blank" rel="noreferrer">原链接</a>
              </div>
            </div>
          </div>
        </article>`;
      }).join("") || (st.qi === -1 ? '<p style="color:var(--muted);padding: 20px 0;text-align:center;grid-column: 1 / -1;">该组合暂无数据库扫描结果。</p>' : '<p style="color:var(--muted);grid-column: 1 / -1;">该渠道无结果</p>');
    }

    const ENGINE_MODELS = {
      cyber_runner: [
        { value: "google/gemini-3.1-flash-lite", text: "google/gemini-3.1-flash-lite (默认)" },
        { value: "google/gemini-2.5-flash", text: "google/gemini-2.5-flash" },
        { value: "openai/gpt-4o", text: "openai/gpt-4o" },
        { value: "anthropic/claude-3.5-sonnet", text: "anthropic/claude-3.5-sonnet" }
      ],
      claude_sdk: [
        { value: "claude-sonnet-4-6", text: "claude-sonnet-4-6 (默认)" },
        { value: "claude-haiku-4-6", text: "claude-haiku-4-6" }
      ]
    };

    function onProcEngineChange() {
      const engine = document.getElementById("procEngineSelect").value;
      const modelSelect = document.getElementById("procModelSelect");
      modelSelect.innerHTML = ENGINE_MODELS[engine].map(m => `<option value="${m.value}">${m.text}</option>`).join("");
    }

    function getShortCaseFolder(form, case_id) {
      const match = case_id.match(/^([a-z]+)_([0-9a-f]{8})/i);
      const short = match ? `${match[1]}_${match[2]}` : case_id.substring(0, 20);
      return `${form}_${short}`;
    }

    function checkProcedureState(it) {
      if (procPollInterval) {
        clearInterval(procPollInterval);
        procPollInterval = null;
      }
      
      currentProcTask = {
        q: it.run,
        form: st.form,
        case_id: it.case_id,
        procedure_html: it.procedure_html
      };
      
      isLogViewActive = false;
      document.getElementById("procStatusText").textContent = "正在检测工序状态...";
      document.getElementById("procActionBtns").innerHTML = "";
      
      document.getElementById("procSetupPanel").style.display = "none";
      document.getElementById("procConsolePanel").style.display = "none";
      document.getElementById("procedureIframe").style.display = "none";
      
      const url = `/api/procedure_status?q=${it.run}&form=${st.form}&case_id=${it.case_id}`;
      fetch(url)
        .then(r => r.json())
        .then(d => {
          if (d.status === "running") {
            showProcConsole("running");
            pollProcLogs();
          } else if (d.status === "success") {
            showProcIframe(it.procedure_html);
          } else if (d.status === "failed") {
            showProcSetup(d.error);
          } else {
            showProcSetup();
          }
        })
        .catch(err => {
          showProcSetup("检查状态失败: " + err);
        });
    }

    function showProcSetup(errorMsg) {
      document.getElementById("procSetupPanel").style.display = "flex";
      document.getElementById("procConsolePanel").style.display = "none";
      document.getElementById("procedureIframe").style.display = "none";
      
      const statusText = document.getElementById("procStatusText");
      if (errorMsg) {
        statusText.innerHTML = `<span style="color:var(--rose)">提取失败: ${esc(errorMsg)}</span>`;
      } else {
        statusText.textContent = "未生成工序";
      }
      
      document.getElementById("procActionBtns").innerHTML = "";
      document.getElementById("startProcBtn").disabled = false;
      document.getElementById("startProcBtn").textContent = "开始提取工序";
      
      onProcEngineChange();
    }
    
    function showProcConsole(status) {
      document.getElementById("procSetupPanel").style.display = "none";
      document.getElementById("procConsolePanel").style.display = "flex";
      document.getElementById("procedureIframe").style.display = "none";
      
      const statusText = document.getElementById("procStatusText");
      const consoleStatus = document.getElementById("procConsoleStatus");
      
      if (status === "running") {
        statusText.innerHTML = `<span>⏳ 正在提取工序中...</span>`;
        consoleStatus.textContent = "running";
        document.getElementById("procActionBtns").innerHTML = `<button class="btn" style="background:#f3f4f6" disabled>正在生成...</button>`;
      } else if (status === "failed") {
        statusText.innerHTML = `<span style="color:var(--rose)">❌ 提取失败</span>`;
        consoleStatus.textContent = "failed";
        document.getElementById("procActionBtns").innerHTML = `
          <button class="btn" onclick="toggleCompletedLogs()">查看日志</button>
          <button class="btn" style="background:var(--rose); color:#fff; border-color:var(--rose)" onclick="resetToSetup()">重试提取</button>
        `;
      }
    }
    
    function resetToSetup() {
      showProcSetup();
    }
    
    function showProcIframe(htmlPath) {
      document.getElementById("procSetupPanel").style.display = "none";
      document.getElementById("procConsolePanel").style.display = "none";
      
      const iframe = document.getElementById("procedureIframe");
      iframe.style.display = "block";
      iframe.src = "/" + htmlPath;
      
      document.getElementById("procStatusText").innerHTML = `<span style="color:var(--mint)">✓ 工序已生成</span>`;
      
      document.getElementById("procActionBtns").innerHTML = `
        <button class="btn" id="btnToggleLogs" onclick="toggleCompletedLogs()">📋 查看提取日志</button>
        <button class="btn" style="background:var(--rose); color:#fff; border-color:var(--rose);" onclick="regenerateProcedureConfirm()">♻️ 重新生成</button>
      `;
    }
    
    function toggleCompletedLogs() {
      const iframe = document.getElementById("procedureIframe");
      const consolePanel = document.getElementById("procConsolePanel");
      const toggleBtn = document.getElementById("btnToggleLogs");
      
      if (isLogViewActive) {
        consolePanel.style.display = "none";
        iframe.style.display = "block";
        if (toggleBtn) toggleBtn.textContent = "📋 查看提取日志";
        isLogViewActive = false;
      } else {
        iframe.style.display = "none";
        consolePanel.style.display = "flex";
        if (toggleBtn) toggleBtn.textContent = "👁️ 返回工序效果";
        isLogViewActive = true;
        fetchLogsOnce();
      }
    }
    
    function fetchLogsOnce() {
      const consoleOutput = document.getElementById("procConsoleOutput");
      consoleOutput.textContent = "正在加载日志...";
      const url = `/api/procedure_log?q=${currentProcTask.q}&form=${currentProcTask.form}&case_id=${currentProcTask.case_id}`;
      fetch(url)
        .then(r => r.json())
        .then(d => {
          consoleOutput.textContent = d.log || "没有提取日志。";
          consoleOutput.scrollTop = consoleOutput.scrollHeight;
        })
        .catch(err => {
          consoleOutput.textContent = "加载日志失败: " + err;
        });
    }

    function startProcedureExtraction() {
      const engine = document.getElementById("procEngineSelect").value;
      const model = document.getElementById("procModelSelect").value;
      
      const startBtn = document.getElementById("startProcBtn");
      startBtn.disabled = true;
      startBtn.textContent = "正在启动...";
      
      const payload = {
        q: currentProcTask.q,
        form: currentProcTask.form,
        case_id: currentProcTask.case_id,
        engine: engine,
        model: model
      };
      
      fetch("/api/generate_procedure", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      })
      .then(r => r.json().then(d => ({ ok: r.ok, d })))
      .then(({ ok, d }) => {
        if (ok && d.status === "started") {
          showProcConsole("running");
          pollProcLogs();
        } else {
          showProcSetup(d.error || "启动失败");
        }
      })
      .catch(err => {
        showProcSetup("网络请求错误: " + err);
      });
    }
    
    function regenerateProcedureConfirm() {
      if (confirm("确定要重新提取并生成工序吗？这会覆盖原有的工序文件和修改记录。")) {
        showProcSetup();
      }
    }
    
    function pollProcLogs() {
      if (procPollInterval) {
        clearInterval(procPollInterval);
      }
      
      const consoleOutput = document.getElementById("procConsoleOutput");
      consoleOutput.textContent = "正在连接后台提取进程...\n";
      
      procPollInterval = setInterval(() => {
        const statusUrl = `/api/procedure_status?q=${currentProcTask.q}&form=${currentProcTask.form}&case_id=${currentProcTask.case_id}`;
        fetch(statusUrl)
          .then(r => r.json())
          .then(d => {
            if (d.status === "success") {
              clearInterval(procPollInterval);
              procPollInterval = null;
              loadData(true);
              if (d.procedure_html) {
                showProcIframe(d.procedure_html);
              } else {
                const folder = getShortCaseFolder(currentProcTask.form, currentProcTask.case_id);
                showProcIframe(`runs_full/${currentProcTask.q}/procedures/${folder}/case-${currentProcTask.case_id}.html`);
              }
            } else if (d.status === "failed") {
              clearInterval(procPollInterval);
              procPollInterval = null;
              showProcConsole("failed");
            }
          });
          
        const logUrl = `/api/procedure_log?q=${currentProcTask.q}&form=${currentProcTask.form}&case_id=${currentProcTask.case_id}`;
        fetch(logUrl)
          .then(r => r.json())
          .then(d => {
            if (d.log) {
              const scrollAtBottom = consoleOutput.scrollTop + consoleOutput.clientHeight >= consoleOutput.scrollHeight - 50;
              consoleOutput.textContent = d.log;
              if (scrollAtBottom) {
                consoleOutput.scrollTop = consoleOutput.scrollHeight;
              }
            }
          });
      }, 2000);
    }

    function switchModalTab(tabName) {
      const detailTab = document.getElementById("tabDetailBtn");
      const procTab = document.getElementById("tabProcedureBtn");
      const toolsTab = document.getElementById("tabToolsBtn");
      const detailContent = document.getElementById("modalContentDetail");
      const procContent = document.getElementById("modalContentProcedure");
      const toolsContent = document.getElementById("modalContentTools");

      // 全部复位
      [detailTab, procTab, toolsTab].forEach(t => t && t.classList.remove("active"));
      detailContent.style.display = "none";
      procContent.style.display = "none";
      if (toolsContent) toolsContent.style.display = "none";

      if (tabName === 'procedure') {
        procTab.classList.add("active");
        procContent.style.display = "flex";
      } else if (tabName === 'tools') {
        toolsTab.classList.add("active");
        toolsContent.style.display = "block";
        loadToolsForCurrent();        // 切到工具 tab 时按需加载
      } else {
        detailTab.classList.add("active");
        detailContent.style.display = "grid";
      }
    }

    // fixed_query_eval：图片点击放大（灯箱用 dialog，叠在详情 modal 上层）
    function openLightbox(src) {
      const d = document.getElementById('imgLightbox');
      document.getElementById('imgLightboxImg').src = src;
      d.showModal();
    }

    // ════════ fixed_query_eval：工具解构（批量选帖 + 单帖 + 结果渲染）════════
    const TOOL_MODEL_LABEL = 'gemini-3.1-flash-lite';

    function _curQueryPosts() {
      const q = DATA.queries[st.qi];
      if (!q) return { key: null, label: '', items: [] };
      const form = q.forms && q.forms[st.fi];
      let items = (form && form.results) || [];
      if (st.channel !== 'all') items = items.filter(r => r.platformKey === st.channel);
      return { key: q.key, label: q.original_q || q.key, items };
    }

    function openToolBatchModal() {
      const { key, label, items } = _curQueryPosts();
      if (!key) { alert('请先选择一个 query'); return; }
      document.getElementById('toolBatchSub').textContent =
        `${label} · ${st.channel === 'all' ? '全部渠道' : (PLATC[st.channel] || st.channel)} · 共 ${items.length} 帖`;
      document.getElementById('toolBatchAll').checked = false;
      document.getElementById('toolBatchList').innerHTML = items.map(it => {
        const img = (it.images && it.images[0]) || '';
        return `<label style="display:flex; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); cursor:pointer;">
          <input type="checkbox" class="tb-item" value="${esc(it.case_id)}" onchange="toolBatchUpdateCount()">
          ${img ? `<img src="${esc(img)}" referrerpolicy="no-referrer" style="width:42px;height:42px;object-fit:cover;border-radius:6px;flex-shrink:0;" onerror="this.style.opacity=.2">`
                : '<div style="width:42px;height:42px;background:#f1f1f1;border-radius:6px;flex-shrink:0;"></div>'}
          <span class="platform p-${esc(it.platformKey)}" style="flex-shrink:0">${esc(it.platform)}</span>
          <span style="flex:1; font-size:13px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">${esc(it.title || '(无标题)')}</span>
        </label>`;
      }).join('') || '<p style="color:var(--muted); padding:24px; text-align:center;">该渠道暂无帖子</p>';
      toolBatchUpdateCount();
      toolBatchDialog.showModal();
    }
    function toolBatchToggleAll(on) {
      document.querySelectorAll('#toolBatchList .tb-item').forEach(c => c.checked = on);
      toolBatchUpdateCount();
    }
    function toolBatchUpdateCount() {
      const n = document.querySelectorAll('#toolBatchList .tb-item:checked').length;
      document.getElementById('toolBatchCount').textContent = `已选 ${n} 帖`;
    }
    function confirmToolExtract() {
      const ids = [...document.querySelectorAll('#toolBatchList .tb-item:checked')].map(c => c.value);
      if (!ids.length) { alert('请至少选择一个帖子'); return; }
      const { key } = _curQueryPosts();
      const btn = document.getElementById('toolBatchConfirm');
      btn.disabled = true; btn.textContent = '启动中…';
      fetch('/api/extract_tools', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ q: key, case_ids: ids }) })
        .then(r => r.json()).then(d => {
          btn.disabled = false; btn.textContent = '确认解构';
          if (d.status === 'started') {
            alert(`已开始解构 ${d.count} 帖（${TOOL_MODEL_LABEL}）。\n完成后打开帖子详情的「工具解构」tab 查看。`);
            toolBatchDialog.close();
          } else { alert('启动失败：' + (d.error || '未知')); }
        }).catch(e => { btn.disabled = false; btn.textContent = '确认解构'; alert('请求失败：' + e); });
    }

    // ── 详情页「工具解构」tab ──
    function _curDetailItem() { return VIEW[detailDialog.dataset.activeIdx]; }

    function loadToolsForCurrent() {
      const it = _curDetailItem(); if (!it) return;
      const pane = document.getElementById('modalContentTools');
      pane.innerHTML = '<div style="padding:40px;text-align:center;color:var(--muted)">加载中…</div>';
      fetch(`/api/tools_data?q=${encodeURIComponent(it.run)}&case_id=${encodeURIComponent(it.case_id)}`)
        .then(r => r.json()).then(d => { pane.innerHTML = d.exists ? renderToolCards(d) : toolSetupHTML(); })
        .catch(() => { pane.innerHTML = '<div style="padding:40px;color:#c0392b">加载失败</div>'; });
    }
    function toolSetupHTML() {
      return `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px;">
        <div style="font-size:36px;margin-bottom:14px;">🔧</div>
        <h4 style="margin:0 0 8px;font-size:18px;">解构本帖工具</h4>
        <p style="color:var(--muted);font-size:14px;max-width:480px;margin:0 0 20px;">该帖子尚未解构工具信息。将用 <b>${TOOL_MODEL_LABEL}</b> 读取正文 + 配图，提炼每个工具的结构化条目。</p>
        <button onclick="startToolExtractSingle()" style="background:var(--mint);color:#fff;border-color:var(--mint);padding:10px 24px;font-size:15px;font-weight:bold;border-radius:8px;cursor:pointer;">开始解构</button>
      </div>`;
    }
    function _pollToolsThenLoad(it, pane) {
      const timer = setInterval(() => {
        fetch(`/api/tools_status?q=${encodeURIComponent(it.run)}&case_id=${encodeURIComponent(it.case_id)}`)
          .then(r => r.json()).then(s => {
            if (!s.running) {
              clearInterval(timer);
              if (s.error) pane.innerHTML = `<div style="padding:40px;color:#c0392b">解构失败：${esc(s.error)}</div>`;
              else loadToolsForCurrent();
            }
          }).catch(() => {});
      }, 2500);
    }
    function startToolExtractSingle() {
      const it = _curDetailItem(); if (!it) return;
      const pane = document.getElementById('modalContentTools');
      pane.innerHTML = `<div style="padding:48px;text-align:center;color:var(--muted)">⏳ 正在解构本帖工具…（${TOOL_MODEL_LABEL}）</div>`;
      fetch('/api/extract_tools', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ q: it.run, case_ids: [it.case_id] }) })
        .then(r => r.json()).then(d => {
          if (d.status !== 'started') { pane.innerHTML = `<div style="padding:40px;color:#c0392b">启动失败：${esc(d.error || '未知')}</div>`; return; }
          _pollToolsThenLoad(it, pane);
        });
    }
    function reExtractTools() {
      const it = _curDetailItem(); if (!it) return;
      if (!confirm('重新解构会覆盖已有结果，确定？')) return;
      const pane = document.getElementById('modalContentTools');
      pane.innerHTML = `<div style="padding:48px;text-align:center;color:var(--muted)">⏳ 重新解构中…（${TOOL_MODEL_LABEL}）</div>`;
      fetch('/api/extract_tools', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ q: it.run, case_ids: [it.case_id], force: true }) })
        .then(r => r.json()).then(() => _pollToolsThenLoad(it, pane));
    }
    function _toolField(label, val, color) {
      if (val === null || val === undefined || val === '' || (Array.isArray(val) && !val.length)) return '';
      const body = Array.isArray(val)
        ? '<ul style="margin:2px 0 0;padding-left:18px;">' + val.map(x => `<li style="margin:2px 0;">${esc(String(x))}</li>`).join('') + '</ul>'
        : `<span>${esc(String(val))}</span>`;
      return `<div style="margin-top:8px;font-size:13px;line-height:1.5;"><span style="font-size:12px;font-weight:700;color:${color || 'var(--muted)'};">${label}</span> ${body}</div>`;
    }
    let toolViewMode = 'cards';   // 'cards' | 'table'
    let _lastToolsData = null;

    function renderToolCards(d) {
      _lastToolsData = d;
      const tools = d.tools || [];
      const toggleLabel = toolViewMode === 'table' ? '▤ 卡片视图' : '⊞ 表格视图';
      const header = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
        <div style="font-size:14px;color:var(--muted);">共 <b style="color:var(--ink);">${tools.length}</b> 个工具 · 模型 ${esc(d.model || TOOL_MODEL_LABEL)}</div>
        <div style="display:flex;gap:8px;">
          <button onclick="toggleToolView()" style="font-size:12px;">${toggleLabel}</button>
          <button onclick="reExtractTools()" style="font-size:12px;">↻ 重新解构</button>
        </div>
      </div>`;
      if (!tools.length) return header + '<p style="color:var(--muted);padding:30px;text-align:center;">未识别到工具。</p>';
      return header + (toolViewMode === 'table' ? renderToolTable(tools) : renderToolCardsBody(tools));
    }

    function toggleToolView() {
      toolViewMode = toolViewMode === 'table' ? 'cards' : 'table';
      if (_lastToolsData) document.getElementById('modalContentTools').innerHTML = renderToolCards(_lastToolsData);
    }

    function renderToolCardsBody(tools) {
      return tools.map(t => {
        const layer = t['创作层级'] || '';
        const lc = layer === '制作层' ? '#0e7490' : (layer === '创作层' ? '#b87918' : '#9aa0ad');
        const lbg = layer === '制作层' ? '#e0f2f1' : (layer === '创作层' ? '#fef3e2' : '#f1f1f1');
        const tags = [];
        if (t['实质作用域']) tags.push(`<span class="tag">实质：${esc(t['实质作用域'])}</span>`);
        if (t['形式作用域']) tags.push(`<span class="tag">形式：${esc(t['形式作用域'])}</span>`);
        const updated = t['最新更新时间'] ? `<span style="font-size:12px;color:var(--muted);">⏱ ${esc(t['最新更新时间'])}</span>` : '';
        const link = t['来源链接'] ? `<div style="margin-top:8px;"><a href="${esc(t['来源链接'])}" target="_blank" style="font-size:13px;color:#2563eb;">🔗 来源链接</a></div>` : '';
        return `<div style="border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow);">
          <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">
            <h4 style="margin:0;font-size:16px;">🔧 ${esc(t['工具名称'] || '(未命名)')}</h4>
            ${layer ? `<span style="font-size:12px;font-weight:700;color:${lc};background:${lbg};padding:2px 10px;border-radius:20px;flex-shrink:0;">${esc(layer)}</span>` : ''}
          </div>
          ${(tags.length || updated) ? `<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;">${tags.join('')} ${updated}</div>` : ''}
          <div style="display:flex;gap:28px;flex-wrap:wrap;">${_toolField('输入', t['输入'])}${_toolField('输出', t['输出'])}</div>
          ${_toolField('用法', t['用法'])}
          ${_toolField('案例', t['案例'])}
          ${_toolField('缺点', t['缺点'], '#b8651a')}
          ${link}
        </div>`;
      }).join('');
    }

    // 表格视图：列对应数据库 fqe_tools 字段
    function _toolCell(v) {
      if (v === null || v === undefined || v === '' || (Array.isArray(v) && !v.length)) return '<span style="color:#c4c4c4">—</span>';
      if (Array.isArray(v)) return '<ul style="margin:0;padding-left:15px;">' + v.map(x => `<li style="margin:1px 0;">${esc(String(x))}</li>`).join('') + '</ul>';
      return esc(String(v));
    }
    function renderToolTable(tools) {
      const cols = ['工具名称', '创作层级', '实质作用域', '形式作用域', '输入', '输出', '用法', '案例', '缺点', '来源链接', '最新更新时间'];
      const tdBase = 'border:1px solid var(--line);padding:7px 9px;vertical-align:top;font-size:12px;line-height:1.5;';
      const th = cols.map(c =>
        `<th style="${tdBase}background:#faf7f1;font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:1;">${c}</th>`
      ).join('');
      const rows = tools.map(t => {
        const tds = cols.map(c => {
          let inner;
          if (c === '来源链接') {
            inner = t[c] ? `<a href="${esc(t[c])}" target="_blank" style="color:#2563eb;">🔗 打开</a>` : '<span style="color:#c4c4c4">—</span>';
          } else if (c === '创作层级' && t[c]) {
            const lc = t[c] === '制作层' ? '#0e7490' : '#b87918';
            const lbg = t[c] === '制作层' ? '#e0f2f1' : '#fef3e2';
            inner = `<span style="font-weight:700;color:${lc};background:${lbg};padding:1px 8px;border-radius:12px;white-space:nowrap;">${esc(t[c])}</span>`;
          } else {
            inner = _toolCell(t[c]);
          }
          const mw = ['用法', '案例', '缺点', '输入', '输出'].includes(c) ? 'min-width:140px;' : (c === '工具名称' ? 'min-width:100px;font-weight:600;white-space:nowrap;' : 'white-space:nowrap;');
          return `<td style="${tdBase}${mw}">${inner}</td>`;
        }).join('');
        return `<tr>${tds}</tr>`;
      }).join('');
      return `<div style="overflow-x:auto;border:1px solid var(--line);border-radius:8px;">
        <table style="border-collapse:collapse;width:100%;min-width:900px;background:#fff;">
          <thead><tr>${th}</tr></thead><tbody>${rows}</tbody>
        </table></div>`;
    }

    function openDetail(i) {
      const it = VIEW[i];
      detailDialog.dataset.activeIdx = i;
      currentPinnedScoreEl = null;
      document.getElementById("modalMeta").innerHTML = `<span class="platform p-${esc(it.platformKey)}">${esc(it.platform)}</span><span>Query ID: <b style="font-family: monospace; color: var(--amber); background: var(--soft-amber); border: 1px solid rgba(184, 121, 24, 0.2); padding: 1px 6px; border-radius: 3px; font-size: 11px; margin-right: 8px;">${esc(it.run)}</b></span><span>${esc(it.date)} · ${esc(it.engagement)} · 质量 ${esc(it.grade)} ${esc(it.qscore)}</span>`;
      document.getElementById("modalTitle").textContent = it.title;
      document.getElementById("modalReason").textContent = it.reason;
      document.getElementById("modalText").textContent = it.text || "(无正文)";
      document.getElementById("modalImages").innerHTML = it.images.length ? it.images.map(s => `<img src="${esc(s)}" referrerpolicy="no-referrer" loading="lazy" style="cursor:zoom-in" onclick="openLightbox(this.src)" onerror="this.style.opacity=.3">`).join("") : "<p>搜索详情未返回图片。</p>";
      document.getElementById("modalTags").innerHTML = [...(it.knowledge_type || []).map(t => "类型：" + (KTM[t] || t)), ...(it.found_by || []).map(q => "命中：" + q)].map(t => `<span class="tag">${esc(t)}</span>`).join("");
      
      const isNewSchema = it.scores && (it.scores.relevance_production !== undefined || it.scores.relevance_query !== undefined);
      
      const maxScore = isNewSchema ? '10' : '5';
      const overallVal = it.anomaly ? '—' : it.overall.toFixed(1);
      const scoreColor = isNewSchema ? '#2563eb' : 'var(--mint)';
      const scoreStrong = document.getElementById("modalOverallScoreVal");
      if (scoreStrong) {
        scoreStrong.style.color = scoreColor;
        scoreStrong.innerHTML = `${overallVal}<span style="font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 2px;">/${maxScore}</span>`;
      }

      if (isNewSchema) {
        document.getElementById("modalScores").innerHTML = renderNewScores(it);
      } else {
        document.getElementById("modalScores").innerHTML = scoreGroupsOld.map(g => renderScoreGroup(it, g)).join("");
      }
      
      const tabs = document.getElementById("modalTabs");
      tabs.style.display = "flex";
      
      checkProcedureState(it);
      
      switchModalTab('detail');
      detailDialog.showModal();
    }

    let currentPinnedScoreEl = null;
    function pinScoreReason(el, label, k) {
      const activeIdx = detailDialog.dataset.activeIdx;
      const it = VIEW[activeIdx];
      if (!it || !it.score_reasons) return;
      const reason = it.score_reasons[k] || '';

      let tip = document.getElementById('scoreTip');
      if (!tip) {
        tip = document.createElement('div');
        tip.id = 'scoreTip';
        tip.style.cssText = 'position: fixed; background: #ffffff; border: 1px solid #ded8ce; border-radius: 8px; box-shadow: 0 10px 25px rgba(41, 35, 28, 0.15); padding: 12px 14px; max-width: 320px; z-index: 99999; font-size: 13px; line-height: 1.5; color: #4b5563; word-break: break-all; border-left: 4px solid var(--amber); transition: opacity 0.15s ease;';
        detailDialog.appendChild(tip);
      }

      if (currentPinnedScoreEl === el && tip.style.display === 'block') {
        tip.style.display = 'none';
        el.style.color = '';
        currentPinnedScoreEl = null;
      } else {
        if (currentPinnedScoreEl) {
          currentPinnedScoreEl.style.color = '';
        }
        tip.innerHTML = `<strong style="display:block;margin-bottom:6px;color:#b87918;">【指标判定 - ${label}】</strong>${esc(reason)}`;
        tip.style.display = 'block';
        el.style.color = 'var(--amber)';
        currentPinnedScoreEl = el;

        const elRect = el.getBoundingClientRect();

        const tipWidth = tip.offsetWidth || 280;
        const tipHeight = tip.offsetHeight || 80;

        let left = elRect.left + elRect.width / 2 - tipWidth / 2;
        let top = elRect.bottom + 8;

        if (left < 10) left = 10;
        if (left + tipWidth > window.innerWidth - 10) {
          left = window.innerWidth - tipWidth - 10;
        }

        if (top + tipHeight > window.innerHeight - 10) {
          top = elRect.top - tipHeight - 8;
        }

        tip.style.left = left + 'px';
        tip.style.top = top + 'px';
      }
    }

    // Automatically close tooltip and clear interval when modal is closed
    document.getElementById('detailDialog').addEventListener('close', () => {
      const tip = document.getElementById('scoreTip');
      if (tip) {
        tip.style.display = 'none';
      }
      if (currentPinnedScoreEl) {
        currentPinnedScoreEl.style.color = '';
        currentPinnedScoreEl = null;
      }
      if (procPollInterval) {
        clearInterval(procPollInterval);
        procPollInterval = null;
      }
    });

    // Close tooltip when dialog scrolls
    document.getElementById('detailDialog').addEventListener('scroll', () => {
      const tip = document.getElementById('scoreTip');
      if (tip) {
        tip.style.display = 'none';
      }
      if (currentPinnedScoreEl) {
        currentPinnedScoreEl.style.color = '';
        currentPinnedScoreEl = null;
      }
    }, true);

    const KTM = { procedure: "工序", step: "步骤", tool: "工具" };

    function rerender(mxClick) {
      updateThresholdLimits();
      if (st.qi === -1) {
        document.getElementById("stats").innerHTML = "";
        document.getElementById("lede").textContent = "未找到对应的数据库 Query，请尝试切换筛选组合。";
        renderFormsChan();
        renderGrid();
        if (!mxClick) {
          document.querySelectorAll('td.cell.sel').forEach(x => x.classList.remove('sel'));
        }
        return;
      }

      if (st.qi >= DATA.queries.length) st.qi = 0;
      if (st.fi >= DATA.queries[st.qi].forms.length) st.fi = 0;

      if (!mxClick) {
        renderMatrix();
      }
      renderFormsChan();
      renderHead();
      renderGrid();

      // Sync reevalBtn state
      const reevalBtn = document.getElementById('reevalBtn');
      if (reevalBtn && DATA.queries[st.qi]) {
        const q = DATA.queries[st.qi].key;
        const status = DATA.active_reevals && DATA.active_reevals[q];
        if (status === "running") {
          reevalBtn.disabled = true;
          reevalBtn.textContent = `♻️ 重评中 ${q}...`;
          startReevalPolling(q);
        } else {
          reevalBtn.disabled = false;
          reevalBtn.textContent = '♻️ 重评当前 query';
        }
      }
    }

    function setMatrixView(mode) {
      st.matrixView = mode;
      document.querySelectorAll('.g-mxview .btn').forEach(btn => {
        btn.classList.remove('on');
      });
      if (mode === 'full') document.getElementById('btnMxFull').classList.add('on');
      else if (mode === 'hits') document.getElementById('btnMxHits').classList.add('on');
      else if (mode === 'procedures') document.getElementById('btnMxProcedures').classList.add('on');
      
      if (st.selectedAction && st.selectedType) {
        selectQueryByActiveCellAndControls(st.selectedAction, st.selectedType);
      }

      renderMatrix();

      if (openCell) {
        const ai = +openCell.dataset.ai, ti = +openCell.dataset.ti;
        const newCell = document.querySelector(`td.cell[data-ai="${ai}"][data-ti="${ti}"]`);
        if (newCell) {
          showPop(newCell, parseInt(pop.style.left), parseInt(pop.style.top));
        }
      }

      rerender(true);
    }

    function loadData(keep) {
      fetch("/api/data").then(r => r.json()).then(d => {
        DATA = d;
        if (!keep) {
          st = { form: 'A', lens: '工序', tools: [], tier: 0, qi: 0, fi: 0, channel: "all", matrixView: 'full', selectedAction: null, selectedType: null };
          if (DATA.queries.length > 0) {
            const firstQ = DATA.queries[0];
            if (firstQ.dims) {
              st.selectedAction = firstQ.dims.action;
              st.selectedType = firstQ.dims.type;
              st.lens = detectLens(firstQ);
            }
          }
        }

        // Dynamically populate tool type buttons
        document.getElementById('toolBtns').innerHTML = TOOL_TYPES.map(t => `<button class="btn" data-k="tool" data-v="${t}">${t}</button>`).join('');

        // Synchronize buttons states to st
        document.querySelectorAll('.ctl .btn').forEach(btn => {
          const k = btn.dataset.k, v = btn.dataset.v;
          if (MULTI[k]) {
            const ak = MULTI[k];
            btn.classList.toggle('on', v === '' ? st[ak].length === 0 : st[ak].includes(v));
          } else {
            btn.classList.toggle('on', st[k] === v);
          }
        });

        document.querySelectorAll('.g-mxview .btn').forEach(btn => {
          btn.classList.remove('on');
        });
        const mv = st.matrixView || 'full';
        if (mv === 'full') document.getElementById('btnMxFull').classList.add('on');
        else if (mv === 'hits') document.getElementById('btnMxHits').classList.add('on');
        else if (mv === 'procedures') document.getElementById('btnMxProcedures').classList.add('on');

        computeStats();
        if (st.selectedAction && st.selectedType) {
          selectQueryByActiveCellAndControls(st.selectedAction, st.selectedType);
        }
        rerender();
      });
    }

    // Matrix click listener (links matrix select to database select + opens pop-up)
    document.getElementById("comboMx").addEventListener("click", e => {
      const td = e.target.closest("td.cell");
      if (!td) return;

      const ai = +td.dataset.ai, ti = +td.dataset.ti, a = ACTIONS[ai], t = TYPES[ti];
      st.selectedAction = a.name;
      st.selectedType = t.name;

      showPop(td, e.clientX, e.clientY);

      // Select the query
      selectQueryByActiveCellAndControls(a.name, t.name);

      document.querySelectorAll('td.cell.sel').forEach(x => x.classList.remove('sel'));
      td.classList.add('sel');
      applyCrosshair();

      rerender(true); // mxClick = true, updates results without redrawing full table
    });

    // Header controls event delegation
    const MULTI = { tool: 'tools' };
    document.querySelector('.ctl').addEventListener('click', e => {
      const b = e.target.closest('.btn');
      if (!b) return;
      const k = b.dataset.k, v = b.dataset.v, grp = document.querySelectorAll(`.ctl .btn[data-k="${k}"]`);
      if (MULTI[k]) {
        const ak = MULTI[k];
        if (v === '') {
          st[ak] = [];
        } else {
          if (st[ak].includes(v)) {
            st[ak] = [];
          } else {
            st[ak] = [v];
          }
        }
        grp.forEach(x => {
          const xv = x.dataset.v;
          x.classList.toggle('on', xv === '' ? st[ak].length === 0 : st[ak].includes(xv));
        });
      } else {
        grp.forEach(x => x.classList.remove('on'));
        b.classList.add('on');
        st[k] = v;
      }

      if (st.selectedAction && st.selectedType) {
        selectQueryByActiveCellAndControls(st.selectedAction, st.selectedType);
      }

      renderMatrix();

      if (openCell) {
        const ai = +openCell.dataset.ai, ti = +openCell.dataset.ti;
        const newCell = document.querySelector(`td.cell[data-ai="${ai}"][data-ti="${ti}"]`);
        if (newCell) {
          showPop(newCell, parseInt(pop.style.left), parseInt(pop.style.top));
        }
      }

      rerender(true);
    });

    // Close popups on clicking outside
    document.addEventListener('click', e => {
      if (!e.target.closest('td.cell') && !e.target.closest('.pop') && !e.target.closest('.btn')) {
        pop.style.display = 'none';
        openCell = null;
      }
      const tip = document.getElementById('scoreTip');
      if (tip && !e.target.closest('.info-icon') && !e.target.closest('#scoreTip')) {
        tip.style.display = 'none';
        if (currentPinnedScoreEl) {
          currentPinnedScoreEl.style.color = '';
          currentPinnedScoreEl = null;
        }
      }
    });

    document.getElementById("navC").addEventListener("click", e => { const t = e.target.closest(".tab"); if (!t) return; st.channel = t.dataset.c; renderNav(); renderHead(); renderGrid(); });
    document.getElementById("sort").addEventListener("change", renderGrid);

    // ── fixed_query_eval：固定 query 选择条（替代正交矩阵导航）─────────────────────
    function renderNavQ() {
      const el = document.getElementById('navQ'); if (!el) return;
      const qs = (DATA && DATA.queries) || [];
      el.innerHTML = qs.length
        ? qs.map((q, i) => `<span class="tab ${i === st.qi ? 'on' : ''}" data-qi="${i}">${q.original_q || q.key} <small>${q.tot || 0}</small></span>`).join('')
        : '<span style="color:var(--muted)">runs_full/ 暂无数据，先跑 run_search.py</span>';
    }
    document.getElementById('navQ').addEventListener('click', e => {
      const t = e.target.closest('.tab'); if (!t) return;
      st.qi = +t.dataset.qi; st.fi = 0; st.form = 'A'; st.channel = 'all';
      rerender(true); renderNavQ();
    });
    // 包一层 rerender：每次渲染后同步刷新 query 选择条高亮
    const _origRerender = rerender;
    rerender = function () { const r = _origRerender.apply(this, arguments); renderNavQ(); return r; };

    loadData();
  </script>
</body>

</html>