globals.css 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074
  1. :root {
  2. color: #172033;
  3. background: #f6f8fb;
  4. font-family:
  5. Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui,
  6. -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  7. font-synthesis: none;
  8. text-rendering: optimizeLegibility;
  9. }
  10. * {
  11. box-sizing: border-box;
  12. }
  13. body {
  14. min-width: 1120px;
  15. min-height: 100vh;
  16. margin: 0;
  17. background: #f6f8fb;
  18. }
  19. button,
  20. input,
  21. select {
  22. font: inherit;
  23. }
  24. a {
  25. color: inherit;
  26. text-decoration: none;
  27. }
  28. .app-shell {
  29. min-height: 100vh;
  30. }
  31. .workspace {
  32. min-width: 0;
  33. padding: 10px 20px 24px;
  34. }
  35. .topbar {
  36. display: flex;
  37. align-items: center;
  38. justify-content: space-between;
  39. gap: 16px;
  40. min-height: 46px;
  41. margin-bottom: 8px;
  42. }
  43. .topbar-left {
  44. display: flex;
  45. align-items: center;
  46. justify-content: flex-start;
  47. gap: 12px;
  48. }
  49. .topbar-center {
  50. display: flex;
  51. align-items: center;
  52. justify-content: center;
  53. min-width: 0;
  54. }
  55. /* tab 上提到顶栏中部:去掉独立成行的下边距 */
  56. .topbar-center .panel-nav {
  57. margin-bottom: 0;
  58. flex-wrap: nowrap;
  59. }
  60. .topbar-center .panel-nav-tab {
  61. padding: 6px 13px;
  62. }
  63. .brand {
  64. display: inline-flex;
  65. align-items: center;
  66. justify-content: center;
  67. text-align: center;
  68. }
  69. .back-link {
  70. width: fit-content;
  71. min-height: 34px;
  72. display: inline-flex;
  73. align-items: center;
  74. justify-content: center;
  75. gap: 6px;
  76. padding: 0 11px;
  77. border: 1px solid #cfdceb;
  78. border-radius: 8px;
  79. color: #31415a;
  80. background: #ffffff;
  81. font-size: 12px;
  82. font-weight: 900;
  83. box-shadow: 0 1px 2px rgba(20, 39, 66, 0.04);
  84. }
  85. .back-link:hover {
  86. border-color: #9cbce8;
  87. color: #2360ad;
  88. background: #f8fbff;
  89. }
  90. .brand strong {
  91. color: #172033;
  92. font-size: 16px;
  93. font-weight: 950;
  94. }
  95. .toolbar {
  96. display: flex;
  97. align-items: center;
  98. justify-content: flex-end;
  99. gap: 8px;
  100. }
  101. .icon-button,
  102. .text-button {
  103. min-height: 36px;
  104. display: inline-flex;
  105. align-items: center;
  106. justify-content: center;
  107. gap: 8px;
  108. border: 1px solid #cfdceb;
  109. border-radius: 8px;
  110. color: #22304a;
  111. background: #ffffff;
  112. font-size: 13px;
  113. font-weight: 900;
  114. cursor: pointer;
  115. }
  116. .icon-button {
  117. width: 38px;
  118. }
  119. .text-button {
  120. padding: 0 12px;
  121. }
  122. .icon-button:hover,
  123. .text-button:hover {
  124. border-color: #9cbce8;
  125. color: #2360ad;
  126. background: #f8fbff;
  127. }
  128. .panel,
  129. .pipeline-header,
  130. .filter-bar,
  131. .list-panel,
  132. .detail-panel {
  133. border: 1px solid #dfe5ee;
  134. border-radius: 8px;
  135. background: #ffffff;
  136. }
  137. .pipeline-header {
  138. padding: 0 8px;
  139. overflow-x: auto;
  140. }
  141. .pipeline-grid {
  142. min-width: 1430px;
  143. display: grid;
  144. grid-template-columns: repeat(7, 196px);
  145. gap: 8px;
  146. }
  147. .pipeline-step {
  148. min-height: 56px;
  149. display: flex;
  150. align-items: center;
  151. justify-content: center;
  152. gap: 8px;
  153. border: 1px solid transparent;
  154. border-radius: 8px;
  155. color: #5d6b82;
  156. background: transparent;
  157. font-size: 14px;
  158. font-weight: 900;
  159. text-align: center;
  160. }
  161. .pipeline-step.active {
  162. color: #2360ad;
  163. border-color: #bcd5fb;
  164. background: #eaf3ff;
  165. box-shadow: inset 0 0 0 1px #d8e8ff;
  166. }
  167. .pipeline-step.warn {
  168. color: #9b4f15;
  169. background: #fff6e8;
  170. border-color: #f3c985;
  171. }
  172. .filter-bar {
  173. min-height: 70px;
  174. display: flex;
  175. align-items: center;
  176. gap: 14px;
  177. margin-top: 8px;
  178. padding: 12px 16px;
  179. }
  180. .filter-title {
  181. min-width: 240px;
  182. display: grid;
  183. gap: 4px;
  184. }
  185. .filter-title span {
  186. color: #8491a6;
  187. font-size: 11px;
  188. font-weight: 900;
  189. }
  190. .filter-title strong {
  191. color: #172033;
  192. font-size: 15px;
  193. font-weight: 900;
  194. }
  195. .field {
  196. display: inline-flex;
  197. align-items: center;
  198. gap: 8px;
  199. }
  200. .field span {
  201. color: #78869a;
  202. font-size: 13px;
  203. font-weight: 900;
  204. white-space: nowrap;
  205. }
  206. .input,
  207. .select {
  208. min-height: 34px;
  209. border: 1px solid #cfdceb;
  210. border-radius: 8px;
  211. color: #172033;
  212. background: #ffffff;
  213. font-size: 13px;
  214. font-weight: 800;
  215. outline: none;
  216. }
  217. .input {
  218. width: 260px;
  219. padding: 0 11px;
  220. }
  221. .select {
  222. width: 150px;
  223. padding: 0 10px;
  224. }
  225. .main-grid {
  226. display: grid;
  227. grid-template-columns: 380px minmax(0, 1fr);
  228. gap: 10px;
  229. margin-top: 10px;
  230. }
  231. .list-panel {
  232. min-height: 640px;
  233. padding: 10px;
  234. }
  235. .detail-panel {
  236. min-height: 640px;
  237. padding: 16px;
  238. }
  239. .run-card,
  240. .section,
  241. .metric,
  242. .record-row {
  243. border: 1px solid #dfe5ee;
  244. border-radius: 8px;
  245. background: #ffffff;
  246. }
  247. .run-card {
  248. display: grid;
  249. gap: 8px;
  250. width: 100%;
  251. margin-bottom: 8px;
  252. padding: 12px;
  253. text-align: left;
  254. cursor: pointer;
  255. }
  256. .run-card.active,
  257. .run-card:hover {
  258. border-color: #9cbce8;
  259. background: #f8fbff;
  260. }
  261. .run-card-title {
  262. display: flex;
  263. align-items: center;
  264. justify-content: space-between;
  265. gap: 8px;
  266. color: #172033;
  267. font-size: 13px;
  268. font-weight: 950;
  269. }
  270. .run-card-meta {
  271. display: flex;
  272. flex-wrap: wrap;
  273. gap: 6px;
  274. color: #6d7c93;
  275. font-size: 12px;
  276. font-weight: 800;
  277. }
  278. .run-card-time {
  279. color: #2f3b52;
  280. }
  281. .run-card-err {
  282. color: #9d2020;
  283. }
  284. .detail-header {
  285. display: flex;
  286. align-items: flex-start;
  287. justify-content: space-between;
  288. gap: 14px;
  289. margin-bottom: 14px;
  290. }
  291. .detail-title {
  292. display: grid;
  293. gap: 5px;
  294. }
  295. .detail-title span {
  296. color: #8491a6;
  297. font-size: 11px;
  298. font-weight: 900;
  299. }
  300. .detail-title strong {
  301. color: #172033;
  302. font-size: 21px;
  303. font-weight: 950;
  304. }
  305. .badge-row {
  306. display: flex;
  307. flex-wrap: wrap;
  308. gap: 6px;
  309. }
  310. .badge {
  311. min-height: 24px;
  312. display: inline-flex;
  313. align-items: center;
  314. gap: 5px;
  315. padding: 0 8px;
  316. border-radius: 8px;
  317. color: #526178;
  318. background: #eef2f7;
  319. font-size: 11px;
  320. font-weight: 950;
  321. white-space: nowrap;
  322. }
  323. .badge.success {
  324. color: #12604b;
  325. background: #dff7ed;
  326. }
  327. .badge.failed,
  328. .badge.rule_blocked {
  329. color: #9d2020;
  330. background: #fee4e2;
  331. }
  332. .badge.pending,
  333. .badge.partial_success {
  334. color: #8a5314;
  335. background: #fff2d7;
  336. }
  337. .badge.production_db {
  338. color: #155a86;
  339. background: #e3f2ff;
  340. }
  341. .badge.runtime_export,
  342. .badge.mixed_with_runtime_export {
  343. color: #7051a3;
  344. background: #f0eaff;
  345. }
  346. .metrics-grid {
  347. display: grid;
  348. grid-template-columns: repeat(6, minmax(0, 1fr));
  349. gap: 8px;
  350. margin-bottom: 14px;
  351. }
  352. .metric {
  353. min-height: 72px;
  354. display: grid;
  355. align-content: center;
  356. gap: 5px;
  357. padding: 12px;
  358. }
  359. .metric span {
  360. color: #8491a6;
  361. font-size: 11px;
  362. font-weight: 900;
  363. }
  364. .metric strong {
  365. color: #172033;
  366. font-size: 20px;
  367. font-weight: 950;
  368. }
  369. .stage-layout {
  370. display: grid;
  371. grid-template-columns: minmax(0, 1fr) 330px;
  372. gap: 10px;
  373. }
  374. .section {
  375. margin-bottom: 10px;
  376. padding: 13px;
  377. }
  378. .section-title {
  379. display: flex;
  380. align-items: center;
  381. justify-content: space-between;
  382. gap: 10px;
  383. margin-bottom: 10px;
  384. }
  385. .section-title strong {
  386. display: inline-flex;
  387. align-items: center;
  388. gap: 7px;
  389. color: #172033;
  390. font-size: 14px;
  391. font-weight: 950;
  392. }
  393. .record-list {
  394. display: grid;
  395. gap: 8px;
  396. }
  397. .record-row {
  398. display: grid;
  399. gap: 6px;
  400. padding: 10px;
  401. }
  402. .record-row strong {
  403. color: #172033;
  404. font-size: 13px;
  405. font-weight: 950;
  406. }
  407. .record-row span,
  408. .muted {
  409. color: #6d7c93;
  410. font-size: 12px;
  411. font-weight: 800;
  412. }
  413. .fact-grid {
  414. display: grid;
  415. grid-template-columns: repeat(2, minmax(0, 1fr));
  416. gap: 8px;
  417. }
  418. .fact {
  419. min-height: 46px;
  420. display: grid;
  421. gap: 3px;
  422. padding: 8px 10px;
  423. border: 1px solid #e4eaf2;
  424. border-radius: 8px;
  425. background: #f9fbfd;
  426. }
  427. .fact span {
  428. color: #8491a6;
  429. font-size: 11px;
  430. font-weight: 900;
  431. }
  432. .fact strong {
  433. color: #172033;
  434. font-size: 13px;
  435. font-weight: 950;
  436. overflow-wrap: anywhere;
  437. }
  438. .drawer-like {
  439. position: sticky;
  440. top: 10px;
  441. }
  442. .empty-state,
  443. .error-state,
  444. .loading-state {
  445. min-height: 190px;
  446. display: grid;
  447. place-items: center;
  448. border: 1px dashed #cbd6e4;
  449. border-radius: 8px;
  450. color: #697891;
  451. background: #fbfcfe;
  452. font-size: 13px;
  453. font-weight: 900;
  454. text-align: center;
  455. }
  456. .error-state {
  457. color: #9d2020;
  458. background: #fff8f7;
  459. border-color: #f3b7b2;
  460. }
  461. .code-block {
  462. max-height: 360px;
  463. overflow: auto;
  464. margin: 0;
  465. padding: 12px;
  466. border-radius: 8px;
  467. color: #203048;
  468. background: #f3f6fa;
  469. font-size: 12px;
  470. line-height: 1.55;
  471. white-space: pre-wrap;
  472. overflow-wrap: anywhere;
  473. }
  474. .business-page {
  475. display: grid;
  476. gap: 12px;
  477. /* 行按内容高度顶部对齐:避免内容短于 min-height 时,多余空间被均摊到漏斗带把它撑高(切 tab 时行高忽高忽低) */
  478. align-content: start;
  479. }
  480. .business-alert {
  481. display: inline-flex;
  482. align-items: center;
  483. gap: 8px;
  484. width: fit-content;
  485. padding: 8px 10px;
  486. border: 1px solid #f0c5a1;
  487. border-radius: 8px;
  488. color: #8a5314;
  489. background: #fff7ed;
  490. font-size: 12px;
  491. font-weight: 900;
  492. }
  493. .business-alert.compact {
  494. width: 100%;
  495. }
  496. .stage-nav-grid {
  497. display: grid;
  498. grid-template-columns: repeat(7, minmax(0, 1fr));
  499. gap: 8px;
  500. }
  501. .stage-nav-card {
  502. min-height: 116px;
  503. display: grid;
  504. grid-template-rows: auto 1fr;
  505. flex-direction: column;
  506. gap: 10px;
  507. padding: 12px;
  508. border: 1px solid #d7e3f4;
  509. border-radius: 8px;
  510. color: #172033;
  511. background: #ffffff;
  512. text-align: left;
  513. cursor: pointer;
  514. box-shadow: 0 1px 2px rgba(20, 39, 66, 0.04);
  515. }
  516. .stage-nav-card.active {
  517. border-color: #6ea8f7;
  518. color: #124f9f;
  519. background: #eaf3ff;
  520. box-shadow: inset 0 0 0 1px #bcd7ff, 0 6px 18px rgba(47, 101, 173, 0.12);
  521. }
  522. .stage-nav-card:hover {
  523. border-color: #9cbce8;
  524. background: #f8fbff;
  525. }
  526. .stage-nav-card.success {
  527. border-color: #bce6d4;
  528. }
  529. .stage-nav-card.failed,
  530. .stage-nav-card.rule_blocked {
  531. border-color: #f0bbb8;
  532. }
  533. .stage-nav-card.pending {
  534. border-color: #f3d295;
  535. }
  536. .stage-nav-card.failed.active,
  537. .stage-nav-card.rule_blocked.active {
  538. border-color: #ed8f88;
  539. color: #8f1d17;
  540. background: #fff1f0;
  541. box-shadow: inset 0 0 0 1px #fac8c4, 0 6px 18px rgba(190, 72, 64, 0.1);
  542. }
  543. .stage-nav-card.pending.active {
  544. border-color: #e9b65f;
  545. color: #86520e;
  546. background: #fff7e7;
  547. box-shadow: inset 0 0 0 1px #f4d49a, 0 6px 18px rgba(176, 111, 25, 0.1);
  548. }
  549. .stage-nav-top {
  550. min-height: 24px;
  551. display: flex;
  552. align-items: center;
  553. justify-content: space-between;
  554. gap: 8px;
  555. }
  556. .stage-nav-top strong {
  557. color: inherit;
  558. font-size: 14px;
  559. font-weight: 950;
  560. }
  561. .stage-nav-count {
  562. min-width: 26px;
  563. height: 24px;
  564. display: inline-flex;
  565. align-items: center;
  566. justify-content: center;
  567. padding: 0 8px;
  568. border-radius: 999px;
  569. color: #51657f;
  570. background: #e9eef6;
  571. font-size: 12px;
  572. font-weight: 950;
  573. }
  574. .stage-nav-card.active .stage-nav-count {
  575. color: #0f4d9f;
  576. background: #d7e8ff;
  577. }
  578. .stage-nav-body {
  579. display: grid;
  580. align-content: space-between;
  581. gap: 8px;
  582. min-width: 0;
  583. }
  584. .stage-nav-body span,
  585. .stage-nav-body small {
  586. color: #8491a6;
  587. font-size: 11px;
  588. font-weight: 900;
  589. }
  590. .stage-nav-body span {
  591. color: #172033;
  592. font-size: 13px;
  593. font-weight: 950;
  594. line-height: 1.35;
  595. }
  596. .stage-nav-card.active .stage-nav-body span {
  597. color: inherit;
  598. }
  599. .business-section {
  600. min-height: 430px;
  601. padding: 15px;
  602. border: 1px solid #dfe5ee;
  603. border-radius: 8px;
  604. background: #ffffff;
  605. }
  606. .conclusion-body {
  607. display: grid;
  608. grid-template-columns: auto minmax(0, 1fr);
  609. gap: 6px 10px;
  610. align-items: center;
  611. margin-bottom: 12px;
  612. padding: 12px;
  613. border: 1px solid #e4eaf2;
  614. border-radius: 8px;
  615. background: #f9fbfd;
  616. }
  617. .conclusion-body strong {
  618. color: #172033;
  619. font-size: 14px;
  620. font-weight: 950;
  621. }
  622. .conclusion-body span:last-child {
  623. grid-column: 1 / -1;
  624. color: #65748c;
  625. font-size: 13px;
  626. font-weight: 850;
  627. }
  628. .business-action-row {
  629. display: flex;
  630. flex-wrap: wrap;
  631. gap: 8px;
  632. }
  633. .source-summary-grid {
  634. display: grid;
  635. grid-template-columns: repeat(5, minmax(0, 1fr));
  636. gap: 8px;
  637. margin-bottom: 12px;
  638. }
  639. .source-summary-grid > div {
  640. display: grid;
  641. gap: 5px;
  642. min-height: 92px;
  643. padding: 10px;
  644. border: 1px solid #dfe5ee;
  645. border-radius: 8px;
  646. background: #ffffff;
  647. }
  648. .source-summary-grid span,
  649. .source-summary-grid small,
  650. .query-meta-line {
  651. color: #8491a6;
  652. font-size: 11px;
  653. font-weight: 850;
  654. }
  655. .source-summary-grid strong {
  656. color: #172033;
  657. font-size: 13px;
  658. font-weight: 950;
  659. line-height: 1.4;
  660. overflow-wrap: anywhere;
  661. }
  662. .query-meta-line {
  663. display: flex;
  664. flex-wrap: wrap;
  665. gap: 8px 12px;
  666. }
  667. .business-card-list {
  668. display: grid;
  669. gap: 10px;
  670. }
  671. .content-card-heading {
  672. display: grid;
  673. gap: 5px;
  674. }
  675. .content-card-heading > span,
  676. .content-meta-grid > span {
  677. color: #8491a6;
  678. font-size: 11px;
  679. font-weight: 900;
  680. }
  681. .content-card-heading strong {
  682. color: #172033;
  683. font-size: 14px;
  684. font-weight: 950;
  685. line-height: 1.45;
  686. }
  687. .content-meta-grid {
  688. display: grid;
  689. grid-template-columns: repeat(5, minmax(0, 1fr));
  690. gap: 8px;
  691. }
  692. .content-meta-grid > span {
  693. display: grid;
  694. gap: 4px;
  695. min-height: 58px;
  696. padding: 8px;
  697. border: 1px solid #e4eaf2;
  698. border-radius: 8px;
  699. background: #f9fbfd;
  700. }
  701. .content-meta-grid strong {
  702. color: #172033;
  703. font-size: 12px;
  704. font-weight: 950;
  705. overflow-wrap: anywhere;
  706. }
  707. .business-record-card,
  708. .rule-application-card {
  709. display: grid;
  710. gap: 9px;
  711. padding: 12px;
  712. border: 1px solid #dfe5ee;
  713. border-radius: 8px;
  714. background: #ffffff;
  715. }
  716. .rule-card-heading {
  717. display: grid;
  718. gap: 4px;
  719. }
  720. .rule-card-heading > span,
  721. .rule-card-heading small,
  722. .rule-application-flow small {
  723. color: #8491a6;
  724. font-size: 11px;
  725. font-weight: 850;
  726. }
  727. .business-record-card strong,
  728. .rule-application-card strong {
  729. color: #172033;
  730. font-size: 14px;
  731. font-weight: 950;
  732. }
  733. .business-record-card span,
  734. .rule-application-card span {
  735. color: #65748c;
  736. font-size: 12px;
  737. font-weight: 850;
  738. overflow-wrap: anywhere;
  739. }
  740. .rule-chain {
  741. display: flex;
  742. flex-wrap: wrap;
  743. align-items: center;
  744. gap: 8px;
  745. margin-bottom: 12px;
  746. padding: 10px;
  747. border: 1px solid #dfe5ee;
  748. border-radius: 8px;
  749. background: #f8fbff;
  750. }
  751. .rule-chain span {
  752. padding: 6px 9px;
  753. border-radius: 8px;
  754. color: #2360ad;
  755. background: #eaf3ff;
  756. font-size: 12px;
  757. font-weight: 950;
  758. }
  759. .rule-application-flow {
  760. display: grid;
  761. grid-template-columns: repeat(4, minmax(0, 1fr));
  762. gap: 8px;
  763. }
  764. .rule-application-flow > span,
  765. .rule-application-flow > .badge {
  766. min-height: 34px;
  767. display: grid;
  768. gap: 3px;
  769. justify-content: flex-start;
  770. padding: 7px 8px;
  771. }
  772. .drawer-business-content {
  773. display: grid;
  774. gap: 12px;
  775. min-height: 0;
  776. overflow: auto;
  777. }
  778. .drawer-explain-card,
  779. .drawer-explain-grid > div,
  780. .raw-details {
  781. padding: 12px;
  782. border: 1px solid #dfe5ee;
  783. border-radius: 8px;
  784. background: #fbfcfe;
  785. }
  786. .drawer-explain-card {
  787. display: grid;
  788. gap: 8px;
  789. }
  790. .drawer-explain-card span,
  791. .drawer-explain-grid span {
  792. color: #8491a6;
  793. font-size: 11px;
  794. font-weight: 900;
  795. }
  796. .drawer-explain-card strong,
  797. .drawer-explain-grid strong {
  798. color: #172033;
  799. font-size: 14px;
  800. font-weight: 950;
  801. }
  802. .drawer-explain-card p,
  803. .drawer-explain-grid p {
  804. margin: 0;
  805. color: #65748c;
  806. font-size: 12px;
  807. font-weight: 800;
  808. line-height: 1.55;
  809. }
  810. .drawer-explain-grid {
  811. display: grid;
  812. grid-template-columns: repeat(2, minmax(0, 1fr));
  813. gap: 10px;
  814. }
  815. .drawer-explain-grid > div {
  816. display: grid;
  817. gap: 6px;
  818. }
  819. .raw-details summary {
  820. color: #22304a;
  821. font-size: 13px;
  822. font-weight: 900;
  823. cursor: pointer;
  824. }
  825. .raw-details .code-block {
  826. margin-top: 10px;
  827. }
  828. .walk-board {
  829. height: 520px;
  830. border: 1px solid #dfe5ee;
  831. border-radius: 8px;
  832. overflow: auto;
  833. background: #fbfcfe;
  834. }
  835. .walk-board-inner {
  836. position: relative;
  837. width: 980px;
  838. min-height: 500px;
  839. }
  840. .walk-lines {
  841. position: absolute;
  842. inset: 0;
  843. width: 980px;
  844. height: 500px;
  845. pointer-events: none;
  846. }
  847. .walk-lines line {
  848. stroke: #9cbce8;
  849. stroke-width: 2;
  850. }
  851. .walk-lines text {
  852. fill: #65748c;
  853. font-size: 11px;
  854. font-weight: 900;
  855. }
  856. .walk-node-card {
  857. position: absolute;
  858. width: 172px;
  859. min-height: 72px;
  860. display: grid;
  861. align-content: center;
  862. gap: 4px;
  863. padding: 9px;
  864. border: 1px solid #bcd5fb;
  865. border-radius: 8px;
  866. color: #172033;
  867. background: #ffffff;
  868. text-align: left;
  869. cursor: pointer;
  870. }
  871. .walk-node-card:hover,
  872. .walk-edge-chip:hover {
  873. border-color: #2360ad;
  874. box-shadow: 0 8px 18px rgb(35 96 173 / 12%);
  875. }
  876. .walk-node-card strong {
  877. overflow: hidden;
  878. color: #172033;
  879. font-size: 12px;
  880. font-weight: 950;
  881. text-overflow: ellipsis;
  882. white-space: nowrap;
  883. }
  884. .walk-node-card span {
  885. color: #65748c;
  886. font-size: 10px;
  887. font-weight: 850;
  888. }
  889. .walk-edge-chip {
  890. position: absolute;
  891. width: 140px;
  892. min-height: 26px;
  893. border: 1px solid #dfe5ee;
  894. border-radius: 8px;
  895. color: #2360ad;
  896. background: #eaf3ff;
  897. font-size: 11px;
  898. font-weight: 950;
  899. cursor: pointer;
  900. }
  901. .walk-edge-chip.failed,
  902. .walk-node-card.failed {
  903. color: #9d2020;
  904. border-color: #f0bbb8;
  905. background: #fff8f7;
  906. }
  907. .walk-edge-chip.pending,
  908. .walk-node-card.pending {
  909. color: #8a5314;
  910. border-color: #f3d295;
  911. background: #fff8ea;
  912. }
  913. .walk-edge-chip.success,
  914. .walk-node-card.success {
  915. color: #12604b;
  916. border-color: #bce6d4;
  917. background: #f2fbf7;
  918. }
  919. /* Legacy names kept unused for local screenshots generated before the graph fallback. */
  920. .flow-node-box {
  921. min-width: 150px;
  922. padding: 8px;
  923. border: 1px solid #bcd5fb;
  924. border-radius: 8px;
  925. color: #172033;
  926. background: #ffffff;
  927. }
  928. .flow-node {
  929. display: grid;
  930. gap: 4px;
  931. }
  932. .flow-node strong {
  933. max-width: 170px;
  934. overflow: hidden;
  935. font-size: 12px;
  936. font-weight: 950;
  937. text-overflow: ellipsis;
  938. white-space: nowrap;
  939. }
  940. .flow-node span {
  941. color: #65748c;
  942. font-size: 10px;
  943. font-weight: 850;
  944. }
  945. .walk-board.unused {
  946. overflow: hidden;
  947. background: #fbfcfe;
  948. }
  949. .walk-empty-board {
  950. min-height: 420px;
  951. display: grid;
  952. place-items: center;
  953. align-content: center;
  954. gap: 10px;
  955. border: 1px dashed #cbd6e4;
  956. border-radius: 8px;
  957. color: #65748c;
  958. background: #fbfcfe;
  959. text-align: center;
  960. }
  961. .walk-empty-board strong {
  962. color: #172033;
  963. }
  964. .drawer-backdrop {
  965. position: fixed;
  966. inset: 0;
  967. z-index: 50;
  968. display: flex;
  969. justify-content: flex-end;
  970. background: rgb(15 23 42 / 24%);
  971. }
  972. .technical-drawer {
  973. width: min(620px, 92vw);
  974. height: 100vh;
  975. display: grid;
  976. grid-template-rows: auto auto minmax(0, 1fr);
  977. gap: 12px;
  978. padding: 18px;
  979. border-left: 1px solid #dfe5ee;
  980. background: #ffffff;
  981. box-shadow: -8px 0 28px rgb(15 23 42 / 14%);
  982. }
  983. .drawer-header {
  984. display: flex;
  985. align-items: flex-start;
  986. justify-content: space-between;
  987. gap: 12px;
  988. }
  989. .drawer-header div {
  990. display: grid;
  991. gap: 4px;
  992. }
  993. .drawer-header span {
  994. color: #8491a6;
  995. font-size: 11px;
  996. font-weight: 900;
  997. }
  998. .drawer-header strong {
  999. color: #172033;
  1000. font-size: 18px;
  1001. font-weight: 950;
  1002. }
  1003. .drawer-tabs {
  1004. display: flex;
  1005. flex-wrap: wrap;
  1006. gap: 6px;
  1007. }
  1008. @media (max-width: 900px) {
  1009. body {
  1010. min-width: 0;
  1011. }
  1012. .workspace {
  1013. padding: 10px;
  1014. }
  1015. .main-grid,
  1016. .stage-layout,
  1017. .metrics-grid,
  1018. .fact-grid,
  1019. .content-meta-grid,
  1020. .source-summary-grid,
  1021. .stage-nav-grid,
  1022. .rule-application-flow {
  1023. grid-template-columns: 1fr;
  1024. }
  1025. .filter-bar,
  1026. .detail-header {
  1027. align-items: stretch;
  1028. flex-direction: column;
  1029. }
  1030. .topbar {
  1031. grid-template-columns: 1fr;
  1032. justify-items: stretch;
  1033. }
  1034. .brand {
  1035. justify-content: flex-start;
  1036. }
  1037. .toolbar {
  1038. justify-content: flex-start;
  1039. flex-wrap: wrap;
  1040. }
  1041. .input,
  1042. .select {
  1043. width: 100%;
  1044. }
  1045. }
  1046. /* ===== Web V2: 时间线 / 日志 / 配置页 ===== */
  1047. .chip {
  1048. border: 1px solid var(--line, #d8dce5);
  1049. background: transparent;
  1050. border-radius: 999px;
  1051. padding: 4px 12px;
  1052. font-size: 12px;
  1053. cursor: pointer;
  1054. color: inherit;
  1055. }
  1056. .chip.active {
  1057. background: #1d4ed8;
  1058. border-color: #1d4ed8;
  1059. color: #fff;
  1060. }
  1061. .timeline-strip {
  1062. display: flex;
  1063. flex-wrap: wrap;
  1064. gap: 14px;
  1065. align-items: center;
  1066. padding: 10px 14px;
  1067. margin: 10px 0;
  1068. border: 1px solid var(--line, #d8dce5);
  1069. border-radius: 10px;
  1070. font-size: 12.5px;
  1071. }
  1072. .timeline-strip .strip-warn {
  1073. color: #a82626;
  1074. font-weight: 600;
  1075. }
  1076. .timeline-strip .strip-muted {
  1077. color: #9aa4b5;
  1078. }
  1079. /* V3 判定卡:Gemini 判定行 + scorecard 行 */
  1080. .gemini-judge-row {
  1081. display: flex;
  1082. flex-wrap: wrap;
  1083. align-items: center;
  1084. gap: 10px;
  1085. margin: 6px 0;
  1086. padding: 7px 10px;
  1087. border-radius: 9px;
  1088. background: #f3f7ff;
  1089. border: 1px solid #d8e2f5;
  1090. font-size: 12.5px;
  1091. color: #2a3a55;
  1092. }
  1093. .gemini-judge-row.quota {
  1094. background: #fdecec;
  1095. border-color: #f3c9c9;
  1096. }
  1097. .gemini-judge-tag {
  1098. font-size: 11px;
  1099. font-weight: 700;
  1100. color: #2f5bd0;
  1101. background: #e3ecff;
  1102. border-radius: 5px;
  1103. padding: 1px 7px;
  1104. }
  1105. .gemini-judge-quota {
  1106. color: #a82626;
  1107. font-weight: 600;
  1108. }
  1109. .gemini-judge-reason {
  1110. width: 100%;
  1111. color: #6b7689;
  1112. font-size: 11.5px;
  1113. }
  1114. .scorecard-row {
  1115. display: flex;
  1116. flex-wrap: wrap;
  1117. align-items: center;
  1118. gap: 8px;
  1119. margin-top: 6px;
  1120. font-size: 12px;
  1121. }
  1122. .scorecard-label {
  1123. color: #9aa4b5;
  1124. }
  1125. .scorecard-chip {
  1126. background: #eef0f4;
  1127. color: #3a4658;
  1128. border-radius: 6px;
  1129. padding: 1px 8px;
  1130. }
  1131. .scorecard-chip.deprecated {
  1132. color: #9aa4b5;
  1133. text-decoration: line-through;
  1134. }
  1135. .stage-bars {
  1136. display: grid;
  1137. gap: 6px;
  1138. }
  1139. .stage-bar-row {
  1140. display: grid;
  1141. grid-template-columns: 200px minmax(80px, 1fr) auto;
  1142. gap: 10px;
  1143. align-items: center;
  1144. font-size: 12.5px;
  1145. }
  1146. .stage-bar-row.failed .stage-bar-fill {
  1147. background: #dc2626;
  1148. }
  1149. .stage-bar-row.failed .stage-bar-value {
  1150. color: #dc2626;
  1151. }
  1152. .stage-bar-label {
  1153. font-family: var(--mono, ui-monospace, monospace);
  1154. }
  1155. .stage-bar-track {
  1156. background: rgba(125, 135, 155, 0.16);
  1157. border-radius: 5px;
  1158. height: 10px;
  1159. overflow: hidden;
  1160. }
  1161. .stage-bar-fill {
  1162. display: block;
  1163. height: 100%;
  1164. background: #2563eb;
  1165. border-radius: 5px;
  1166. }
  1167. .event-list {
  1168. list-style: none;
  1169. margin: 10px 0 0;
  1170. padding: 0;
  1171. display: grid;
  1172. gap: 8px;
  1173. }
  1174. .event-row {
  1175. border: 1px solid var(--line, #d8dce5);
  1176. border-radius: 10px;
  1177. padding: 8px 12px;
  1178. }
  1179. .event-row.failed {
  1180. border-color: #dc2626;
  1181. }
  1182. .event-row-head {
  1183. display: flex;
  1184. flex-wrap: wrap;
  1185. gap: 10px;
  1186. align-items: center;
  1187. font-size: 12.5px;
  1188. }
  1189. .event-type {
  1190. font-weight: 600;
  1191. }
  1192. .event-payload {
  1193. margin: 8px 0 0;
  1194. padding: 10px;
  1195. border-radius: 8px;
  1196. background: rgba(125, 135, 155, 0.1);
  1197. font-size: 11.5px;
  1198. overflow-x: auto;
  1199. white-space: pre-wrap;
  1200. word-break: break-all;
  1201. }
  1202. .error-state.inline {
  1203. display: inline;
  1204. padding: 1px 8px;
  1205. margin: 0;
  1206. }
  1207. .config-table-wrap {
  1208. overflow-x: auto;
  1209. }
  1210. .config-table {
  1211. width: 100%;
  1212. border-collapse: collapse;
  1213. font-size: 12px;
  1214. }
  1215. .config-table th,
  1216. .config-table td {
  1217. border: 1px solid var(--line, #d8dce5);
  1218. padding: 6px 8px;
  1219. text-align: left;
  1220. vertical-align: top;
  1221. max-width: 360px;
  1222. word-break: break-all;
  1223. }
  1224. .config-table th {
  1225. background: rgba(125, 135, 155, 0.1);
  1226. font-weight: 600;
  1227. }
  1228. .config-table th small {
  1229. display: block;
  1230. font-weight: 400;
  1231. font-family: var(--mono, ui-monospace, monospace);
  1232. font-size: 10px;
  1233. opacity: 0.65;
  1234. }
  1235. .field-annotations {
  1236. margin-top: 8px;
  1237. font-size: 12px;
  1238. }
  1239. .field-annotations dl {
  1240. display: grid;
  1241. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  1242. gap: 6px 18px;
  1243. margin: 8px 0 0;
  1244. }
  1245. .field-annotations dt {
  1246. font-weight: 600;
  1247. }
  1248. .field-annotations dt small {
  1249. margin-left: 6px;
  1250. font-weight: 400;
  1251. font-family: var(--mono, ui-monospace, monospace);
  1252. opacity: 0.65;
  1253. }
  1254. .field-annotations dd {
  1255. margin: 0 0 4px;
  1256. color: inherit;
  1257. opacity: 0.8;
  1258. }
  1259. /* 平台/内容帖子卡片:展开/收缩 */
  1260. .content-card-toggle {
  1261. display: flex;
  1262. align-items: center;
  1263. gap: 8px;
  1264. width: 100%;
  1265. padding: 0;
  1266. border: none;
  1267. background: transparent;
  1268. cursor: pointer;
  1269. text-align: left;
  1270. color: inherit;
  1271. }
  1272. .content-card-toggle svg {
  1273. flex: 0 0 auto;
  1274. color: #8491a6;
  1275. transition: color 0.15s;
  1276. }
  1277. .content-card-toggle:hover svg {
  1278. color: #2563eb;
  1279. }
  1280. .content-card-toggle .content-card-heading {
  1281. flex: 1 1 auto;
  1282. }
  1283. /* 内容帖子展开:左详情 + 右竖屏视频 */
  1284. .content-card-body {
  1285. display: flex;
  1286. gap: 16px;
  1287. flex-wrap: wrap;
  1288. align-items: flex-start;
  1289. }
  1290. .content-card-detail {
  1291. flex: 1 1 300px;
  1292. min-width: 0;
  1293. display: grid;
  1294. gap: 10px;
  1295. }
  1296. .content-card-video {
  1297. flex: 0 0 auto;
  1298. }
  1299. .content-video-frame,
  1300. .content-video-placeholder {
  1301. width: 270px;
  1302. height: 480px;
  1303. border-radius: 12px;
  1304. border: none;
  1305. }
  1306. .content-video-frame {
  1307. background: #000;
  1308. display: block;
  1309. }
  1310. .content-video-placeholder {
  1311. display: flex;
  1312. flex-direction: column;
  1313. align-items: center;
  1314. justify-content: center;
  1315. gap: 10px;
  1316. border: 1px dashed #cdd5e3;
  1317. background: rgba(125, 135, 155, 0.06);
  1318. font-size: 13px;
  1319. }
  1320. .content-video-load {
  1321. cursor: pointer;
  1322. color: #5b6678;
  1323. transition: color 0.15s, border-color 0.15s;
  1324. }
  1325. .content-video-load:hover {
  1326. color: #2563eb;
  1327. border-color: #2563eb;
  1328. }
  1329. /* 游走护栏门控矩阵单元格三色 */
  1330. .config-table td.gate-allow { color: #1d6b3e; background: #e9f7ef; font-weight: 600; }
  1331. .config-table td.gate-low { color: #9a6a0a; background: #fff6e5; font-weight: 600; }
  1332. .config-table td.gate-deny { color: #a82626; background: #fdecec; font-weight: 600; }
  1333. /* ===== 内容发现旅程(WalkJourney)===== */
  1334. .walk-journey { display: flex; flex-direction: column; gap: 12px; }
  1335. /* ① 找内容(细行) */
  1336. .wj-find-row {
  1337. display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  1338. padding: 8px 12px; background: #fafbfd; border: 1px solid #e4e8f0; border-radius: 10px;
  1339. }
  1340. .wj-find-label { font-size: 12px; font-weight: 700; color: #3a4658; margin-right: 4px; }
  1341. .wj-find-chip {
  1342. display: inline-flex; align-items: center; gap: 6px;
  1343. font-size: 12.5px; color: #22304a; padding: 4px 10px;
  1344. background: #ffffff; border: 1px solid #e4e8f0; border-radius: 8px;
  1345. }
  1346. .wj-find-ic { color: #5b6678; display: inline-flex; }
  1347. .wj-find-n { font-size: 11px; font-weight: 600; color: #6b7689; }
  1348. .wj-flow-arrow { display: flex; justify-content: center; color: #b6bfce; margin: 2px 0; }
  1349. /* ② 判定焦点卡 */
  1350. .wj-judge-card { border: 1px solid #d8e2f5; border-radius: 12px; background: #ffffff; padding: 14px 16px; }
  1351. .wj-judge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  1352. .wj-judge-step { font-size: 11px; color: #9aa4b5; }
  1353. .wj-judge-title { font-size: 17px; font-weight: 700; color: #172033; margin: 3px 0; }
  1354. .wj-judge-sub { font-size: 12.5px; color: #5b6678; }
  1355. .wj-pack-btn {
  1356. display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  1357. font-size: 13px; padding: 8px 12px; border-radius: 8px;
  1358. border: 1px solid #c9d8f2; background: #eaf3ff; color: #2360ad; cursor: pointer;
  1359. }
  1360. .wj-pack-btn:hover { background: #ddebfe; }
  1361. /* 规则包内联体 */
  1362. .wj-rulepack-body { margin-top: 12px; border-top: 1px solid #eef1f6; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
  1363. .wj-rule-hint { font-size: 12px; color: #9aa4b5; }
  1364. .wj-rule-tier { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #2a3a55; }
  1365. .wj-tier-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
  1366. .wj-tier-tag.reject { background: #fdecec; color: #a82626; }
  1367. .wj-tier-tag.ai { background: #fdf0d9; color: #8a5a12; }
  1368. .wj-tier-tag.score { background: #e9f7ef; color: #1d6b3e; }
  1369. .wj-fullrules-btn { align-self: flex-start; }
  1370. .wj-rule-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
  1371. .wj-rule-table th, .wj-rule-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #e4e8f0; }
  1372. .wj-rule-table th { color: #9aa4b5; font-weight: 600; }
  1373. /* 分叉标签 + 两栏 */
  1374. .wj-branch-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
  1375. .wj-branch-labels span { font-size: 12.5px; font-weight: 600; text-align: center; }
  1376. .wj-branch-labels .pass { color: #1d6b3e; }
  1377. .wj-branch-labels .reject { color: #a82626; }
  1378. .wj-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  1379. .wj-branch { display: flex; flex-direction: column; gap: 8px; }
  1380. .wj-branch-card {
  1381. width: 100%; text-align: left; border: 0; border-radius: 10px; padding: 11px 13px; cursor: pointer;
  1382. }
  1383. .wj-branch-card.pass { background: #eaf6ef; }
  1384. .wj-branch-card.pass:hover { background: #ddf0e5; }
  1385. .wj-branch-card.reject { background: #fcecec; }
  1386. .wj-branch-card.reject:hover { background: #f9dede; }
  1387. .wj-bc-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
  1388. .wj-branch-card.pass .wj-bc-title { color: #1d6b3e; }
  1389. .wj-branch-card.reject .wj-bc-title { color: #a82626; }
  1390. .wj-bc-ic { display: inline-flex; }
  1391. .wj-bc-n { margin-left: auto; font-size: 11px; font-weight: 600; opacity: 0.8; }
  1392. .wj-bc-desc { font-size: 12px; margin-top: 3px; }
  1393. .wj-branch-card.pass .wj-bc-desc { color: #2e6b46; }
  1394. .wj-branch-card.reject .wj-bc-desc { color: #9a3a3a; }
  1395. /* 结果筛选 */
  1396. .wj-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  1397. .wj-filter-label { font-size: 12px; color: #6b7689; }
  1398. .wj-filter-chip {
  1399. font-size: 12px; padding: 4px 12px; border-radius: 999px;
  1400. border: 1px solid #d6dde9; background: #ffffff; color: #3a4658; cursor: pointer;
  1401. }
  1402. .wj-filter-chip.active { border-color: #2360ad; background: #eaf3ff; color: #2360ad; font-weight: 600; }
  1403. /* 视频旅程卡 */
  1404. .wj-video-list { display: flex; flex-direction: column; gap: 8px; }
  1405. .wj-video-card { border: 1px solid #e4e8f0; border-radius: 12px; background: #ffffff; overflow: hidden; }
  1406. .wj-video-head {
  1407. display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  1408. padding: 11px 13px; background: transparent; border: 0; cursor: pointer;
  1409. }
  1410. .wj-video-title { flex: 1; font-size: 13.5px; color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1411. .wj-result-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
  1412. .wj-result-badge.pass { color: #1d6b3e; background: #e9f7ef; }
  1413. .wj-result-badge.review { color: #9a6a0a; background: #fff6e5; }
  1414. .wj-result-badge.reject { color: #a82626; background: #fdecec; }
  1415. .wj-result-badge.muted { color: #5b6678; background: #eef0f4; }
  1416. .wj-journey-steps { padding: 4px 13px 13px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #f0f2f6; }
  1417. .wj-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #2a3a55; }
  1418. .wj-step-tag { min-width: 40px; font-size: 11px; font-weight: 700; color: #ffffff; background: #9aa4b5; border-radius: 5px; padding: 2px 6px; text-align: center; }
  1419. .wj-reason { color: #5b6678; }
  1420. .wj-outcome.pass { color: #1d6b3e; }
  1421. .wj-outcome.review { color: #9a6a0a; }
  1422. .wj-outcome.reject { color: #a82626; }
  1423. .wj-pack-link {
  1424. display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  1425. font-size: 12px; color: #2360ad; background: transparent; border: 0; cursor: pointer;
  1426. }
  1427. .wj-detail-btn { align-self: flex-start; margin-top: 2px; }
  1428. /* ===== 游走双视图:视图切换 + 地图 + 路径树 ===== */
  1429. .wj-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  1430. .wj-toggle { display: inline-flex; border: 1px solid #d6dde9; border-radius: 9px; overflow: hidden; background: #f1f4f9; }
  1431. .wj-toggle button {
  1432. display: inline-flex; align-items: center; gap: 6px;
  1433. font-size: 13px; padding: 6px 14px; border: 0; background: transparent; color: #5b6678; cursor: pointer;
  1434. }
  1435. .wj-toggle button.active { background: #ffffff; color: #2360ad; font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,55,0.06); }
  1436. /* B 地图 */
  1437. .wj-map { border: 1px solid #e4e8f0; border-radius: 12px; background: #fbfcfe; padding: 8px 10px; }
  1438. .wj-map svg { display: block; max-width: 720px; margin: 0 auto; }
  1439. .wj-map-legend {
  1440. display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  1441. padding: 8px 6px 2px; border-top: 1px solid #eef1f6; margin-top: 4px;
  1442. font-size: 12px; color: #6b7689;
  1443. }
  1444. .wj-map-legend .wm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
  1445. .wm-dot.pass { background: #1d9e75; }
  1446. .wm-dot.reject { background: #d85a30; }
  1447. .wm-dot.base { background: #5b6678; }
  1448. .wm-dot.off { background: #cbd3df; }
  1449. .wj-map-tally { margin-left: auto; color: #3a4658; font-weight: 600; }
  1450. /* A 路径树 */
  1451. .wj-tree { font-size: 13.5px; }
  1452. .wj-tree-root {
  1453. display: flex; align-items: center; gap: 8px;
  1454. padding: 9px 12px; background: var(--color-background-secondary, #f1f4f9); border-radius: 9px; color: #3a4658;
  1455. }
  1456. .wj-tree-root strong { color: #172033; }
  1457. .wj-tree-children { border-left: 2px solid #d6dde9; margin-left: 20px; padding-left: 16px; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
  1458. .wj-tree-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #22304a; }
  1459. .wj-tree-q strong { color: #172033; }
  1460. .wj-tree-qid { font-size: 11px; color: #9aa4b5; }
  1461. .wj-q-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #eef0f4; color: #5b6678; }
  1462. .wj-q-chip.tag { background: #f0eaff; color: #6a4ea3; }
  1463. .wj-q-count { margin-left: auto; font-size: 11px; color: #9aa4b5; }
  1464. .wj-tree-vids { border-left: 2px solid #e4e8f0; margin-left: 8px; padding-left: 14px; margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }
  1465. .wj-tree-vid { border: 1px solid #eef1f6; border-radius: 9px; background: #ffffff; }
  1466. .wj-tree-vid-head {
  1467. display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  1468. padding: 8px 11px; background: transparent; border: 0; cursor: pointer;
  1469. }
  1470. .wj-tree-vid-title { flex: 1; font-size: 13px; color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1471. .wj-tree-detail { padding: 2px 11px 11px 30px; display: flex; flex-direction: column; gap: 7px; }
  1472. .wj-tree-loop {
  1473. display: flex; align-items: center; gap: 8px;
  1474. padding: 8px 12px; border-radius: 9px; background: #f0eaff; color: #5b4b86; font-size: 12.5px;
  1475. }
  1476. /* ===== 路径树:搜索块 + 来历 + 递进嵌套 ===== */
  1477. .wj-blocks { border-left: 2px solid #d6dde9; margin-left: 20px; padding-left: 16px; padding-top: 8px; display: flex; flex-direction: column; gap: 9px; }
  1478. .wj-block { border: 1px solid #e4e8f0; border-radius: 11px; background: #ffffff; transition: box-shadow .2s; }
  1479. .wj-block.wj-hl, .wj-vid-head.wj-hl { box-shadow: 0 0 0 2px #f0b429; border-radius: 11px; }
  1480. .wj-block-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; }
  1481. .wj-seq { width: 20px; height: 20px; border-radius: 50%; background: #eaf3ff; color: #2360ad; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
  1482. .wj-block-title { font-size: 14px; color: #172033; }
  1483. .wj-origin-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; }
  1484. .wj-origin-chip.seed { background: #eef0f4; color: #5b6678; }
  1485. .wj-origin-chip.llm { background: #eaf3ff; color: #2360ad; }
  1486. .wj-origin-chip.tag { background: #f0eaff; color: #6a4ea3; }
  1487. .wj-origin-chip.clickable { cursor: pointer; }
  1488. .wj-origin-chip.clickable:hover { text-decoration: underline; }
  1489. .wj-crumbs { padding: 0 12px 6px 39px; font-size: 11.5px; color: #9aa4b5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
  1490. .wj-crumb-link { background: transparent; border: 0; color: #2360ad; cursor: pointer; font-size: 11.5px; padding: 0 1px; }
  1491. .wj-crumb-link:hover { text-decoration: underline; }
  1492. .wj-crumb-text { color: #9aa4b5; }
  1493. .wj-crumb-sep { color: #c2cbd9; vertical-align: -1px; }
  1494. .wj-block-body { padding: 2px 12px 12px 22px; display: flex; flex-direction: column; gap: 7px; }
  1495. .wj-vid-head { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 7px 9px; background: #ffffff; border: 1px solid #eef1f6; border-radius: 9px; cursor: pointer; }
  1496. .wj-vid-title { flex: 1; font-size: 13px; color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1497. /* 视频详情:左栏(判定/理由/评分)占大半,右栏竖屏视频+打开原帖 */
  1498. .wj-vid-detail { padding: 6px 9px 6px 28px; display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
  1499. .wj-vid-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  1500. .wj-vid-side { flex: 0 0 auto; }
  1501. .wj-vid-acts { display: flex; flex-direction: column; gap: 4px; padding: 3px 0 0 24px; }
  1502. .wj-act { display: flex; align-items: center; gap: 5px; font-size: 12px; }
  1503. .wj-act.pass { color: #1d6b3e; }
  1504. .wj-act.fwd { color: #6a4ea3; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; }
  1505. .wj-act.fwd:hover { text-decoration: underline; }
  1506. .wj-act.author { display: block; }
  1507. .wj-act-head { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #155a86; }
  1508. .wj-author-works { border-left: 2px solid #cfe0f0; margin-left: 7px; padding-left: 12px; margin-top: 5px; display: flex; flex-direction: column; gap: 5px; }
  1509. /* 翻页结构化:分隔行 + 翻页页视频淡底 */
  1510. .wj-page-divider {
  1511. display: flex; align-items: center; gap: 6px;
  1512. margin: 4px 0 2px; padding: 3px 10px;
  1513. font-size: 11.5px; color: #6b7689;
  1514. background: #f1f4f9; border-radius: 6px; width: fit-content;
  1515. }
  1516. .wj-page-group > .wj-vid > .wj-vid-head { background: #f7f9fc; border-color: #e4e8f0; }
  1517. /* ===== 激进合一:漏斗总览条 + 5 面板导航 ===== */
  1518. .funnel-strip {
  1519. display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  1520. padding: 10px 14px; margin-bottom: 10px;
  1521. border: 1px solid #dfe5ee; border-radius: 10px; background: #ffffff;
  1522. }
  1523. .funnel-seg-wrap { display: inline-flex; align-items: center; }
  1524. .funnel-arrow { color: #c2cbd9; margin: 0 2px; }
  1525. .funnel-seg {
  1526. display: flex; flex-direction: row; align-items: center; gap: 6px;
  1527. padding: 4px 9px; border: 1px solid transparent; border-radius: 8px;
  1528. background: transparent; cursor: pointer;
  1529. }
  1530. .funnel-seg:hover { background: #f4f7fb; border-color: #e0e6f0; }
  1531. .funnel-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5d6b82; font-weight: 600; white-space: nowrap; }
  1532. .funnel-count { font-size: 15px; font-weight: 900; color: #172033; }
  1533. .funnel-dot { width: 7px; height: 7px; border-radius: 50%; background: #b4bccb; }
  1534. .funnel-dot.success { background: #2e9b5b; }
  1535. .funnel-dot.failed, .funnel-dot.rule_blocked { background: #dc4040; }
  1536. .funnel-dot.pending, .funnel-dot.partial_success { background: #e0a020; }
  1537. .panel-nav {
  1538. display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px;
  1539. }
  1540. .panel-nav-card {
  1541. display: flex; flex-direction: column; gap: 4px; min-height: 58px;
  1542. padding: 11px 13px; text-align: left; cursor: pointer;
  1543. border: 1px solid #dfe5ee; border-radius: 9px; background: #ffffff;
  1544. }
  1545. .panel-nav-card:hover { border-color: #b9c4d6; background: #fafbfd; }
  1546. .panel-nav-card.active { border-color: #2360ad; background: #eaf3ff; box-shadow: inset 0 0 0 1px #d8e8ff; }
  1547. .panel-nav-top strong { font-size: 14px; font-weight: 900; color: #172033; }
  1548. .panel-nav-card.active .panel-nav-top strong { color: #2360ad; }
  1549. .panel-nav-sub { font-size: 11.5px; color: #8491a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1550. /* 旅程视频详情:播放器 + AI 扩写提示词入口 */
  1551. .wj-vid-media { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  1552. .wj-vid-media .content-card-video { margin: 0; }
  1553. .wj-media-origin { align-self: flex-start; }
  1554. .wj-prompt-link { color: #2360ad; font-weight: 600; }
  1555. .wj-prompt-link:hover { text-decoration: underline; }
  1556. /* ===== 策略配置面板(第 5 面板)===== */
  1557. .strategy-config { display: flex; flex-direction: column; gap: 14px; }
  1558. .cfg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  1559. .cfg-top-note { font-size: 12.5px; margin: 0; max-width: 720px; }
  1560. .cfg-block { border: 1px solid #e4e8f0; border-radius: 14px; background: #ffffff; padding: 14px 16px; box-shadow: 0 1px 2px rgba(20,39,66,.04); }
  1561. .cfg-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef1f6; }
  1562. .cfg-block-titles { display: flex; flex-direction: column; gap: 3px; }
  1563. .cfg-block-head strong { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 900; color: #172033; }
  1564. .cfg-block-sub { font-size: 12px; color: #8491a6; font-weight: 600; }
  1565. .cfg-edit-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #8a5a12; background: #fdf0d9; border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
  1566. /* 通用子段标题 */
  1567. .cfg-sub { margin-bottom: 14px; }
  1568. .cfg-sub:last-child { margin-bottom: 0; }
  1569. .cfg-sub-title { font-size: 12.5px; font-weight: 900; color: #3f4b61; margin-bottom: 8px; padding-left: 8px; border-left: 3px solid #cdd9ec; }
  1570. /* 业务动作色板(入池/复看/淘汰/中性) */
  1571. .cfg-act { font-size: 11.5px; font-weight: 900; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
  1572. .cfg-act.pool { color: #12805a; background: #e2f6ea; border: 1px solid #bfe6cf; }
  1573. .cfg-act.review { color: #9a6512; background: #fff2d7; border: 1px solid #f0dca6; }
  1574. .cfg-act.reject { color: #ad2e23; background: #fdeceb; border: 1px solid #f1c9c5; }
  1575. .cfg-act.muted { color: #5d6b82; background: #eef2f7; border: 1px solid #e0e6f0; }
  1576. /* ① Prompt 原文 */
  1577. .cfg-prompt { display: flex; flex-direction: column; gap: 12px; }
  1578. .cfg-prompt-profile { display: flex; flex-direction: column; gap: 10px; }
  1579. .cfg-prompt-name { font-size: 12px; font-weight: 800; color: #2360ad; }
  1580. .cfg-prompt-block { display: flex; flex-direction: column; gap: 5px; }
  1581. .cfg-prompt-tag { font-size: 11.5px; font-weight: 900; color: #5a4ba8; }
  1582. .cfg-prompt-text {
  1583. margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #e6e3f5;
  1584. background: #faf9ff; color: #2c3550; font-size: 12.5px; line-height: 1.7;
  1585. white-space: pre-wrap; word-break: break-word; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  1586. }
  1587. .cfg-hint-line { margin: 0; font-size: 12px; color: #8491a6; }
  1588. .cfg-hint-line code { background: #eef2f7; border-radius: 4px; padding: 1px 5px; font-size: 11.5px; color: #5d6b82; }
  1589. /* ② 判定规则 */
  1590. .cfg-judge { display: flex; flex-direction: column; }
  1591. .cfg-gate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  1592. .cfg-gate-row {
  1593. display: flex; align-items: center; justify-content: space-between; gap: 10px;
  1594. padding: 7px 11px; border: 1px solid #eef1f6; border-radius: 9px; background: #fbfcfe;
  1595. }
  1596. .cfg-gate-label { font-size: 12.5px; font-weight: 700; color: #3f4b61; }
  1597. .cfg-score-bars { display: flex; flex-direction: column; gap: 9px; }
  1598. .cfg-score-item { display: flex; flex-direction: column; gap: 4px; }
  1599. .cfg-score-top { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: #3f4b61; }
  1600. .cfg-score-top strong { color: #172033; font-weight: 950; }
  1601. .cfg-score-bar { height: 9px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
  1602. .cfg-score-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f8ee0, #2360ad); }
  1603. .cfg-band-row { display: flex; gap: 8px; }
  1604. .cfg-band {
  1605. flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  1606. padding: 10px 8px; border-radius: 10px; border: 1px solid #e0e6f0;
  1607. }
  1608. .cfg-band-range { font-size: 12px; font-weight: 800; color: #6d7c93; }
  1609. .cfg-band-act { font-size: 15px; font-weight: 950; }
  1610. .cfg-band.pool { background: #f0fbf4; border-color: #bfe6cf; }
  1611. .cfg-band.pool .cfg-band-act { color: #12805a; }
  1612. .cfg-band.review { background: #fff9ec; border-color: #f0dca6; }
  1613. .cfg-band.review .cfg-band-act { color: #9a6512; }
  1614. .cfg-band.reject { background: #fdf1f0; border-color: #f1c9c5; }
  1615. .cfg-band.reject .cfg-band-act { color: #ad2e23; }
  1616. /* ③ 游走规则 */
  1617. .cfg-walk { display: flex; flex-direction: column; }
  1618. .cfg-walk-note { margin: 0 0 9px; font-size: 12px; line-height: 1.6; color: #6d7c93; }
  1619. /* A. 起点判断:判定结果 → 各游走放行 */
  1620. .cfg-perm-table { display: flex; flex-direction: column; gap: 5px; }
  1621. .cfg-perm-head, .cfg-perm-row { display: grid; grid-template-columns: 96px repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
  1622. .cfg-perm-head span { font-size: 11.5px; font-weight: 800; color: #8491a6; text-align: center; }
  1623. .cfg-perm-head span:first-child { text-align: left; }
  1624. .cfg-perm-row { padding: 6px 8px; border: 1px solid #eef1f6; border-radius: 9px; background: #fbfcfe; }
  1625. .cfg-perm-row > .cfg-act { justify-self: start; }
  1626. .cfg-perm-cell { text-align: center; font-size: 12px; font-weight: 800; padding: 4px 6px; border-radius: 7px; }
  1627. .cfg-perm-cell.pool { color: #12805a; background: #e9f8f0; }
  1628. .cfg-perm-cell.review { color: #9a6512; background: #fdf3de; }
  1629. .cfg-perm-cell.reject { color: #b0746d; background: #f6eceb; }
  1630. /* B. 三种动作卡 */
  1631. .cfg-walk-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  1632. .cfg-walk-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #e4e9f2; border-radius: 11px; background: #fbfcfe; }
  1633. .cfg-walk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  1634. .cfg-walk-card-head strong { font-size: 13.5px; font-weight: 900; color: #172033; }
  1635. .cfg-walk-desc { margin: 0; font-size: 12px; line-height: 1.55; color: #6d7c93; }
  1636. .cfg-walk-trigger { font-size: 11.5px; font-weight: 700; color: #5a4ba8; background: #f2effb; border-radius: 7px; padding: 4px 8px; }
  1637. .cfg-walk-limits { display: flex; flex-wrap: wrap; gap: 6px; }
  1638. .cfg-walk-limits span { font-size: 11.5px; font-weight: 700; color: #4a566e; background: #eef2f7; border-radius: 6px; padding: 2px 8px; }
  1639. /* C. 拆标签后的链路 + 刹车 */
  1640. .cfg-walk-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; }
  1641. .cfg-chain-step { font-size: 12px; font-weight: 700; color: #2c3550; background: #eef3fb; border: 1px solid #d8e3f3; border-radius: 8px; padding: 5px 10px; }
  1642. .cfg-chain-arrow { color: #9aa6ba; font-weight: 900; }
  1643. .cfg-walk-brakes { display: flex; flex-wrap: wrap; gap: 7px; }
  1644. .cfg-walk-brakes span { font-size: 11.5px; font-weight: 700; color: #8a5a12; background: #fdf3de; border: 1px solid #f0e2bf; border-radius: 999px; padding: 3px 11px; }
  1645. .cfg-walk-brakes b { color: #6b4709; font-weight: 950; }
  1646. /* ===== 顶部压缩(中度合并):平台/耗时上提顶栏,概览带只剩单行漏斗 + 单行 tab ===== */
  1647. .run-overview {
  1648. display: flex; align-items: center; gap: 10px;
  1649. padding: 3px 10px; margin-bottom: 8px;
  1650. border: 1px solid #dfe5ee; border-radius: 10px; background: #ffffff;
  1651. }
  1652. .run-overview .funnel-strip { flex: 1; border: 0; padding: 0; margin: 0; background: transparent; flex-wrap: nowrap; overflow-x: auto; }
  1653. /* 平台 chip + 运行元信息:现在挂在顶栏右侧工具区 */
  1654. .run-platform-chip {
  1655. display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  1656. font-size: 12px; font-weight: 700; color: #2360ad;
  1657. background: #eaf3ff; border: 1px solid #cfe0f7; border-radius: 999px; padding: 4px 11px;
  1658. }
  1659. .run-meta-inline {
  1660. display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  1661. font-size: 12px; color: #6b7689; white-space: nowrap;
  1662. }
  1663. .run-meta-inline .strip-warn { color: #a82626; font-weight: 600; }
  1664. .panel-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  1665. .panel-nav-tab {
  1666. font-size: 13px; font-weight: 700; padding: 7px 16px; cursor: pointer;
  1667. border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; color: #5d6b82;
  1668. }
  1669. .panel-nav-tab:hover { border-color: #b9c4d6; background: #fafbfd; }
  1670. .panel-nav-tab.active { border-color: #2360ad; background: #eaf3ff; color: #2360ad; box-shadow: inset 0 0 0 1px #d8e8ff; }
  1671. /* ===== 内容资产「成品货架」 ===== */
  1672. .asset-shelf { display: flex; flex-direction: column; gap: 14px; }
  1673. /* 交付摘要条 */
  1674. .asset-summary {
  1675. display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  1676. padding: 12px 14px; border: 1px solid #e4e9f2; border-radius: 12px;
  1677. background: linear-gradient(180deg, #fbfcfe 0%, #f6f9fd 100%);
  1678. }
  1679. .asset-summary-stat {
  1680. display: flex; flex-direction: column; gap: 2px; align-items: center;
  1681. min-width: 92px; padding: 6px 14px; border-radius: 10px; border: 1px solid #e4e9f2; background: #ffffff;
  1682. }
  1683. .asset-summary-stat span { font-size: 11px; font-weight: 800; color: #8491a6; }
  1684. .asset-summary-stat strong { font-size: 22px; font-weight: 950; color: #172033; line-height: 1; }
  1685. .asset-summary-stat.pooled { border-color: #bfe6cf; background: #f0fbf4; }
  1686. .asset-summary-stat.pooled strong { color: #12805a; }
  1687. .asset-summary-stat.review { border-color: #f3dcad; background: #fff9ec; }
  1688. .asset-summary-stat.review strong { color: #9a6512; }
  1689. .asset-summary-stat.reject { border-color: #f1c9c5; background: #fdf1f0; }
  1690. .asset-summary-stat.reject strong { color: #ad2e23; }
  1691. .asset-summary-note { margin: 0 0 0 auto; font-size: 12px; color: #7a8699; max-width: 360px; text-align: right; }
  1692. /* 卡片列表(每行一卡,左视频右信息) */
  1693. .asset-shelf-list { display: flex; flex-direction: column; gap: 12px; }
  1694. .asset-card {
  1695. display: flex; gap: 16px; align-items: flex-start;
  1696. padding: 14px; border: 1px solid #e4e9f2; border-radius: 14px; background: #ffffff;
  1697. box-shadow: 0 1px 2px rgba(20, 39, 66, 0.04); transition: box-shadow 0.15s, border-color 0.15s;
  1698. }
  1699. .asset-card:hover { border-color: #cdd9ec; box-shadow: 0 4px 14px rgba(20, 39, 66, 0.08); }
  1700. /* 左:竖屏视频 */
  1701. .asset-card-media { flex: 0 0 auto; }
  1702. .asset-media-frame {
  1703. width: 158px; height: 281px; border-radius: 12px; border: none; display: block; background: #000;
  1704. }
  1705. .asset-media-play {
  1706. display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  1707. color: #5d6b82; background: rgba(125, 135, 155, 0.07); border: 1px dashed #cdd5e3; cursor: pointer;
  1708. font-size: 13px; font-weight: 800;
  1709. }
  1710. .asset-media-play:hover { color: #2360ad; border-color: #9cbce8; background: #f4f9ff; }
  1711. .asset-media-empty {
  1712. display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
  1713. background: rgba(125, 135, 155, 0.06); border: 1px dashed #cdd5e3; font-size: 12px;
  1714. }
  1715. /* 右:信息区 */
  1716. .asset-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  1717. .asset-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  1718. .asset-card-title {
  1719. font-size: 15px; font-weight: 900; color: #172033; line-height: 1.4;
  1720. display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  1721. }
  1722. .asset-status {
  1723. flex: 0 0 auto; font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  1724. }
  1725. .asset-status.pooled { color: #12805a; background: #e2f6ea; border: 1px solid #bfe6cf; }
  1726. .asset-card-sub { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; color: #6d7c93; }
  1727. .asset-from { color: #2360ad; }
  1728. /* Gemini 判定行 */
  1729. .asset-judge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
  1730. .asset-judge-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #5a4ba8; }
  1731. .asset-judge-fit { font-weight: 900; padding: 2px 9px; border-radius: 999px; }
  1732. .asset-judge-fit.ok { color: #12805a; background: #e2f6ea; }
  1733. .asset-judge-fit.no { color: #ad2e23; background: #fdeceb; }
  1734. .asset-judge-num { color: #6d7c93; font-weight: 700; }
  1735. .asset-judge-score {
  1736. margin-left: auto; font-weight: 950; color: #172033;
  1737. padding: 2px 10px; border-radius: 8px; background: #eef2f8; border: 1px solid #e0e6f0;
  1738. }
  1739. .asset-reason {
  1740. margin: 0; font-size: 12.5px; line-height: 1.6; color: #4a566e;
  1741. display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  1742. }
  1743. /* 抖音热度 */
  1744. .asset-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  1745. .asset-stats-label { font-size: 11px; font-weight: 900; color: #8491a6; }
  1746. .asset-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #51607a; }
  1747. .asset-stat svg { color: #9aa6ba; }
  1748. .asset-stat em { font-style: normal; font-weight: 700; color: #8491a6; }
  1749. /* 标签 */
  1750. .asset-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  1751. .asset-tag { font-size: 11px; font-weight: 700; color: #5d6b82; background: #f1f4f9; border-radius: 6px; padding: 2px 8px; }
  1752. .asset-actions { display: flex; gap: 8px; }
  1753. /* 预留:我方平台实测表现 */
  1754. .asset-perf {
  1755. margin-top: 2px; padding: 10px 12px; border-radius: 10px;
  1756. border: 1px dashed #cfd8e6; background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 8px, #f5f7fb 8px, #f5f7fb 16px);
  1757. }
  1758. .asset-perf-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; color: #6a7488; }
  1759. .asset-perf-flag {
  1760. font-size: 10px; font-weight: 900; color: #8a7322; background: #fdf3d6; border: 1px solid #f0dca6;
  1761. border-radius: 999px; padding: 1px 8px; margin-left: 2px;
  1762. }
  1763. .asset-perf-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
  1764. .asset-perf-cell {
  1765. display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px;
  1766. padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.7); border: 1px solid #e6ebf3;
  1767. }
  1768. .asset-perf-cell em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #9aa6ba; }
  1769. .asset-perf-cell b { font-size: 15px; font-weight: 950; color: #b8c2d2; }
  1770. .asset-perf-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8491a6; }
  1771. /* ===== 内容资产:入池/待复看 切换按钮 ===== */
  1772. .asset-tabbtn {
  1773. display: flex; flex-direction: column; gap: 2px; align-items: center; cursor: pointer;
  1774. min-width: 100px; padding: 7px 16px; border-radius: 10px; border: 1px solid #e4e9f2; background: #ffffff;
  1775. }
  1776. .asset-tabbtn span { font-size: 11px; font-weight: 800; color: #8491a6; }
  1777. .asset-tabbtn strong { font-size: 22px; font-weight: 950; color: #172033; line-height: 1; }
  1778. .asset-tabbtn:hover { border-color: #b9c4d6; }
  1779. .asset-tabbtn.pooled.active { border-color: #79cfa1; background: #ecfaf2; box-shadow: inset 0 0 0 1px #bfe6cf; }
  1780. .asset-tabbtn.pooled.active strong { color: #12805a; }
  1781. .asset-tabbtn.review.active { border-color: #ecc977; background: #fff7e8; box-shadow: inset 0 0 0 1px #f3dcad; }
  1782. .asset-tabbtn.review.active strong { color: #9a6512; }
  1783. .asset-summary-reject { font-size: 12px; font-weight: 800; color: #9aa6ba; }
  1784. /* 待复看状态徽章 */
  1785. .asset-status.review { color: #9a6512; background: #fff2d7; border: 1px solid #f0dca6; }
  1786. /* 「为何待复看」行 */
  1787. .asset-why {
  1788. display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  1789. padding: 7px 10px; border-radius: 9px; background: #fff8ec; border: 1px solid #f2e0b8;
  1790. }
  1791. .asset-why-tag { font-size: 11px; font-weight: 900; color: #9a6512; }
  1792. .asset-why-reason { font-size: 12.5px; font-weight: 800; color: #7a5410; }
  1793. .asset-why-rule { font-size: 11px; font-weight: 700; color: #97591a; background: #fdeccb; border-radius: 6px; padding: 2px 8px; }
  1794. .asset-judge-score.missing { color: #9a6512; background: #fff2d7; border-color: #f0dca6; }
  1795. .asset-reason.err { color: #ad2e23; }
  1796. /* 复看裁决预留块 */
  1797. .asset-perf.review { background: repeating-linear-gradient(135deg, #fffaf0, #fffaf0 8px, #fdf3e0 8px, #fdf3e0 16px); border-color: #ecd9b0; }
  1798. .asset-verdict-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
  1799. .asset-verdict-btn {
  1800. font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 8px;
  1801. border: 1px dashed #cfd8e6; color: #9aa6ba; background: rgba(255,255,255,0.7); cursor: not-allowed;
  1802. }
  1803. .asset-verdict-btn.pool { border-color: #bfe0cd; color: #5a9d7c; }
  1804. .asset-verdict-btn.reject { border-color: #e6c2bd; color: #b07c75; }
  1805. /* ===== /runs 列表卡:需求名为主、可选中 ===== */
  1806. .run-card-demand { font-size: 14.5px; font-weight: 950; color: #172033; line-height: 1.35; }
  1807. .run-card.active .run-card-demand { color: #2360ad; }
  1808. .run-card-id { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 11px; color: #9aa6ba; }
  1809. /* ===== /runs 右侧:需求说明书 ===== */
  1810. .demand-detail { display: flex; flex-direction: column; gap: 14px; }
  1811. .demand-head { display: flex; flex-direction: column; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid #eef1f6; }
  1812. .demand-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 900; color: #2360ad; }
  1813. .demand-name { margin: 0; font-size: 23px; font-weight: 950; color: #172033; line-height: 1.25; }
  1814. .demand-desc { margin: 0; font-size: 13px; line-height: 1.65; color: #51607a; }
  1815. .demand-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
  1816. .demand-chip { font-size: 12px; font-weight: 800; color: #2360ad; background: #eaf3ff; border: 1px solid #cfe0f7; border-radius: 999px; padding: 3px 11px; }
  1817. .demand-chip.ghost { color: #5d6b82; background: #f1f4f9; border-color: #e0e6f0; }
  1818. .demand-runid { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 11px; color: #9aa6ba; margin-left: auto; }
  1819. .demand-card { border: 1px solid #e4e9f2; border-radius: 13px; background: #ffffff; padding: 14px 16px; }
  1820. .demand-card-title { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 14px; font-weight: 900; color: #172033; }
  1821. /* 凭什么有这个需求:种子词(Pattern)+ 命中分类(分类树)+ 证据规模 */
  1822. .demand-evidence { display: flex; flex-direction: column; gap: 12px; }
  1823. .demand-ev-block { display: flex; flex-direction: column; gap: 7px; }
  1824. .demand-ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  1825. .demand-tag { font-size: 11.5px; font-weight: 900; padding: 3px 10px; border-radius: 7px; }
  1826. .demand-tag.pattern { color: #5a4ba8; background: #f2effb; border: 1px solid #ddd6f3; }
  1827. .demand-tag.tree { color: #146a52; background: #e8f6f0; border: 1px solid #c4e6d8; }
  1828. .demand-pid { font-size: 11px; font-weight: 800; color: #8491a6; }
  1829. .demand-seed-terms { display: flex; flex-wrap: wrap; gap: 7px; }
  1830. .demand-seed-term { font-size: 13px; font-weight: 900; color: #2c3550; background: #eef3fb; border: 1px solid #d8e3f3; border-radius: 8px; padding: 4px 12px; }
  1831. .demand-tip { margin: 0; font-size: 11.5px; line-height: 1.55; color: #8491a6; }
  1832. .demand-cat-list { display: flex; flex-direction: column; gap: 6px; }
  1833. .demand-cat-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; border: 1px solid #eef1f6; border-radius: 10px; background: #fbfcfe; }
  1834. .demand-cat-name { font-size: 13px; font-weight: 900; color: #172033; white-space: nowrap; }
  1835. .demand-cat-path { flex: 1; min-width: 200px; font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 11.5px; color: #51607a; word-break: break-all; }
  1836. .demand-cat-meta { font-size: 11px; font-weight: 800; color: #146a52; background: #e8f6f0; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
  1837. .demand-meta-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #6d7c93; padding-top: 2px; }
  1838. .demand-meta-row b { color: #2c3550; font-weight: 900; }
  1839. .demand-yield { display: flex; gap: 10px; }
  1840. .demand-yield-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: 11px; border: 1px solid #e0e6f0; }
  1841. .demand-yield-stat span { font-size: 11.5px; font-weight: 800; color: #6d7c93; }
  1842. .demand-yield-stat strong { font-size: 24px; font-weight: 950; line-height: 1; }
  1843. .demand-yield-stat.pool { background: #f0fbf4; border-color: #bfe6cf; }
  1844. .demand-yield-stat.pool strong { color: #12805a; }
  1845. .demand-yield-stat.review { background: #fff9ec; border-color: #f0dca6; }
  1846. .demand-yield-stat.review strong { color: #9a6512; }
  1847. .demand-yield-stat.reject { background: #fdf1f0; border-color: #f1c9c5; }
  1848. .demand-yield-stat.reject strong { color: #ad2e23; }
  1849. .demand-enter {
  1850. display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  1851. padding: 12px 16px; border-radius: 11px; border: 1px solid #2360ad;
  1852. background: #2360ad; color: #ffffff; font-size: 13.5px; font-weight: 900; cursor: pointer;
  1853. }
  1854. .demand-enter:hover { background: #1d5396; border-color: #1d5396; }