howard
/
Agent


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475
							<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <title>mode_workflow · 解构工作台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      /* ── 主题:净白工作台 + 墨蓝/朱砂点缀 ─────────────────────────────────────── */
      :root {
        --bg: #f4f4f1;
        --card: #ffffff;
        --ink: #1c2433;
        --ink-soft: #5a6577;
        --ink-faint: #9aa3b0;
        --line: #e8e6e0;
        --line-dark: #d4d1c8;
        --navy: #1e3a5f;
        --navy-deep: #13243a; /* 需求区 / 品牌 */
        --blue: #2563eb;
        --blue-bg: #eef3fe; /* 评分/交互强调 */
        --amber: #b45309;
        --amber-bg: #fff7e8; /* 输入区 */
        --teal: #0f6b5c;
        --teal-bg: #eef8f3; /* 实现区 */
        --green: #15803d;
        --green-bg: #effaf1; /* 输出区 / 采纳 */
        --seal: #bb3a22; /* 朱砂印 */
        --infer: #fdf0d2;
        --infer-edge: #d97706;
        --shadow: 0 1px 2px rgba(20, 30, 46, 0.04), 0 8px 24px -12px rgba(20, 30, 46, 0.12);
        --shadow-lg: 0 4px 10px rgba(20, 30, 46, 0.06), 0 24px 60px -20px rgba(20, 30, 46, 0.25);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 14px;
      }
      body {
        font-family: "Noto Sans SC", sans-serif;
        color: var(--ink);
        background: var(--bg);
        background-image: radial-gradient(900px 360px at 90% -8%, rgba(37, 99, 235, 0.045), transparent 60%);
        min-height: 100vh;
      }
      .num {
        font-family: "IBM Plex Mono", monospace;
      }
      h1,
      h2,
      .serif {
        font-family: "Noto Serif SC", serif;
      }
      a {
        color: var(--blue);
      }
      button {
        font-family: inherit;
        cursor: pointer;
      }

      /* ── 顶部 ── */
      header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0 30px;
        height: 60px;
        background: linear-gradient(135deg, #13243a, #1c3552);
        color: #eef2f8;
        position: sticky;
        top: 0;
        z-index: 40;
        box-shadow: 0 2px 14px rgba(19, 36, 58, 0.28);
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .logo .seal {
        width: 33px;
        height: 33px;
        background: var(--seal);
        color: #fff;
        display: grid;
        place-items: center;
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 17px;
        border-radius: 7px;
        box-shadow:
          inset 0 0 0 2px rgba(255, 255, 255, 0.22),
          0 3px 8px rgba(187, 58, 34, 0.35);
        transform: rotate(-4deg);
      }
      .logo b {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: 1px;
      }
      .logo small {
        display: block;
        font-size: 10px;
        color: #93a7c0;
        letter-spacing: 3px;
      }
      nav {
        display: flex;
        gap: 6px;
        margin-left: 26px;
      }
      nav a {
        display: flex;
        align-items: center;
        padding: 7px 18px;
        color: #a8b9cd;
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 0.5px;
        border-radius: 99px;
        transition: 0.15s;
        font-size: 13px;
      }
      nav a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }
      nav a.on {
        color: #fff;
        background: rgba(255, 255, 255, 0.13);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
      }
      header .spacer {
        flex: 1;
      }
      header .hint {
        font-size: 11px;
        color: #6e83a0;
        letter-spacing: 2px;
      }

      main {
        display: none;
        padding: 24px 30px 80px;
        max-width: 1920px;
        margin: 0 auto;
      }
      main.on {
        display: block;
      }
      /* 数据集视图:整体定高占满视口,左侧列表与右侧解构各自独立滚动 */
      #view-dataset {
        padding-bottom: 20px;
      }
      #view-dataset.on {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 60px);
        overflow: hidden;
      }
      /* 聚类库:内嵌知识检索页,占满视口、无内边距 */
      #view-cluster {
        padding: 0;
        max-width: none;
      }
      #view-cluster.on {
        display: flex;
      }
      #cluster-frame {
        border: 0;
        width: 100%;
        height: calc(100vh - 60px);
        display: block;
      }

      /* ── 通用卡片/标签/按钮 ── */
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
      }
      .pill {
        display: inline-block;
        padding: 1px 9px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 500;
        border: 1px solid var(--line-dark);
        background: #f7f6f2;
        color: var(--ink-soft);
        white-space: nowrap;
      }
      .pill.navy {
        background: #e8eef6;
        border-color: #bccbde;
        color: var(--navy);
      }
      .pill.amber {
        background: var(--amber-bg);
        border-color: #ecc88a;
        color: var(--amber);
      }
      .pill.teal {
        background: var(--teal-bg);
        border-color: #a9d6c8;
        color: var(--teal);
      }
      .pill.red {
        background: #fbeae5;
        border-color: #e4ab9c;
        color: var(--seal);
      }
      .pill.green {
        background: var(--green-bg);
        border-color: #a7d9b4;
        color: var(--green);
      }
      .btn {
        border: 1px solid var(--line-dark);
        background: var(--card);
        color: var(--ink);
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        transition: 0.15s;
      }
      .btn:hover {
        border-color: var(--blue);
        color: var(--blue);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
      }
      .btn.primary {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
      }
      .btn.primary:hover {
        background: #1d4fc4;
        color: #fff;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      }
      .btn.seal {
        background: var(--seal);
        border-color: var(--seal);
        color: #fff;
      }
      .btn.seal:hover {
        background: #a02f1a;
        color: #fff;
        box-shadow: 0 4px 12px rgba(187, 58, 34, 0.3);
      }
      .btn.sm {
        padding: 3px 11px;
        font-size: 12px;
      }
      .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
      }
      select,
      input[type="text"],
      input[type="number"] {
        font-family: inherit;
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        outline: none;
        transition: 0.15s;
      }
      select:focus,
      input:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      }
      .empty {
        text-align: center;
        color: var(--ink-faint);
        padding: 48px 20px;
        font-size: 13px;
        line-height: 2;
      }
      .empty .glyph {
        font-family: "Noto Serif SC", serif;
        font-size: 42px;
        color: var(--line-dark);
        display: block;
      }
      .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid var(--line-dark);
        border-top-color: var(--blue);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        vertical-align: -3px;
        margin-right: 8px;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* ── Dashboard ── */
      .dash-section {
        margin-bottom: 14px;
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .dash-section h2 {
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 2px;
      }
      .dash-section .rule {
        flex: 1;
        border-top: 1px dashed var(--line-dark);
      }
      .dash-section .tag {
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink-faint);
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin-bottom: 26px;
      }
      .stat {
        padding: 16px 18px 14px;
        position: relative;
        overflow: hidden;
      }
      .stat::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--navy);
      }
      .stat.a::after {
        background: var(--amber);
      }
      .stat.t::after {
        background: var(--teal);
      }
      .stat.r::after {
        background: var(--seal);
      }
      .stat .lbl {
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--ink-soft);
        margin-bottom: 8px;
      }
      .stat .val {
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
      }
      .stat .sub {
        font-size: 11px;
        color: var(--ink-faint);
        margin-top: 7px;
      }
      .stat .sub.plat-break {
        margin-top: 5px;
        color: var(--ink-soft);
        font-weight: 600;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
      }
      .stat .sub.plat-break .pb-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .stat .sub.plat-break .pb-item b {
        font-size: 12px;
        color: var(--ink);
      }
      .ring-row {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .ring {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex: none;
        background: conic-gradient(var(--teal) calc(var(--p) * 1%), #e9e7e0 0);
      }
      .ring > div {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--card);
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 700;
      }
      .charts {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 16px;
      }
      .chart-card {
        padding: 14px 16px 8px;
      }
      .chart-card h3 {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--ink-soft);
        margin-bottom: 4px;
        display: flex;
        align-items: baseline;
        gap: 8px;
      }
      .chart-card h3 .num {
        color: var(--seal);
        font-size: 12px;
      }
      .chart {
        width: 100%;
      }
      .span12 {
        grid-column: span 12;
      }
      .span6 {
        grid-column: span 6;
      }
      .span4 {
        grid-column: span 4;
      }
      @media (max-width: 1100px) {
        .span6,
        .span4 {
          grid-column: span 12;
        }
      }

      /* ── Dataset 三栏 ── */
      .ds-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }
      .mode-switch {
        display: flex;
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
      }
      .mode-switch button {
        border: 0;
        background: transparent;
        padding: 7px 24px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-soft);
        transition: 0.15s;
      }
      .mode-switch button.on {
        background: var(--navy);
        color: #fff;
      }
      .ds-grid {
        display: grid;
        grid-template-columns: 235px 350px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
        flex: 1;
        min-height: 0;
      }
      @media (max-width: 1280px) {
        .ds-grid {
          grid-template-columns: 200px 320px minmax(0, 1fr);
        }
      }
      /* 每一列卡片纵向铺满网格高度,内部滚动区独立滚动 */
      .ds-grid > .card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      .col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1px;
      }
      .col-head .n {
        font-size: 11px;
        color: var(--ink-faint);
        font-weight: 500;
      }

      .qlist {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }
      .qitem {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        transition: 0.12s;
      }
      .qitem:hover {
        background: #f8f8f4;
      }
      .qitem.on {
        background: var(--blue-bg);
        box-shadow: inset 3px 0 0 var(--blue);
      }
      .qitem .qid {
        font-size: 10px;
        letter-spacing: 1px;
        color: var(--ink-faint);
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .qitem .qt {
        font-weight: 500;
        margin: 4px 0 7px;
        line-height: 1.45;
      }
      .qitem .qm {
        font-size: 11px;
        color: var(--ink-soft);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .qitem .qm b.hit {
        color: var(--blue);
        font-size: 13px;
      }

      /* 渠道 tab */
      .plat-tabs {
        display: flex;
        gap: 4px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
        background: #fbfbf8;
        border-radius: 0;
      }
      .plat-tabs button {
        border: 1px solid transparent;
        background: transparent;
        color: var(--ink-soft);
        padding: 3px 11px;
        border-radius: 99px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        transition: 0.15s;
      }
      .plat-tabs button:hover {
        background: #efeee8;
        color: var(--ink);
      }
      .plat-tabs button.on {
        background: var(--navy);
        color: #fff;
        font-weight: 700;
      }
      .plat-tabs button .c {
        font-size: 10px;
        opacity: 0.75;
        margin-left: 3px;
      }
      /* 已解构筛选按钮:靠右,激活态用 teal 呼应「已解构」 */
      .plat-tabs .done-filter {
        margin-left: auto;
        flex: none;
        border: 1px solid var(--line);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--ink-soft);
      }
      .plat-tabs .done-filter:hover {
        background: #efeee8;
        color: var(--ink);
      }
      .plat-tabs .done-filter.on {
        background: var(--teal-bg, #e3f1ec);
        border-color: #a9d6c8;
        color: var(--teal);
        font-weight: 700;
      }
      .plat-tabs .done-filter .dot {
        font-size: 8px;
      }

      .plist {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }
      .post {
        padding: 12px 13px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        display: flex;
        gap: 10px;
        transition: 0.12s;
        align-items: flex-start;
      }
      .post:hover {
        background: #f8f8f4;
      }
      .post.on {
        background: var(--blue-bg);
        box-shadow: inset 3px 0 0 var(--blue);
      }
      .post input {
        margin-top: 4px;
        accent-color: var(--blue);
      }
      .post .pt {
        font-weight: 500;
        line-height: 1.45;
        font-size: 13px;
      }
      .post .pm {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px;
        align-items: center;
      }
      .plat {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
      }
      .plat.xhs {
        background: #d63a2f;
      }
      .plat.gzh {
        background: #2e9939;
      }
      .plat.zhihu {
        background: #1772f6;
      }
      .plat.douyin {
        background: #170b1a;
      }
      .plat.sph {
        background: #fa6d20;
      }
      .plat.youtube {
        background: #c00;
      }
      .plat.x {
        background: #15202b;
      }
      .plat.other {
        background: #777;
      }
      .plat-logo {
        display: inline-flex;
        line-height: 0;
        flex: none;
      }
      .plat-logo svg,
      .plat-logo img {
        display: block;
      }
      .done-dot {
        font-size: 10px;
        color: var(--teal);
        font-weight: 700;
      }

      /* 评分徽章:大、亮、可点 */
      .score-badge {
        flex: none;
        position: relative;
        font-family: "IBM Plex Mono", monospace;
        font-weight: 700;
        font-size: 16.5px;
        line-height: 1;
        padding: 8px 10px;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.15s;
        align-self: center;
        border: 1px solid transparent;
      }
      .score-badge.s9 {
        color: #fff;
        background: linear-gradient(135deg, #16a34a, #15803d);
        box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35);
      }
      .score-badge.s8 {
        color: #fff;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
      }
      .score-badge.s6 {
        color: #fff;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        box-shadow: 0 3px 10px rgba(217, 119, 6, 0.32);
      }
      .score-badge.s0 {
        color: var(--ink-soft);
        background: #eceae4;
        border-color: var(--line-dark);
      }
      .score-badge:hover {
        transform: translateY(-2px) scale(1.06);
      }
      .score-badge::after {
        content: "查看详情";
        position: absolute;
        left: 50%;
        bottom: calc(100% + 6px);
        transform: translateX(-50%) scale(0.92);
        background: var(--ink);
        color: #fff;
        font-family: "Noto Sans SC", sans-serif;
        font-size: 10px;
        font-weight: 500;
        padding: 3px 8px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: 0.15s;
        z-index: 5;
      }
      .score-badge:hover::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }

      .xp {
        min-height: 60vh;
      }
      .xp-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        flex-wrap: wrap;
      }
      .xp-head .st {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 15px;
      }
      .xp-head .st em {
        color: var(--seal);
        font-style: normal;
      }
      .xp-head .spacer {
        flex: 1;
      }
      .xp-body {
        padding: 16px;
        flex: 1;
        min-height: 0;
        overflow: auto;
      }

      /* 工序卡 */
      .proc {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 22px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow);
      }
      .proc-head {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: #fafaf6;
      }
      .proc-head .nm {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 15px;
      }
      .proc-head .nm .pid {
        color: var(--seal);
        margin-right: 6px;
        font-size: 13px;
      }
      .proc-head .pp {
        font-size: 12px;
        color: var(--ink-soft);
        margin-top: 5px;
        line-height: 1.6;
      }
      .proc-head .meta {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
      }
      .decl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-bottom: 1px solid var(--line);
      }
      .decl > div {
        padding: 10px 16px;
      }
      .decl > div + div {
        border-left: 1px solid var(--line);
      }
      .decl .dl {
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink-faint);
        margin-bottom: 6px;
      }
      .decl .di {
        font-size: 12px;
        line-height: 1.7;
      }
      .decl .di b {
        font-weight: 700;
      }
      /* 步骤表:固定列宽撑开,宿主容器 overflow-x 滚动 */
      .steps {
        width: 100%;
        min-width: 1760px;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 12px;
      }
      .steps th {
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #fff;
        text-align: left;
      }
      .steps thead tr:first-child th {
        text-align: center;
        font-size: 12px;
        letter-spacing: 4px;
        padding: 7px 4px;
      }
      .steps .h-req {
        background: var(--navy);
      }
      .steps .h-req2 {
        background: #33547a;
      }
      .steps .h-in {
        background: var(--amber);
      }
      .steps .h-in2 {
        background: #cd7522;
      }
      .steps .h-im {
        background: var(--teal);
      }
      .steps .h-im2 {
        background: #2d8273;
      }
      .steps .h-out {
        background: var(--green);
      }
      .steps .h-out2 {
        background: #2e6b45;
      }
      .steps td {
        padding: 8px 9px;
        border: 1px solid var(--line);
        vertical-align: top;
        line-height: 1.6;
      }
      .steps tbody tr:nth-child(odd) td {
        background: #fdfdf9;
      }
      .steps td.c-in {
        background: var(--amber-bg) !important;
      }
      .steps td.c-out {
        background: var(--green-bg) !important;
      }
      .steps .sid {
        font-family: "IBM Plex Mono", monospace;
        font-weight: 700;
        color: var(--navy);
        white-space: nowrap;
      }
      .steps .vtxt {
        color: var(--ink-soft);
        font-size: 11.5px;
        word-break: break-all;
      }
      .inf {
        background: var(--infer) !important;
        position: relative;
        outline: 1px dashed var(--infer-edge);
        outline-offset: -2px;
      }
      .inf .ib {
        position: absolute;
        top: -1px;
        right: -1px;
        background: var(--infer-edge);
        color: #fff;
        font-size: 9px;
        padding: 0 4px;
        border-radius: 0 0 0 4px;
        font-weight: 700;
      }
      .anchor {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10.5px;
        color: var(--ink-faint);
        word-break: break-all;
      }
      /* 输入/输出「值」单元格:超过 4 行加蒙版,点击展开/收起 */
      .clamp-val {
        position: relative;
      }
      .clamp-val.clampable {
        max-height: 6.6em;
        overflow: hidden;
        cursor: zoom-in;
      }
      .clamp-val.clampable::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.4em;
        pointer-events: none;
      }
      .steps td.c-in .clamp-val.clampable::after {
        background: linear-gradient(180deg, rgba(255, 247, 232, 0), rgba(255, 247, 232, 1));
      }
      .steps td.c-out .clamp-val.clampable::after {
        background: linear-gradient(180deg, rgba(239, 250, 241, 0), rgba(239, 250, 241, 1));
      }
      .clamp-val.open {
        max-height: none;
        overflow: visible;
        cursor: zoom-out;
      }
      .clamp-val.open::after {
        display: none;
      }

      /* 工具表格(移植自 fixed_query_eval:案例逐行 rowspan + 限高展开) */
      .mw-ttwrap {
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow);
      }
      .mw-tt {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        min-width: 1180px;
        background: #fff;
        font-size: 12.5px;
      }
      .mw-tt thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        white-space: nowrap;
        background: linear-gradient(180deg, #2aa79b, #1c8076);
        color: #fff;
        font-weight: 700;
        padding: 10px 12px;
        letter-spacing: 0.3px;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
      }
      .mw-tt thead th:last-child {
        border-right: none;
      }
      .mw-tt thead tr:first-child th {
        top: 0;
      }
      .mw-tt thead tr:nth-child(2) th {
        top: 38px;
      }
      .mw-tt .th-group {
        text-align: center;
      }
      .mw-tt .th-sub {
        background: linear-gradient(180deg, #36bdb0, #23897f);
        font-weight: 600;
      }
      .mw-tt tbody td {
        padding: 9px 12px;
        vertical-align: top;
        line-height: 1.6;
        border-bottom: 1px solid #f0eee8;
        border-right: 1px solid #f5f3ee;
        color: #3a3a3a;
      }
      .mw-tt tbody td:last-child {
        border-right: none;
      }
      .mw-tt td.col-case {
        background: #fafdfc;
      }
      .mw-tt tbody tr.tr-b td {
        background: #fbfaf6;
      }
      .mw-tt tbody tr.tr-b td.col-case {
        background: #f6fbfa;
      }
      .mw-tt tbody td.col-tool {
        font-weight: 700;
        color: #176d64;
        white-space: nowrap;
        border-left: 3px solid #2aa79b;
        background: #f3faf8;
      }
      .mw-tt tbody tr:hover td.col-tool {
        background: #e3f4f0;
      }
      .mw-tt ul {
        margin: 0;
        padding-left: 17px;
      }
      .mw-tt ul li {
        margin: 3px 0;
      }
      .mw-tt ul li::marker {
        color: #2aa79b;
      }
      .mw-tt .layer-badge {
        display: inline-block;
        font-weight: 700;
        font-size: 11px;
        padding: 2px 10px;
        border-radius: 20px;
        white-space: nowrap;
      }
      .mw-tt .layer-badge.make {
        color: #0e7490;
        background: #d6f0ee;
      }
      .mw-tt .layer-badge.create {
        color: #b8731a;
        background: #fef0db;
      }
      .mw-tt .dash {
        color: #c9c2b6;
      }
      .mw-tt .tcell {
        position: relative;
        max-height: 7.8em;
        overflow: hidden;
        transition: max-height 0.15s;
      }
      .mw-tt .tcell.clamped {
        cursor: zoom-in;
      }
      .mw-tt .tcell.clamped::after {
        content: "▾ 展开";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.6em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        color: #176d64;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff 72%);
        pointer-events: none;
      }
      .mw-tt tbody tr.tr-b .tcell.clamped::after {
        background: linear-gradient(rgba(251, 250, 246, 0), #fbfaf6 72%);
      }
      .mw-tt td.col-case .tcell.clamped::after {
        background: linear-gradient(rgba(250, 253, 252, 0), #fafdfc 72%);
      }
      .mw-tt tbody tr.tr-b td.col-case .tcell.clamped::after {
        background: linear-gradient(rgba(246, 251, 250, 0), #f6fbfa 72%);
      }
      .mw-tt .tcell.open {
        max-height: none;
        cursor: zoom-out;
      }
      .mw-tt .tcell.open::after {
        content: "";
        height: 0;
      }

      /* ── 帖子详情弹层 ── */
      dialog#post-dialog {
        width: min(1100px, 94vw);
        max-height: calc(100vh - 40px);
        border: none;
        border-radius: 14px;
        padding: 0;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        margin: auto; /* 全局 reset 清掉了 dialog 默认 margin:auto,这里补回才能居中 */
      }
      dialog#post-dialog::backdrop {
        background: rgba(19, 30, 46, 0.5);
        backdrop-filter: blur(2px);
      }
      .pd-wrap {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 40px);
      }
      .pd-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        flex: none;
      }
      .pd-head h3 {
        font-family: "Noto Serif SC", serif;
        font-size: 18px;
        line-height: 1.35;
        margin-top: 6px;
      }
      .pd-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        color: var(--ink-soft);
      }
      .pd-close {
        border: none;
        background: #f1f0ea;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--ink-soft);
        flex: none;
        transition: 0.15s;
      }
      .pd-close:hover {
        background: var(--seal);
        color: #fff;
      }
      .pd-body {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 20px;
        padding: 18px 20px;
        overflow: auto;
      }
      @media (max-width: 920px) {
        .pd-body {
          grid-template-columns: 1fr;
        }
      }
      .pd-body > section,
      .pd-body > aside {
        min-width: 0;
      }
      .pd-sec-title {
        font-weight: 800;
        margin: 16px 0 8px;
        font-size: 13px;
      }
      .pd-sec-title:first-child {
        margin-top: 0;
      }
      .pd-verdict {
        background: #eaf6fb;
        border-left: 4px solid #2c9ec7;
        padding: 10px 12px;
        color: #22566b;
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.6;
      }
      .pd-raw {
        white-space: pre-wrap;
        background: #faf9f5;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        max-height: 320px;
        overflow: auto;
        color: #3d3f44;
        font-size: 13px;
        line-height: 1.7;
      }
      .pd-images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .pd-images img {
        width: 100%;
        max-height: 250px;
        object-fit: contain;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #f3f2ed;
        cursor: zoom-in;
      }
      /* ── 图片预览灯箱 ── */
      dialog.lightbox {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        padding: 40px 72px;
        border: none;
        gap: 18px;
        align-items: center;
        justify-content: center;
        background: rgba(20, 20, 22, 0.86);
        backdrop-filter: blur(2px);
        overflow: hidden;
      }
      dialog.lightbox[open] {
        display: flex;
      }
      dialog.lightbox::backdrop {
        background: rgba(20, 20, 22, 0.5);
      }
      .lb-stage {
        margin: 0;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .lb-stage img {
        max-width: min(1100px, 86vw);
        max-height: 82vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
        background: #2a2a2c;
      }
      .lb-stage figcaption {
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
        letter-spacing: 0.5px;
      }
      .lb-nav {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        transition: 0.15s;
      }
      .lb-nav:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      .lb-close {
        position: absolute;
        top: 20px;
        right: 24px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: 0.15s;
      }
      .lb-close:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      /* ── 帖子列表缩略图 ── */
      .post .thumb {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 7px;
        object-fit: cover;
        background: #f0efe9;
        border: 1px solid var(--line);
      }
      .post .thumb-ph {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 7px;
        background: #f0efe9;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-faint);
        font-size: 16px;
      }
      /* ── 原文卡片(可整体展开/收起;含标题、图片缩略图、正文) ── */
      .src-block {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 14px;
        background: #faf9f5;
        overflow: hidden;
      }
      .src-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        cursor: pointer;
        user-select: none;
      }
      .src-head:hover {
        background: #f3f2ed;
      }
      .src-caret {
        flex: 0 0 auto;
        color: var(--ink-faint);
        font-size: 11px;
        transition: transform 0.15s;
      }
      .src-block.open .src-caret {
        transform: rotate(90deg);
      }
      .src-label {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--blue);
        background: var(--blue-bg);
        padding: 1px 7px;
        border-radius: 4px;
      }
      .src-title {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .src-link {
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--blue);
        text-decoration: none;
      }
      .src-body {
        padding: 0 12px 12px;
      }
      .src-block:not(.open) .src-body {
        display: none;
      }
      .src-thumbs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 2px 10px;
        scrollbar-width: thin;
      }
      .src-thumbs img {
        flex: 0 0 auto;
        height: 96px;
        width: auto;
        max-width: 150px;
        border-radius: 8px;
        border: 1px solid var(--line);
        object-fit: cover;
        background: #f0efe9;
        cursor: zoom-in;
      }
      .src-text {
        font-size: 13px;
        line-height: 1.7;
        color: #3d3f44;
        white-space: pre-wrap;
      }
      .src-text.clamp {
        max-height: 88px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
        mask-image: linear-gradient(180deg, #000 62%, transparent);
      }
      .src-text-toggle {
        margin-top: 4px;
        background: none;
        border: none;
        color: var(--blue);
        cursor: pointer;
        font-size: 12px;
        padding: 2px 0;
      }
      .pd-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .pd-score-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .pd-score-head .t {
        font-weight: 800;
        font-size: 14px;
      }
      .pd-overall {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink-soft);
        background: #faf9f5;
        border: 1px solid var(--line);
        padding: 4px 12px;
        border-radius: 8px;
      }
      .pd-overall b {
        font-size: 20px;
        color: var(--blue);
        font-weight: 900;
        line-height: 1;
      }
      .sc-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 12px;
      }
      .sc-card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #faf9f5;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        font-weight: 800;
      }
      .sc-card-head .badge {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: var(--navy);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        margin-right: 7px;
      }
      .sc-card-head .avg {
        font-size: 12px;
        color: var(--ink-faint);
        font-weight: 600;
      }
      .sc-card-head .avg b {
        font-size: 17px;
        color: var(--blue);
        font-weight: 900;
      }
      .sc-card-body {
        display: grid;
        gap: 8px;
        padding: 11px 12px;
      }
      /* 维度分组小标题:参考 mode_procedure —— 一级虚线大写,二级点线常规 */
      .sc-sub {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.8px;
        color: var(--ink-faint);
        text-transform: uppercase;
        margin: 14px 0 8px;
        padding-bottom: 5px;
        border-bottom: 1px dashed var(--line-dark);
      }
      .sc-card-body > .sc-sub:first-child {
        margin-top: 2px;
      }
      .sc-sub.lv2 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: none;
        color: var(--ink-soft);
        margin: 11px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px dotted var(--line);
      }
      .sc-row {
        display: grid;
        grid-template-columns: 118px 1fr 30px 16px;
        gap: 9px;
        align-items: center;
        font-size: 12.5px;
      }
      .sc-row .meter {
        height: 8px;
        border-radius: 99px;
        background: #edebe4;
        overflow: hidden;
      }
      .sc-row .meter span {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, #60a5fa, #2563eb);
      }
      .sc-row b {
        font-weight: 700;
        text-align: right;
      }
      .sc-row .info {
        color: var(--ink-faint);
        cursor: pointer;
        font-size: 12px;
        opacity: 0.75;
        user-select: none;
      }
      .sc-row .info:hover {
        color: var(--blue);
        opacity: 1;
      }
      /* 判定理由弹层:点击 ⓘ 时浮现,挂在 dialog 顶层 */
      .score-pop {
        position: fixed;
        z-index: 90;
        width: 288px;
        max-width: calc(100vw - 24px);
        background: var(--card);
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 12px 14px;
        font-size: 12.5px;
        line-height: 1.65;
        color: var(--ink-soft);
        animation: popIn 0.12s ease;
      }
      .score-pop .sp-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line);
      }
      .score-pop .sp-tag {
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--ink-faint);
        font-weight: 700;
        border: 1px solid var(--line-dark);
        border-radius: 5px;
        padding: 2px 6px;
        white-space: nowrap;
      }
      .score-pop .sp-name {
        font-weight: 800;
        font-size: 13px;
        color: var(--ink);
      }
      .score-pop .sp-score {
        margin-left: auto;
        font-size: 16px;
        font-weight: 900;
        color: var(--blue);
      }
      .score-pop .sp-body {
        white-space: pre-wrap;
      }
      @keyframes popIn {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* 任务面板 */
      #task-panel {
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 440px;
        max-height: 55vh;
        z-index: 60;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line-dark);
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }
      #task-panel header {
        all: unset;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        background: var(--navy-deep);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }
      #task-panel header .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f5b942;
        animation: blink 1s infinite;
      }
      #task-panel header .dot.done {
        background: #3fb27f;
        animation: none;
      }
      #task-panel header .dot.failed {
        background: #e0492f;
        animation: none;
      }
      @keyframes blink {
        50% {
          opacity: 0.3;
        }
      }
      #task-panel header button {
        margin-left: auto;
        background: none;
        border: 0;
        color: #9eb0c5;
        font-size: 15px;
      }
      #task-panel header button:hover {
        color: #fff;
      }
      #task-log {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        line-height: 1.65;
        color: var(--ink-soft);
        white-space: pre-wrap;
        overflow: auto;
        padding: 12px 14px;
        background: #fafaf6;
        flex: 1;
      }

      /* 弹窗(新建搜索) */
      .modal-bg {
        position: fixed;
        inset: 0;
        background: rgba(19, 30, 46, 0.5);
        z-index: 70;
        display: grid;
        place-items: center;
        backdrop-filter: blur(2px);
      }
      /* 不能 overflow:hidden,否则渠道下拉面板会被裁掉 */
      .modal {
        width: 460px;
        background: var(--card);
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
      }
      .modal h2 {
        padding: 14px 18px;
        background: var(--navy-deep);
        color: #fff;
        font-size: 15px;
        letter-spacing: 2px;
        border-radius: 14px 14px 0 0;
      }
      .modal .mb {
        padding: 18px;
        display: grid;
        gap: 12px;
      }
      .modal label {
        font-size: 12px;
        color: var(--ink-soft);
        display: grid;
        gap: 5px;
      }
      .modal .mf {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 0 18px 18px;
      }
      /* 渠道下拉多选 */
      .dd {
        position: relative;
      }
      .dd-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        text-align: left;
        padding: 7px 10px;
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        color: var(--ink);
      }
      .dd-btn .dd-arrow {
        color: var(--ink-faint);
        flex: none;
      }
      .dd-btn:focus {
        border-color: var(--blue);
      }
      .dd-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        z-index: 10;
        background: #fff;
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 6px;
        max-height: 220px;
        overflow: auto;
      }
      .modal label.dd-opt {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        border-radius: 6px;
        font-size: 13px;
        color: var(--ink);
        cursor: pointer;
      }
      .dd-opt:hover {
        background: #f4f3ee;
      }
      .dd-opt input {
        accent-color: var(--blue);
        margin: 0;
        cursor: pointer;
      }
      .dd-opt.sel {
        background: var(--blue-bg);
        font-weight: 500;
      }

      /* 聚类库占位 */
      .cluster-empty {
        display: grid;
        place-items: center;
        min-height: 60vh;
      }
      .cluster-empty .inner {
        text-align: center;
        color: var(--ink-faint);
      }
      .cluster-empty .stamp {
        width: 120px;
        height: 120px;
        margin: 0 auto 18px;
        border: 3px solid var(--line-dark);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: "Noto Serif SC", serif;
        font-size: 30px;
        font-weight: 900;
        color: var(--line-dark);
        transform: rotate(-8deg);
        letter-spacing: 4px;
      }
      [hidden] {
        display: none !important;
      }

      /* ── 页内提示(替代浏览器原生 alert) ── */
      #toast-wrap {
        position: fixed;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 120;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }
      .toast {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 240px;
        max-width: min(440px, calc(100vw - 32px));
        padding: 12px 14px 12px 13px;
        background: var(--card);
        color: var(--ink);
        border: 1px solid var(--line-dark);
        border-left: 4px solid var(--navy);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        font-size: 13px;
        line-height: 1.55;
        animation: toastIn 0.18s ease;
      }
      .toast.out {
        animation: toastOut 0.16s ease forwards;
      }
      .toast .ic {
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 900;
        color: #fff;
        background: var(--navy);
      }
      .toast .msg {
        flex: 1;
        word-break: break-word;
      }
      .toast.error {
        border-left-color: var(--seal);
      }
      .toast.error .ic {
        background: var(--seal);
      }
      .toast.success {
        border-left-color: var(--green);
      }
      .toast.success .ic {
        background: var(--green);
      }
      .toast.warn {
        border-left-color: var(--amber);
      }
      .toast.warn .ic {
        background: var(--amber);
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes toastOut {
        to {
          opacity: 0;
          transform: translateY(-8px);
        }
      }
    </style>
  </head>
  <body>
    <div id="toast-wrap" aria-live="polite"></div>
    <header>
      <div class="logo">
        <div class="seal">解</div>
        <div><b>mode_workflow</b><small>解构工作台 · MODE WORKBENCH</small></div>
      </div>
      <nav id="nav">
        <a
          href="#dashboard"
          data-tab="dashboard"
          >Dashboard</a
        >
        <a
          href="#dataset"
          data-tab="dataset"
          >Dataset</a
        >
        <a
          href="#cluster"
          data-tab="cluster"
          >知识库</a
        >
      </nav>
      <div class="spacer"></div>
      <div class="hint">SEARCH · EXTRACT · ARCHIVE</div>
    </header>

    <main id="view-dashboard"></main>

    <main id="view-dataset">
      <div class="ds-top">
        <div class="mode-switch">
          <button
            id="m-process"
            class="on"
          >
            工序
          </button>
          <button id="m-tools">工具</button>
        </div>
        <div style="flex: 1"></div>
        <button
          class="btn seal"
          id="btn-new-search"
        >
          ＋ 新建搜索
        </button>
      </div>
      <div class="ds-grid">
        <div class="card">
          <div class="col-head">
            QUERY
            <span
              class="n"
              id="q-count"
            ></span>
          </div>
          <div
            class="qlist"
            id="query-list"
          >
            <div class="empty">暂无 query</div>
          </div>
        </div>
        <div class="card">
          <div class="col-head">
            帖子
            <span style="display: flex; gap: 8px; align-items: center">
              <span
                class="n"
                id="p-count"
              ></span>
              <button
                class="btn sm"
                id="btn-batch"
                disabled
                hidden
              >
                批量解构
              </button>
            </span>
          </div>
          <div
            class="plat-tabs"
            id="plat-tabs"
            hidden
          ></div>
          <div
            class="plist"
            id="post-list"
          >
            <div class="empty"><span class="glyph">←</span>先选择左侧 query</div>
          </div>
        </div>
        <div class="card xp">
          <div
            class="xp-head"
            id="xp-head"
          >
            <span class="st">解构结果</span>
          </div>
          <div
            class="xp-body"
            id="xp-body"
          >
            <div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>
          </div>
        </div>
      </div>
    </main>

    <main id="view-cluster">
      <iframe
        id="cluster-frame"
        title="知识检索"
        loading="lazy"
      ></iframe>
    </main>

    <div
      id="task-panel"
      hidden
    >
      <header>
        <span
          class="dot"
          id="task-dot"
        ></span
        ><span id="task-title">任务</span> <button onclick="hideTask()">✕</button>
      </header>
      <div id="task-log"></div>
    </div>

    <!-- 帖子详情弹层(评分详情参考 fixed_query_eval) -->
    <dialog id="post-dialog">
      <div class="pd-wrap">
        <div class="pd-head">
          <div style="min-width: 0">
            <div
              class="pd-meta"
              id="pd-meta"
            ></div>
            <h3 id="pd-title"></h3>
          </div>
          <button
            class="pd-close"
            onclick="document.getElementById('post-dialog').close()"
          >
            ✕
          </button>
        </div>
        <div class="pd-body">
          <section>
            <div id="pd-verdict"></div>
            <div class="pd-sec-title">抓取文本节选</div>
            <div
              class="pd-raw"
              id="pd-text"
            ></div>
            <div class="pd-sec-title">图片预览</div>
            <div
              class="pd-images"
              id="pd-images"
            ></div>
            <div
              class="pd-tags"
              id="pd-tags"
            ></div>
          </section>
          <aside>
            <div class="pd-score-head">
              <span class="t">评分详情</span>
              <span class="pd-overall">综合评分 <b id="pd-overall">—</b></span>
            </div>
            <div id="pd-scores"></div>
          </aside>
        </div>
      </div>
    </dialog>

    <!-- 图片预览灯箱(支持左右切换) -->
    <dialog
      class="lightbox"
      id="lightbox"
      onclick="if (event.target === this) closeLightbox();"
    >
      <button
        class="lb-close"
        onclick="closeLightbox()"
        title="关闭 (Esc)"
      >
        ✕
      </button>
      <button
        class="lb-nav lb-prev"
        onclick="lbStep(-1)"
        title="上一张 (←)"
      >
        ‹
      </button>
      <figure class="lb-stage">
        <img
          id="lb-img"
          src=""
          alt=""
        />
        <figcaption id="lb-count"></figcaption>
      </figure>
      <button
        class="lb-nav lb-next"
        onclick="lbStep(1)"
        title="下一张 (→)"
      >
        ›
      </button>
    </dialog>

    <div
      class="modal-bg"
      id="search-modal"
      hidden
    >
      <div class="modal">
        <h2>新建搜索</h2>
        <div class="mb">
          <label
            >Query(评估锚点,必填)<input
              type="text"
              id="s-query"
              placeholder="如:AI 人像 图片 生成 怎么做"
          /></label>
          <label
            >解构方向<select id="s-mode">
              <option value="工序">工序</option>
              <option value="工具">工具</option>
            </select></label
          >
          <label
            >同义措辞(可选,逗号分隔)<input
              type="text"
              id="s-syn"
              placeholder="如:AI 人像生成 教程,AI 写真 怎么做"
          /></label>
          <label
            >检索渠道(下拉多选)
            <div
              class="dd"
              id="s-plat-dd"
            >
              <button
                type="button"
                class="dd-btn"
                id="s-plat-btn"
              >
                选择渠道 ▾
              </button>
              <div
                class="dd-panel"
                id="s-plat-panel"
                hidden
              ></div>
            </div>
          </label>
          <label
            >每措辞每渠道上限<input
              type="number"
              id="s-max"
              value="10"
              min="1"
              max="50"
          /></label>
        </div>
        <div class="mf">
          <button
            class="btn"
            onclick="document.getElementById('search-modal').hidden = true"
          >
            取消
          </button>
          <button
            class="btn primary"
            id="s-go"
          >
            开始搜索
          </button>
        </div>
      </div>
    </div>

    <script>
      /* ════ 基础 ════ */
      const $ = (s) => document.querySelector(s);
      /* 页内提示,替代浏览器原生 alert();type: info|error|success|warn */
      function toast(msg, type = "info", ms = 3200) {
        const wrap = $("#toast-wrap");
        if (!wrap) return;
        const ic = { info: "i", error: "!", success: "✓", warn: "!" }[type] || "i";
        const el = document.createElement("div");
        el.className = "toast " + type;
        el.innerHTML = `<span class="ic">${ic}</span><span class="msg">${esc(msg)}</span>`;
        const dismiss = () => {
          el.classList.add("out");
          el.addEventListener("animationend", () => el.remove(), { once: true });
        };
        el.addEventListener("click", dismiss);
        wrap.appendChild(el);
        setTimeout(dismiss, ms);
      }
      const api = (p, opt) =>
        fetch(p, opt).then(async (r) => {
          if (!r.ok)
            throw Object.assign(new Error("api"), { status: r.status, body: await r.json().catch(() => ({})) });
          return r.json();
        });
      const esc = (s) =>
        String(s ?? "").replace(
          /[&<>"']/g,
          (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
        );
      /* 外链图片走本服务同源反代,绕过公众号(mmbiz.qpic.cn)等防盗链 */
      const imgProxy = (u) => (/^https?:\/\//.test(u || "") ? "/api/img?u=" + encodeURIComponent(u) : u || "");
      /* 图片加载策略:优先「浏览器直连 CDN」(referrerpolicy=no-referrer 多数能绕防盗链),
         直连失败再回退到同源代理 /api/img。
         为什么:公网走 Cloudflare 快速隧道(trycloudflare),所有经 /api/img 的图片字节都要
         「上游CDN → 本机 → 隧道(受本机上行带宽限制)→ 客户」,一帖十几张图(每张 100~180KB)
         就把本机上行打满,于是「本地快、公网慢」。改为浏览器直连后,绝大多数图片字节不再过本机/
         隧道,只有少数仍被防盗链拦截的才回退代理。 */
      const imgDirect = (u) => (/^https?:\/\//.test(u || "") ? u : imgProxy(u));
      function imgFallback(el, proxy) {
        el.onerror = null; // 防止回调里再次触发自身造成死循环
        if (!el.dataset.fb) {
          el.dataset.fb = "1"; // 直连失败 → 回退同源代理(防盗链兜底)
          el.onerror = () => imgFallback(el, proxy);
          el.src = proxy;
          return;
        }
        if (el.dataset.ph)
          el.outerHTML = el.dataset.ph; // 代理也失败:换占位元素
        else el.style.opacity = 0.25; // 无占位:淡化
      }
      function imgHtml(u, { cls = "", extra = "", ph = "" } = {}) {
        const phAttr = ph ? ` data-ph="${esc(ph)}"` : "";
        return `<img ${cls ? `class="${cls}" ` : ""}src="${esc(imgDirect(u))}" referrerpolicy="no-referrer" loading="lazy"${phAttr} ${extra} onerror="imgFallback(this,'${esc(imgProxy(u))}')">`;
      }
      const state = {
        tab: "dashboard",
        mode: "process",
        queryId: null,
        caseId: null,
        post: null,
        version: null,
        platFilter: "all",
        doneFilter: true,
        selected: new Set(),
        queries: [],
        posts: [],
      };
      const PLAT_CLS = (p) =>
        ({ xhs: "xhs", gzh: "gzh", zhihu: "zhihu", douyin: "douyin", sph: "sph", youtube: "youtube", x: "x" })[p] ||
        "other";
      const PLAT_NAME = (p) =>
        ({
          xhs: "小红书",
          gzh: "公众号",
          sph: "视频号",
          github: "GitHub",
          toutiao: "头条",
          douyin: "抖音",
          bili: "哔哩哔哩",
          zhihu: "知乎",
          weibo: "微博",
          youtube: "YouTube",
          x: "X",
        })[p] ||
        p ||
        "?";
      /* 渠道 logo 徽标(品牌色圆角方块,hover 显示渠道名) */
      /* 有对应 SVG 图标的渠道(文件位于 /icons/<key>.svg) */
      const PLAT_ICONS = new Set(["xhs", "gzh", "sph", "github", "douyin", "bili", "zhihu", "weibo", "youtube"]);
      const PLAT_LOGO = (p, size = 18) =>
        PLAT_ICONS.has(p)
          ? `<span class="plat-logo" title="${PLAT_NAME(p)}"><img src="/icons/${p}.svg" width="${size}" height="${size}" alt="${PLAT_NAME(p)}" loading="lazy"></span>`
          : `<span class="plat other">${esc(PLAT_NAME(p))}</span>`;
      const MODELS_PROC = ["anthropic/claude-sonnet-4-6", "google/gemini-3.1-flash-lite"];
      const MODELS_TOOL = ["google/gemini-3.1-flash-lite", "anthropic/claude-sonnet-4-6"];
      const scoreCls = (v) => (v == null ? "s0" : v >= 9 ? "s9" : v >= 8 ? "s8" : v >= 6 ? "s6" : "s0");

      /* ════ 路由 ════ */
      function route() {
        state.tab = (location.hash || "#dashboard").slice(1);
        if (!["dashboard", "dataset", "cluster"].includes(state.tab)) state.tab = "dashboard";
        document.querySelectorAll("nav a").forEach((a) => a.classList.toggle("on", a.dataset.tab === state.tab));
        document.querySelectorAll("main").forEach((m) => m.classList.toggle("on", m.id === "view-" + state.tab));
        if (state.tab === "dashboard") renderDashboard();
        if (state.tab === "dataset" && !state.queries.length) loadQueries();
        if (state.tab === "cluster") {
          // 首次打开聚类库才加载内嵌检索页
          const f = $("#cluster-frame");
          if (f && !f.src) f.src = "/search.html";
        }
      }
      window.addEventListener("hashchange", route);

      /* ════ Dashboard ════ */
      let chartRefs = [];
      async function renderDashboard() {
        const v = $("#view-dashboard");
        let d;
        try {
          d = await api("/api/dashboard");
        } catch (e) {
          v.innerHTML = `<div class="card empty"><span class="glyph">!</span>Dashboard 加载失败:${esc(e.body?.error || e.status)}</div>`;
          return;
        }
        const r = d.result,
          p = d.process_data;
        // 进度百分比向下取整:200/201=99.5% 显示 99%,未真正做完不会显示 100%
        const pct = (a, b) => (b ? Math.floor((a / b) * 100) : 0);
        const platBreak = (arr) =>
          (arr || [])
            .map(
              ([k, n]) =>
                `<span class="pb-item">${PLAT_LOGO(k, 15)}<b class="num">${n}</b></span>`,
            )
            .join("") || "—";
        v.innerHTML = `
  <div class="dash-section"><h2>结果数据</h2><div class="rule"></div><span class="tag">RESULTS</span></div>
  <div class="cards">
    <div class="card stat"><div class="lbl">采集帖子数量</div><div class="val num">${r.post_count}</div><div class="sub plat-break">${platBreak(r.collected_by_platform)}</div></div>
    <div class="card stat t"><div class="lbl">解构帖子数量</div><div class="val num">${r.extracted_post_count}</div><div class="sub plat-break">${platBreak(r.extracted_by_platform)}</div></div>
    <div class="card stat a"><div class="lbl">工具数量</div><div class="val num">${r.tool_count}</div><div class="sub">mode_tools 去重工具名</div></div>
    <div class="card stat r"><div class="lbl">内容树覆盖节点</div><div class="val num">0</div>
      <div class="sub">0%</div></div>
    <div class="card stat"><div class="lbl">实质数量</div><div class="val num">${r.substance_count}</div><div class="sub">去重实质条目数</div></div>
    <div class="card stat"><div class="lbl">形式数量</div><div class="val num">${r.form_count}</div><div class="sub">去重形式条目数</div></div>
  </div>
  <div class="dash-section"><h2>过程数据</h2><div class="rule"></div><span class="tag">PROCESS</span></div>
  <div class="cards">
    <div class="card stat a"><div class="lbl">解构成本</div><div class="val num">$${p.total_cost}</div><div class="sub">单条均值 $${p.avg_cost} · 共 ${p.run_count} 次</div></div>
    <div class="card stat a"><div class="lbl">解构耗时</div><div class="val num">${(p.total_duration / 3600).toFixed(1)}<span style="font-size:14px">h</span></div><div class="sub">平均 ${p.avg_duration}s / 次</div></div>
    <div class="card stat t"><div class="ring-row"><div class="ring" style="--p:${pct(p.process_progress.done, p.process_progress.total)}"><div>${pct(p.process_progress.done, p.process_progress.total)}%</div></div>
      <div><div class="lbl">工序进度</div><div class="num" style="font-weight:700">${p.process_progress.done} / ${p.process_progress.total}</div><div class="sub">已解构 / 需解构</div></div></div></div>
    <div class="card stat t"><div class="ring-row"><div class="ring" style="--p:${pct(p.tools_progress.done, p.tools_progress.total)}"><div>${pct(p.tools_progress.done, p.tools_progress.total)}%</div></div>
      <div><div class="lbl">工具进度</div><div class="num" style="font-weight:700">${p.tools_progress.done} / ${p.tools_progress.total}</div><div class="sub">已解构 / 需解构</div></div></div></div>
  </div>
  <div class="charts">
    <div class="card chart-card span6"><h3>工序提及工具 TOP10</h3><div class="chart" id="ch-via" style="height:300px"></div></div>
    <div class="card chart-card span6"><h3>解构成本趋势</h3><div class="chart" id="ch-cost" style="height:300px"></div></div>
    <div class="card chart-card span6"><h3>实质覆盖分布 <span class="num">${r.substance_count}</span></h3><div class="chart" id="ch-sub" style="height:320px"></div></div>
    <div class="card chart-card span6"><h3>形式覆盖分布 <span class="num">${r.form_count}</span></h3><div class="chart" id="ch-form" style="height:320px"></div></div>
    <div class="card chart-card span12"><h3>内容树覆盖热力图 <span class="num">${r.matrix_covered}/${r.matrix_valid}</span><span style="font-weight:400;color:var(--ink-faint)">· 27 动作 × 50 类型</span></h3><div class="chart" id="ch-matrix" style="height:560px"></div></div>
  </div>`;
        chartRefs.forEach((c) => c.dispose());
        chartRefs = [];
        const mk = (id, opt) => {
          const c = echarts.init($(id));
          c.setOption(opt);
          chartRefs.push(c);
          return c;
        };
        const ink = "#1c2433",
          faint = "#9aa3b0",
          grid = { left: 8, right: 16, top: 8, bottom: 8, containLabel: true };
        /* 热力图 */
        mk("#ch-matrix", {
          tooltip: { formatter: (pr) => `${r.matrix_actions[pr.value[1]]} × ${r.matrix_types[pr.value[0]]}` },
          grid: { left: 8, right: 16, top: 8, bottom: 60, containLabel: true },
          xAxis: {
            type: "category",
            data: r.matrix_types,
            axisLabel: { rotate: 60, fontSize: 9, color: faint },
            splitArea: { show: true, areaStyle: { color: ["#fcfcf9", "#f5f4ef"] } },
          },
          yAxis: {
            type: "category",
            data: r.matrix_actions,
            axisLabel: { fontSize: 10, color: ink },
            splitArea: { show: true },
          },
          visualMap: { show: false, min: 0, max: 1, inRange: { color: ["#f0efe8", "#bb3a22"] } },
          series: [
            {
              type: "heatmap",
              data: r.matrix_cells.map(([a, t]) => [t, a, 1]),
              itemStyle: { borderColor: "#fff", borderWidth: 1 },
            },
          ],
        });
        const bar = (data, color) => ({
          tooltip: {},
          grid,
          xAxis: { type: "value", axisLabel: { color: faint } },
          yAxis: {
            type: "category",
            data: data.map((x) => x[0]).reverse(),
            axisLabel: { color: ink, fontSize: 11, width: 130, overflow: "truncate" },
          },
          series: [
            {
              type: "bar",
              data: data.map((x) => x[1]).reverse(),
              itemStyle: { color, borderRadius: [0, 3, 3, 0] },
              barMaxWidth: 16,
              label: { show: true, position: "right", color: faint, fontSize: 10 },
            },
          ],
        });
        mk("#ch-via", r.via_top10.length ? bar(r.via_top10, "#1e3a5f") : emptyOpt());
        mk("#ch-sub", r.substance_top.length ? bar(r.substance_top, "#b45309") : emptyOpt());
        mk("#ch-form", r.form_top.length ? bar(r.form_top, "#0f6b5c") : emptyOpt());
        mk(
          "#ch-cost",
          p.cost_trend.length
            ? {
                tooltip: { trigger: "axis" },
                grid,
                xAxis: { type: "category", data: p.cost_trend.map((x) => x.date), axisLabel: { color: faint } },
                yAxis: { type: "value", axisLabel: { color: faint, formatter: "${value}" } },
                series: [
                  {
                    type: "line",
                    data: p.cost_trend.map((x) => x.cost),
                    smooth: true,
                    symbolSize: 7,
                    lineStyle: { color: "#bb3a22", width: 2.5 },
                    itemStyle: { color: "#bb3a22" },
                    areaStyle: { color: "rgba(187,58,34,.08)" },
                  },
                ],
              }
            : emptyOpt(),
        );
        function emptyOpt() {
          return {
            title: {
              text: "暂无数据",
              left: "center",
              top: "middle",
              textStyle: { color: faint, fontSize: 12, fontWeight: 400 },
            },
            xAxis: { show: false },
            yAxis: { show: false },
          };
        }
      }

      /* ════ Dataset:query 列表 ════ */
      async function loadQueries() {
        /* 工序/工具各自一张搜索表,query 列表按当前子模式拉取 */
        try {
          state.queries = await api("/api/queries?mode=" + state.mode);
        } catch (e) {
          state.queries = [];
        }
        renderQueries();
        /* 进入/切换子模式时默认选中第一个 query(进而联动第一帖与解构结果) */
        if (!state.queryId && state.queries.length) await selectQuery(state.queries[0].query_id);
      }
      function renderQueries() {
        const list = state.queries;
        $("#q-count").textContent = list.length ? list.length + " 组" : "";
        if (!list.length) {
          $("#query-list").innerHTML = '<div class="empty">暂无 query<br>点右上「新建搜索」开始</div>';
          return;
        }
        $("#query-list").innerHTML = list
          .map((q) => {
            const done = state.mode === "process" ? q.process_done : q.tools_done;
            return `<div class="qitem ${q.query_id === state.queryId ? "on" : ""}" onclick="selectQuery('${q.query_id}')">
      <div class="qid">${q.query_id}</div>
      <div class="qt">${esc(q.query_text || "(未命名)")}</div>
      <div class="qm">
        <span>采纳/命中 <b class="num hit">${q.hit_count ?? 0}</b></span>
        <span>总帖数 <b class="num">${q.post_count}</b></span>
        <span>已解构 <b class="num">${done}</b></span>
      </div>
    </div>`;
          })
          .join("");
      }
      async function selectQuery(qid) {
        state.queryId = qid;
        state.caseId = null;
        state.post = null;
        state.platFilter = "all";
        state.selected.clear();
        renderQueries();
        renderExtractEmpty();
        $("#post-list").innerHTML = '<div class="empty">加载中…</div>';
        try {
          state.posts = await api("/api/posts?mode=" + state.mode + "&query_id=" + encodeURIComponent(qid));
        } catch (e) {
          state.posts = [];
        }
        renderPosts();
        /* 默认选中「可见列表」第一帖(已解构筛选下即第一个已解构帖),无可见帖则退回全部第一帖 */
        if (state.posts.length) {
          const vis = visiblePosts();
          await selectPost((vis[0] || state.posts[0]).case_id);
        }
      }

      /* ════ Dataset:帖子列表(按渠道分 tab)════ */
      function setPlatFilter(p) {
        state.platFilter = p;
        renderPosts();
      }
      function toggleDoneFilter() {
        state.doneFilter = !state.doneFilter;
        renderPosts();
        renderPostsAutoSelect();
      }
      /* 当前可见帖(渠道 + 已解构筛选后),供列表渲染与「默认选中」共用 */
      function visiblePosts() {
        const isDone = (p) => (state.mode === "process" ? p.has_process : p.has_tools);
        let list =
          state.platFilter === "all"
            ? state.posts
            : state.posts.filter((p) => (p.platform || "other") === state.platFilter);
        if (state.doneFilter) list = list.filter(isDone);
        return list;
      }
      /* 切换筛选后,若当前选中帖已被筛掉,则改选可见列表的第一帖 */
      async function renderPostsAutoSelect() {
        const vis = visiblePosts();
        if (vis.length && !vis.some((p) => p.case_id === state.caseId)) await selectPost(vis[0].case_id);
      }
      function renderPosts() {
        const all = state.posts;
        updateBatchBtn();
        /* 渠道 tab + 已解构筛选 */
        const counts = {};
        all.forEach((p) => {
          const k = p.platform || "other";
          counts[k] = (counts[k] || 0) + 1;
        });
        const plats = Object.keys(counts);
        if (state.platFilter !== "all" && !counts[state.platFilter]) state.platFilter = "all";
        const isDone = (p) => (state.mode === "process" ? p.has_process : p.has_tools);
        const platScoped =
          state.platFilter === "all" ? all : all.filter((p) => (p.platform || "other") === state.platFilter);
        const doneN = platScoped.filter(isDone).length;
        const tabs = $("#plat-tabs");
        if (all.length) {
          tabs.hidden = false;
          const btns =
            plats.length > 1
              ? [
                  `<button class="${state.platFilter === "all" ? "on" : ""}" onclick="setPlatFilter('all')">全部<span class="c">${all.length}</span></button>`,
                ].concat(
                  plats.map(
                    (k) =>
                      `<button class="${state.platFilter === k ? "on" : ""}" onclick="setPlatFilter('${esc(k)}')">${PLAT_NAME(k)}<span class="c">${counts[k]}</span></button>`,
                  ),
                )
              : [];
          btns.push(`<button class="done-filter ${state.doneFilter ? "on" : ""}" onclick="toggleDoneFilter()"
        title="${state.doneFilter ? "当前只看已解构,点击显示全部" : "点击只看已解构"}"><span class="dot">●</span>已解构<span class="c">${doneN}</span></button>`);
          tabs.innerHTML = btns.join("");
        } else {
          tabs.hidden = true;
        }

        const list = visiblePosts();
        $("#p-count").textContent = all.length
          ? state.platFilter === "all" && !state.doneFilter
            ? `${all.length} 帖`
            : `${list.length} / ${all.length} 帖`
          : "";
        if (!all.length) {
          $("#post-list").innerHTML = '<div class="empty">该 query 暂无帖子</div>';
          return;
        }
        if (!list.length) {
          $("#post-list").innerHTML =
            `<div class="empty">${state.doneFilter ? "该筛选下暂无已解构帖子" : "该渠道暂无帖子"}</div>`;
          return;
        }
        $("#post-list").innerHTML = list
          .map((p) => {
            const done = state.mode === "process" ? p.has_process : p.has_tools;
            const kt = (p.knowledge_type || []).map((k) => `<span class="pill">${esc(k)}</span>`).join("");
            const sb =
              p.overall_score != null
                ? `<span class="score-badge ${scoreCls(p.overall_score)} num"
              onclick="event.stopPropagation();openPostDetail('${esc(p.case_id)}')">${p.overall_score}</span>`
                : "";
            const thumbSrc = (p.images || []).filter(Boolean)[0];
            const thumb = thumbSrc
              ? imgHtml(thumbSrc, { cls: "thumb", ph: "<div class='thumb-ph'>🖼️</div>" })
              : `<div class="thumb-ph" title="暂无图片">🖼️</div>`;
            return `<div class="post ${p.case_id === state.caseId ? "on" : ""}" onclick="selectPost('${esc(p.case_id)}')">
      ${thumb}
      <div style="flex:1;min-width:0">
        <div class="pt">${esc(p.title || "(无标题)")}</div>
        <div class="pm">
          ${PLAT_LOGO(p.platform)}
          ${p.adopted ? '<span class="pill green">采纳</span>' : ""}
          ${kt}
          ${done ? '<span class="done-dot">● 已解构</span>' : ""}
        </div>
      </div>
      ${sb}
    </div>`;
          })
          .join("");
      }
      function toggleSel(cid, on) {
        on ? state.selected.add(cid) : state.selected.delete(cid);
        updateBatchBtn();
      }
      function updateBatchBtn() {
        const b = $("#btn-batch");
        b.disabled = !state.selected.size;
        b.textContent = state.selected.size ? `批量解构(${state.selected.size})` : "批量解构";
      }
      $("#btn-batch").onclick = () => state.selected.size && startExtract([...state.selected]);

      /* ════ 帖子详情弹层 ════ */
      /* 得分可能是字符串("1")或数字(10),统一解析;非数值返回 null */
      const scoreNum = (v) => {
        const n = typeof v === "number" || (typeof v === "string" && v.trim() !== "") ? Number(v) : NaN;
        return Number.isFinite(n) ? n : null;
      };
      function collectScores(node) {
        let out = [];
        if (Array.isArray(node)) node.forEach((v) => (out = out.concat(collectScores(v))));
        else if (node && typeof node === "object") {
          for (const [k, v] of Object.entries(node)) {
            if (k === "得分") {
              const n = scoreNum(v);
              if (n !== null) out.push(n);
            } else out = out.concat(collectScores(v));
          }
        }
        return out;
      }
      function scRow(label, v, reason) {
        const n = scoreNum(v);
        const has = n !== null;
        return `<div class="sc-row">
    <span style="color:${has ? "inherit" : "var(--ink-faint)"}">${esc(label)}</span>
    <div class="meter"><span style="width:${has ? Math.min(n, 10) * 10 : 0}%"></span></div>
    <b class="num">${has ? n : "—"}</b>
    ${reason ? `<span class="info" data-label="${esc(label)}" data-reason="${esc(reason)}" data-score="${has ? n : ""}" onclick="showScorePop(this)">ⓘ</span>` : "<span></span>"}
  </div>`;
      }
      /* 递归渲染评分;depth>0 的分组标题用二级样式,形成层级 */
      function walkScores(node, depth) {
        depth = depth || 0;
        let html = "";
        for (const [k, v] of Object.entries(node || {})) {
          if (v && typeof v === "object" && !Array.isArray(v) && "得分" in v) {
            html += scRow(k, v["得分"], v["理由"]);
          } else if (scoreNum(v) !== null) {
            html += scRow(k, v);
          } else if (v && typeof v === "object" && !Array.isArray(v)) {
            const inner = walkScores(v, depth + 1);
            if (inner) html += `<div class="sc-sub${depth > 0 ? " lv2" : ""}">${esc(k)}</div>` + inner;
          }
        }
        return html;
      }

      /* ── 质量评分:不跟随原始 JSON 嵌套,改用 mode_procedure 的规范分组与顺序 ──
   固定维度 → 用例 → 工序 → 能力 → 工具;丢弃「字段完整性」「动态维度」等中间表头 */
      const QUALITY_ORDER = {
        工序: ["流程完整性", "输入完整性", "实现完整性", "输出完整性", "泛化性"],
        能力: ["输入完整性", "实现完整性", "输出完整性", "泛化性"],
        工具: ["能力边界覆盖", "有效比较", "参数/接口具体性", "实操示例", "版本&限制"],
      };
      /* DFS 找到名为 name 的容器节点(工序/能力/工具) */
      function findScoreNode(n, name) {
        if (!n || typeof n !== "object" || Array.isArray(n)) return null;
        if (name in n && n[name] && typeof n[name] === "object" && !Array.isArray(n[name])) return n[name];
        for (const v of Object.values(n)) {
          if (v && typeof v === "object" && !Array.isArray(v)) {
            const r = findScoreNode(v, name);
            if (r) return r;
          }
        }
        return null;
      }
      /* 递归收集子树叶子评分 [name,{得分,理由}],打平中间分组头 */
      function collectLeaves(node) {
        let out = [];
        for (const [k, v] of Object.entries(node || {})) {
          if (v && typeof v === "object" && !Array.isArray(v) && "得分" in v) out.push([k, v]);
          else if (scoreNum(v) !== null) out.push([k, { 得分: v }]);
          else if (v && typeof v === "object" && !Array.isArray(v)) out = out.concat(collectLeaves(v));
        }
        return out;
      }
      function renderQuality(qnode) {
        /* 固定维度/用例 的维度名全局唯一,扁平索引即可取 */
        const flat = {};
        (function collect(n) {
          for (const [k, v] of Object.entries(n || {})) {
            if (v && typeof v === "object" && !Array.isArray(v)) {
              if ("得分" in v) flat[k] = v;
              else collect(v);
            } else if (scoreNum(v) !== null) flat[k] = { 得分: v };
          }
        })(qnode);
        const sub = (t) => `<div class="sc-sub">${esc(t)}</div>`;
        const rows = (pairs) => pairs.map(([n, o]) => scRow(n, o["得分"], o["理由"])).join("");
        const pick = (names) => names.filter((n) => flat[n]).map((n) => [n, flat[n]]);

        let html = "";
        let p = pick(["时效性", "热度性", "评论反馈"]); // ① 固定维度(置顶)
        if (p.length) html += sub("固定维度") + rows(p);
        p = pick(["真实感", "真实感 (非AI)", "真实感(非AI)", "表现力"]); // ② 用例
        if (p.length) html += sub("用例") + rows(p);
        for (const name of ["工序", "能力", "工具"]) {
          // ③ 动态维度(按方向命名,内部规范排序)
          const node = findScoreNode(qnode, name);
          if (!node) continue;
          const leaves = collectLeaves(node);
          if (!leaves.length) continue;
          const order = QUALITY_ORDER[name] || [];
          leaves.sort((a, b) => (order.indexOf(a[0]) + 1 || 99) - (order.indexOf(b[0]) + 1 || 99));
          html += sub(name) + rows(leaves);
        }
        return html || '<span style="color:var(--ink-faint)">无评分</span>';
      }

      /* ── 判定理由弹层:点击 ⓘ 浮现,符合当前页面样式 ── */
      let _scorePop = null;
      function closeScorePop() {
        if (_scorePop) {
          _scorePop.remove();
          _scorePop = null;
        }
        document.removeEventListener("mousedown", _scorePopOutside, true);
      }
      function _scorePopOutside(e) {
        if (_scorePop && !_scorePop.contains(e.target) && !e.target.classList.contains("info")) closeScorePop();
      }
      function showScorePop(el) {
        const reopen = _scorePop && _scorePop._anchor === el;
        closeScorePop();
        if (reopen) return; // 再次点击同一图标 → 收起
        const score = el.dataset.score;
        const pop = document.createElement("div");
        pop.className = "score-pop";
        pop._anchor = el;
        pop.innerHTML = `<div class="sp-head">
      <span class="sp-tag">判定理由</span>
      <span class="sp-name">${esc(el.dataset.label || "")}</span>
      ${score !== "" && score != null ? `<span class="sp-score">${esc(score)}</span>` : ""}
    </div>
    <div class="sp-body">${esc(el.dataset.reason || "")}</div>`;
        // 挂在 dialog 内,确保位于 showModal 顶层之上
        (document.getElementById("post-dialog") || document.body).appendChild(pop);
        _scorePop = pop;
        // 定位:图标下方右对齐;越界则上翻 / 收边
        const r = el.getBoundingClientRect();
        let top = r.bottom + 8,
          left = r.right - pop.offsetWidth;
        if (left < 12) left = 12;
        if (top + pop.offsetHeight > window.innerHeight - 12) top = r.top - pop.offsetHeight - 8;
        if (top < 12) top = 12;
        pop.style.top = top + "px";
        pop.style.left = left + "px";
        setTimeout(() => document.addEventListener("mousedown", _scorePopOutside, true), 0);
      }
      document.getElementById("post-dialog")?.addEventListener("close", closeScorePop);
      /* ── 图片预览灯箱 ── */
      const lb = { imgs: [], i: 0 };
      function openLightbox(i) {
        if (!lb.imgs.length) return;
        lb.i = (i + lb.imgs.length) % lb.imgs.length;
        renderLightbox();
        const d = $("#lightbox");
        if (!d.open) d.showModal();
      }
      function closeLightbox() {
        const d = $("#lightbox");
        if (d.open) d.close();
      }
      function lbStep(d) {
        if (!lb.imgs.length) return;
        lb.i = (lb.i + d + lb.imgs.length) % lb.imgs.length;
        renderLightbox();
      }
      function renderLightbox() {
        const url = lb.imgs[lb.i];
        const el = $("#lb-img");
        delete el.dataset.fb; // 切换图片前清除上一张的回退标记
        el.onerror = () => imgFallback(el, imgProxy(url));
        el.src = imgDirect(url); // 大图同样优先直连,失败回退代理
        $("#lb-count").textContent = `${lb.i + 1} / ${lb.imgs.length}`;
        const multi = lb.imgs.length > 1;
        document.querySelector(".lb-prev").style.visibility = multi ? "visible" : "hidden";
        document.querySelector(".lb-next").style.visibility = multi ? "visible" : "hidden";
      }
      document.addEventListener("keydown", (e) => {
        if (!$("#lightbox").open) return;
        if (e.key === "ArrowLeft") lbStep(-1);
        else if (e.key === "ArrowRight") lbStep(1);
        // Esc 由 <dialog> 原生处理(触发 close)
      });

      function openPostDetail(cid) {
        const p = state.posts.find((x) => x.case_id === cid);
        if (!p) return;
        const e = p.llm_evaluation || {};
        const meta = [];
        meta.push(`${PLAT_LOGO(p.platform)}<span style="font-weight:600">${esc(PLAT_NAME(p.platform))}</span>`);
        meta.push(p.adopted ? '<span class="pill green">采纳/命中</span>' : '<span class="pill">未采纳</span>');
        if (p.publish_time) meta.push(`<span>${esc(String(p.publish_time).slice(0, 16))}</span>`);
        if (p.like_count != null) meta.push(`<span>👍 ${p.like_count}</span>`);
        if (p.quality_grade) meta.push(`<span>质量 ${esc(p.quality_grade)} ${p.quality_score ?? ""}</span>`);
        if (p.url) meta.push(`<a href="${esc(p.url)}" target="_blank">原文 ↗</a>`);
        $("#pd-meta").innerHTML = meta.join("");
        $("#pd-title").textContent = p.title || "(无标题)";
        const verdict = e["判定理由"] || e["理由"] || "";
        $("#pd-verdict").innerHTML = verdict ? `<div class="pd-verdict">${esc(verdict)}</div>` : "";
        $("#pd-text").textContent = p.body || "(无正文)";
        const imgs = (p.images || []).filter(Boolean);
        $("#pd-images").innerHTML = imgs.length
          ? imgs
              .map(
                (s, i) => imgHtml(s, { extra: `onclick="openLightbox(${i})"` }),
              )
              .join("")
          : '<p style="color:var(--ink-faint);font-size:12px">搜索详情未返回图片。</p>';
        lb.imgs = imgs;
        $("#pd-tags").innerHTML = [
          ...(p.knowledge_type || []).map((t) => "类型:" + t),
          ...(p.found_by || []).map((q) => "命中:" + q),
        ]
          .map((t) => `<span class="pill">${esc(t)}</span>`)
          .join("");
        $("#pd-overall").innerHTML =
          p.overall_score != null
            ? `${p.overall_score}<span style="font-size:11px;color:var(--ink-faint);font-weight:500"> /10</span>`
            : "—";
        /* 评分卡:相关性 + 质量(均分 + 各维度,ⓘ hover 看理由) */
        $("#pd-scores").innerHTML =
          [
            ["01", "相关性"],
            ["02", "质量"],
          ]
            .map(([no, key], i) => {
              const node = e[key];
              if (!node) return "";
              const vs = collectScores(node);
              const avg = vs.length ? (vs.reduce((a, b) => a + b, 0) / vs.length).toFixed(1) : "N/A";
              return `<div class="sc-card">
      <div class="sc-card-head">
        <span><span class="badge">${no}</span>${esc(key)}</span>
        <span class="avg">均分 <b>${avg}</b>/10</span>
      </div>
      <div class="sc-card-body">${(key === "质量" ? renderQuality(node) : walkScores(node)) || '<span style="color:var(--ink-faint)">无评分</span>'}</div>
    </div>`;
            })
            .join("") || '<div class="empty">无评估数据</div>';
        $("#post-dialog").showModal();
      }

      /* ════ Dataset:右栏解构结果 ════ */
      function renderExtractEmpty() {
        $("#xp-head").innerHTML = '<span class="st">解构结果</span>';
        $("#xp-body").innerHTML = '<div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>';
      }
      async function selectPost(cid) {
        state.caseId = cid;
        state.version = null;
        state.post = state.posts.find((p) => p.case_id === cid) || null;
        renderPosts();
        await loadExtract();
      }

      /* ── 解构结果:客户端缓存 + 请求竞态守卫(解决「多次点击卡顿 / 残留上一帖」)──
         · _extractCache:解构数据只在「重新解构」时变(由本页 startExtract 触发,届时清缓存),
           故缓存可长留——再次点开看过的帖 0 往返、瞬时渲染。
         · _extractSeq:每次发起 +1;晚到的旧响应据 seq 丢弃,杜绝快速连点时旧响应覆盖新选中。 */
      const _extractCache = new Map(); // key: mode|case_id|version → {versions,data,missing}
      const _extractKey = (cid, ver) => `${state.mode}|${cid}|${ver || ""}`;
      let _extractSeq = 0;
      function invalidateExtractCache(cid) {
        for (const k of [..._extractCache.keys()]) if (k.includes(`|${cid}|`)) _extractCache.delete(k);
      }

      async function loadExtract() {
        if (!state.caseId) return renderExtractEmpty();
        const isProc = state.mode === "process";
        const seq = ++_extractSeq; // 本次请求序号
        const key = _extractKey(state.caseId, state.version);

        // 1) 命中缓存:瞬时渲染,0 往返
        const cached = _extractCache.get(key);
        if (cached) return paintExtract(cached, seq);

        // 2) 未命中:立即显示「原文 + loading」。关键:重写 #xp-body 会移除上一帖的 <img>,
        //    浏览器随即取消其 /api/img 下载,腾出每域 ~6 条连接额度,新的 /api/extract 不再
        //    排在旧图片请求后面等待——这是「多次点击要等很久」的根因。同时给出加载态,
        //    不再停留在上一帖的解构结果。
        renderExtractHead([], null, false, true);
        $("#xp-body").innerHTML =
          renderSourceBlock() +
          `<div class="empty"><span class="spinner"></span>正在加载${isProc ? "工序" : "工具"}解构…</div>`;

        // 版本列表 + 解构详情合一,一个请求拿全(服务端同连接两查,ETag 命中可走 304)
        const url =
          `/api/extract?mode=${state.mode}&case_id=` +
          encodeURIComponent(state.caseId) +
          (state.version ? "&version=" + encodeURIComponent(state.version) : "");
        let res;
        try {
          res = await api(url);
        } catch (e) {
          if (seq !== _extractSeq) return; // 已切到别的帖,丢弃本响应
          $("#xp-body").innerHTML = renderSourceBlock() + '<div class="empty">解构数据加载失败,请重试</div>';
          return;
        }
        if (seq !== _extractSeq) return; // 晚到的旧响应:不覆盖新选中
        const payload = { versions: res.versions || [], data: res.data, missing: res.missing || !res.data };
        _extractCache.set(key, payload);
        paintExtract(payload, seq);
      }

      function paintExtract({ versions, data, missing }, seq) {
        if (seq !== _extractSeq) return; // 渲染前再校验(缓存命中路径也经此)
        const isProc = state.mode === "process";
        renderExtractHead(versions, data, missing);
        const body = $("#xp-body");
        if (missing || !data) {
          body.innerHTML =
            renderSourceBlock() +
            `<div class="empty">该帖暂无${isProc ? "工序" : "工具"}解构<br><br>
      <button class="btn primary" onclick="startExtract(['${esc(state.caseId)}'])">开始解构</button></div>`;
          return;
        }
        state.version = data.version;
        // 以「具体 version」补一条缓存别名,版本下拉切回时也能命中
        _extractCache.set(_extractKey(state.caseId, data.version), { versions, data, missing });
        syncVersionSelect();
        body.innerHTML = isProc ? renderProcedures(data) : renderTools(data);
        requestAnimationFrame(markSrcTextClamp);
        if (isProc) requestAnimationFrame(markStepClamps);
        else requestAnimationFrame(markClampedCells);
      }
      function renderExtractHead(versions, data, missing, loading) {
        const isProc = state.mode === "process";
        const title = state.post ? esc(state.post.title || state.caseId) : esc(state.caseId || "");
        const opts = versions
          .map(
            (v, i) =>
              `<option value="${esc(v.version)}">${esc(v.version)}${i === 0 ? " (最新)" : ""} · ${v.n}${isProc ? "工序" : "工具"}</option>`,
          )
          .join("");
        const models = (isProc ? MODELS_PROC : MODELS_TOOL).map((m) => `<option>${m}</option>`).join("");
        const stat = loading ? "加载中…" : missing ? "未提取" : "已提取";
        $("#xp-head").innerHTML = `
    <span class="st">大模型${isProc ? "工序" : "工具"}:<em>${stat}</em></span>
    <span style="font-size:12px;color:var(--ink-faint);max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${title}">${title}</span>
    <span class="spacer"></span>
    ${versions.length ? `<select id="ver-sel">${opts}</select>` : ""}
    <select id="model-sel" title="解构模型">${models}</select>
    <button class="btn sm primary" onclick="startExtract(['${esc(state.caseId || "")}'])">${missing ? "提取" : "♻ 重新生成"}</button>
    <button class="btn sm" onclick="showTaskPanel()" title="重新打开任务日志面板">📋 操作日志</button>`;
        const vs = $("#ver-sel");
        if (vs)
          vs.onchange = () => {
            state.version = vs.value;
            loadExtract();
          };
      }
      function syncVersionSelect() {
        const vs = $("#ver-sel");
        if (vs && state.version) vs.value = state.version;
      }

      /* ── 原文卡片:标题 + 图片缩略图(横滑、可灯箱预览)+ 正文(定高可展开),整体可收起 ── */
      let srcOpen = true,
        srcTextOpen = false;
      function renderSourceBlock() {
        const p = state.post;
        if (!p || !(p.title || (p.images || []).length || p.body)) return "";
        const imgs = (p.images || []).filter(Boolean);
        const thumbs = imgs.length
          ? `<div class="src-thumbs">${imgs
              .map(
                (s, i) =>
                  imgHtml(s, { extra: `onclick="openSrcLightbox(${i})"` }),
              )
              .join("")}</div>`
          : "";
        const body = p.body
          ? `<div class="src-text${srcTextOpen ? "" : " clamp"}" id="src-text">${esc(p.body)}</div>
        <button class="src-text-toggle" id="src-text-toggle" onclick="toggleSrcText()" hidden>${srcTextOpen ? "收起 ▲" : "展开 ▼"}</button>`
          : "";
        const link = p.url
          ? `<a class="src-link" href="${esc(p.url)}" target="_blank" rel="noreferrer" onclick="event.stopPropagation()">原文 ↗</a>`
          : "";
        return `<div class="src-block${srcOpen ? " open" : ""}" id="src-block">
      <div class="src-head" onclick="toggleSrc()">
        <span class="src-caret">▸</span>
        <span class="src-label">原文</span>
        <span class="src-title">${esc(p.title || "(无标题)")}</span>
        ${link}
      </div>
      <div class="src-body">${thumbs}${body}</div>
    </div>`;
      }
      function toggleSrc() {
        srcOpen = !srcOpen;
        const b = $("#src-block");
        if (b) b.classList.toggle("open", srcOpen);
        requestAnimationFrame(markSrcTextClamp);
      }
      function toggleSrcText() {
        srcTextOpen = !srcTextOpen;
        const t = $("#src-text"),
          btn = $("#src-text-toggle");
        if (t) t.classList.toggle("clamp", !srcTextOpen);
        if (btn) btn.textContent = srcTextOpen ? "收起 ▲" : "展开 ▼";
      }
      function openSrcLightbox(i) {
        lb.imgs = ((state.post && state.post.images) || []).filter(Boolean);
        openLightbox(i);
      }
      /* 仅当正文在定高下溢出时才显示「展开」按钮(需在可见、未展开态测量) */
      function markSrcTextClamp() {
        const t = $("#src-text"),
          btn = $("#src-text-toggle");
        if (!t || !btn) return;
        if (srcTextOpen) {
          btn.hidden = false;
          return;
        }
        btn.hidden = !(t.scrollHeight > t.clientHeight + 2);
      }

      /* ── 工序渲染 ── */
      function renderProcedures(data) {
        const src = data.source || {};
        return (
          renderSourceBlock() +
            (data.procedures || [])
              .map((p) => {
                const d = p.declarations || {};
                const ins =
                  (d.inputs || [])
                    .map(
                      (x) =>
                        `<span class="pill amber">${esc(x.type || "")}</span> ${x.name ? `<b>${esc(x.name)}</b>` : ""} ${x.desc ? `<span style="color:var(--ink-faint)">— ${esc(x.desc)}</span>` : ""}`,
                    )
                    .join("<br>") || '<span style="color:var(--ink-faint)">无</span>';
                const ret = d.returns
                  ? `<span class="pill teal">${esc(d.returns.type || "")}</span>`
                  : '<span style="color:var(--ink-faint)">无</span>';
                return `<div class="proc">
      <div class="proc-head">
        <div class="nm"><span class="pid">工序 ${esc(p.id || "")}</span>${esc(p.name || "")}</div>
        ${p.purpose ? `<div class="pp">#目的:${esc(p.purpose)}</div>` : ""}
        <div class="meta">
          ${p.category ? `<span class="pill red">类别:${esc(p.category)}</span>` : ""}
          ${src.platform ? `<span class="pill">#平台:${esc(src.platform)}</span>` : ""}
          ${src.author ? `<span class="pill">#作者:${esc(src.author)}</span>` : ""}
          <span class="pill">case:${esc(data.case_id)}</span>
          ${(p.tools_used || []).map((t) => `<span class="pill teal">${esc(t)}</span>`).join("")}
        </div>
      </div>
      <div class="decl">
        <div><div class="dl">输入</div><div class="di">${ins}</div></div>
        <div><div class="dl">返回</div><div class="di">${ret}</div></div>
      </div>
      ${renderSteps(p.steps || [])}
    </div>`;
              })
              .join("") || '<div class="empty">本版本无工序</div>'
        );
      }
      function renderSteps(steps) {
        if (!steps.length) return '<div class="empty">无步骤</div>';
        let rows = "";
        for (const s of steps) {
          const ins = s.inputs && s.inputs.length ? s.inputs : [null];
          const outs = s.outputs && s.outputs.length ? s.outputs : [null];
          const n = Math.max(ins.length, outs.length);
          for (let i = 0; i < n; i++) {
            rows += "<tr>";
            if (i === 0) {
              rows += `<td rowspan="${n}" class="sid">${esc(s.id || "")}</td>
          <td rowspan="${n}">${esc(s.directive || s.intent || "")}</td>
          <td rowspan="${n}">${s.effect ? `<span class="pill navy">${esc(s.effect)}</span>` : ""}</td>
          <td rowspan="${n}">${esc(fmtSF(s.substance))}</td>
          <td rowspan="${n}">${esc(fmtSF(s.form))}</td>`;
            }
            rows += ioCell(ins[i], "in");
            if (i === 0) {
              rows += `<td rowspan="${n}">${s.via ? `<span class="pill teal">${esc(s.via)}</span>` : ""}</td>
          <td rowspan="${n}" class="vtxt">${esc(s.action || "")}</td>`;
            }
            rows += ioCell(outs[i], "out");
            rows += "</tr>";
          }
        }
        return `<div style="overflow-x:auto"><table class="steps">
    <colgroup>
      <col style="width:44px"><col style="width:200px"><col style="width:92px">
      <col style="width:112px"><col style="width:100px">
      <col style="width:112px"><col style="width:330px"><col style="width:92px">
      <col style="width:118px"><col style="width:130px">
      <col style="width:112px"><col style="width:360px"><col style="width:110px">
    </colgroup>
    <thead>
      <tr><th class="h-req" colspan="5">需 求</th><th class="h-in" colspan="3">输 入</th><th class="h-im" colspan="2">实 现</th><th class="h-out" colspan="3">输 出</th></tr>
      <tr>
        <th class="h-req2">#</th><th class="h-req2">目的</th><th class="h-req2">作用</th><th class="h-req2">实质</th><th class="h-req2">形式</th>
        <th class="h-in2">类型</th><th class="h-in2">值</th><th class="h-in2">来源</th>
        <th class="h-im2">外部工具</th><th class="h-im2">动作</th>
        <th class="h-out2">类型</th><th class="h-out2">值</th><th class="h-out2">去处</th>
      </tr>
    </thead><tbody>${rows}</tbody></table></div>`;
      }
      function fmtSF(v) {
        return v == null ? "" : Array.isArray(v) ? v.join("、") : v;
      }
      function ioCell(x, kind) {
        const cls = kind === "in" ? "c-in" : "c-out";
        if (!x) return `<td class="${cls}"></td><td class="${cls}"></td><td class="${cls}"></td>`;
        const inf = x.inferred ? ` inf" title="推断理由:${esc(x.inferred_reason || "模型推断补全")}` : "";
        const badge = x.inferred ? '<span class="ib">推</span>' : "";
        return `<td class="${cls}"><span class="pill ${kind === "in" ? "amber" : "teal"}">${esc(x.type || "")}</span></td>
    <td class="${cls}${inf}">${badge}<div class="clamp-val" onclick="toggleClampVal(this)"><span class="vtxt">${esc(x.value || "")}</span></div></td>
    <td class="${cls}"><span class="anchor">${esc(x.anchor || "")}</span></td>`;
      }
      /* 点击「值」单元格展开/收起(仅在内容溢出、已标记 clampable 时生效) */
      function toggleClampVal(el) {
        if (!el.classList.contains("clampable") && !el.classList.contains("open")) return;
        el.classList.toggle("open");
      }
      /* 渲染后标记真正溢出 4 行的「值」单元格:先套限高再测量,溢出才保留 clampable */
      function markStepClamps() {
        document.querySelectorAll("#xp-body .steps .clamp-val").forEach((el) => {
          if (el.classList.contains("open")) return;
          el.classList.add("clampable");
          if (el.scrollHeight <= el.clientHeight + 2) el.classList.remove("clampable");
        });
      }

      /* ── 工具渲染(表格,移植自 fixed_query_eval renderToolTable)── */
      const DASH = '<span class="dash">—</span>';
      function _toolCell(v) {
        if (v === null || v === undefined || v === "" || (Array.isArray(v) && !v.length)) return DASH;
        if (Array.isArray(v)) return "<ul>" + v.map((x) => `<li>${esc(String(x))}</li>`).join("") + "</ul>";
        return esc(String(v));
      }
      function _scopeCell(v) {
        /* 作用域是 JSON 数组:按「、」拼接成短语,不出列表 */
        if (v === null || v === undefined || (Array.isArray(v) && !v.length) || v === "") return DASH;
        return esc(Array.isArray(v) ? v.join("、") : String(v));
      }
      function _ttCell(inner, clampable) {
        return clampable ? `<div class="tcell" onclick="this.classList.toggle('open')">${inner}</div>` : inner;
      }
      function _toolCellContent(c, t) {
        let inner,
          cls = "",
          clampable = true,
          style = "";
        if (c === "工具名称") {
          cls = "col-tool";
          clampable = false;
          inner = `🔧 ${esc(t[c] || "(未命名)")}`;
        } else if (c === "来源链接") {
          clampable = false;
          inner = t[c]
            ? `<a href="${esc(t[c])}" target="_blank" style="color:#176d64;font-weight:600;">🔗 打开</a>`
            : DASH;
        } else if (c === "创作层级") {
          clampable = false;
          inner = t[c]
            ? `<span class="layer-badge ${t[c] === "制作层" ? "make" : "create"}">${esc(t[c])}</span>`
            : DASH;
        } else if (c === "实质作用域" || c === "形式作用域") {
          inner = _scopeCell(t[c]);
        } else {
          inner = _toolCell(t[c]);
        }
        if (["输入", "输出", "用法", "缺点"].includes(c)) style = "max-width:240px;";
        else if (c === "实质作用域" || c === "形式作用域") style = "max-width:170px;";
        else if (!clampable) style = "white-space:nowrap;";
        return { inner, cls, clampable, style };
      }
      function _td(c, t, rowspan) {
        const { inner, cls, clampable, style } = _toolCellContent(c, t);
        const rs = rowspan > 1 ? ` rowspan="${rowspan}"` : "";
        return `<td class="${cls}" style="${style}"${rs}>${_ttCell(inner, clampable)}</td>`;
      }
      function _caseTd(cse, key) {
        const v = cse && cse[key] != null && cse[key] !== "" ? esc(String(cse[key])) : DASH;
        return `<td class="col-case" style="max-width:210px;">${_ttCell(v, true)}</td>`;
      }
      function renderTools(data) {
        const tools = data.tools || [];
        if (!tools.length) return renderSourceBlock() + '<div class="empty">本版本无工具</div>';
        /* 案例 group(输入/输出/效果)放在 用法 后、缺点 前;用 colspan/rowspan 做两层表头 */
        const before = ["工具名称", "创作层级", "实质作用域", "形式作用域", "输入", "输出", "用法"];
        const after = ["缺点", "来源链接", "最新更新时间"];
        const thead = `<thead>
    <tr>
      ${before.map((c) => `<th rowspan="2">${c}</th>`).join("")}
      <th colspan="3" class="th-group">案例</th>
      ${after.map((c) => `<th rowspan="2">${c}</th>`).join("")}
    </tr>
    <tr>${["输入", "输出", "效果"].map((c) => `<th class="th-sub">${c}</th>`).join("")}</tr>
  </thead>`;
        const rows = tools
          .map((t, ti) => {
            const cases = Array.isArray(t["案例"]) && t["案例"].length ? t["案例"] : [null];
            const K = cases.length;
            const par = ti % 2 ? "tr-b" : "tr-a";
            return cases
              .map((cse, i) => {
                const caseTds = `${_caseTd(cse, "输入")}${_caseTd(cse, "输出")}${_caseTd(cse, "效果")}`;
                if (i === 0) {
                  return `<tr class="${par}">${before.map((c) => _td(c, t, K)).join("")}${caseTds}${after.map((c) => _td(c, t, K)).join("")}</tr>`;
                }
                return `<tr class="${par}">${caseTds}</tr>`;
              })
              .join("");
          })
          .join("");
        return (
          renderSourceBlock() +
          `<div class="mw-ttwrap"><table class="mw-tt">${thead}<tbody>${rows}</tbody></table></div>`
        );
      }
      /* 渲染后标记真正溢出的单元格(才显示蒙版+可点击) */
      function markClampedCells() {
        document.querySelectorAll("#xp-body .mw-tt .tcell").forEach((el) => {
          if (!el.classList.contains("open") && el.scrollHeight > el.clientHeight + 2) el.classList.add("clamped");
          else if (el.scrollHeight <= el.clientHeight + 2) el.classList.remove("clamped");
        });
      }

      /* ════ 解构任务 ════ */
      async function startExtract(caseIds) {
        if (!state.queryId || !caseIds.length) return;
        const isProc = state.mode === "process";
        const model = $("#model-sel")?.value || (isProc ? MODELS_PROC[0] : MODELS_TOOL[0]);
        try {
          const r = await api(`/api/extract_${isProc ? "process" : "tools"}`, {
            method: "POST",
            body: JSON.stringify({ query_id: state.queryId, case_ids: caseIds, model }),
          });
          showTask(`${isProc ? "工序" : "工具"}解构 · ${caseIds.length} 帖`, r.task_id, async () => {
            state.selected.clear();
            caseIds.forEach(invalidateExtractCache); // 重新解构后数据已变,清这些帖的缓存
            await selectQuery(state.queryId);
            if (caseIds.includes(state.caseId)) {
              /* selectQuery 清了 caseId,恢复选中 */
            }
            if (caseIds.length === 1) {
              state.caseId = caseIds[0];
              state.version = null;
              renderPosts();
              await loadExtract();
            }
          });
        } catch (e) {
          toast("任务启动失败:" + (e.body?.error || e.status), "error");
        }
      }

      /* ════ 任务面板(✕ 只隐藏;「操作日志」按钮可随时唤回)════ */
      let pollTimer = null,
        hasTask = false;
      function showTask(title, taskId, onDone) {
        hasTask = true;
        $("#task-panel").hidden = false;
        $("#task-title").textContent = title;
        $("#task-dot").className = "dot";
        $("#task-log").textContent = "启动中…";
        clearTimeout(pollTimer);
        const poll = async () => {
          let t;
          try {
            t = await api("/api/task_status?task_id=" + encodeURIComponent(taskId));
          } catch (e) {
            $("#task-log").textContent = "状态查询失败";
            return;
          }
          const log = $("#task-log");
          log.textContent = t.log_tail || "(暂无日志)";
          log.scrollTop = log.scrollHeight;
          if (t.status === "running") {
            pollTimer = setTimeout(poll, 2000);
            return;
          }
          $("#task-dot").className = "dot " + t.status;
          $("#task-title").textContent = title + (t.status === "done" ? " · 完成" : " · 失败");
          if (t.status === "done" && onDone) onDone();
        };
        poll();
      }
      /* ✕ 只隐藏面板,轮询照跑(任务完成后回调依然触发) */
      function hideTask() {
        $("#task-panel").hidden = true;
      }
      function showTaskPanel() {
        if (!hasTask) return toast("本次会话还没有任务日志", "warn");
        $("#task-panel").hidden = false;
        const log = $("#task-log");
        log.scrollTop = log.scrollHeight;
      }

      /* ════ 新建搜索 ════ */
      /* 渠道下拉多选(选项同 search_eval:小红书/知乎/公众号/抖音/视频号/YouTube) */
      const CHANNELS = [
        { key: "xhs", name: "小红书", on: true },
        { key: "zhihu", name: "知乎", on: true },
        { key: "gzh", name: "公众号" },
        { key: "douyin", name: "抖音" },
        { key: "sph", name: "视频号" },
        { key: "youtube", name: "YouTube" },
      ];
      $("#s-plat-panel").innerHTML = CHANNELS.map(
        (c) => `
  <label class="dd-opt ${c.on ? "sel" : ""}">
    <input type="checkbox" value="${c.key}" ${c.on ? "checked" : ""}>${c.name}
  </label>`,
      ).join("");
      function selectedPlatforms() {
        return [...document.querySelectorAll("#s-plat-panel input:checked")].map((x) => x.value);
      }
      function syncPlatBtn() {
        const names = [...document.querySelectorAll("#s-plat-panel input:checked")].map(
          (x) => CHANNELS.find((c) => c.key === x.value).name,
        );
        $("#s-plat-btn").innerHTML =
          `<span>${names.length ? esc(names.join("、")) : "选择渠道"}</span><span class="dd-arrow">▾</span>`;
      }
      $("#s-plat-btn").onclick = (e) => {
        e.stopPropagation();
        $("#s-plat-panel").hidden = !$("#s-plat-panel").hidden;
      };
      $("#s-plat-panel").onclick = (e) => e.stopPropagation();
      $("#s-plat-panel").addEventListener("change", (e) => {
        e.target.closest(".dd-opt").classList.toggle("sel", e.target.checked);
        syncPlatBtn();
      });
      document.addEventListener("click", () => {
        $("#s-plat-panel").hidden = true;
      });
      syncPlatBtn();
      $("#btn-new-search").onclick = () => {
        $("#s-mode").value = state.mode === "process" ? "工序" : "工具"; // 默认跟随当前子模式
        $("#search-modal").hidden = false;
        $("#s-query").focus();
      };
      $("#search-modal").onclick = (e) => {
        if (e.target === $("#search-modal")) $("#search-modal").hidden = true;
      };
      $("#s-go").onclick = async () => {
        const query = $("#s-query").value.trim();
        if (!query) return toast("请填写 query", "warn");
        const plats = selectedPlatforms();
        if (!plats.length) return toast("请至少选择一个检索渠道", "warn");
        const body = {
          query,
          synonyms: $("#s-syn").value.trim(),
          mode_type: $("#s-mode").value,
          platforms: plats.join(","),
          max_count: parseInt($("#s-max").value) || 10,
        };
        try {
          const r = await api("/api/run_search", { method: "POST", body: JSON.stringify(body) });
          $("#search-modal").hidden = true;
          showTask(`搜索 · ${r.query_id} ${query}`, r.task_id, async () => {
            /* 搜索结果落在 s-mode 对应的表,完成后切到对应子模式再选中 */
            const m = body.mode_type === "工具" ? "tools" : "process";
            if (state.mode !== m) {
              state.mode = m;
              $("#m-process").classList.toggle("on", m === "process");
              $("#m-tools").classList.toggle("on", m === "tools");
            }
            await loadQueries();
            selectQuery(r.query_id);
          });
        } catch (e) {
          toast("搜索启动失败:" + (e.body?.error || e.status), "error");
        }
      };

      /* ════ 工序/工具子模式 ════ */
      $("#m-process").onclick = () => setMode("process");
      $("#m-tools").onclick = () => setMode("tools");
      function setMode(m) {
        if (state.mode === m) return;
        state.mode = m;
        state.version = null;
        /* 工序/工具是两张独立搜索表,切换时整体重置三栏 */
        state.queryId = null;
        state.caseId = null;
        state.post = null;
        state.posts = [];
        state.selected.clear();
        state.platFilter = "all";
        $("#m-process").classList.toggle("on", m === "process");
        $("#m-tools").classList.toggle("on", m === "tools");
        $("#plat-tabs").hidden = true;
        $("#p-count").textContent = "";
        $("#post-list").innerHTML = '<div class="empty"><span class="glyph">←</span>先选择左侧 query</div>';
        renderExtractEmpty();
        loadQueries();
      }

      window.addEventListener("resize", () => chartRefs.forEach((c) => c.resize()));
      route();
    </script>
  </body>
</html>