/* 企业版交互扩展:深层页面、数据运维、产品导览、大屏与可读性 */ .tour-launch { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 13px; color: var(--green); background: var(--green-soft); border: 1px solid #d3e7dc; border-radius: 10px; font-size: 13px; font-weight: 700; } .tour-launch svg { width: 17px; height: 17px; } .quality-icon { color: white; background: linear-gradient(135deg, var(--green), #2f9470); box-shadow: 0 6px 16px rgba(23, 107, 79, 0.2); } .quality-icon svg { stroke-width: 2.2; } /* 专业洞察深层视图 */ .profession-tab-view { min-width: 0; } .profession-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .profession-detail-panel { min-width: 0; } .profession-detail-panel.wide { grid-column: 1 / -1; } .job-flow-board { display: grid; min-height: 360px; grid-template-columns: 150px minmax(80px, 0.4fr) minmax(285px, 1fr); align-items: center; gap: 12px; margin-top: 18px; padding: 22px; overflow: hidden; background: linear-gradient(110deg, #f5faf7, #fbfcfb); border: 1px solid #e4ece7; border-radius: 14px; } .job-flow-source { display: grid; min-height: 150px; place-items: center; align-content: center; color: white; background: linear-gradient(145deg, #176b4f, #104735); border-radius: 18px; text-align: center; } .job-flow-source span, .job-flow-source strong, .job-flow-source small { display: block; } .job-flow-source span { font-size: 14px; } .job-flow-source strong { margin: 8px 0 2px; color: var(--lime); font-size: 34px; } .job-flow-source small { color: #adcbc0; font-size: 13px; } .job-flow-lines { position: relative; height: 300px; } .job-flow-lines::before, .job-flow-lines::after { position: absolute; top: 50%; width: 14px; height: 14px; background: var(--green); border-radius: 50%; content: ""; transform: translateY(-50%); } .job-flow-lines::before { left: -5px; } .job-flow-lines::after { right: -5px; background: #72b893; } .job-flow-lines i { position: absolute; top: var(--flow-top); right: 0; left: 0; height: var(--flow-width); background: linear-gradient(90deg, rgba(23, 107, 79, 0.82), rgba(114, 184, 147, 0.5)); border-radius: 50%; } .job-flow-targets { display: flex; flex-direction: column; gap: 8px; } .job-flow-targets > span { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; background: white; border: 1px solid #e2eae5; border-radius: 10px; } .job-flow-targets b { color: var(--green); font-size: 13px; } .job-flow-targets strong { font-size: 14px; } .job-flow-targets small { color: var(--muted); font-size: 13px !important; } .job-flow-targets i { grid-column: 2 / -1; display: block; height: 6px; overflow: hidden; background: #edf2ee; border-radius: 4px; } .job-flow-targets i em, .region-distribution-list i em { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #72b893); border-radius: 4px; } .region-distribution-list, .salary-factor-list, .course-gap-list { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; } .region-distribution-list > span { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; } .region-distribution-list strong, .salary-factor-list strong, .course-gap-list strong { font-size: 14px; } .region-distribution-list small, .salary-factor-list small, .course-gap-list small { color: var(--muted); font-size: 13px !important; } .region-distribution-list i { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; background: #edf2ee; border-radius: 5px; } .employer-structure { display: flex; min-height: 225px; align-items: flex-end; justify-content: space-around; gap: 14px; margin-top: 18px; } .employer-structure > span { display: flex; min-width: 0; flex: 1; align-items: center; flex-direction: column; text-align: center; } .employer-structure > span::before { width: min(105px, 100%); height: calc(var(--share) * 3.1px); max-height: 135px; margin-bottom: 10px; background: linear-gradient(180deg, #72b893, var(--green)); border-radius: 12px 12px 3px 3px; content: ""; } .employer-structure strong { font-size: 14px; } .employer-structure small { margin-top: 5px; color: var(--muted); font-size: 13px !important; } .profession-evidence-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding: 15px 17px; color: #285041; background: #edf7f1; border: 1px solid #d8eade; border-radius: 12px; } .profession-evidence-note > span { padding: 5px 8px; color: white; background: var(--green); border-radius: 6px; font-size: 13px; font-weight: 800; } .profession-evidence-note p { margin: 0; font-size: 14px !important; } .profession-evidence-note button { padding: 8px 10px; color: var(--green); background: white; border: 1px solid #cfe2d6; border-radius: 8px; font-size: 13px !important; font-weight: 700; } .salary-index { padding: 7px 10px; color: var(--green); background: var(--green-soft); border-radius: 8px; font-size: 13px; font-weight: 700; } .salary-index.warning { color: #9a6818; background: var(--amber-soft); } .salary-comparison { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; } .salary-comparison > span { display: grid; grid-template-columns: 165px minmax(0, 1fr) 92px; align-items: center; gap: 13px; } .salary-comparison strong { font-size: 14px; } .salary-comparison i { height: 15px; overflow: hidden; background: #edf2ee; border-radius: 8px; } .salary-comparison i em { display: block; height: 100%; background: var(--green); border-radius: 8px; } .salary-comparison i em.region { background: #4d7fa8; } .salary-comparison i em.peer { background: #d39a35; } .salary-comparison b { font-size: 15px; text-align: right; } .salary-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 30px; padding: 18px; background: #f8faf8; border-radius: 12px; } .salary-range span small, .salary-range span strong { display: block; } .salary-range span small { color: var(--muted); font-size: 13px !important; } .salary-range span strong { margin-top: 3px; font-size: 15px; } .salary-range > i { position: relative; height: 9px; background: #dfe8e2; border-radius: 5px; } .salary-range > i b { position: absolute; inset: 0; background: linear-gradient(90deg, #72b893, var(--green)); border-radius: 5px; } .salary-range > i em { position: absolute; top: 50%; width: 17px; height: 17px; background: var(--lime); border: 3px solid var(--green); border-radius: 50%; transform: translate(-50%, -50%); } .salary-sample-card, .coverage-summary { display: flex; min-height: 210px; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .salary-sample-card > strong, .coverage-summary > strong { color: var(--green); font-size: 44px; } .salary-sample-card > span, .coverage-summary > span { font-size: 14px; font-weight: 700; } .salary-sample-card > small, .coverage-summary > small { max-width: 340px; margin-top: 12px; color: var(--muted); font-size: 13px !important; line-height: 1.7; } .salary-factor-list span { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; background: #f8faf8; border-radius: 10px; } .salary-factor-list b { color: var(--green); font-size: 20px; } .matrix-legend { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; } .matrix-legend i { width: 9px; height: 9px; margin-left: 5px; background: var(--green); border-radius: 3px; } .matrix-legend i:nth-of-type(2) { background: var(--amber); } .matrix-legend i:nth-of-type(3) { background: var(--red); } .course-matrix-wrap { max-width: 100%; margin-top: 18px; overflow-x: auto; } .course-matrix { width: 100%; min-width: 900px; border-collapse: collapse; } .course-matrix th, .course-matrix td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; text-align: center; } .course-matrix th:first-child, .course-matrix td:first-child { min-width: 145px; text-align: left; } .course-matrix td:first-child strong, .course-matrix td:first-child small { display: block; } .course-matrix td:first-child small { color: var(--muted); font-size: 13px !important; } .matrix-cell { display: inline-grid; width: 34px; height: 34px; place-items: center; color: white; background: var(--green); border-radius: 8px; font-size: 13px; font-weight: 700; } .matrix-cell.partial { background: var(--amber); } .matrix-cell.gap { background: var(--red); } .course-matrix button { padding: 7px 9px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 13px !important; font-weight: 700; } .coverage-summary > i { width: 80%; height: 10px; margin-top: 14px; overflow: hidden; background: #e8eee9; border-radius: 6px; } .coverage-summary > i b { display: block; height: 100%; background: var(--green); } .course-gap-list > span { display: grid; grid-template-columns: 30px 1fr; gap: 3px 10px; padding: 12px; background: #f8faf8; border-radius: 9px; } .course-gap-list b { grid-row: 1 / 3; color: var(--red); } /* 抽屉 */ .data-ops-backdrop, .workspace-detail-backdrop { position: fixed; z-index: 125; inset: 0; background: rgba(8, 25, 19, 0.54); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .data-ops-backdrop.open, .workspace-detail-backdrop.open { opacity: 1; pointer-events: auto; } .data-ops-drawer, .workspace-detail-drawer { position: absolute; top: 0; right: 0; display: flex; width: min(780px, 94vw); height: 100%; flex-direction: column; overflow: hidden; background: #f6f8f5; box-shadow: -24px 0 70px rgba(10, 32, 23, 0.22); transform: translateX(24px); transition: transform 0.22s ease; } .workspace-detail-drawer { width: min(680px, 94vw); } .data-ops-backdrop.open .data-ops-drawer, .workspace-detail-backdrop.open .workspace-detail-drawer { transform: translateX(0); } .data-ops-header, .workspace-detail-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 26px 20px; background: white; border-bottom: 1px solid var(--line); } .data-ops-header > div > span, .workspace-detail-header > div > span { color: var(--green-2); font-size: 13px; font-weight: 800; letter-spacing: 0.09em; } .data-ops-header h2, .workspace-detail-header h2 { margin: 6px 0 5px; font-size: 25px; } .data-ops-header p, .workspace-detail-header p { margin: 0; color: var(--muted); font-size: 14px; } .data-ops-header button, .workspace-detail-header button, .product-tour-close, .showcase-header-actions button { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: var(--muted); background: #f0f4f1; border-radius: 10px; } .data-ops-header button svg, .workspace-detail-header button svg, .product-tour-close svg, .showcase-header-actions button svg { width: 17px; height: 17px; } .data-ops-tabs { display: flex; flex: 0 0 auto; gap: 5px; padding: 10px 22px; overflow-x: auto; background: white; border-bottom: 1px solid var(--line); } .data-ops-tabs button { flex: 0 0 auto; padding: 8px 11px; color: var(--muted); background: transparent; border-radius: 8px; font-size: 13px; } .data-ops-tabs button.active { color: white; background: var(--green); font-weight: 700; } .data-ops-content, .workspace-detail-content { min-height: 0; flex: 1; padding: 20px 24px 34px; overflow-y: auto; } .data-ops-footer, .workspace-detail-footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 9px; padding: 14px 22px; background: white; border-top: 1px solid var(--line); } .data-ops-stat-grid, .batch-update-summary, .authorization-summary-grid, .workspace-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .batch-update-summary, .authorization-summary-grid, .workspace-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .data-ops-stat-grid > span, .batch-update-summary > span, .authorization-summary-grid > span, .workspace-metric-grid > span { min-width: 0; padding: 14px; background: white; border: 1px solid var(--line-soft); border-radius: 11px; } .data-ops-stat-grid small, .data-ops-stat-grid strong, .data-ops-stat-grid em, .batch-update-summary small, .batch-update-summary strong, .batch-update-summary em, .authorization-summary-grid small, .authorization-summary-grid strong, .authorization-summary-grid em, .workspace-metric-grid small, .workspace-metric-grid strong, .workspace-metric-grid em { display: block; } .data-ops-stat-grid small, .batch-update-summary small, .authorization-summary-grid small, .workspace-metric-grid small { color: var(--muted); font-size: 13px; } .data-ops-stat-grid strong, .batch-update-summary strong, .authorization-summary-grid strong, .workspace-metric-grid strong { margin: 7px 0 4px; font-size: 17px; } .data-ops-stat-grid em, .batch-update-summary em, .authorization-summary-grid em, .workspace-metric-grid em { color: var(--green-2); font-size: 13px; font-style: normal; } .data-ops-highlight, .data-issue-hero, .data-authorization-card { margin-top: 12px; padding: 18px; color: #eaf3ef; background: linear-gradient(135deg, #174535, #102f26); border-radius: 13px; } .data-ops-highlight > span, .data-issue-hero > span, .data-authorization-card > span { color: var(--lime); font-size: 13px; font-weight: 800; } .data-ops-highlight > strong, .data-issue-hero h3, .data-authorization-card > strong { display: block; margin: 7px 0 6px; color: white; font-size: 17px; } .data-ops-highlight p, .data-issue-hero p, .data-authorization-card p { margin: 0; color: #a8bdb5; font-size: 14px; line-height: 1.7; } .data-authorization-card > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } .data-authorization-card > div span { padding: 10px; color: #8fa99e; background: rgba(255, 255, 255, 0.055); border-radius: 8px; font-size: 13px; } .data-authorization-card > div strong { display: block; margin-top: 4px; color: white; font-size: 14px; overflow-wrap: anywhere; } .data-ops-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 12px; } .data-ops-card, .workspace-detail-card { margin-top: 12px; padding: 17px; background: white; border: 1px solid var(--line-soft); border-radius: 12px; } .data-ops-card h3, .workspace-detail-card h3 { margin: 0 0 12px; font-size: 16px; } .data-ops-card p, .workspace-detail-card p, .data-ops-card li { color: var(--muted); font-size: 14px; line-height: 1.75; } .data-ops-card ul { margin: 10px 0 0; padding-left: 20px; } .data-ops-card dl { margin: 0; } .data-ops-card dl > div { display: grid; grid-template-columns: 115px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .data-ops-card dl > div:last-child { border-bottom: 0; } .data-ops-card dt { color: var(--muted); font-size: 13px; } .data-ops-card dd { margin: 0; font-size: 14px; font-weight: 600; } .data-ops-state { display: inline-flex; padding: 4px 7px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 13px; } .data-ops-state.warning { color: #9a6818; background: var(--amber-soft); } .data-quality-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .data-quality-meter > i { height: 12px; overflow: hidden; background: #e7eee9; border-radius: 7px; } .data-quality-meter > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #72b893); } .data-quality-meter > strong { color: var(--green); font-size: 20px; } .data-contract-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .data-contract-hero > div { padding: 16px; background: white; border: 1px solid var(--line-soft); border-radius: 11px; } .data-contract-hero span, .data-contract-hero strong, .data-contract-hero small { display: block; } .data-contract-hero span, .data-contract-hero small { color: var(--muted); font-size: 13px; } .data-contract-hero strong { margin: 7px 0 4px; font-size: 15px; word-break: break-word; } .data-requirement-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .data-requirement-steps > span { padding: 12px; background: #f7faf7; border-radius: 9px; } .data-requirement-steps b, .data-requirement-steps strong, .data-requirement-steps small { display: block; } .data-requirement-steps b { color: var(--green); font-size: 13px; } .data-requirement-steps strong { margin: 6px 0 5px; font-size: 14px; } .data-requirement-steps small { color: var(--muted); font-size: 13px; line-height: 1.6; } .data-field-tags, .workspace-tag-row { display: flex; flex-wrap: wrap; gap: 7px; } .data-field-tags span, .workspace-tag-row span { padding: 7px 9px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 13px; font-weight: 600; } .data-ops-table { width: 100%; border-collapse: collapse; } .data-ops-table th, .data-ops-table td { padding: 11px 9px; border-bottom: 1px solid var(--line-soft); font-size: 13px; text-align: left; } .data-ops-table th { color: var(--muted); background: #f5f8f5; } .data-task-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; color: var(--green); background: var(--green-soft); border: 1px solid #d4e7dc; border-radius: 11px; } .data-task-banner.warning { color: #9b6816; background: var(--amber-soft); } .data-task-banner span { display: flex; align-items: center; gap: 9px; } .data-task-banner span i { width: 8px; height: 8px; background: currentColor; border-radius: 50%; } .data-task-banner strong, .data-task-banner em { font-size: 14px; } .data-task-banner em { font-style: normal; font-weight: 700; } .data-version-timeline { position: relative; margin-top: 14px; padding: 4px 0 4px 23px; } .data-version-timeline::before { position: absolute; top: 10px; bottom: 10px; left: 8px; width: 2px; background: #dbe5df; content: ""; } .data-version-timeline article { position: relative; padding: 0 0 20px 15px; } .data-version-timeline article > i { position: absolute; top: 5px; left: -22px; width: 13px; height: 13px; background: #b5c3ba; border: 3px solid #f6f8f5; border-radius: 50%; } .data-version-timeline article.active > i { background: var(--green); } .data-version-timeline article.warning > i { background: var(--amber); } .data-version-timeline span, .data-version-timeline strong, .data-version-timeline small { display: block; } .data-version-timeline span { color: var(--green); font-size: 13px; font-weight: 800; } .data-version-timeline strong { margin: 4px 0; font-size: 14px; } .data-version-timeline p { margin: 4px 0; color: var(--muted); font-size: 14px; } .data-version-timeline small { color: #8a9690; font-size: 13px; } .data-audit-list, .workspace-log-list { display: flex; flex-direction: column; } .data-audit-list > span, .workspace-log-list > span { position: relative; padding: 11px 0 11px 18px; border-bottom: 1px solid var(--line-soft); } .data-audit-list strong, .data-audit-list small, .workspace-log-list strong, .workspace-log-list small { display: block; } .data-audit-list strong, .workspace-log-list strong { font-size: 14px; } .data-audit-list small, .workspace-log-list small { margin-top: 4px; color: var(--muted); font-size: 13px; } .data-wizard-progress { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: white; border-radius: 11px; } .data-wizard-progress span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .data-wizard-progress span b { display: grid; width: 25px; height: 25px; place-items: center; background: #edf2ee; border-radius: 7px; } .data-wizard-progress span.active { color: var(--green); font-weight: 700; } .data-wizard-progress span.active b { color: white; background: var(--green); } .data-wizard-progress > i { width: 24px; height: 1px; background: #d7e0da; } .data-source-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .data-source-methods button { padding: 13px; background: #f7f9f7; border: 1px solid var(--line-soft); border-radius: 9px; text-align: left; } .data-source-methods button.active { background: var(--green-soft); border-color: #bddcc9; } .data-source-methods strong, .data-source-methods small { display: block; } .data-source-methods strong { font-size: 14px; } .data-source-methods small { margin-top: 4px; color: var(--muted); font-size: 13px; } .data-form-grid, .workspace-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .data-form-grid label.full, .workspace-form-grid label.full { grid-column: 1 / -1; } .data-form-grid label > span, .workspace-form-grid label > span { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 600; } .data-form-grid input, .data-form-grid select, .data-form-grid textarea, .workspace-form-grid input, .workspace-form-grid select, .workspace-form-grid textarea { width: 100%; padding: 10px 11px; background: #fafbf9; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; } .data-impact-grid, .security-control-grid, .workspace-evidence-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .security-control-grid { grid-template-columns: repeat(2, 1fr); } .data-impact-grid span, .security-control-grid span, .workspace-evidence-list span { padding: 11px; color: var(--muted); background: #f7f9f7; border-radius: 8px; font-size: 13px; } .data-impact-grid strong, .security-control-grid strong, .workspace-evidence-list strong { display: block; margin-top: 5px; color: var(--ink); font-size: 14px; } .batch-source-list { display: flex; flex-direction: column; } .batch-source-list label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .batch-source-list input { width: 17px; height: 17px; accent-color: var(--green); } .batch-source-list strong, .batch-source-list small { display: block; } .batch-source-list strong { font-size: 14px; } .batch-source-list small, .batch-source-list em { color: var(--muted); font-size: 13px; } .batch-source-list em { color: var(--green); font-style: normal; font-weight: 600; } .batch-source-list em.warning { color: #9b6816; } .source-card-actions { display: inline-flex !important; align-items: center; gap: 6px; } .source-card-actions button:first-child { color: var(--ink-soft); background: white; border: 1px solid var(--line); } .platform-contract-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .platform-contract-summary span { padding: 9px; color: var(--muted); background: white; border-radius: 8px; font-size: 13px; } .platform-contract-summary strong { display: block; margin-top: 5px; color: var(--ink); } /* 业务详情 */ .milestone-list { position: relative; padding-left: 22px; } .milestone-list::before { position: absolute; top: 12px; bottom: 12px; left: 7px; width: 2px; background: #dfe7e1; content: ""; } .milestone-list > span { position: relative; display: block; padding: 8px 0 14px; } .milestone-list > span i { position: absolute; top: 12px; left: -21px; width: 12px; height: 12px; background: #bdc9c1; border: 3px solid white; border-radius: 50%; } .milestone-list > span.done i { background: var(--green); } .milestone-list > span.active i { background: var(--lime); } .milestone-list strong, .milestone-list small { display: block; } .milestone-list strong { font-size: 14px; } .milestone-list small { margin-top: 4px; color: var(--muted); font-size: 13px; } .notification-list, .organization-list { display: flex; flex-direction: column; gap: 9px; } .notification-list button, .organization-list button { display: grid; width: 100%; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px; background: white; border: 1px solid var(--line-soft); border-radius: 11px; text-align: left; } .organization-list button { grid-template-columns: 42px minmax(0, 1fr) auto; } .organization-list button.active { background: var(--green-soft); } .notification-list > button > i { width: 9px; height: 9px; background: var(--green); border-radius: 50%; } .notification-list > button > i.red { background: var(--red); } .notification-list > button > i.amber { background: var(--amber); } .notification-list strong, .notification-list small, .organization-list strong, .organization-list small { display: block; } .notification-list strong, .organization-list strong { font-size: 14px; } .notification-list small, .organization-list small { margin-top: 4px; color: var(--muted); font-size: 13px; } .notification-list em, .organization-list em { color: var(--green); font-size: 13px; font-style: normal; font-weight: 700; } .template-library { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .template-library article { padding: 17px; background: white; border: 1px solid var(--line-soft); border-radius: 12px; } .template-library span, .template-library strong, .template-library small, .template-library em { display: block; } .template-library span { color: var(--green); font-size: 13px; font-weight: 800; } .template-library strong { margin: 8px 0; font-size: 15px; } .template-library small, .template-library em { color: var(--muted); font-size: 13px; } .template-library em { margin-top: 12px; color: var(--green-2); font-style: normal; } .compare-table-wrap { overflow-x: auto; background: white; border-radius: 11px; } .industry-detail-list { display: flex; flex-direction: column; gap: 10px; } .industry-detail-list > span { display: grid; grid-template-columns: 30px 155px minmax(0, 1fr) 50px 80px; align-items: center; gap: 9px; padding: 12px 13px; background: white; border: 1px solid var(--line-soft); border-radius: 10px; } .industry-detail-list b, .industry-detail-list small { color: var(--green); font-size: 13px; } .industry-detail-list strong { font-size: 14px; } .industry-detail-list > span > i { height: 8px; overflow: hidden; background: #edf1ee; border-radius: 5px; } .industry-detail-list > span > i em { display: block; height: 100%; background: var(--green); } .industry-detail-list > span > em { color: var(--muted); font-size: 13px; font-style: normal; } .inline-empty-state { display: grid; min-height: 160px; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-align: center; } .inline-empty-state strong { color: var(--ink); font-size: 15px; } .inline-empty-state small { font-size: 13px; } /* 产品导览 */ .product-tour-backdrop { position: fixed; z-index: 155; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(7, 24, 17, 0.66); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .product-tour-backdrop.open { opacity: 1; pointer-events: auto; } .product-tour-modal { position: relative; width: min(900px, 100%); max-height: calc(100vh - 48px); padding: 34px; overflow-y: auto; background: radial-gradient(circle at 94% 2%, rgba(198, 230, 111, 0.22), transparent 27%), white; border-radius: 22px; box-shadow: 0 28px 90px rgba(5, 25, 17, 0.28); } .product-tour-close { position: absolute; top: 18px; right: 18px; } .product-tour-hero { max-width: 690px; } .product-tour-hero > span { color: var(--green-2); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; } .product-tour-hero h2 { margin: 8px 0 10px; font-size: 34px; } .product-tour-hero p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; } .tour-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 24px; } .tour-value-grid article { padding: 17px; background: #f7faf7; border: 1px solid var(--line-soft); border-radius: 12px; } .tour-value-grid i, .tour-value-grid strong, .tour-value-grid span { display: block; } .tour-value-grid i { color: var(--green); font-size: 13px; font-style: normal; font-weight: 800; } .tour-value-grid strong { margin: 8px 0 5px; font-size: 18px; } .tour-value-grid span { color: var(--muted); font-size: 14px; line-height: 1.6; } .tour-route { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; padding: 16px; color: #e7f2ec; background: #143d31; border-radius: 13px; } .tour-route span { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; } .tour-route span b { display: grid; width: 26px; height: 26px; place-items: center; color: #173c30; background: var(--lime); border-radius: 7px; font-size: 13px; } .tour-route > i { width: 28px; height: 1px; background: #6b887d; } .product-tour-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; } .product-tour-modal > small { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; text-align: right; } .product-tour-coach { position: fixed; z-index: 150; right: 26px; bottom: 26px; width: min(390px, calc(100vw - 32px)); padding: 20px; color: white; background: linear-gradient(145deg, #163f32, #0f2e25); border: 1px solid rgba(198, 230, 111, 0.2); border-radius: 16px; box-shadow: 0 20px 60px rgba(6, 25, 17, 0.28); } .tour-coach-head { display: flex; align-items: center; justify-content: space-between; } .tour-coach-head > span { color: var(--lime); font-size: 13px; font-weight: 800; } .tour-coach-head button { display: grid; width: 30px; height: 30px; place-items: center; color: #a8beb5; background: rgba(255, 255, 255, 0.06); border-radius: 8px; } .tour-coach-head svg { width: 14px; height: 14px; } .product-tour-coach > strong { display: block; margin-top: 10px; font-size: 19px; } .product-tour-coach > p { margin: 7px 0 15px; color: #abc0b8; font-size: 14px; line-height: 1.7; } .tour-coach-actions { display: flex; justify-content: flex-end; gap: 8px; } .tour-coach-actions button { padding: 8px 12px; color: #163d31; background: var(--lime); border-radius: 8px; font-size: 13px; font-weight: 700; } .tour-coach-actions button:first-child { color: #dce9e3; background: rgba(255, 255, 255, 0.09); } .tour-target { position: relative; z-index: 145; outline: 4px solid var(--lime); outline-offset: 5px; box-shadow: 0 0 0 9999px rgba(7, 25, 17, 0.38), var(--shadow-high) !important; } /* 展示大屏 */ .showcase-screen { position: fixed; z-index: 180; inset: 0; min-width: 960px; overflow: auto; color: #e8f2ed; background: radial-gradient(circle at 82% 8%, rgba(198, 230, 111, 0.1), transparent 30%), linear-gradient(155deg, #0e2b23, #071d18 72%); opacity: 0; pointer-events: none; transform: scale(1.01); transition: opacity 0.25s ease, transform 0.25s ease; } .showcase-screen.open { opacity: 1; pointer-events: auto; transform: scale(1); } .showcase-header { display: flex; height: 86px; align-items: center; justify-content: space-between; padding: 0 34px; background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .showcase-brand, .showcase-brand > span:last-child { display: flex; align-items: center; } .showcase-brand { gap: 14px; } .showcase-brand > span:last-child { align-items: flex-start; flex-direction: column; } .showcase-brand strong { color: white; font-size: 20px; } .showcase-brand small { margin-top: 4px; color: #78968a; font-size: 13px; } .showcase-brand-mark { position: relative; width: 40px; height: 40px; } .showcase-brand-mark i { position: absolute; width: 24px; height: 9px; background: var(--lime); border-radius: 3px 9px 3px 9px; transform: skewX(-12deg); } .showcase-brand-mark i:nth-child(1) { top: 3px; } .showcase-brand-mark i:nth-child(2) { top: 15px; left: 7px; opacity: 0.75; } .showcase-brand-mark i:nth-child(3) { top: 27px; left: 14px; opacity: 0.5; } .showcase-header-actions { display: flex; align-items: center; gap: 16px; } .showcase-header-actions > span { display: flex; align-items: center; gap: 8px; color: #8eaaa0; font-size: 13px; } .showcase-header-actions > span i { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; } .showcase-header-actions button { color: #bad0c6; background: rgba(255, 255, 255, 0.06); } .showcase-content { min-height: calc(100vh - 86px); padding: 26px 34px 22px; } .showcase-title { display: flex; align-items: center; justify-content: space-between; gap: 35px; } .showcase-title > div:first-child > span { color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: 0.15em; } .showcase-title h2 { margin: 7px 0 4px; color: white; font-size: clamp(26px, 2.5vw, 38px); } .showcase-title p { margin: 0; color: #769387; font-size: 14px; } .showcase-score { display: grid; min-width: 225px; grid-template-columns: auto 1fr; align-items: center; gap: 0 13px; padding: 16px 20px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(198, 230, 111, 0.15); border-radius: 14px; } .showcase-score strong { grid-row: 1 / 3; color: var(--lime); font-size: 43px; } .showcase-score span { color: white; font-size: 14px; font-weight: 700; } .showcase-score em { color: #7fc39f; font-size: 13px; font-style: normal; } .showcase-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; } .showcase-metrics article, .showcase-panel { padding: 16px 18px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; } .showcase-metrics span, .showcase-metrics strong, .showcase-metrics em { display: block; } .showcase-metrics span, .showcase-metrics em { color: #89a69a; font-size: 13px; } .showcase-metrics strong { margin: 5px 0 2px; color: white; font-size: 27px; } .showcase-metrics strong small { margin-left: 4px; color: #8ba69b; font-size: 13px; } .showcase-metrics em { color: #7fc39f; font-style: normal; } .showcase-main-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 12px; margin-top: 12px; } .showcase-panel { min-width: 0; padding: 18px; } .showcase-focus { grid-column: 1 / -1; } .showcase-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .showcase-panel-head span { color: white; font-size: 16px; font-weight: 700; } .showcase-panel-head strong { color: #617e72; font-size: 13px; } .showcase-rank-list, .showcase-focus-list { display: flex; flex-direction: column; gap: 8px; } .showcase-rank-list > span { display: grid; grid-template-columns: 32px 150px minmax(0, 1fr) 43px; align-items: center; gap: 10px; } .showcase-rank-list b, .showcase-rank-list small { color: var(--lime); font-size: 13px; } .showcase-rank-list strong { font-size: 14px; } .showcase-rank-list > span > i { height: 9px; overflow: hidden; background: rgba(255, 255, 255, 0.08); border-radius: 5px; } .showcase-rank-list > span > i em { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), #69bc92); } .showcase-growth-chart { display: flex; min-height: 220px; align-items: flex-end; justify-content: space-around; gap: 9px; } .showcase-growth-chart > span { display: flex; min-width: 0; flex: 1; align-items: center; flex-direction: column; } .showcase-growth-chart > span::before { width: min(55px, 80%); height: calc(var(--value) * 1.7px); max-height: 165px; background: linear-gradient(180deg, var(--lime), #1f7a58); border-radius: 9px 9px 2px 2px; content: ""; } .showcase-growth-chart i, .showcase-growth-chart b { margin-top: 7px; color: #91ada1; font-size: 13px; font-style: normal; text-align: center; } .showcase-growth-chart b { margin-top: 2px; color: var(--lime); } .showcase-focus-list { display: grid; grid-template-columns: repeat(3, 1fr); } .showcase-focus-list > span { display: grid; grid-template-columns: 36px 1fr; gap: 3px 10px; padding: 13px; background: rgba(255, 255, 255, 0.035); border-radius: 9px; } .showcase-focus-list b { display: grid; width: 34px; height: 34px; grid-row: 1 / 3; place-items: center; color: #173a2e; background: var(--lime); border-radius: 8px; font-size: 13px; } .showcase-focus-list strong { color: white; font-size: 14px; } .showcase-focus-list small { color: #7f9b90; font-size: 13px; } .showcase-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: #668278; font-size: 13px; } .showcase-footer strong { color: #9bb7ab; font-size: 13px; } /* 统一可读性:企业展示不使用小于13px的业务文字 */ body small, body button, body input, body select, body textarea { font-size: 13px !important; } .app-shell .main-content span, .app-shell .main-content em { font-size: 13px !important; } .app-shell .main-content .panel-kicker, .app-shell .main-content .match-summary strong, .app-shell .main-content .skill-gap strong, .app-shell .main-content .project-progress strong, .app-shell .main-content .health-score strong, .app-shell .main-content .action-health strong, .app-shell .main-content .lineage-flow span, .app-shell .main-content .issue-list strong { font-size: 13px !important; } .app-shell .main-content .profile-banner span, .app-shell .main-content .report-stat-grid span, .app-shell .main-content .report-stat-grid em, .app-shell .main-content .recommendation-evidence, .app-shell .main-content #reportListSummary { font-size: 14px !important; } .app-shell .school-card strong, .app-shell .role-avatar, .app-shell .notification-button > span { font-size: 13px !important; } .app-shell .notification-button > span { width: 20px; height: 20px; } .brand small, .nav-label, .school-card span, .sync-line, .meeting-pack small, .meeting-pack strong, .nav-count, .breadcrumb, .role-copy small, .edition-badge, .quality-main strong, .quality-main span, .metric-label, .metric-foot, .metric-tag, .chart-legend, .chart-labels, .panel-kicker, .status-badge, .gap-badge, .source-summary-foot, .source-summary-metrics, .source-filter-result, .source-category-badge, .source-commercial-badge, .source-status, .source-license-grid span, .source-card-meta span, .source-card-foot span, .report-featured-label, .report-type-badge, .featured-report-meta, .featured-report-cover small, .featured-report-cover span, .report-list-meta, .report-list-side em, .modal-kicker, .modal small, .toast small, .tooltip { font-size: 13px !important; } .toast strong { font-size: 14px !important; } .toast small { color: #c2d3cb; line-height: 1.55; } .main-content small, .main-content .data-table th, .main-content .data-table td, .main-content .priority-mark, .main-content .owner-avatar, .main-content .partner-avatar, .main-content .task-progress-cell span, .modal label > span, .modal button, .modal input, .modal select, .modal textarea { font-size: 13px !important; } .recommendation-copy strong { font-size: 15px !important; } .recommendation-evidence { font-size: 14px !important; } .report-reader small, .report-reader .report-toc-label, .report-reader .report-toc button, .report-reader .report-reader-meta span, .report-reader .report-reader-meta strong, .report-reader .report-standard-stamp, .report-reader .report-cover-foot span, .report-reader .report-section-heading small, .report-reader .report-metric-grid span, .report-reader .report-metric-grid small, .report-reader .report-source-tag, .report-reader .report-confidence, .report-reader .report-action-priority, .report-reader .report-action-card button, .report-reader .report-evidence-code, .report-reader .report-profile-code, .report-reader .report-profile-label, .report-reader .report-proof-chain small, .report-reader .report-method-steps p, .report-reader .report-action-cycle small { font-size: 13px !important; } .report-reader .report-finding small, .report-reader .report-action-card small, .report-reader .report-chart-card figcaption, .report-reader .report-interpretation p, .report-reader .report-table td { font-size: 14px !important; } .report-reader .report-table th { font-size: 13px !important; } .report-reader .reader-version, .report-reader .report-document summary, .report-reader .report-document .report-chart-head > span, .report-reader .report-document .report-profile-kicker, .report-reader .report-document .report-profile-attributes strong, .report-reader .report-document .report-profile-stat-grid article > em, .report-reader .report-document .report-profile-stat-grid details strong, .report-reader .report-document .report-benchmark-strip em, .report-reader .report-document .report-interpretation > span, .report-reader .report-document .report-finding-validation strong, .report-reader .report-document .report-finding-validation span, .report-reader .report-document .report-finding-validation i, .report-reader .report-document .report-proof-chain i, .report-reader .report-document .report-proof-chain strong, .report-reader .report-document .report-method-steps article > span, .report-reader .report-document .report-method-steps strong, .report-reader .report-document .report-action-cycle strong { font-size: 13px !important; } .report-reader .report-document .report-evidence-table td strong, .report-reader .report-document .report-evidence-notice strong { font-size: 13px !important; } .report-reader .report-document svg text { font-size: 13px !important; } .report-reader .report-document p, .report-reader .report-document li, .report-reader .report-document .report-method-note, .report-reader .report-document .report-evidence-notice p { font-size: 14px !important; } @media (max-width: 900px) { .tour-launch span { display: none; } .tour-launch { width: 40px; padding: 0; justify-content: center; } .profession-detail-grid, .data-ops-two-column, .template-library { grid-template-columns: 1fr; } .profession-detail-panel.wide { grid-column: auto; } .job-flow-board { grid-template-columns: 120px 65px minmax(260px, 1fr); overflow-x: auto; } .data-ops-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .data-requirement-steps { grid-template-columns: 1fr 1fr; } .tour-value-grid { grid-template-columns: 1fr; } .tour-route { align-items: stretch; flex-direction: column; } .tour-route > i { width: 1px; height: 13px; margin-left: 13px; } } @media (max-width: 680px) { .showcase-screen { width: 100vw; min-width: 0; } .showcase-header { min-height: 74px; height: auto; gap: 12px; padding: 12px 15px; } .showcase-brand { min-width: 0; gap: 9px; } .showcase-brand strong { font-size: 15px; } .showcase-brand small, .showcase-header-actions > span { display: none; } .showcase-content { min-height: calc(100vh - 74px); padding: 18px 14px 24px; } .showcase-title { align-items: stretch; flex-direction: column; gap: 15px; } .showcase-title h2 { font-size: 27px; } .showcase-score { width: 100%; } .showcase-metrics { grid-template-columns: 1fr 1fr; } .showcase-main-grid { grid-template-columns: 1fr; } .showcase-focus { grid-column: auto; } .showcase-rank-list > span { grid-template-columns: 25px 112px minmax(0, 1fr) 36px; gap: 7px; } .showcase-growth-chart { min-height: 200px; } .showcase-focus-list { grid-template-columns: 1fr; } .showcase-footer { align-items: flex-start; flex-direction: column; gap: 7px; } .data-ops-drawer, .workspace-detail-drawer { width: 100vw; } .data-ops-header, .workspace-detail-header { padding: 20px 18px 16px; } .data-ops-content, .workspace-detail-content { padding: 16px 15px 28px; } .data-ops-stat-grid, .batch-update-summary, .authorization-summary-grid, .workspace-metric-grid, .data-contract-hero, .data-authorization-card > div, .data-impact-grid, .security-control-grid, .workspace-evidence-list { grid-template-columns: 1fr 1fr; } .data-requirement-steps, .data-source-methods, .data-form-grid, .workspace-form-grid { grid-template-columns: 1fr; } .data-form-grid label.full, .workspace-form-grid label.full { grid-column: auto; } .data-wizard-progress { align-items: flex-start; flex-direction: column; } .data-wizard-progress > i { width: 1px; height: 10px; margin-left: 12px; } .profession-evidence-note { grid-template-columns: 1fr; } .profession-evidence-note > span, .profession-evidence-note button { justify-self: start; } .salary-comparison > span { grid-template-columns: 1fr 68px; } .salary-comparison > span > i { grid-column: 1 / -1; grid-row: 2; } .product-tour-backdrop { padding: 10px; } .product-tour-modal { padding: 28px 20px 22px; } .product-tour-hero h2 { font-size: 28px; } .product-tour-actions { align-items: stretch; flex-direction: column; } .product-tour-actions .button { width: 100%; } .product-tour-coach { right: 16px; bottom: 16px; } .industry-detail-list > span { grid-template-columns: 28px 1fr 48px; } .industry-detail-list > span > i, .industry-detail-list > span > em { grid-column: 2 / -1; } } /* 校园业务闭环 */ .loop-identity-strip { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; color: #dcebe4; background: linear-gradient(135deg, #173f33, #102e26); border-radius: 13px; } .loop-identity-strip > strong { color: var(--lime); font-size: 14px; } .loop-identity-strip > span { padding: 5px 8px; background: rgba(255, 255, 255, 0.07); border-radius: 6px; font-size: 13px; } .loop-identity-strip b { color: white; } .loop-identity-strip > small { width: 100%; color: #a7beb4; font-size: 13px; } .loop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 16px; } .loop-main { display: flex; min-width: 0; flex-direction: column; gap: 16px; } .loop-action-panel { position: sticky; top: 86px; min-width: 0; } .loop-chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .loop-stage { display: grid; min-width: 0; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 13px; background: #f8faf8; border: 1px solid var(--line-soft); border-radius: 11px; } .loop-stage > i { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green); background: #e7f3ed; border-radius: 9px; font-size: 13px; font-style: normal; font-weight: 800; } .loop-stage.review > i { color: #916217; background: #fff6df; } .loop-stage.risk > i { color: #ad4e45; background: #fff0ed; } .loop-stage.done > i { color: white; background: var(--green); } .loop-stage span, .loop-stage small, .loop-stage strong, .loop-stage em { display: block; min-width: 0; } .loop-stage small { color: var(--muted); font-size: 13px; } .loop-stage strong { margin: 3px 0; overflow-wrap: anywhere; font-size: 13px; } .loop-stage em { color: var(--green-2); font-size: 13px; font-style: normal; } .loop-entity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .loop-entity-grid article { min-width: 0; padding: 15px; background: #f9fbf9; border: 1px solid var(--line-soft); border-radius: 11px; } .loop-entity-grid span, .loop-entity-grid strong, .loop-entity-grid small { display: block; overflow-wrap: anywhere; } .loop-entity-grid span { color: var(--green); font-size: 13px; font-weight: 800; } .loop-entity-grid strong { margin: 8px 0; font-size: 14px; } .loop-entity-grid small { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.55; } .loop-role-boundary { margin-bottom: 12px; padding: 13px; color: #6e5423; background: #fff9ec; border: 1px solid #eee0bd; border-radius: 10px; } .loop-role-boundary strong, .loop-role-boundary p { font-size: 13px; } .loop-role-boundary p { margin: 5px 0 0; line-height: 1.6; } .loop-action-list { display: flex; flex-direction: column; gap: 9px; } .loop-action-list > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; color: var(--ink); background: white; border: 1px solid var(--line-soft); border-radius: 10px; text-align: left; } .loop-action-list button:disabled { opacity: 0.58; cursor: not-allowed; } .loop-action-list span, .loop-action-list strong, .loop-action-list small { display: block; } .loop-action-list strong { font-size: 14px; } .loop-action-list small { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; } .loop-action-list em { flex: 0 0 auto; color: var(--green); font-size: 13px; font-style: normal; font-weight: 800; } .loop-audit-list, .report-approval-toolbar details > div { display: flex; max-height: 430px; overflow-y: auto; flex-direction: column; } .loop-audit-list > span { display: grid; grid-template-columns: 12px 1fr; gap: 3px 9px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .loop-audit-list i { width: 8px; height: 8px; grid-row: 1 / 4; margin-top: 5px; background: var(--green); border-radius: 50%; } .loop-audit-list strong, .loop-audit-list small, .loop-audit-list em { font-size: 13px; } .loop-audit-list small { color: var(--muted); } .loop-audit-list em { color: var(--green-2); font-style: normal; } .loop-modal { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 36px); overflow-y: auto; } .loop-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; } .loop-modal-fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; } .loop-modal-fields label:has(textarea) { grid-column: 1 / -1; } .loop-modal-fields span, .loop-modal-fields input, .loop-modal-fields select, .loop-modal-fields textarea { font-size: 13px; } .loop-modal-fields input, .loop-modal-fields select, .loop-modal-fields textarea { width: 100%; padding: 10px 11px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px; } .loop-linked-id { display: block; margin: 5px 0; color: var(--green-2); font-size: 13px; overflow-wrap: anywhere; } .loop-inline-action { margin-top: 13px; } .loop-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; } .report-approval-toolbar { position: relative; z-index: 1; display: flex; min-height: 54px; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 22px; background: #f8faf8; border-bottom: 1px solid var(--line); } .report-approval-toolbar > span strong, .report-approval-toolbar > span small { display: block; font-size: 13px; } .report-flow-state.draft strong { color: #9a651b; } .report-flow-state.official strong { color: var(--green); } .report-approval-toolbar small, .report-link-summary { color: var(--muted); font-size: 13px; } .report-approval-toolbar details { position: relative; font-size: 13px; } .report-approval-toolbar details > div { position: absolute; z-index: 3; top: 28px; right: 0; width: min(420px, calc(100vw - 28px)); max-height: 280px; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-high); } .report-approval-toolbar details span { display: block; padding: 8px; border-bottom: 1px solid var(--line-soft); } .report-approval-toolbar details strong, .report-approval-toolbar details small, .report-approval-toolbar details em { display: block; font-size: 13px; } .report-approval-toolbar details em { color: var(--muted); font-style: normal; } .report-flow-actions { display: flex; gap: 8px; margin-left: auto; } @media (max-width: 1050px) { .loop-layout { grid-template-columns: 1fr; } .loop-action-panel { position: static; } } @media (max-width: 680px) { .loop-chain, .loop-entity-grid, .loop-modal-fields { grid-template-columns: 1fr; } .loop-modal-fields label:has(textarea) { grid-column: auto; } .loop-identity-strip { align-items: stretch; flex-direction: column; } .report-approval-toolbar { align-items: stretch; flex-direction: column; padding: 9px 14px; } .report-flow-actions { width: 100%; margin-left: 0; } .report-flow-actions .button { flex: 1; } } @media print { body > .app-shell, body > .toast-region, body > .product-tour-backdrop, body > .product-tour-coach, body > .data-ops-backdrop, body > .workspace-detail-backdrop, body > .showcase-screen { display: none !important; } .report-reader { position: static; display: block; opacity: 1; pointer-events: auto; transform: none; } .report-reader-header, .report-toc, .report-flow-actions { display: none; } .report-approval-toolbar { display: block; padding: 8px; } .report-reader-layout, .report-document-wrap { display: block; overflow: visible; } .report-document { width: 100%; margin: 0; box-shadow: none; } }