howard
/
Agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252
							<!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-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;
      }

      /* ── 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: 3px;
        color: var(--ink-soft);
        font-weight: 600;
      }
      .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: start;
      }
      @media (max-width: 1280px) {
        .ds-grid {
          grid-template-columns: 200px 320px minmax(0, 1fr);
        }
      }
      .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 {
        max-height: 76vh;
        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 {
        max-height: 70vh;
        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 {
        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;
      }

      /* 工序卡 */
      .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;
      }
    </style>
  </head>
  <body>
    <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);
      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 || "");
      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: "公众号", zhihu: "知乎", douyin: "抖音", sph: "视频号", youtube: "YouTube", x: "X" })[
          p
        ] ||
        p ||
        "?";
      /* 渠道 logo 徽标(品牌色圆角方块,hover 显示渠道名) */
      const PLAT_LOGO = (p, size = 18) => {
        const glyph = (bg, ch) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
    <rect width="24" height="24" rx="5.5" fill="${bg}"/>
    <text x="12" y="16.6" font-size="12" font-weight="700" fill="#fff" text-anchor="middle"
          font-family="'Noto Sans SC',sans-serif">${ch}</text></svg>`;
        const svgs = {
          xhs: glyph("#ff2442", "红"),
          zhihu: glyph("#0084ff", "知"),
          gzh: glyph("#07c160", "公"),
          douyin: glyph("#161823", "抖"),
          sph: glyph("#fa6d20", "视"),
          x: glyph("#15202b", "X"),
          youtube: `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
      <rect width="24" height="24" rx="5.5" fill="#f00"/>
      <polygon points="9.8,7.8 17,12 9.8,16.2" fill="#fff"/></svg>`,
        };
        return svgs[p]
          ? `<span class="plat-logo" title="${PLAT_NAME(p)}">${svgs[p]}</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]) => `${PLAT_NAME(k)} ${n}`).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">${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">${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
              ? `<img class="thumb" src="${esc(imgProxy(thumbSrc))}" loading="lazy"
              onerror="this.outerHTML='<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() {
        $("#lb-img").src = imgProxy(lb.imgs[lb.i]);
        $("#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) => `<img src="${esc(imgProxy(s))}" loading="lazy"
        onclick="openLightbox(${i})" onerror="this.style.opacity=.25">`,
              )
              .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();
      }
      async function loadExtract() {
        if (!state.caseId) return renderExtractEmpty();
        const isProc = state.mode === "process";
        const vURL = `/api/${isProc ? "process" : "tools"}_versions?case_id=` + encodeURIComponent(state.caseId);
        const dURL =
          `/api/${isProc ? "process" : "tools"}?case_id=` +
          encodeURIComponent(state.caseId) +
          (state.version ? "&version=" + encodeURIComponent(state.version) : "");
        let versions = [],
          data = null,
          missing = false;
        try {
          versions = await api(vURL);
        } catch (e) {}
        try {
          data = await api(dURL);
        } catch (e) {
          if (e.status === 404) missing = true;
          else throw e;
        }
        renderExtractHead(versions, data, missing);
        const body = $("#xp-body");
        if (missing || !data) {
          body.innerHTML = `<div class="empty">该帖暂无${isProc ? "工序" : "工具"}解构<br><br>
      <button class="btn primary" onclick="startExtract(['${esc(state.caseId)}'])">开始解构</button></div>`;
          return;
        }
        state.version = data.version;
        syncVersionSelect();
        body.innerHTML = isProc ? renderProcedures(data) : renderTools(data);
        requestAnimationFrame(markSrcTextClamp);
        if (isProc) requestAnimationFrame(markStepClamps);
        else requestAnimationFrame(markClampedCells);
      }
      function renderExtractHead(versions, data, missing) {
        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("");
        $("#xp-head").innerHTML = `
    <span class="st">大模型${isProc ? "工序" : "工具"}:<em>${missing ? "未提取" : "已提取"}</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) =>
                  `<img src="${esc(imgProxy(s))}" loading="lazy" onclick="openSrcLightbox(${i})" onerror="this.style.opacity=.25">`,
              )
              .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();
            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) {
          alert("任务启动失败:" + (e.body?.error || e.status));
        }
      }

      /* ════ 任务面板(✕ 只隐藏;「操作日志」按钮可随时唤回)════ */
      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 alert("本次会话还没有任务日志");
        $("#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 alert("请填写 query");
        const plats = selectedPlatforms();
        if (!plats.length) return alert("请至少选择一个检索渠道");
        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) {
          alert("搜索启动失败:" + (e.body?.error || e.status));
        }
      };

      /* ════ 工序/工具子模式 ════ */
      $("#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>