:root { color: #172033; background: #f6f8fb; font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } body { min-width: 1120px; min-height: 100vh; margin: 0; background: #f6f8fb; } button, input, select { font: inherit; } a { color: inherit; text-decoration: none; } .app-shell { min-height: 100vh; } .workspace { min-width: 0; padding: 10px 20px 24px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; margin-bottom: 8px; } .topbar-left { display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .topbar-center { display: flex; align-items: center; justify-content: center; min-width: 0; } /* tab 上提到顶栏中部:去掉独立成行的下边距 */ .topbar-center .panel-nav { margin-bottom: 0; flex-wrap: nowrap; } .topbar-center .panel-nav-tab { padding: 6px 13px; } .brand { display: inline-flex; align-items: center; justify-content: center; text-align: center; } .back-link { width: fit-content; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid #cfdceb; border-radius: 8px; color: #31415a; background: #ffffff; font-size: 12px; font-weight: 900; box-shadow: 0 1px 2px rgba(20, 39, 66, 0.04); } .back-link:hover { border-color: #9cbce8; color: #2360ad; background: #f8fbff; } .brand strong { color: #172033; font-size: 16px; font-weight: 950; } .toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .icon-button, .text-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #cfdceb; border-radius: 8px; color: #22304a; background: #ffffff; font-size: 13px; font-weight: 900; cursor: pointer; } .icon-button { width: 38px; } .text-button { padding: 0 12px; } .icon-button:hover, .text-button:hover { border-color: #9cbce8; color: #2360ad; background: #f8fbff; } .panel, .pipeline-header, .filter-bar, .list-panel, .detail-panel { border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; } .pipeline-header { padding: 0 8px; overflow-x: auto; } .pipeline-grid { min-width: 1430px; display: grid; grid-template-columns: repeat(7, 196px); gap: 8px; } .pipeline-step { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; color: #5d6b82; background: transparent; font-size: 14px; font-weight: 900; text-align: center; } .pipeline-step.active { color: #2360ad; border-color: #bcd5fb; background: #eaf3ff; box-shadow: inset 0 0 0 1px #d8e8ff; } .pipeline-step.warn { color: #9b4f15; background: #fff6e8; border-color: #f3c985; } .filter-bar { min-height: 70px; display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 16px; } .filter-title { min-width: 240px; display: grid; gap: 4px; } .filter-title span { color: #8491a6; font-size: 11px; font-weight: 900; } .filter-title strong { color: #172033; font-size: 15px; font-weight: 900; } .field { display: inline-flex; align-items: center; gap: 8px; } .field span { color: #78869a; font-size: 13px; font-weight: 900; white-space: nowrap; } .input, .select { min-height: 34px; border: 1px solid #cfdceb; border-radius: 8px; color: #172033; background: #ffffff; font-size: 13px; font-weight: 800; outline: none; } .input { width: 260px; padding: 0 11px; } .select { width: 150px; padding: 0 10px; } .main-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 10px; margin-top: 10px; } .list-panel { min-height: 640px; padding: 10px; } .detail-panel { min-height: 640px; padding: 16px; } .run-card, .section, .metric, .record-row { border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; } .run-card { display: grid; gap: 8px; width: 100%; margin-bottom: 8px; padding: 12px; text-align: left; cursor: pointer; } .run-card.active, .run-card:hover { border-color: #9cbce8; background: #f8fbff; } .run-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #172033; font-size: 13px; font-weight: 950; } .run-card-meta { display: flex; flex-wrap: wrap; gap: 6px; color: #6d7c93; font-size: 12px; font-weight: 800; } .run-card-time { color: #2f3b52; } .run-card-err { color: #9d2020; } .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .detail-title { display: grid; gap: 5px; } .detail-title span { color: #8491a6; font-size: 11px; font-weight: 900; } .detail-title strong { color: #172033; font-size: 21px; font-weight: 950; } .badge-row { display: flex; flex-wrap: wrap; gap: 6px; } .badge { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 8px; color: #526178; background: #eef2f7; font-size: 11px; font-weight: 950; white-space: nowrap; } .badge.success { color: #12604b; background: #dff7ed; } .badge.failed, .badge.rule_blocked { color: #9d2020; background: #fee4e2; } .badge.pending, .badge.partial_success { color: #8a5314; background: #fff2d7; } .badge.production_db { color: #155a86; background: #e3f2ff; } .badge.runtime_export, .badge.mixed_with_runtime_export { color: #7051a3; background: #f0eaff; } .metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .metric { min-height: 72px; display: grid; align-content: center; gap: 5px; padding: 12px; } .metric span { color: #8491a6; font-size: 11px; font-weight: 900; } .metric strong { color: #172033; font-size: 20px; font-weight: 950; } .stage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; } .section { margin-bottom: 10px; padding: 13px; } .section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .section-title strong { display: inline-flex; align-items: center; gap: 7px; color: #172033; font-size: 14px; font-weight: 950; } .record-list { display: grid; gap: 8px; } .record-row { display: grid; gap: 6px; padding: 10px; } .record-row strong { color: #172033; font-size: 13px; font-weight: 950; } .record-row span, .muted { color: #6d7c93; font-size: 12px; font-weight: 800; } .fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fact { min-height: 46px; display: grid; gap: 3px; padding: 8px 10px; border: 1px solid #e4eaf2; border-radius: 8px; background: #f9fbfd; } .fact span { color: #8491a6; font-size: 11px; font-weight: 900; } .fact strong { color: #172033; font-size: 13px; font-weight: 950; overflow-wrap: anywhere; } .drawer-like { position: sticky; top: 10px; } .empty-state, .error-state, .loading-state { min-height: 190px; display: grid; place-items: center; border: 1px dashed #cbd6e4; border-radius: 8px; color: #697891; background: #fbfcfe; font-size: 13px; font-weight: 900; text-align: center; } .error-state { color: #9d2020; background: #fff8f7; border-color: #f3b7b2; } .code-block { max-height: 360px; overflow: auto; margin: 0; padding: 12px; border-radius: 8px; color: #203048; background: #f3f6fa; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .business-page { display: grid; gap: 12px; /* 行按内容高度顶部对齐:避免内容短于 min-height 时,多余空间被均摊到漏斗带把它撑高(切 tab 时行高忽高忽低) */ align-content: start; } .business-alert { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 10px; border: 1px solid #f0c5a1; border-radius: 8px; color: #8a5314; background: #fff7ed; font-size: 12px; font-weight: 900; } .business-alert.compact { width: 100%; } .stage-nav-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .stage-nav-card { min-height: 116px; display: grid; grid-template-rows: auto 1fr; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #d7e3f4; border-radius: 8px; color: #172033; background: #ffffff; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(20, 39, 66, 0.04); } .stage-nav-card.active { border-color: #6ea8f7; color: #124f9f; background: #eaf3ff; box-shadow: inset 0 0 0 1px #bcd7ff, 0 6px 18px rgba(47, 101, 173, 0.12); } .stage-nav-card:hover { border-color: #9cbce8; background: #f8fbff; } .stage-nav-card.success { border-color: #bce6d4; } .stage-nav-card.failed, .stage-nav-card.rule_blocked { border-color: #f0bbb8; } .stage-nav-card.pending { border-color: #f3d295; } .stage-nav-card.failed.active, .stage-nav-card.rule_blocked.active { border-color: #ed8f88; color: #8f1d17; background: #fff1f0; box-shadow: inset 0 0 0 1px #fac8c4, 0 6px 18px rgba(190, 72, 64, 0.1); } .stage-nav-card.pending.active { border-color: #e9b65f; color: #86520e; background: #fff7e7; box-shadow: inset 0 0 0 1px #f4d49a, 0 6px 18px rgba(176, 111, 25, 0.1); } .stage-nav-top { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stage-nav-top strong { color: inherit; font-size: 14px; font-weight: 950; } .stage-nav-count { min-width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 999px; color: #51657f; background: #e9eef6; font-size: 12px; font-weight: 950; } .stage-nav-card.active .stage-nav-count { color: #0f4d9f; background: #d7e8ff; } .stage-nav-body { display: grid; align-content: space-between; gap: 8px; min-width: 0; } .stage-nav-body span, .stage-nav-body small { color: #8491a6; font-size: 11px; font-weight: 900; } .stage-nav-body span { color: #172033; font-size: 13px; font-weight: 950; line-height: 1.35; } .stage-nav-card.active .stage-nav-body span { color: inherit; } .business-section { min-height: 430px; padding: 15px; border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; } .conclusion-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; margin-bottom: 12px; padding: 12px; border: 1px solid #e4eaf2; border-radius: 8px; background: #f9fbfd; } .conclusion-body strong { color: #172033; font-size: 14px; font-weight: 950; } .conclusion-body span:last-child { grid-column: 1 / -1; color: #65748c; font-size: 13px; font-weight: 850; } .business-action-row { display: flex; flex-wrap: wrap; gap: 8px; } .source-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .source-summary-grid > div { display: grid; gap: 5px; min-height: 92px; padding: 10px; border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; } .source-summary-grid span, .source-summary-grid small, .query-meta-line { color: #8491a6; font-size: 11px; font-weight: 850; } .source-summary-grid strong { color: #172033; font-size: 13px; font-weight: 950; line-height: 1.4; overflow-wrap: anywhere; } .query-meta-line { display: flex; flex-wrap: wrap; gap: 8px 12px; } .business-card-list { display: grid; gap: 10px; } .content-card-heading { display: grid; gap: 5px; } .content-card-heading > span, .content-meta-grid > span { color: #8491a6; font-size: 11px; font-weight: 900; } .content-card-heading strong { color: #172033; font-size: 14px; font-weight: 950; line-height: 1.45; } .content-meta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .content-meta-grid > span { display: grid; gap: 4px; min-height: 58px; padding: 8px; border: 1px solid #e4eaf2; border-radius: 8px; background: #f9fbfd; } .content-meta-grid strong { color: #172033; font-size: 12px; font-weight: 950; overflow-wrap: anywhere; } .business-record-card, .rule-application-card { display: grid; gap: 9px; padding: 12px; border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; } .rule-card-heading { display: grid; gap: 4px; } .rule-card-heading > span, .rule-card-heading small, .rule-application-flow small { color: #8491a6; font-size: 11px; font-weight: 850; } .business-record-card strong, .rule-application-card strong { color: #172033; font-size: 14px; font-weight: 950; } .business-record-card span, .rule-application-card span { color: #65748c; font-size: 12px; font-weight: 850; overflow-wrap: anywhere; } .rule-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px; border: 1px solid #dfe5ee; border-radius: 8px; background: #f8fbff; } .rule-chain span { padding: 6px 9px; border-radius: 8px; color: #2360ad; background: #eaf3ff; font-size: 12px; font-weight: 950; } .rule-application-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .rule-application-flow > span, .rule-application-flow > .badge { min-height: 34px; display: grid; gap: 3px; justify-content: flex-start; padding: 7px 8px; } .drawer-business-content { display: grid; gap: 12px; min-height: 0; overflow: auto; } .drawer-explain-card, .drawer-explain-grid > div, .raw-details { padding: 12px; border: 1px solid #dfe5ee; border-radius: 8px; background: #fbfcfe; } .drawer-explain-card { display: grid; gap: 8px; } .drawer-explain-card span, .drawer-explain-grid span { color: #8491a6; font-size: 11px; font-weight: 900; } .drawer-explain-card strong, .drawer-explain-grid strong { color: #172033; font-size: 14px; font-weight: 950; } .drawer-explain-card p, .drawer-explain-grid p { margin: 0; color: #65748c; font-size: 12px; font-weight: 800; line-height: 1.55; } .drawer-explain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .drawer-explain-grid > div { display: grid; gap: 6px; } .raw-details summary { color: #22304a; font-size: 13px; font-weight: 900; cursor: pointer; } .raw-details .code-block { margin-top: 10px; } .walk-board { height: 520px; border: 1px solid #dfe5ee; border-radius: 8px; overflow: auto; background: #fbfcfe; } .walk-board-inner { position: relative; width: 980px; min-height: 500px; } .walk-lines { position: absolute; inset: 0; width: 980px; height: 500px; pointer-events: none; } .walk-lines line { stroke: #9cbce8; stroke-width: 2; } .walk-lines text { fill: #65748c; font-size: 11px; font-weight: 900; } .walk-node-card { position: absolute; width: 172px; min-height: 72px; display: grid; align-content: center; gap: 4px; padding: 9px; border: 1px solid #bcd5fb; border-radius: 8px; color: #172033; background: #ffffff; text-align: left; cursor: pointer; } .walk-node-card:hover, .walk-edge-chip:hover { border-color: #2360ad; box-shadow: 0 8px 18px rgb(35 96 173 / 12%); } .walk-node-card strong { overflow: hidden; color: #172033; font-size: 12px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; } .walk-node-card span { color: #65748c; font-size: 10px; font-weight: 850; } .walk-edge-chip { position: absolute; width: 140px; min-height: 26px; border: 1px solid #dfe5ee; border-radius: 8px; color: #2360ad; background: #eaf3ff; font-size: 11px; font-weight: 950; cursor: pointer; } .walk-edge-chip.failed, .walk-node-card.failed { color: #9d2020; border-color: #f0bbb8; background: #fff8f7; } .walk-edge-chip.pending, .walk-node-card.pending { color: #8a5314; border-color: #f3d295; background: #fff8ea; } .walk-edge-chip.success, .walk-node-card.success { color: #12604b; border-color: #bce6d4; background: #f2fbf7; } /* Legacy names kept unused for local screenshots generated before the graph fallback. */ .flow-node-box { min-width: 150px; padding: 8px; border: 1px solid #bcd5fb; border-radius: 8px; color: #172033; background: #ffffff; } .flow-node { display: grid; gap: 4px; } .flow-node strong { max-width: 170px; overflow: hidden; font-size: 12px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; } .flow-node span { color: #65748c; font-size: 10px; font-weight: 850; } .walk-board.unused { overflow: hidden; background: #fbfcfe; } .walk-empty-board { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 10px; border: 1px dashed #cbd6e4; border-radius: 8px; color: #65748c; background: #fbfcfe; text-align: center; } .walk-empty-board strong { color: #172033; } .drawer-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgb(15 23 42 / 24%); } .technical-drawer { width: min(620px, 92vw); height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; padding: 18px; border-left: 1px solid #dfe5ee; background: #ffffff; box-shadow: -8px 0 28px rgb(15 23 42 / 14%); } .drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .drawer-header div { display: grid; gap: 4px; } .drawer-header span { color: #8491a6; font-size: 11px; font-weight: 900; } .drawer-header strong { color: #172033; font-size: 18px; font-weight: 950; } .drawer-tabs { display: flex; flex-wrap: wrap; gap: 6px; } @media (max-width: 900px) { body { min-width: 0; } .workspace { padding: 10px; } .main-grid, .stage-layout, .metrics-grid, .fact-grid, .content-meta-grid, .source-summary-grid, .stage-nav-grid, .rule-application-flow { grid-template-columns: 1fr; } .filter-bar, .detail-header { align-items: stretch; flex-direction: column; } .topbar { grid-template-columns: 1fr; justify-items: stretch; } .brand { justify-content: flex-start; } .toolbar { justify-content: flex-start; flex-wrap: wrap; } .input, .select { width: 100%; } } /* ===== Web V2: 时间线 / 日志 / 配置页 ===== */ .chip { border: 1px solid var(--line, #d8dce5); background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: inherit; } .chip.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .timeline-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 14px; margin: 10px 0; border: 1px solid var(--line, #d8dce5); border-radius: 10px; font-size: 12.5px; } .timeline-strip .strip-warn { color: #a82626; font-weight: 600; } .timeline-strip .strip-muted { color: #9aa4b5; } /* V3 判定卡:Gemini 判定行 + scorecard 行 */ .gemini-judge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; padding: 7px 10px; border-radius: 9px; background: #f3f7ff; border: 1px solid #d8e2f5; font-size: 12.5px; color: #2a3a55; } .gemini-judge-row.quota { background: #fdecec; border-color: #f3c9c9; } .gemini-judge-tag { font-size: 11px; font-weight: 700; color: #2f5bd0; background: #e3ecff; border-radius: 5px; padding: 1px 7px; } .gemini-judge-quota { color: #a82626; font-weight: 600; } .gemini-judge-reason { width: 100%; color: #6b7689; font-size: 11.5px; } .scorecard-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; } .scorecard-label { color: #9aa4b5; } .scorecard-chip { background: #eef0f4; color: #3a4658; border-radius: 6px; padding: 1px 8px; } .scorecard-chip.deprecated { color: #9aa4b5; text-decoration: line-through; } .stage-bars { display: grid; gap: 6px; } .stage-bar-row { display: grid; grid-template-columns: 200px minmax(80px, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; } .stage-bar-row.failed .stage-bar-fill { background: #dc2626; } .stage-bar-row.failed .stage-bar-value { color: #dc2626; } .stage-bar-label { font-family: var(--mono, ui-monospace, monospace); } .stage-bar-track { background: rgba(125, 135, 155, 0.16); border-radius: 5px; height: 10px; overflow: hidden; } .stage-bar-fill { display: block; height: 100%; background: #2563eb; border-radius: 5px; } .event-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .event-row { border: 1px solid var(--line, #d8dce5); border-radius: 10px; padding: 8px 12px; } .event-row.failed { border-color: #dc2626; } .event-row-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12.5px; } .event-type { font-weight: 600; } .event-payload { margin: 8px 0 0; padding: 10px; border-radius: 8px; background: rgba(125, 135, 155, 0.1); font-size: 11.5px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .error-state.inline { display: inline; padding: 1px 8px; margin: 0; } .config-table-wrap { overflow-x: auto; } .config-table { width: 100%; border-collapse: collapse; font-size: 12px; } .config-table th, .config-table td { border: 1px solid var(--line, #d8dce5); padding: 6px 8px; text-align: left; vertical-align: top; max-width: 360px; word-break: break-all; } .config-table th { background: rgba(125, 135, 155, 0.1); font-weight: 600; } .config-table th small { display: block; font-weight: 400; font-family: var(--mono, ui-monospace, monospace); font-size: 10px; opacity: 0.65; } .field-annotations { margin-top: 8px; font-size: 12px; } .field-annotations dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 18px; margin: 8px 0 0; } .field-annotations dt { font-weight: 600; } .field-annotations dt small { margin-left: 6px; font-weight: 400; font-family: var(--mono, ui-monospace, monospace); opacity: 0.65; } .field-annotations dd { margin: 0 0 4px; color: inherit; opacity: 0.8; } /* 平台/内容帖子卡片:展开/收缩 */ .content-card-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: none; background: transparent; cursor: pointer; text-align: left; color: inherit; } .content-card-toggle svg { flex: 0 0 auto; color: #8491a6; transition: color 0.15s; } .content-card-toggle:hover svg { color: #2563eb; } .content-card-toggle .content-card-heading { flex: 1 1 auto; } /* 内容帖子展开:左详情 + 右竖屏视频 */ .content-card-body { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .content-card-detail { flex: 1 1 300px; min-width: 0; display: grid; gap: 10px; } .content-card-video { flex: 0 0 auto; } .content-video-frame, .content-video-placeholder { width: 270px; height: 480px; border-radius: 12px; border: none; } .content-video-frame { background: #000; display: block; } .content-video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #cdd5e3; background: rgba(125, 135, 155, 0.06); font-size: 13px; } .content-video-load { cursor: pointer; color: #5b6678; transition: color 0.15s, border-color 0.15s; } .content-video-load:hover { color: #2563eb; border-color: #2563eb; } /* 游走护栏门控矩阵单元格三色 */ .config-table td.gate-allow { color: #1d6b3e; background: #e9f7ef; font-weight: 600; } .config-table td.gate-low { color: #9a6a0a; background: #fff6e5; font-weight: 600; } .config-table td.gate-deny { color: #a82626; background: #fdecec; font-weight: 600; } /* ===== 内容发现旅程(WalkJourney)===== */ .walk-journey { display: flex; flex-direction: column; gap: 12px; } /* ① 找内容(细行) */ .wj-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #fafbfd; border: 1px solid #e4e8f0; border-radius: 10px; } .wj-find-label { font-size: 12px; font-weight: 700; color: #3a4658; margin-right: 4px; } .wj-find-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #22304a; padding: 4px 10px; background: #ffffff; border: 1px solid #e4e8f0; border-radius: 8px; } .wj-find-ic { color: #5b6678; display: inline-flex; } .wj-find-n { font-size: 11px; font-weight: 600; color: #6b7689; } .wj-flow-arrow { display: flex; justify-content: center; color: #b6bfce; margin: 2px 0; } /* ② 判定焦点卡 */ .wj-judge-card { border: 1px solid #d8e2f5; border-radius: 12px; background: #ffffff; padding: 14px 16px; } .wj-judge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .wj-judge-step { font-size: 11px; color: #9aa4b5; } .wj-judge-title { font-size: 17px; font-weight: 700; color: #172033; margin: 3px 0; } .wj-judge-sub { font-size: 12.5px; color: #5b6678; } .wj-pack-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; padding: 8px 12px; border-radius: 8px; border: 1px solid #c9d8f2; background: #eaf3ff; color: #2360ad; cursor: pointer; } .wj-pack-btn:hover { background: #ddebfe; } /* 规则包内联体 */ .wj-rulepack-body { margin-top: 12px; border-top: 1px solid #eef1f6; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .wj-rule-hint { font-size: 12px; color: #9aa4b5; } .wj-rule-tier { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #2a3a55; } .wj-tier-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; } .wj-tier-tag.reject { background: #fdecec; color: #a82626; } .wj-tier-tag.ai { background: #fdf0d9; color: #8a5a12; } .wj-tier-tag.score { background: #e9f7ef; color: #1d6b3e; } .wj-fullrules-btn { align-self: flex-start; } .wj-rule-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; } .wj-rule-table th, .wj-rule-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #e4e8f0; } .wj-rule-table th { color: #9aa4b5; font-weight: 600; } /* 分叉标签 + 两栏 */ .wj-branch-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .wj-branch-labels span { font-size: 12.5px; font-weight: 600; text-align: center; } .wj-branch-labels .pass { color: #1d6b3e; } .wj-branch-labels .reject { color: #a82626; } .wj-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wj-branch { display: flex; flex-direction: column; gap: 8px; } .wj-branch-card { width: 100%; text-align: left; border: 0; border-radius: 10px; padding: 11px 13px; cursor: pointer; } .wj-branch-card.pass { background: #eaf6ef; } .wj-branch-card.pass:hover { background: #ddf0e5; } .wj-branch-card.reject { background: #fcecec; } .wj-branch-card.reject:hover { background: #f9dede; } .wj-bc-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; } .wj-branch-card.pass .wj-bc-title { color: #1d6b3e; } .wj-branch-card.reject .wj-bc-title { color: #a82626; } .wj-bc-ic { display: inline-flex; } .wj-bc-n { margin-left: auto; font-size: 11px; font-weight: 600; opacity: 0.8; } .wj-bc-desc { font-size: 12px; margin-top: 3px; } .wj-branch-card.pass .wj-bc-desc { color: #2e6b46; } .wj-branch-card.reject .wj-bc-desc { color: #9a3a3a; } /* 结果筛选 */ .wj-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .wj-filter-label { font-size: 12px; color: #6b7689; } .wj-filter-chip { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid #d6dde9; background: #ffffff; color: #3a4658; cursor: pointer; } .wj-filter-chip.active { border-color: #2360ad; background: #eaf3ff; color: #2360ad; font-weight: 600; } /* 视频旅程卡 */ .wj-video-list { display: flex; flex-direction: column; gap: 8px; } .wj-video-card { border: 1px solid #e4e8f0; border-radius: 12px; background: #ffffff; overflow: hidden; } .wj-video-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 13px; background: transparent; border: 0; cursor: pointer; } .wj-video-title { flex: 1; font-size: 13.5px; color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wj-result-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; } .wj-result-badge.pass { color: #1d6b3e; background: #e9f7ef; } .wj-result-badge.review { color: #9a6a0a; background: #fff6e5; } .wj-result-badge.reject { color: #a82626; background: #fdecec; } .wj-result-badge.muted { color: #5b6678; background: #eef0f4; } .wj-journey-steps { padding: 4px 13px 13px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #f0f2f6; } .wj-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #2a3a55; } .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; } .wj-reason { color: #5b6678; } .wj-outcome.pass { color: #1d6b3e; } .wj-outcome.review { color: #9a6a0a; } .wj-outcome.reject { color: #a82626; } .wj-pack-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: #2360ad; background: transparent; border: 0; cursor: pointer; } .wj-detail-btn { align-self: flex-start; margin-top: 2px; } /* ===== 游走双视图:视图切换 + 地图 + 路径树 ===== */ .wj-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wj-toggle { display: inline-flex; border: 1px solid #d6dde9; border-radius: 9px; overflow: hidden; background: #f1f4f9; } .wj-toggle button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 14px; border: 0; background: transparent; color: #5b6678; cursor: pointer; } .wj-toggle button.active { background: #ffffff; color: #2360ad; font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,55,0.06); } /* B 地图 */ .wj-map { border: 1px solid #e4e8f0; border-radius: 12px; background: #fbfcfe; padding: 8px 10px; } .wj-map svg { display: block; max-width: 720px; margin: 0 auto; } .wj-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 6px 2px; border-top: 1px solid #eef1f6; margin-top: 4px; font-size: 12px; color: #6b7689; } .wj-map-legend .wm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .wm-dot.pass { background: #1d9e75; } .wm-dot.reject { background: #d85a30; } .wm-dot.base { background: #5b6678; } .wm-dot.off { background: #cbd3df; } .wj-map-tally { margin-left: auto; color: #3a4658; font-weight: 600; } /* A 路径树 */ .wj-tree { font-size: 13.5px; } .wj-tree-root { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--color-background-secondary, #f1f4f9); border-radius: 9px; color: #3a4658; } .wj-tree-root strong { color: #172033; } .wj-tree-children { border-left: 2px solid #d6dde9; margin-left: 20px; padding-left: 16px; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; } .wj-tree-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #22304a; } .wj-tree-q strong { color: #172033; } .wj-tree-qid { font-size: 11px; color: #9aa4b5; } .wj-q-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #eef0f4; color: #5b6678; } .wj-q-chip.tag { background: #f0eaff; color: #6a4ea3; } .wj-q-count { margin-left: auto; font-size: 11px; color: #9aa4b5; } .wj-tree-vids { border-left: 2px solid #e4e8f0; margin-left: 8px; padding-left: 14px; margin-top: 7px; display: flex; flex-direction: column; gap: 6px; } .wj-tree-vid { border: 1px solid #eef1f6; border-radius: 9px; background: #ffffff; } .wj-tree-vid-head { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 8px 11px; background: transparent; border: 0; cursor: pointer; } .wj-tree-vid-title { flex: 1; font-size: 13px; color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wj-tree-detail { padding: 2px 11px 11px 30px; display: flex; flex-direction: column; gap: 7px; } .wj-tree-loop { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; background: #f0eaff; color: #5b4b86; font-size: 12.5px; } /* ===== 路径树:搜索块 + 来历 + 递进嵌套 ===== */ .wj-blocks { border-left: 2px solid #d6dde9; margin-left: 20px; padding-left: 16px; padding-top: 8px; display: flex; flex-direction: column; gap: 9px; } .wj-block { border: 1px solid #e4e8f0; border-radius: 11px; background: #ffffff; transition: box-shadow .2s; } .wj-block.wj-hl, .wj-vid-head.wj-hl { box-shadow: 0 0 0 2px #f0b429; border-radius: 11px; } .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; } .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; } .wj-block-title { font-size: 14px; color: #172033; } .wj-origin-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; } .wj-origin-chip.seed { background: #eef0f4; color: #5b6678; } .wj-origin-chip.llm { background: #eaf3ff; color: #2360ad; } .wj-origin-chip.tag { background: #f0eaff; color: #6a4ea3; } .wj-origin-chip.clickable { cursor: pointer; } .wj-origin-chip.clickable:hover { text-decoration: underline; } .wj-crumbs { padding: 0 12px 6px 39px; font-size: 11.5px; color: #9aa4b5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } .wj-crumb-link { background: transparent; border: 0; color: #2360ad; cursor: pointer; font-size: 11.5px; padding: 0 1px; } .wj-crumb-link:hover { text-decoration: underline; } .wj-crumb-text { color: #9aa4b5; } .wj-crumb-sep { color: #c2cbd9; vertical-align: -1px; } .wj-block-body { padding: 2px 12px 12px 22px; display: flex; flex-direction: column; gap: 7px; } .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; } .wj-vid-title { flex: 1; font-size: 13px; color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 视频详情:左栏(判定/理由/评分)占大半,右栏竖屏视频+打开原帖 */ .wj-vid-detail { padding: 6px 9px 6px 28px; display: flex; flex-direction: row; gap: 18px; align-items: flex-start; } .wj-vid-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .wj-vid-side { flex: 0 0 auto; } .wj-vid-acts { display: flex; flex-direction: column; gap: 4px; padding: 3px 0 0 24px; } .wj-act { display: flex; align-items: center; gap: 5px; font-size: 12px; } .wj-act.pass { color: #1d6b3e; } .wj-act.fwd { color: #6a4ea3; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; } .wj-act.fwd:hover { text-decoration: underline; } .wj-act.author { display: block; } .wj-act-head { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #155a86; } .wj-author-works { border-left: 2px solid #cfe0f0; margin-left: 7px; padding-left: 12px; margin-top: 5px; display: flex; flex-direction: column; gap: 5px; } /* 翻页结构化:分隔行 + 翻页页视频淡底 */ .wj-page-divider { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 3px 10px; font-size: 11.5px; color: #6b7689; background: #f1f4f9; border-radius: 6px; width: fit-content; } .wj-page-group > .wj-vid > .wj-vid-head { background: #f7f9fc; border-color: #e4e8f0; } /* ===== 激进合一:漏斗总览条 + 5 面板导航 ===== */ .funnel-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 10px 14px; margin-bottom: 10px; border: 1px solid #dfe5ee; border-radius: 10px; background: #ffffff; } .funnel-seg-wrap { display: inline-flex; align-items: center; } .funnel-arrow { color: #c2cbd9; margin: 0 2px; } .funnel-seg { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; } .funnel-seg:hover { background: #f4f7fb; border-color: #e0e6f0; } .funnel-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5d6b82; font-weight: 600; white-space: nowrap; } .funnel-count { font-size: 15px; font-weight: 900; color: #172033; } .funnel-dot { width: 7px; height: 7px; border-radius: 50%; background: #b4bccb; } .funnel-dot.success { background: #2e9b5b; } .funnel-dot.failed, .funnel-dot.rule_blocked { background: #dc4040; } .funnel-dot.pending, .funnel-dot.partial_success { background: #e0a020; } .panel-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; } .panel-nav-card { display: flex; flex-direction: column; gap: 4px; min-height: 58px; padding: 11px 13px; text-align: left; cursor: pointer; border: 1px solid #dfe5ee; border-radius: 9px; background: #ffffff; } .panel-nav-card:hover { border-color: #b9c4d6; background: #fafbfd; } .panel-nav-card.active { border-color: #2360ad; background: #eaf3ff; box-shadow: inset 0 0 0 1px #d8e8ff; } .panel-nav-top strong { font-size: 14px; font-weight: 900; color: #172033; } .panel-nav-card.active .panel-nav-top strong { color: #2360ad; } .panel-nav-sub { font-size: 11.5px; color: #8491a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 旅程视频详情:播放器 + AI 扩写提示词入口 */ .wj-vid-media { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .wj-vid-media .content-card-video { margin: 0; } .wj-media-origin { align-self: flex-start; } .wj-prompt-link { color: #2360ad; font-weight: 600; } .wj-prompt-link:hover { text-decoration: underline; } /* ===== 策略配置面板(第 5 面板)===== */ .strategy-config { display: flex; flex-direction: column; gap: 14px; } .cfg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cfg-top-note { font-size: 12.5px; margin: 0; max-width: 720px; } .cfg-block { border: 1px solid #e4e8f0; border-radius: 14px; background: #ffffff; padding: 14px 16px; box-shadow: 0 1px 2px rgba(20,39,66,.04); } .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; } .cfg-block-titles { display: flex; flex-direction: column; gap: 3px; } .cfg-block-head strong { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 900; color: #172033; } .cfg-block-sub { font-size: 12px; color: #8491a6; font-weight: 600; } .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; } /* 通用子段标题 */ .cfg-sub { margin-bottom: 14px; } .cfg-sub:last-child { margin-bottom: 0; } .cfg-sub-title { font-size: 12.5px; font-weight: 900; color: #3f4b61; margin-bottom: 8px; padding-left: 8px; border-left: 3px solid #cdd9ec; } /* 业务动作色板(入池/复看/淘汰/中性) */ .cfg-act { font-size: 11.5px; font-weight: 900; padding: 2px 10px; border-radius: 999px; white-space: nowrap; } .cfg-act.pool { color: #12805a; background: #e2f6ea; border: 1px solid #bfe6cf; } .cfg-act.review { color: #9a6512; background: #fff2d7; border: 1px solid #f0dca6; } .cfg-act.reject { color: #ad2e23; background: #fdeceb; border: 1px solid #f1c9c5; } .cfg-act.muted { color: #5d6b82; background: #eef2f7; border: 1px solid #e0e6f0; } /* ① Prompt 原文 */ .cfg-prompt { display: flex; flex-direction: column; gap: 12px; } .cfg-prompt-profile { display: flex; flex-direction: column; gap: 10px; } .cfg-prompt-name { font-size: 12px; font-weight: 800; color: #2360ad; } .cfg-prompt-block { display: flex; flex-direction: column; gap: 5px; } .cfg-prompt-tag { font-size: 11.5px; font-weight: 900; color: #5a4ba8; } .cfg-prompt-text { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #e6e3f5; background: #faf9ff; color: #2c3550; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; } .cfg-hint-line { margin: 0; font-size: 12px; color: #8491a6; } .cfg-hint-line code { background: #eef2f7; border-radius: 4px; padding: 1px 5px; font-size: 11.5px; color: #5d6b82; } /* ② 判定规则 */ .cfg-judge { display: flex; flex-direction: column; } .cfg-gate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .cfg-gate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border: 1px solid #eef1f6; border-radius: 9px; background: #fbfcfe; } .cfg-gate-label { font-size: 12.5px; font-weight: 700; color: #3f4b61; } .cfg-score-bars { display: flex; flex-direction: column; gap: 9px; } .cfg-score-item { display: flex; flex-direction: column; gap: 4px; } .cfg-score-top { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: #3f4b61; } .cfg-score-top strong { color: #172033; font-weight: 950; } .cfg-score-bar { height: 9px; border-radius: 999px; background: #eef2f7; overflow: hidden; } .cfg-score-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f8ee0, #2360ad); } .cfg-band-row { display: flex; gap: 8px; } .cfg-band { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 10px; border: 1px solid #e0e6f0; } .cfg-band-range { font-size: 12px; font-weight: 800; color: #6d7c93; } .cfg-band-act { font-size: 15px; font-weight: 950; } .cfg-band.pool { background: #f0fbf4; border-color: #bfe6cf; } .cfg-band.pool .cfg-band-act { color: #12805a; } .cfg-band.review { background: #fff9ec; border-color: #f0dca6; } .cfg-band.review .cfg-band-act { color: #9a6512; } .cfg-band.reject { background: #fdf1f0; border-color: #f1c9c5; } .cfg-band.reject .cfg-band-act { color: #ad2e23; } /* ③ 游走规则 */ .cfg-walk { display: flex; flex-direction: column; } .cfg-walk-note { margin: 0 0 9px; font-size: 12px; line-height: 1.6; color: #6d7c93; } /* A. 起点判断:判定结果 → 各游走放行 */ .cfg-perm-table { display: flex; flex-direction: column; gap: 5px; } .cfg-perm-head, .cfg-perm-row { display: grid; grid-template-columns: 96px repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; } .cfg-perm-head span { font-size: 11.5px; font-weight: 800; color: #8491a6; text-align: center; } .cfg-perm-head span:first-child { text-align: left; } .cfg-perm-row { padding: 6px 8px; border: 1px solid #eef1f6; border-radius: 9px; background: #fbfcfe; } .cfg-perm-row > .cfg-act { justify-self: start; } .cfg-perm-cell { text-align: center; font-size: 12px; font-weight: 800; padding: 4px 6px; border-radius: 7px; } .cfg-perm-cell.pool { color: #12805a; background: #e9f8f0; } .cfg-perm-cell.review { color: #9a6512; background: #fdf3de; } .cfg-perm-cell.reject { color: #b0746d; background: #f6eceb; } /* B. 三种动作卡 */ .cfg-walk-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cfg-walk-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #e4e9f2; border-radius: 11px; background: #fbfcfe; } .cfg-walk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cfg-walk-card-head strong { font-size: 13.5px; font-weight: 900; color: #172033; } .cfg-walk-desc { margin: 0; font-size: 12px; line-height: 1.55; color: #6d7c93; } .cfg-walk-trigger { font-size: 11.5px; font-weight: 700; color: #5a4ba8; background: #f2effb; border-radius: 7px; padding: 4px 8px; } .cfg-walk-limits { display: flex; flex-wrap: wrap; gap: 6px; } .cfg-walk-limits span { font-size: 11.5px; font-weight: 700; color: #4a566e; background: #eef2f7; border-radius: 6px; padding: 2px 8px; } /* C. 拆标签后的链路 + 刹车 */ .cfg-walk-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; } .cfg-chain-step { font-size: 12px; font-weight: 700; color: #2c3550; background: #eef3fb; border: 1px solid #d8e3f3; border-radius: 8px; padding: 5px 10px; } .cfg-chain-arrow { color: #9aa6ba; font-weight: 900; } .cfg-walk-brakes { display: flex; flex-wrap: wrap; gap: 7px; } .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; } .cfg-walk-brakes b { color: #6b4709; font-weight: 950; } /* ===== 顶部压缩(中度合并):平台/耗时上提顶栏,概览带只剩单行漏斗 + 单行 tab ===== */ .run-overview { display: flex; align-items: center; gap: 10px; padding: 3px 10px; margin-bottom: 8px; border: 1px solid #dfe5ee; border-radius: 10px; background: #ffffff; } .run-overview .funnel-strip { flex: 1; border: 0; padding: 0; margin: 0; background: transparent; flex-wrap: nowrap; overflow-x: auto; } /* 平台 chip + 运行元信息:现在挂在顶栏右侧工具区 */ .run-platform-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #2360ad; background: #eaf3ff; border: 1px solid #cfe0f7; border-radius: 999px; padding: 4px 11px; } .run-meta-inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; font-size: 12px; color: #6b7689; white-space: nowrap; } .run-meta-inline .strip-warn { color: #a82626; font-weight: 600; } .panel-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .panel-nav-tab { font-size: 13px; font-weight: 700; padding: 7px 16px; cursor: pointer; border: 1px solid #dfe5ee; border-radius: 8px; background: #ffffff; color: #5d6b82; } .panel-nav-tab:hover { border-color: #b9c4d6; background: #fafbfd; } .panel-nav-tab.active { border-color: #2360ad; background: #eaf3ff; color: #2360ad; box-shadow: inset 0 0 0 1px #d8e8ff; } /* ===== 内容资产「成品货架」 ===== */ .asset-shelf { display: flex; flex-direction: column; gap: 14px; } /* 交付摘要条 */ .asset-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid #e4e9f2; border-radius: 12px; background: linear-gradient(180deg, #fbfcfe 0%, #f6f9fd 100%); } .asset-summary-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; min-width: 92px; padding: 6px 14px; border-radius: 10px; border: 1px solid #e4e9f2; background: #ffffff; } .asset-summary-stat span { font-size: 11px; font-weight: 800; color: #8491a6; } .asset-summary-stat strong { font-size: 22px; font-weight: 950; color: #172033; line-height: 1; } .asset-summary-stat.pooled { border-color: #bfe6cf; background: #f0fbf4; } .asset-summary-stat.pooled strong { color: #12805a; } .asset-summary-stat.review { border-color: #f3dcad; background: #fff9ec; } .asset-summary-stat.review strong { color: #9a6512; } .asset-summary-stat.reject { border-color: #f1c9c5; background: #fdf1f0; } .asset-summary-stat.reject strong { color: #ad2e23; } .asset-summary-note { margin: 0 0 0 auto; font-size: 12px; color: #7a8699; max-width: 360px; text-align: right; } /* 卡片列表(每行一卡,左视频右信息) */ .asset-shelf-list { display: flex; flex-direction: column; gap: 12px; } .asset-card { display: flex; gap: 16px; align-items: flex-start; padding: 14px; border: 1px solid #e4e9f2; border-radius: 14px; background: #ffffff; box-shadow: 0 1px 2px rgba(20, 39, 66, 0.04); transition: box-shadow 0.15s, border-color 0.15s; } .asset-card:hover { border-color: #cdd9ec; box-shadow: 0 4px 14px rgba(20, 39, 66, 0.08); } /* 左:竖屏视频 */ .asset-card-media { flex: 0 0 auto; } .asset-media-frame { width: 158px; height: 281px; border-radius: 12px; border: none; display: block; background: #000; } .asset-media-play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #5d6b82; background: rgba(125, 135, 155, 0.07); border: 1px dashed #cdd5e3; cursor: pointer; font-size: 13px; font-weight: 800; } .asset-media-play:hover { color: #2360ad; border-color: #9cbce8; background: #f4f9ff; } .asset-media-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; background: rgba(125, 135, 155, 0.06); border: 1px dashed #cdd5e3; font-size: 12px; } /* 右:信息区 */ .asset-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .asset-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .asset-card-title { font-size: 15px; font-weight: 900; color: #172033; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .asset-status { flex: 0 0 auto; font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .asset-status.pooled { color: #12805a; background: #e2f6ea; border: 1px solid #bfe6cf; } .asset-card-sub { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; color: #6d7c93; } .asset-from { color: #2360ad; } /* Gemini 判定行 */ .asset-judge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; } .asset-judge-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #5a4ba8; } .asset-judge-fit { font-weight: 900; padding: 2px 9px; border-radius: 999px; } .asset-judge-fit.ok { color: #12805a; background: #e2f6ea; } .asset-judge-fit.no { color: #ad2e23; background: #fdeceb; } .asset-judge-num { color: #6d7c93; font-weight: 700; } .asset-judge-score { margin-left: auto; font-weight: 950; color: #172033; padding: 2px 10px; border-radius: 8px; background: #eef2f8; border: 1px solid #e0e6f0; } .asset-reason { margin: 0; font-size: 12.5px; line-height: 1.6; color: #4a566e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 抖音热度 */ .asset-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .asset-stats-label { font-size: 11px; font-weight: 900; color: #8491a6; } .asset-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #51607a; } .asset-stat svg { color: #9aa6ba; } .asset-stat em { font-style: normal; font-weight: 700; color: #8491a6; } /* 标签 */ .asset-tags { display: flex; flex-wrap: wrap; gap: 6px; } .asset-tag { font-size: 11px; font-weight: 700; color: #5d6b82; background: #f1f4f9; border-radius: 6px; padding: 2px 8px; } .asset-actions { display: flex; gap: 8px; } /* 预留:我方平台实测表现 */ .asset-perf { margin-top: 2px; padding: 10px 12px; border-radius: 10px; border: 1px dashed #cfd8e6; background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 8px, #f5f7fb 8px, #f5f7fb 16px); } .asset-perf-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; color: #6a7488; } .asset-perf-flag { font-size: 10px; font-weight: 900; color: #8a7322; background: #fdf3d6; border: 1px solid #f0dca6; border-radius: 999px; padding: 1px 8px; margin-left: 2px; } .asset-perf-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .asset-perf-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.7); border: 1px solid #e6ebf3; } .asset-perf-cell em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #9aa6ba; } .asset-perf-cell b { font-size: 15px; font-weight: 950; color: #b8c2d2; } .asset-perf-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8491a6; } /* ===== 内容资产:入池/待复看 切换按钮 ===== */ .asset-tabbtn { display: flex; flex-direction: column; gap: 2px; align-items: center; cursor: pointer; min-width: 100px; padding: 7px 16px; border-radius: 10px; border: 1px solid #e4e9f2; background: #ffffff; } .asset-tabbtn span { font-size: 11px; font-weight: 800; color: #8491a6; } .asset-tabbtn strong { font-size: 22px; font-weight: 950; color: #172033; line-height: 1; } .asset-tabbtn:hover { border-color: #b9c4d6; } .asset-tabbtn.pooled.active { border-color: #79cfa1; background: #ecfaf2; box-shadow: inset 0 0 0 1px #bfe6cf; } .asset-tabbtn.pooled.active strong { color: #12805a; } .asset-tabbtn.review.active { border-color: #ecc977; background: #fff7e8; box-shadow: inset 0 0 0 1px #f3dcad; } .asset-tabbtn.review.active strong { color: #9a6512; } .asset-summary-reject { font-size: 12px; font-weight: 800; color: #9aa6ba; } /* 待复看状态徽章 */ .asset-status.review { color: #9a6512; background: #fff2d7; border: 1px solid #f0dca6; } /* 「为何待复看」行 */ .asset-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: #fff8ec; border: 1px solid #f2e0b8; } .asset-why-tag { font-size: 11px; font-weight: 900; color: #9a6512; } .asset-why-reason { font-size: 12.5px; font-weight: 800; color: #7a5410; } .asset-why-rule { font-size: 11px; font-weight: 700; color: #97591a; background: #fdeccb; border-radius: 6px; padding: 2px 8px; } .asset-judge-score.missing { color: #9a6512; background: #fff2d7; border-color: #f0dca6; } .asset-reason.err { color: #ad2e23; } /* 复看裁决预留块 */ .asset-perf.review { background: repeating-linear-gradient(135deg, #fffaf0, #fffaf0 8px, #fdf3e0 8px, #fdf3e0 16px); border-color: #ecd9b0; } .asset-verdict-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .asset-verdict-btn { font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 8px; border: 1px dashed #cfd8e6; color: #9aa6ba; background: rgba(255,255,255,0.7); cursor: not-allowed; } .asset-verdict-btn.pool { border-color: #bfe0cd; color: #5a9d7c; } .asset-verdict-btn.reject { border-color: #e6c2bd; color: #b07c75; } /* ===== /runs 列表卡:需求名为主、可选中 ===== */ .run-card-demand { font-size: 14.5px; font-weight: 950; color: #172033; line-height: 1.35; } .run-card.active .run-card-demand { color: #2360ad; } .run-card-id { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 11px; color: #9aa6ba; } /* ===== /runs 右侧:需求说明书 ===== */ .demand-detail { display: flex; flex-direction: column; gap: 14px; } .demand-head { display: flex; flex-direction: column; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid #eef1f6; } .demand-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 900; color: #2360ad; } .demand-name { margin: 0; font-size: 23px; font-weight: 950; color: #172033; line-height: 1.25; } .demand-desc { margin: 0; font-size: 13px; line-height: 1.65; color: #51607a; } .demand-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; } .demand-chip { font-size: 12px; font-weight: 800; color: #2360ad; background: #eaf3ff; border: 1px solid #cfe0f7; border-radius: 999px; padding: 3px 11px; } .demand-chip.ghost { color: #5d6b82; background: #f1f4f9; border-color: #e0e6f0; } .demand-runid { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 11px; color: #9aa6ba; margin-left: auto; } .demand-card { border: 1px solid #e4e9f2; border-radius: 13px; background: #ffffff; padding: 14px 16px; } .demand-card-title { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 14px; font-weight: 900; color: #172033; } /* 凭什么有这个需求:种子词(Pattern)+ 命中分类(分类树)+ 证据规模 */ .demand-evidence { display: flex; flex-direction: column; gap: 12px; } .demand-ev-block { display: flex; flex-direction: column; gap: 7px; } .demand-ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .demand-tag { font-size: 11.5px; font-weight: 900; padding: 3px 10px; border-radius: 7px; } .demand-tag.pattern { color: #5a4ba8; background: #f2effb; border: 1px solid #ddd6f3; } .demand-tag.tree { color: #146a52; background: #e8f6f0; border: 1px solid #c4e6d8; } .demand-pid { font-size: 11px; font-weight: 800; color: #8491a6; } .demand-seed-terms { display: flex; flex-wrap: wrap; gap: 7px; } .demand-seed-term { font-size: 13px; font-weight: 900; color: #2c3550; background: #eef3fb; border: 1px solid #d8e3f3; border-radius: 8px; padding: 4px 12px; } .demand-tip { margin: 0; font-size: 11.5px; line-height: 1.55; color: #8491a6; } .demand-cat-list { display: flex; flex-direction: column; gap: 6px; } .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; } .demand-cat-name { font-size: 13px; font-weight: 900; color: #172033; white-space: nowrap; } .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; } .demand-cat-meta { font-size: 11px; font-weight: 800; color: #146a52; background: #e8f6f0; border-radius: 6px; padding: 2px 8px; white-space: nowrap; } .demand-meta-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #6d7c93; padding-top: 2px; } .demand-meta-row b { color: #2c3550; font-weight: 900; } .demand-yield { display: flex; gap: 10px; } .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; } .demand-yield-stat span { font-size: 11.5px; font-weight: 800; color: #6d7c93; } .demand-yield-stat strong { font-size: 24px; font-weight: 950; line-height: 1; } .demand-yield-stat.pool { background: #f0fbf4; border-color: #bfe6cf; } .demand-yield-stat.pool strong { color: #12805a; } .demand-yield-stat.review { background: #fff9ec; border-color: #f0dca6; } .demand-yield-stat.review strong { color: #9a6512; } .demand-yield-stat.reject { background: #fdf1f0; border-color: #f1c9c5; } .demand-yield-stat.reject strong { color: #ad2e23; } .demand-enter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 11px; border: 1px solid #2360ad; background: #2360ad; color: #ffffff; font-size: 13.5px; font-weight: 900; cursor: pointer; } .demand-enter:hover { background: #1d5396; border-color: #1d5396; }