:root { --ink: #14241e; --ink-soft: #33463e; --muted: #718078; --line: #dfe5df; --line-soft: #ebefeb; --surface: #ffffff; --canvas: #f5f7f3; --canvas-warm: #faf9f4; --green: #176b4f; --green-2: #238765; --green-soft: #e8f4ee; --lime: #c6e66f; --lime-soft: #f1f8dc; --amber: #d89527; --amber-soft: #fff5df; --red: #cb5548; --red-soft: #fff0ed; --blue: #4978a8; --blue-soft: #edf4fa; --shadow: 0 10px 35px rgba(27, 54, 43, 0.07); --shadow-high: 0 22px 70px rgba(16, 39, 30, 0.18); --radius: 18px; --sidebar: 254px; color-scheme: light; font-family: "Inter", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: radial-gradient(circle at 90% 0, rgba(198, 230, 111, 0.08), transparent 28%), var(--canvas); font-size: 14px; -webkit-font-smoothing: antialiased; } button, input, select, textarea { color: inherit; font: inherit; } button { border: 0; cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(35, 135, 101, 0.24); outline-offset: 2px; } svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .app-shell { min-height: 100vh; } .sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: var(--sidebar); flex-direction: column; color: #dbe8e1; background: radial-gradient(circle at 15% 2%, rgba(198, 230, 111, 0.13), transparent 24%), linear-gradient(180deg, #15382d 0%, #102c24 52%, #0d251e 100%); border-right: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.25s ease; } .brand { display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 24px; } .brand-mark { position: relative; width: 36px; height: 36px; transform: rotate(-6deg); } .brand-mark span { position: absolute; display: block; width: 21px; height: 9px; border-radius: 2px 8px 2px 8px; background: var(--lime); transform: skewX(-13deg); } .brand-mark span:nth-child(1) { top: 3px; left: 1px; } .brand-mark span:nth-child(2) { top: 14px; left: 8px; opacity: 0.78; } .brand-mark span:nth-child(3) { top: 25px; left: 15px; opacity: 0.55; } .brand strong { display: block; color: white; font-size: 18px; letter-spacing: 0.08em; } .brand small { display: block; margin-top: 3px; color: #88a398; font-size: 8px; letter-spacing: 0.16em; } .school-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 10px; margin: 3px 14px 19px; padding: 13px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.045); } .school-emblem { display: grid; width: 34px; height: 34px; place-items: center; color: #173a2e; background: var(--lime); border-radius: 9px; font-family: serif; font-size: 16px; font-weight: 800; } .school-card > div:nth-child(2) { min-width: 0; } .school-card span, .school-card strong { display: block; } .school-card span { margin-bottom: 3px; color: #779388; font-size: 9px; } .school-card strong { overflow: hidden; color: #eef6f1; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .icon-button { display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; color: var(--ink-soft); background: transparent; border-radius: 10px; } .icon-button:hover { background: rgba(23, 107, 79, 0.08); } .icon-button svg { width: 19px; height: 19px; } .icon-button.subtle { width: 24px; height: 24px; color: #7f9c90; } .icon-button.subtle svg { width: 14px; height: 14px; } .main-nav { flex: 1; min-height: 0; padding: 0 14px; overflow-y: auto; } .nav-group { display: block; } .main-nav::-webkit-scrollbar { width: 4px; } .main-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; } .nav-label { display: block; padding: 6px 12px 9px; color: #66877a; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .nav-label-spaced { margin-top: 20px; } .nav-item { position: relative; display: flex; width: 100%; height: 44px; align-items: center; gap: 12px; margin: 3px 0; padding: 0 12px; color: #a8beb5; background: transparent; border-radius: 11px; text-align: left; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .nav-item::before { position: absolute; top: 10px; bottom: 10px; left: -14px; width: 3px; background: var(--lime); border-radius: 0 4px 4px 0; content: ""; opacity: 0; transition: opacity 0.2s ease; } .nav-item:hover { color: white; background: rgba(255, 255, 255, 0.055); transform: translateX(2px); } .nav-item.active { color: white; background: rgba(198, 230, 111, 0.11); } .nav-item.active::before { opacity: 1; } .nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; } .nav-item span:nth-child(2) { flex: 1; font-size: 13px; } .nav-count { display: grid; min-width: 24px; height: 20px; place-items: center; color: #a4be67; background: rgba(198, 230, 111, 0.1); border-radius: 10px; font-size: 10px; } .nav-dot { width: 6px; height: 6px; background: #ef9f58; border-radius: 50%; box-shadow: 0 0 0 4px rgba(239, 159, 88, 0.1); } .sidebar-footer { padding: 14px; } .sync-line { display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; color: #6f8e81; font-size: 10px; } .live-dot { width: 6px; height: 6px; background: #73bd8d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(115, 189, 141, 0.09); } .meeting-pack { display: grid; width: 100%; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px; padding: 12px; color: #eff8df; background: linear-gradient(135deg, rgba(198, 230, 111, 0.16), rgba(198, 230, 111, 0.04)); border: 1px solid rgba(198, 230, 111, 0.16); border-radius: 12px; text-align: left; } .meeting-pack:hover { background: rgba(198, 230, 111, 0.17); } .meeting-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #19392f; background: var(--lime); border-radius: 9px; } .meeting-icon svg { width: 17px; height: 17px; } .meeting-pack small, .meeting-pack strong { display: block; } .meeting-pack small { margin-bottom: 2px; color: #8ca59b; font-size: 9px; } .meeting-pack strong { font-size: 12px; font-weight: 600; } .meeting-arrow { width: 14px; height: 14px; color: #68887b; } .workspace { min-height: 100vh; margin-left: var(--sidebar); } .topbar { position: sticky; z-index: 20; top: 0; display: flex; height: 76px; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(245, 247, 243, 0.9); border-bottom: 1px solid rgba(212, 220, 214, 0.8); backdrop-filter: blur(16px); } .topbar-left { display: flex; align-items: center; gap: 10px; } .breadcrumb { display: flex; align-items: center; gap: 8px; color: #87938d; font-size: 11px; } .breadcrumb strong { color: var(--ink-soft); font-weight: 600; } .breadcrumb svg { width: 12px; height: 12px; } .topbar-date { margin: 5px 0 0; color: var(--ink); font-size: 12px; font-weight: 600; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .edition-badge { padding: 5px 9px; color: #73591c; background: #fff1be; border: 1px solid #f2df9b; border-radius: 7px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; } .role-switcher { position: relative; display: grid; min-width: 172px; height: 50px; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 9px; padding: 0 12px; background: rgba(255, 255, 255, 0.65); border: 1px solid var(--line); border-radius: 12px; } .role-avatar { display: grid; width: 34px; height: 34px; place-items: center; color: white; background: var(--green); border-radius: 10px; font-size: 12px; font-weight: 700; } .role-copy strong, .role-copy small { display: block; } .role-copy strong { font-size: 11px; } .role-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; } .role-switcher > svg { width: 13px; height: 13px; color: var(--muted); } .role-switcher select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .notification-button { position: relative; background: rgba(255, 255, 255, 0.68); border: 1px solid var(--line); } .notification-button > span { position: absolute; top: -4px; right: -3px; display: grid; width: 17px; height: 17px; place-items: center; color: white; background: var(--red); border: 2px solid var(--canvas); border-radius: 50%; font-size: 8px; font-weight: 700; } .mobile-menu { display: none; } .main-content { max-width: 1720px; margin: 0 auto; padding: 34px 30px 60px; } .view { display: none; animation: viewIn 0.34s ease both; } .view.active { display: block; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .page-heading { margin-bottom: 28px; } .heading-with-actions, .profession-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--green-2); font-size: 9px; font-weight: 800; letter-spacing: 0.16em; } .eyebrow span { display: inline-block; width: 22px; height: 2px; background: var(--green-2); } .page-heading h1 { margin: 0; color: #142920; font-size: clamp(25px, 2.2vw, 36px); font-weight: 700; letter-spacing: -0.055em; } .page-heading p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; } .heading-actions { display: flex; gap: 10px; flex: 0 0 auto; } .button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .button:hover { transform: translateY(-1px); } .button svg { width: 16px; height: 16px; } .button.primary { color: white; background: var(--green); box-shadow: 0 8px 18px rgba(23, 107, 79, 0.16); } .button.primary:hover { background: #125e45; box-shadow: 0 11px 22px rgba(23, 107, 79, 0.22); } .button.secondary { color: var(--ink-soft); background: white; border-color: var(--line); } .button.secondary:hover, .button.tertiary:hover { background: #f8faf8; } .button.tertiary { color: var(--green); background: var(--green-soft); border-color: #d2e9de; box-shadow: none; } .quality-strip { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 10px 16px; background: linear-gradient(90deg, #e8f3ec, #f4f8ed); border: 1px solid #dceadd; border-radius: 13px; } .quality-main { display: flex; align-items: center; gap: 12px; } .quality-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; color: var(--green); background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(23, 107, 79, 0.08); } .quality-icon svg { width: 18px; height: 18px; } .quality-main strong, .quality-main span { display: block; } .quality-main strong { margin-bottom: 3px; font-size: 11px; } .quality-main span { color: var(--muted); font-size: 9px; } .text-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 4px; color: var(--green); background: transparent; font-size: 10px; font-weight: 600; white-space: nowrap; } .text-button:hover { color: #0e543d; } .text-button svg { width: 13px; height: 13px; } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .metric-card, .panel { min-width: 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); } .metric-card { position: relative; min-height: 145px; padding: 18px 20px; overflow: hidden; } .metric-card::after { position: absolute; right: -14px; bottom: -36px; width: 110px; height: 90px; background: radial-gradient(circle, rgba(198, 230, 111, 0.12), transparent 68%); content: ""; } .metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .metric-label { color: var(--muted); font-size: 10px; font-weight: 600; } .info-button { display: grid; width: 18px; height: 18px; place-items: center; color: #87938d; background: #f1f4f1; border-radius: 50%; font-family: Georgia, serif; font-size: 10px; font-weight: 700; } .metric-tag { padding: 4px 7px; border-radius: 6px; font-size: 8px; font-weight: 700; } .metric-tag.green { color: var(--green); background: var(--green-soft); } .metric-tag.amber { color: #946313; background: var(--amber-soft); } .metric-tag.blue { color: #426d97; background: var(--blue-soft); } .metric-value { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; } .metric-value strong { font-size: clamp(26px, 2.15vw, 34px); font-weight: 700; letter-spacing: -0.055em; } .metric-value small { color: var(--muted); font-size: 10px; } .metric-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 9px; } .metric-foot span { font-weight: 700; } .metric-foot small { color: #87938d; } .metric-foot.positive span { color: var(--green-2); } .metric-foot.warning span { color: #b27218; } .metric-spark { position: absolute; right: 15px; bottom: 14px; width: 78px; height: 30px; opacity: 0.78; } .metric-spark svg { width: 100%; height: 100%; overflow: visible; } .metric-spark path.area { stroke: none; } .metric-progress { width: 100%; height: 5px; margin-top: 14px; overflow: hidden; background: #edf0ed; border-radius: 4px; } .metric-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #71b88c); border-radius: 4px; } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(310px, 0.82fr); gap: 14px; margin-bottom: 14px; } .panel { padding: 22px; } .panel-header { display: flex; min-height: 36px; align-items: flex-start; justify-content: space-between; gap: 16px; } .panel-kicker { display: block; margin-bottom: 5px; color: #8a9790; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; } .panel h2 { margin: 0; color: #1c3028; font-size: 14px; font-weight: 700; } .segmented { display: inline-flex; padding: 3px; background: #f2f5f2; border-radius: 9px; } .segmented button { padding: 6px 10px; color: #7d8983; background: transparent; border-radius: 7px; font-size: 9px; } .segmented button.active { color: var(--ink); background: white; box-shadow: 0 2px 7px rgba(21, 53, 41, 0.08); font-weight: 600; } .match-content { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 226px; padding-top: 6px; } .score-dial { position: relative; display: grid; width: 158px; height: 158px; place-items: center; } .score-dial::after { position: absolute; width: 112px; height: 112px; border: 1px dashed #d9e4dc; border-radius: 50%; content: ""; } .score-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .score-dial circle { fill: none; stroke-width: 11; } .dial-track { stroke: #edf1ed; } .dial-value { stroke: var(--green); stroke-dasharray: 389.6; stroke-dashoffset: 83.4; transition: stroke-dashoffset 0.5s ease; } .score-dial > div { position: relative; z-index: 2; text-align: center; } .score-dial strong, .score-dial span { display: block; } .score-dial strong { font-size: 31px; letter-spacing: -0.06em; } .score-dial span { margin-top: 2px; color: var(--muted); font-size: 9px; } .trend-chart-wrap { min-width: 0; } .chart-legend { display: flex; justify-content: flex-end; gap: 18px; margin: 5px 8px 8px; color: var(--muted); font-size: 8px; } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-legend i { display: inline-block; width: 15px; height: 2px; } .legend-current { background: var(--green); } .legend-benchmark { background: #aebbb4; } .line-chart { display: block; width: 100%; height: 165px; overflow: visible; } .line-chart .grid-line { stroke: #e7ece8; stroke-width: 1; } .line-chart .area-shape { fill: url("#areaGradient"); stroke: none; } .line-chart .main-line { fill: none; stroke: var(--green); stroke-width: 3.2; vector-effect: non-scaling-stroke; } .line-chart .benchmark-line { fill: none; stroke: #b4c0ba; stroke-dasharray: 5 6; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .line-chart .data-point { fill: white; stroke: var(--green); stroke-width: 2.6; vector-effect: non-scaling-stroke; } .line-chart .last-point { fill: var(--lime); stroke: var(--green); stroke-width: 3; } .line-chart .chart-value { fill: var(--ink); stroke: none; font-size: 18px; font-weight: 700; } .chart-labels { display: flex; justify-content: space-between; padding: 2px 0 0; color: #94a098; font-size: 8px; } .match-summary { display: flex; min-height: 42px; align-items: center; justify-content: space-around; gap: 14px; margin: 2px -4px -5px; padding-top: 12px; border-top: 1px solid var(--line-soft); } .match-summary span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; } .match-summary strong { color: var(--ink); font-size: 11px; } .match-summary i { width: 7px; height: 7px; border-radius: 50%; } .summary-good { background: var(--green-2); } .summary-watch { background: var(--amber); } .summary-risk { background: var(--red); } .ai-panel { position: relative; color: #e7f1ec; background: radial-gradient(circle at 100% 0, rgba(198, 230, 111, 0.13), transparent 34%), linear-gradient(160deg, #153f32, #102d25); border-color: rgba(255, 255, 255, 0.06); overflow: hidden; } .ai-panel::after { position: absolute; right: -55px; bottom: -65px; width: 175px; height: 175px; border: 1px solid rgba(198, 230, 111, 0.09); border-radius: 50%; box-shadow: 0 0 0 25px rgba(198, 230, 111, 0.025), 0 0 0 50px rgba(198, 230, 111, 0.018); content: ""; } .ai-panel-head { position: relative; z-index: 1; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; } .ai-symbol { display: grid; width: 38px; height: 38px; place-items: center; color: var(--lime); background: rgba(198, 230, 111, 0.1); border: 1px solid rgba(198, 230, 111, 0.12); border-radius: 11px; } .ai-symbol svg { width: 20px; height: 20px; } .ai-panel-head small { color: #79998c; font-size: 7px; font-weight: 700; letter-spacing: 0.13em; } .ai-panel-head h2 { margin-top: 4px; color: white; font-size: 14px; } .ai-state { padding: 4px 7px; color: #cce591; background: rgba(198, 230, 111, 0.1); border-radius: 5px; font-size: 8px; } .ai-lead { position: relative; z-index: 1; margin: 18px 0 14px; color: #bfd1c9; font-size: 10px; line-height: 1.8; } .insight-list { position: relative; z-index: 1; } .insight-item { display: grid; width: 100%; grid-template-columns: 27px 1fr 14px; align-items: center; gap: 9px; padding: 11px 0; color: #edf6f1; background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: left; } .insight-item:hover strong { color: var(--lime); } .insight-index { color: #728f83; font-size: 9px; font-variant-numeric: tabular-nums; } .insight-item strong, .insight-item small { display: block; } .insight-item strong { margin-bottom: 4px; font-size: 10px; font-weight: 600; transition: color 0.2s ease; } .insight-item small { color: #78968a; font-size: 8px; } .insight-item > svg { width: 13px; height: 13px; color: #67867a; } .ai-source { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 12px; color: #6d8c80; font-size: 8px; } .ai-source svg { width: 13px; height: 13px; } .content-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.65fr); gap: 14px; } .panel-tools { display: flex; align-items: center; gap: 12px; } .search-field { display: flex; width: 260px; height: 40px; align-items: center; gap: 8px; padding: 0 12px; background: white; border: 1px solid var(--line); border-radius: 9px; } .search-field.compact { width: 150px; height: 32px; background: #f7f9f7; border-color: transparent; } .search-field svg { width: 15px; height: 15px; flex: 0 0 auto; color: #89958e; } .search-field input { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; outline: 0; font-size: 10px; } .search-field input::placeholder { color: #a1aaa5; } .table-wrap { width: 100%; margin-top: 12px; overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; white-space: nowrap; } .data-table th { padding: 10px 9px; color: #88948d; border-bottom: 1px solid var(--line-soft); font-size: 8px; font-weight: 600; text-align: left; } .data-table td { padding: 12px 9px; color: #617068; border-bottom: 1px solid #eff2ef; font-size: 9px; } .data-table tbody tr { transition: background 0.18s ease; } .data-table tbody tr:hover { background: #f8faf8; } .data-table tbody tr:last-child td { border-bottom: 0; } .profession-cell { display: flex; align-items: center; gap: 9px; } .profession-icon { display: grid; width: 31px; height: 31px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 9px; font-size: 10px; font-weight: 700; } .profession-cell strong { color: var(--ink); font-size: 10px; } .score-cell { display: flex; align-items: center; gap: 8px; } .score-cell strong { width: 25px; color: var(--ink); font-size: 10px; } .score-bar { width: 52px; height: 4px; overflow: hidden; background: #ecf0ec; border-radius: 3px; } .score-bar i { display: block; height: 100%; background: var(--green-2); border-radius: 3px; } .score-bar.mid i { background: var(--amber); } .score-bar.low i { background: var(--red); } .gap-badge, .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; font-size: 8px; font-weight: 600; } .gap-badge.high, .status-badge.risk { color: #a84137; background: var(--red-soft); } .gap-badge.mid, .status-badge.progress { color: #a16d16; background: var(--amber-soft); } .gap-badge.low, .status-badge.done { color: var(--green); background: var(--green-soft); } .status-badge.review { color: #426d97; background: var(--blue-soft); } .trend-up { color: var(--green-2); font-weight: 700; } .trend-down { color: var(--red); font-weight: 700; } .row-action { display: grid; width: 25px; height: 25px; place-items: center; color: #829088; background: transparent; border-radius: 7px; } .row-action:hover { color: var(--green); background: var(--green-soft); } .row-action svg { width: 13px; height: 13px; } .more-button { display: grid; width: 28px; height: 28px; place-items: center; color: var(--muted); background: #f4f6f4; border-radius: 8px; } .more-button svg { width: 15px; height: 15px; } .industry-list { margin-top: 16px; } .industry-item { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eff2ef; } .industry-item:last-child { border-bottom: 0; } .industry-rank { display: grid; width: 27px; height: 27px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 8px; font-size: 9px; font-weight: 700; } .industry-item:nth-child(1) .industry-rank { color: #463d19; background: var(--lime); } .industry-copy strong, .industry-copy small { display: block; } .industry-copy strong { margin-bottom: 6px; font-size: 9px; } .industry-copy small { position: relative; width: 100%; height: 3px; overflow: hidden; background: #edf0ed; border-radius: 3px; } .industry-copy i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #83bf96); border-radius: 3px; } .industry-growth { color: var(--green-2); font-size: 10px; font-weight: 700; } .industry-note { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 12px; padding: 12px; color: #7d8983; background: #f7f9f7; border-radius: 10px; font-size: 8px; } .industry-note strong { color: var(--ink-soft); font-size: 9px; text-align: right; } /* 专业洞察 */ .heading-inline { display: flex; align-items: center; gap: 10px; } .profession-select { position: relative; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--green); background: var(--green-soft); border-radius: 8px; } .profession-select select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .profession-select svg { width: 14px; height: 14px; } .profile-banner { display: grid; grid-template-columns: 160px 1px repeat(4, minmax(0, 1fr)); align-items: center; gap: 25px; margin-bottom: 16px; padding: 22px 28px; color: white; background: radial-gradient(circle at 85% 20%, rgba(198, 230, 111, 0.12), transparent 28%), linear-gradient(110deg, #153d31, #102d25); border-radius: 18px; box-shadow: var(--shadow); } .profile-score span, .profile-score small, .profile-metric span, .profile-metric small { display: block; } .profile-score span, .profile-metric span { margin-bottom: 7px; color: #88a69a; font-size: 9px; } .profile-score strong { display: inline-block; margin-right: 7px; color: var(--lime); font-size: 33px; letter-spacing: -0.055em; } .profile-score small { display: inline-flex; padding: 4px 7px; color: #bed683; background: rgba(198, 230, 111, 0.09); border-radius: 5px; font-size: 8px; } .profile-divider { width: 1px; height: 48px; background: rgba(255, 255, 255, 0.12); } .profile-metric strong { display: inline-block; margin-right: 5px; font-size: 20px; letter-spacing: -0.04em; } .profile-metric small { margin-top: 6px; color: #7d9c8f; font-size: 8px; } .profile-metric small.up { display: inline; color: #a7ca72; } .tab-bar { display: flex; gap: 4px; margin-bottom: 14px; padding: 5px; background: white; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 5px 20px rgba(27, 54, 43, 0.04); } .tab-bar button { min-width: 90px; padding: 9px 13px; color: var(--muted); background: transparent; border-radius: 8px; font-size: 10px; } .tab-bar button.active { color: white; background: var(--green); font-weight: 600; } .profession-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.72fr); gap: 14px; } .profession-main, .profession-side { display: flex; min-width: 0; flex-direction: column; gap: 14px; } .legend-row { display: flex; gap: 14px; color: var(--muted); font-size: 8px; } .legend-row span { display: inline-flex; align-items: center; gap: 5px; } .legend-row i { display: inline-block; width: 12px; height: 3px; border-radius: 3px; } .market-legend { background: var(--green); } .course-legend { background: var(--lime); } .skill-chart { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; } .skill-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 46px; align-items: center; gap: 13px; } .skill-name strong, .skill-name small { display: block; } .skill-name strong { margin-bottom: 3px; font-size: 9px; } .skill-name small { color: #919c96; font-size: 7px; } .skill-bars { display: flex; flex-direction: column; gap: 4px; } .skill-bars span { display: block; height: 5px; overflow: hidden; background: #edf0ed; border-radius: 4px; } .skill-bars i { display: block; height: 100%; border-radius: 4px; transition: width 0.45s ease; } .skill-bars span:first-child i { background: var(--green); } .skill-bars span:last-child i { background: var(--lime); } .skill-gap { text-align: right; } .skill-gap strong { display: block; font-size: 9px; } .skill-gap small { display: block; margin-top: 3px; color: #929d97; font-size: 7px; } .skill-gap.high strong { color: var(--red); } .skill-gap.mid strong { color: var(--amber); } .skill-gap.low strong { color: var(--green); } .explainable-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 8px; } .explainable-tag svg { width: 12px; height: 12px; } .recommendation-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .recommendation-card { padding: 14px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 12px; transition: border-color 0.2s ease, transform 0.2s ease; } .recommendation-card:hover { border-color: #cadbcf; transform: translateY(-1px); } .recommendation-card.accepted { background: #f4f9f6; border-color: #bad9c9; } .recommendation-top { display: flex; align-items: flex-start; gap: 10px; } .priority-mark { flex: 0 0 auto; padding: 4px 6px; color: #a14337; background: var(--red-soft); border-radius: 5px; font-size: 7px; font-weight: 700; } .priority-mark.mid { color: #956512; background: var(--amber-soft); } .recommendation-copy { min-width: 0; flex: 1; } .recommendation-copy strong { display: block; margin-bottom: 6px; font-size: 10px; } .recommendation-copy p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.65; } .recommendation-evidence { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 11px; color: var(--green); background: #eef7f2; border: 1px solid #dcece3; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.65; } .recommendation-evidence svg { width: 17px; height: 17px; flex: 0 0 auto; } .recommendation-actions { display: flex; gap: 6px; margin-top: 11px; } .recommendation-actions button { padding: 6px 10px; color: #6c7972; background: white; border: 1px solid var(--line); border-radius: 7px; font-size: 8px; } .recommendation-actions button:first-child { color: var(--green); background: var(--green-soft); border-color: #d2e6dc; } .time-caption { color: #929c96; font-size: 8px; } .job-demand-list { margin-top: 16px; } .job-demand-item { margin-bottom: 15px; } .job-demand-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .job-demand-copy strong { font-size: 9px; } .job-demand-copy span { color: var(--muted); font-size: 8px; } .job-demand-copy em { margin-left: 5px; color: var(--green-2); font-style: normal; font-weight: 700; } .job-demand-bar { height: 5px; overflow: hidden; background: #edf0ed; border-radius: 4px; } .job-demand-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #76b78f); border-radius: 4px; } .company-shortlist { margin-top: 10px; } .company-short-item { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .company-short-item:last-child { border-bottom: 0; } .company-logo { display: grid; width: 35px; height: 35px; place-items: center; color: var(--green); background: #eef5f1; border-radius: 10px; font-size: 9px; font-weight: 800; } .company-short-copy strong, .company-short-copy small { display: block; } .company-short-copy strong { margin-bottom: 4px; font-size: 9px; } .company-short-copy small { color: var(--muted); font-size: 7px; } .match-chip { padding: 5px 7px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 8px; font-weight: 700; } /* 校企协同 */ .collab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; background: white; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); } .collab-stats > div { position: relative; padding: 19px 22px; } .collab-stats > div:not(:last-child)::after { position: absolute; top: 17px; right: 0; bottom: 17px; width: 1px; background: var(--line-soft); content: ""; } .collab-stats span, .collab-stats em { display: block; } .collab-stats span { margin-bottom: 8px; color: var(--muted); font-size: 9px; } .collab-stats strong { font-size: 25px; letter-spacing: -0.04em; } .collab-stats small { margin-left: 3px; color: var(--muted); font-size: 9px; } .collab-stats em { margin-top: 7px; color: var(--green-2); font-size: 8px; font-style: normal; } .collab-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(310px, 0.75fr); gap: 14px; margin-bottom: 14px; } .project-list, .demand-list { margin-top: 15px; } .project-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 120px 90px 26px; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .project-item:last-child { border-bottom: 0; } .project-type { display: grid; width: 38px; height: 38px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 10px; } .project-type.amber { color: #a06a13; background: var(--amber-soft); } .project-type.blue { color: var(--blue); background: var(--blue-soft); } .project-type svg { width: 18px; height: 18px; } .project-copy strong, .project-copy small { display: block; } .project-copy strong { margin-bottom: 5px; font-size: 9px; } .project-copy small { color: var(--muted); font-size: 7px; } .project-partners { display: flex; align-items: center; } .partner-avatar { display: grid; width: 27px; height: 27px; place-items: center; margin-right: -5px; color: white; background: #477b68; border: 2px solid white; border-radius: 50%; font-size: 7px; } .partner-avatar:nth-child(2) { background: #8d8062; } .partner-avatar:nth-child(3) { background: #587993; } .project-progress span { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 7px; } .project-progress span strong { color: var(--ink-soft); } .project-progress i { display: block; height: 4px; overflow: hidden; background: #ebefeb; border-radius: 4px; } .project-progress b { display: block; height: 100%; background: var(--green-2); border-radius: 4px; } .demand-item { padding: 12px; margin-bottom: 9px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 11px; } .demand-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .demand-company { display: flex; align-items: center; gap: 8px; } .demand-company .company-logo { width: 29px; height: 29px; font-size: 7px; } .demand-company strong, .demand-company small { display: block; } .demand-company strong { margin-bottom: 3px; font-size: 8px; } .demand-company small { color: var(--muted); font-size: 7px; } .demand-item > strong { display: block; margin-bottom: 6px; font-size: 9px; } .demand-item > p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; } .demand-action { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #e0e6e1; } .demand-action span { color: #929d97; font-size: 7px; } .demand-action button { padding: 5px 8px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 7px; font-weight: 600; } .panel-count { display: inline-grid; min-width: 28px; height: 24px; place-items: center; padding: 0 7px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 8px; font-weight: 700; } .amber-count { color: #a36c12; background: var(--amber-soft); } .filter-pills { display: flex; gap: 6px; } .filter-pills button { padding: 7px 10px; color: var(--muted); background: #f4f6f4; border-radius: 8px; font-size: 8px; } .filter-pills button.active { color: white; background: var(--green); } .partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 17px; } .partner-card { position: relative; padding: 15px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 13px; overflow: hidden; } .partner-card::after { position: absolute; right: -18px; top: -20px; width: 65px; height: 65px; background: var(--green-soft); border-radius: 50%; content: ""; opacity: 0.55; } .partner-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; } .partner-card-head .company-logo { width: 38px; height: 38px; color: white; background: var(--green); } .partner-card-head strong, .partner-card-head small { display: block; } .partner-card-head strong { margin-bottom: 4px; font-size: 9px; } .partner-card-head small { color: var(--muted); font-size: 7px; } .partner-reason { min-height: 42px; margin: 13px 0; color: var(--muted); font-size: 8px; line-height: 1.65; } .partner-tags { display: flex; flex-wrap: wrap; gap: 5px; } .partner-tags span { padding: 4px 6px; color: #5c7167; background: #eef2ef; border-radius: 5px; font-size: 7px; } .partner-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); } .partner-card-foot strong { color: var(--green); font-size: 9px; } .partner-card-foot button { padding: 6px 9px; color: white; background: var(--green); border-radius: 7px; font-size: 7px; } /* 改进任务 */ .action-overview { display: grid; grid-template-columns: 130px repeat(4, minmax(100px, 1fr)) minmax(130px, 1.2fr); align-items: center; gap: 12px; margin-bottom: 14px; } .action-ring { position: relative; display: grid; width: 100px; height: 100px; place-items: center; } .action-ring svg { position: absolute; width: 100%; height: 100%; transform: rotate(-90deg); } .action-ring circle { fill: none; stroke: #edf1ed; stroke-width: 8; } .action-ring circle.complete { stroke: var(--green); stroke-dasharray: 295.3; stroke-dashoffset: 94.5; } .action-ring span { position: relative; text-align: center; } .action-ring strong, .action-ring small { display: block; } .action-ring strong { font-size: 20px; } .action-ring small { margin-top: 3px; color: var(--muted); font-size: 7px; } .action-stat { padding: 8px 15px; border-left: 1px solid var(--line-soft); } .action-stat span, .action-stat strong, .action-stat small { display: block; } .action-stat span { margin-bottom: 7px; color: var(--muted); font-size: 8px; } .action-stat strong { font-size: 23px; } .action-stat small { margin-top: 5px; color: #8c9891; font-size: 7px; } .action-health { padding: 14px; background: #f6f9f6; border-radius: 12px; } .action-health span { color: var(--muted); font-size: 8px; } .action-health strong { float: right; color: var(--green); font-size: 9px; } .action-health div { height: 5px; margin-top: 11px; overflow: hidden; background: #e6ebe7; border-radius: 4px; } .action-health i { display: block; height: 100%; background: var(--green); border-radius: 4px; } .task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .task-table .task-title strong, .task-table .task-title small { display: block; } .task-table .task-title strong { margin-bottom: 4px; color: var(--ink); font-size: 9px; } .task-table .task-title small { color: #929c96; font-size: 7px; } .owner-cell { display: flex; align-items: center; gap: 7px; } .owner-avatar { display: grid; width: 25px; height: 25px; place-items: center; color: white; background: #557b6b; border-radius: 8px; font-size: 7px; } .task-progress-cell { display: flex; align-items: center; gap: 7px; } .task-progress-cell i { display: block; width: 55px; height: 4px; overflow: hidden; background: #ebefeb; border-radius: 4px; } .task-progress-cell b { display: block; height: 100%; background: var(--green-2); border-radius: 4px; } .task-progress-cell span { color: var(--ink-soft); font-size: 8px; } /* 数据资产 */ .data-health { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr); gap: 14px; margin-bottom: 14px; } .data-health-main { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 25px; padding: 25px 28px; color: white; background: radial-gradient(circle at 90% 10%, rgba(198, 230, 111, 0.13), transparent 29%), linear-gradient(120deg, #153d31, #102c24); border-radius: var(--radius); box-shadow: var(--shadow); } .health-score { padding-right: 25px; border-right: 1px solid rgba(255, 255, 255, 0.12); } .health-score span, .health-score strong, .health-score small { display: block; } .health-score span { color: #89a69b; font-size: 9px; } .health-score strong { margin: 6px 0 4px; color: var(--lime); font-size: 35px; letter-spacing: -0.055em; } .health-score small { color: #bad381; font-size: 8px; } .health-copy h2 { margin: 0 0 7px; color: white; font-size: 14px; } .health-copy > p { margin: 0; color: #90aaa0; font-size: 8px; line-height: 1.65; } .health-meta { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 16px; } .health-meta span { display: inline-flex; align-items: center; gap: 5px; color: #829e93; font-size: 7px; } .health-meta i { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; } .health-meta strong { color: #d9e5df; font-weight: 500; } .quality-dimensions { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; background: white; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); } .quality-dimensions > div { display: grid; grid-template-columns: 64px 1fr 42px; align-items: center; gap: 10px; } .quality-dimensions span { color: var(--muted); font-size: 8px; } .quality-dimensions strong { grid-column: 3; grid-row: 1; font-size: 9px; text-align: right; } .quality-dimensions i { grid-column: 2; grid-row: 1; display: block; height: 5px; overflow: hidden; background: #edf0ed; border-radius: 4px; } .quality-dimensions b { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #79b58c); border-radius: 4px; } .source-panel { margin-bottom: 14px; } .source-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .source-summary-card { position: relative; display: grid; min-width: 0; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: start; gap: 14px; padding: 20px; overflow: hidden; background: white; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .source-summary-card::after { position: absolute; right: -35px; bottom: -50px; width: 130px; height: 130px; background: currentColor; border-radius: 50%; content: ""; opacity: 0.035; } .source-summary-card:hover, .source-summary-card.active { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(27, 54, 43, 0.11); } .source-summary-card.vendor { color: var(--blue); } .source-summary-card.vendor:hover, .source-summary-card.vendor.active { border-color: #b9d1e7; } .source-summary-card.school { color: var(--green); } .source-summary-card.school:hover, .source-summary-card.school.active { border-color: #b9d9c9; } .source-summary-card.enterprise { color: #ad741d; } .source-summary-card.enterprise:hover, .source-summary-card.enterprise.active { border-color: #e7cc9e; } .source-summary-icon { display: grid; width: 46px; height: 46px; place-items: center; background: currentColor; border-radius: 13px; } .source-summary-icon::before { position: absolute; width: 46px; height: 46px; background: white; border-radius: 13px; content: ""; opacity: 0.88; } .source-summary-icon svg { position: relative; z-index: 1; width: 22px; height: 22px; } .source-summary-copy { display: block; min-width: 0; } .source-summary-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); } .source-summary-title strong { font-size: 14px; } .commercial-pill { flex: 0 0 auto; padding: 5px 8px; border-radius: 7px; font-size: 10px; font-style: normal; font-weight: 700; } .commercial-pill.paid { color: #376991; background: var(--blue-soft); } .commercial-pill.owned { color: var(--green); background: var(--green-soft); } .commercial-pill.authorized { color: #956313; background: var(--amber-soft); } .source-summary-copy > small { display: block; min-height: 38px; margin-top: 8px; color: var(--muted); line-height: 1.6; } .source-summary-metrics { display: flex; gap: 18px; margin-top: 14px; color: var(--muted); } .source-summary-metrics > span { display: inline-flex; align-items: baseline; gap: 4px; } .source-summary-metrics strong { color: var(--ink); font-size: 18px; } .source-summary-foot { display: block; margin-top: 13px; padding-top: 11px; color: var(--muted); border-top: 1px solid var(--line-soft); } .source-summary-arrow { align-self: center; width: 17px; height: 17px; color: #9aa59f; } .data-usage-note { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px 16px; color: #755312; background: #fff9eb; border: 1px solid #f0dfb9; border-radius: 13px; } .data-usage-icon { display: grid; width: 38px; height: 38px; place-items: center; background: white; border-radius: 10px; } .data-usage-icon svg { width: 19px; height: 19px; } .data-usage-note strong, .data-usage-note small { display: block; } .data-usage-note strong { margin-bottom: 4px; } .data-usage-note small { color: #8a7448; } .data-usage-note button { padding: 8px 10px; color: #805b16; background: white; border: 1px solid #ead8ad; border-radius: 8px; font-weight: 600; } .data-lineage-panel { margin-bottom: 14px; overflow: hidden; background: radial-gradient(circle at 98% 1%, rgba(198, 230, 111, 0.08), transparent 21%), white; } .data-lineage-header { align-items: flex-start; } .data-lineage-header h2 { margin-bottom: 7px; } .data-lineage-header p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.65; } .lineage-snapshot-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 8px 11px; color: var(--green); background: var(--green-soft); border: 1px solid #d2e8db; border-radius: 9px; font-weight: 700; } .lineage-snapshot-badge i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(35, 135, 101, 0.11); } .data-lineage-toolbar { display: grid; grid-template-columns: auto minmax(280px, 1fr) auto; align-items: end; gap: 12px; margin-top: 18px; padding: 12px; background: #f4f7f4; border: 1px solid #e5ebe6; border-radius: 12px; } .lineage-mode-switch { display: flex; gap: 4px; padding: 4px; background: #e8ede9; border-radius: 9px; } .lineage-mode-switch button { min-height: 38px; padding: 0 13px; color: var(--muted); background: transparent; border-radius: 7px; font-weight: 700; white-space: nowrap; } .lineage-mode-switch button.active { color: white; background: var(--green); box-shadow: 0 4px 12px rgba(23, 107, 79, 0.18); } .lineage-selector { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-weight: 600; } .lineage-selector select { width: 100%; min-height: 38px; padding: 0 34px 0 11px; overflow: hidden; color: var(--ink); background: white; border: 1px solid #dfe6e1; border-radius: 8px; text-overflow: ellipsis; } .lineage-gap-toggle { display: flex; min-height: 38px; align-items: center; cursor: pointer; } .lineage-gap-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .lineage-gap-toggle > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; white-space: nowrap; } .lineage-gap-toggle > span i { position: relative; width: 38px; height: 22px; background: #cbd4ce; border-radius: 12px; transition: background 0.18s ease; } .lineage-gap-toggle > span i::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; box-shadow: 0 2px 5px rgba(21, 54, 42, 0.2); content: ""; transition: transform 0.18s ease; } .lineage-gap-toggle input:checked + span { color: #9a6515; } .lineage-gap-toggle input:checked + span i { background: var(--amber); } .lineage-gap-toggle input:checked + span i::after { transform: translateX(16px); } .lineage-gap-toggle input:focus-visible + span i { outline: 3px solid rgba(35, 135, 101, 0.2); outline-offset: 2px; } .lineage-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; } .lineage-summary-grid article { min-width: 0; padding: 13px 14px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 10px; } .lineage-summary-grid article.warning { background: #fff9ed; border-color: #efdcae; } .lineage-summary-grid article.ready { background: #f1f8f4; border-color: #d8e9de; } .lineage-summary-grid span, .lineage-summary-grid strong, .lineage-summary-grid small { display: block; } .lineage-summary-grid span { color: var(--muted); } .lineage-summary-grid strong { margin: 7px 0 4px; color: var(--ink); font-size: 16px; } .lineage-summary-grid article.warning strong { color: #9a6515; } .lineage-summary-grid article.ready strong { color: var(--green); } .lineage-summary-grid small { color: var(--muted); line-height: 1.45; } .lineage-legend { display: flex; align-items: center; gap: 15px; margin: 18px 0 9px; color: var(--muted); } .lineage-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .lineage-legend i { width: 11px; height: 11px; border: 2px solid var(--green); border-radius: 3px; } .lineage-legend i.optional { border-color: #6d88a1; border-style: dashed; } .lineage-legend i.gap { background: var(--amber-soft); border-color: var(--amber); } .lineage-legend small { margin-left: auto; text-align: right; } .data-lineage-canvas { padding: 15px; background: linear-gradient(rgba(34, 105, 79, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 105, 79, 0.035) 1px, transparent 1px), #f7f9f7; background-size: 24px 24px; border: 1px solid #e1e8e3; border-radius: 14px; } .lineage-stage-grid { display: grid; grid-template-columns: minmax(250px, 1.08fr) 48px minmax(210px, 0.82fr) 48px minmax(250px, 1fr); align-items: start; gap: 8px; } .lineage-stage { min-width: 0; overflow: hidden; background: rgba(255, 255, 255, 0.94); border: 1px solid #dfe7e1; border-radius: 12px; box-shadow: 0 8px 24px rgba(25, 58, 45, 0.06); } .lineage-stage-head { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; color: var(--green); background: #edf6f1; border-bottom: 1px solid #dce9e1; } .lineage-stage.topics .lineage-stage-head { color: #376991; background: #eef4f9; border-color: #dae6ef; } .lineage-stage.reports .lineage-stage-head { color: #8b621f; background: #fff8ea; border-color: #eee0bd; } .lineage-stage-head span { font-weight: 800; } .lineage-stage-head strong { font-weight: 700; } .lineage-stage-list { display: grid; gap: 8px; padding: 9px; } .lineage-node { display: block; width: 100%; min-width: 0; padding: 11px; color: var(--ink); background: white; border: 1px solid #dfe7e1; border-radius: 10px; text-align: left; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .lineage-node:hover, .lineage-node:focus-visible { transform: translateY(-1px); border-color: #8fc2a9; box-shadow: 0 8px 20px rgba(29, 83, 62, 0.11); } .lineage-node.selected { background: #f3f9f6; border-color: #78b597; box-shadow: inset 3px 0 var(--green); } .lineage-node.has-gap { background: #fffcf5; border-color: #e8d29f; } .lineage-node-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .lineage-node-top em, .lineage-node-top i { padding: 4px 6px; border-radius: 6px; font-style: normal; font-weight: 700; } .lineage-node-top em { color: var(--green); background: var(--green-soft); } .lineage-node-top em.optional { color: #4e718e; background: var(--blue-soft); } .lineage-node-top i.ready { color: var(--green); background: #eff7f2; } .lineage-node-top i.gap { color: #966214; background: var(--amber-soft); } .lineage-node > strong, .lineage-node > small { display: block; } .lineage-node > strong { overflow: hidden; font-size: 14px; line-height: 1.45; text-overflow: ellipsis; } .lineage-node > small { min-height: 38px; margin-top: 5px; overflow: hidden; color: var(--muted); line-height: 1.5; } .lineage-node-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; color: var(--muted); border-top: 1px solid #edf0ed; } .lineage-node-meta b { color: var(--green); } .lineage-node-gap { display: block; margin-top: 7px; padding: 6px 7px; overflow: hidden; color: #8c621b; background: #fff5db; border-radius: 6px; line-height: 1.45; text-overflow: ellipsis; } .lineage-report-node > strong { white-space: normal; } .lineage-report-group { min-width: 0; overflow: hidden; background: white; border: 1px solid #e2e7e3; border-radius: 9px; } .lineage-report-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; padding: 10px; color: var(--ink); background: #fafbf9; cursor: pointer; list-style: none; } .lineage-report-group > summary::-webkit-details-marker { display: none; } .lineage-report-group > summary::after { width: 7px; height: 7px; border-right: 2px solid #819088; border-bottom: 2px solid #819088; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform 0.16s ease; } .lineage-report-group[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); } .lineage-report-group > summary span, .lineage-report-group > summary strong, .lineage-report-group > summary small { display: block; min-width: 0; } .lineage-report-group > summary small { margin-top: 3px; color: var(--muted); } .lineage-report-group > summary em { padding: 4px 6px; color: #805b16; background: var(--amber-soft); border-radius: 6px; font-style: normal; font-weight: 700; white-space: nowrap; } .lineage-report-group-list { display: grid; max-height: 360px; gap: 7px; padding: 8px; overflow-y: auto; border-top: 1px solid #e8ede9; } .lineage-topic-node { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 9px; padding: 10px; background: #f8fbfd; border: 1px solid #dfe8ef; border-radius: 9px; } .lineage-topic-node > span { display: grid; width: 30px; height: 30px; grid-row: 1 / 3; place-items: center; color: #467594; background: #e5f0f7; border-radius: 7px; font-weight: 800; } .lineage-topic-node strong { align-self: end; line-height: 1.4; } .lineage-topic-node small { color: var(--muted); line-height: 1.4; } .lineage-connector { display: grid; min-height: 120px; align-content: center; justify-items: center; gap: 9px; color: var(--muted); } .lineage-connector span { text-align: center; } .lineage-connector i { position: relative; display: block; width: 38px; height: 2px; background: #9fb2a8; } .lineage-connector i::after { position: absolute; top: -4px; right: -1px; width: 8px; height: 8px; border-top: 2px solid #789286; border-right: 2px solid #789286; content: ""; transform: rotate(45deg); } .lineage-connector b { position: absolute; top: -3px; left: 4px; width: 8px; height: 8px; background: var(--lime); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #9fb2a8; } .lineage-empty-node { display: grid; min-height: 150px; place-items: center; align-content: center; gap: 7px; padding: 20px; color: var(--muted); text-align: center; } .lineage-empty-node svg { width: 28px; height: 28px; color: #91a49a; } .lineage-empty-node strong, .lineage-empty-node small { display: block; } .lineage-gap-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .lineage-gap-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .lineage-gap-heading span { color: #ad741d; font-weight: 800; letter-spacing: 0.08em; } .lineage-gap-heading h3 { margin: 4px 0 0; font-size: 16px; } .lineage-gap-heading > strong { padding: 6px 9px; color: #956313; background: var(--amber-soft); border-radius: 7px; } .lineage-gap-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .lineage-gap-card { display: flex; min-width: 0; flex-direction: column; padding: 13px; background: #fffcf5; border: 1px solid #ead8ad; border-radius: 11px; } .lineage-gap-card.blocking { background: #fff8f4; border-color: #ebc5b5; } .lineage-gap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lineage-gap-card-head span { display: inline-flex; align-items: center; gap: 6px; color: #a06611; font-weight: 800; } .lineage-gap-card.blocking .lineage-gap-card-head span { color: #a34f31; } .lineage-gap-card-head span i { width: 7px; height: 7px; background: var(--amber); border-radius: 50%; } .lineage-gap-card.blocking .lineage-gap-card-head span i { background: #c96643; } .lineage-gap-card-head em { color: var(--muted); font-style: normal; } .lineage-gap-card > strong, .lineage-gap-card > small { display: block; } .lineage-gap-card > strong { margin-top: 10px; line-height: 1.5; } .lineage-gap-card > small { margin-top: 4px; color: var(--muted); line-height: 1.5; } .lineage-gap-fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .lineage-gap-fields span { padding: 4px 6px; color: #81591a; background: #fff1cb; border-radius: 5px; font-family: "SFMono-Regular", Consolas, monospace; } .lineage-gap-card.blocking .lineage-gap-fields span { color: #944a30; background: #fee9df; } .lineage-gap-card p { margin: 10px 0; color: var(--ink-soft); line-height: 1.6; } .lineage-gap-card dl { display: grid; gap: 6px; margin: auto 0 10px; padding: 9px; background: rgba(255, 255, 255, 0.75); border-radius: 8px; } .lineage-gap-card dl div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 7px; } .lineage-gap-card dt { color: var(--muted); } .lineage-gap-card dd { min-width: 0; margin: 0; font-weight: 700; } .lineage-gap-card > button { width: 100%; min-height: 36px; color: #8c5d12; background: white; border: 1px solid #e3cd9c; border-radius: 7px; font-weight: 700; } .lineage-gap-card.blocking > button { color: #9a4d32; border-color: #e6b8a5; } .lineage-gap-card > button:hover { background: #fff7e5; } .lineage-gap-empty { display: flex; grid-column: 1 / -1; min-height: 90px; align-items: center; justify-content: center; gap: 12px; padding: 18px; color: var(--muted); background: #f4f8f5; border: 1px dashed #cbded2; border-radius: 11px; } .lineage-gap-empty svg { width: 28px; height: 28px; color: var(--green); } .lineage-gap-empty strong, .lineage-gap-empty small { display: block; } .lineage-gap-empty small { margin-top: 4px; } .data-issue-owner-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; } .data-issue-owner-list div { padding: 10px; background: #f5f8f5; border: 1px solid var(--line-soft); border-radius: 8px; } .data-issue-owner-list dt { color: var(--muted); } .data-issue-owner-list dd { margin: 5px 0 0; font-weight: 700; } .source-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 10px; background: #f6f8f6; border-radius: 11px; } .source-filters { display: flex; gap: 6px; } .source-filters button { padding: 8px 11px; color: var(--muted); background: transparent; border-radius: 8px; } .source-filters button strong { margin-left: 4px; } .source-filters button.active { color: white; background: var(--green); font-weight: 600; } .source-filter-result { color: var(--muted); } .source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 17px; } .source-card { position: relative; padding: 14px; overflow: hidden; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 12px; } .source-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--green); content: ""; } .source-card.vendor::before { background: var(--blue); } .source-card.enterprise::before { background: var(--amber); } .source-card-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-left: 3px; } .source-category-badge, .source-commercial-badge { display: inline-flex; padding: 5px 7px; border-radius: 6px; font-weight: 700; } .source-category-badge.vendor { color: #426f99; background: var(--blue-soft); } .source-category-badge.school { color: var(--green); background: var(--green-soft); } .source-category-badge.enterprise { color: #996617; background: var(--amber-soft); } .source-commercial-badge { color: #65736c; background: #edf1ee; } .source-commercial-badge.paid { color: #426f99; background: #e7f0f8; } .source-commercial-badge.authorized { color: #956313; background: #fff1d5; } .source-card-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; } .source-icon { display: grid; width: 36px; height: 36px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 10px; } .source-icon.vendor { color: var(--blue); background: var(--blue-soft); } .source-icon.enterprise { color: #996a1c; background: var(--amber-soft); } .source-icon svg { width: 17px; height: 17px; } .source-name strong, .source-name small { display: block; } .source-name strong { margin-bottom: 4px; font-size: 9px; } .source-name small { color: var(--muted); font-size: 7px; } .source-status { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 7px; } .source-status::before { width: 5px; height: 5px; background: #54a675; border-radius: 50%; content: ""; } .source-status.warning { color: #a06d18; } .source-status.warning::before { background: var(--amber); } .source-license-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding: 12px; background: white; border: 1px solid var(--line-soft); border-radius: 10px; } .source-license-grid span { color: #8b9690; } .source-license-grid strong { display: block; margin-top: 4px; color: var(--ink-soft); font-weight: 600; } .source-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); } .source-card-meta span { color: #929d97; font-size: 7px; } .source-card-meta strong { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 8px; font-weight: 600; } .source-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; } .source-card-foot span { color: #929d97; font-size: 7px; } .source-card-foot button { padding: 5px 8px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 7px; } /* 可读性调整:正文、辅助说明、表格与控件不再使用超小字号 */ .sidebar .school-card span, .sidebar .sync-line, .sidebar .meeting-pack small { font-size: 11px; } .sidebar .school-card strong, .sidebar .meeting-pack strong, .sidebar .nav-count { font-size: 12px; } .sidebar .nav-item span:nth-child(2) { font-size: 14px; } .topbar .breadcrumb, .topbar .role-copy small, .topbar .edition-badge { font-size: 12px; } .topbar .topbar-date, .topbar .role-copy strong { font-size: 14px; } .main-content p, .modal p { font-size: 14px !important; line-height: 1.7; } .main-content small, .modal small { font-size: 12px !important; line-height: 1.5; } .main-content button, .main-content input, .main-content select, .main-content textarea, .modal button, .modal input, .modal select, .modal textarea { font-size: 13px !important; } .main-content .eyebrow, .main-content .panel-kicker, .modal .modal-kicker { font-size: 11px !important; } .main-content .panel h2 { font-size: 17px; } .main-content .quality-main strong, .main-content .insight-item strong, .main-content .profession-cell strong, .main-content .industry-copy strong, .main-content .skill-name strong, .main-content .recommendation-copy strong, .main-content .job-demand-copy strong, .main-content .company-short-copy strong, .main-content .project-copy strong, .main-content .demand-company strong, .main-content .demand-item > strong, .main-content .partner-card-head strong, .main-content .partner-card-foot strong, .main-content .task-title strong, .main-content .source-name strong, .main-content .source-license-grid strong, .main-content .source-card-meta strong, .main-content .health-meta strong, .main-content .quality-dimensions strong, .main-content .lineage-flow strong, .main-content .issue-list strong { font-size: 13px !important; } .main-content .quality-main span, .main-content .metric-label, .main-content .metric-foot, .main-content .metric-tag, .main-content .chart-legend, .main-content .chart-labels, .main-content .match-summary span, .main-content .ai-state, .main-content .ai-source, .main-content .industry-growth, .main-content .profile-score span, .main-content .profile-metric span, .main-content .skill-gap strong, .main-content .time-caption, .main-content .collab-stats span, .main-content .collab-stats em, .main-content .gap-badge, .main-content .status-badge, .main-content .owner-cell, .main-content .task-progress-cell span, .main-content .health-score span, .main-content .quality-dimensions span, .main-content .source-summary-foot, .main-content .source-summary-metrics, .main-content .source-filter-result, .main-content .source-category-badge, .main-content .source-commercial-badge, .main-content .source-status, .main-content .source-license-grid span, .main-content .source-card-meta span, .main-content .source-card-foot span, .main-content .issue-list strong { font-size: 12px !important; } .main-content .data-table th { font-size: 12px; } .main-content .data-table td { font-size: 13px; } .main-content .score-dial span, .main-content .insight-index, .main-content .profession-icon, .main-content .industry-rank { font-size: 12px !important; } .main-content .score-cell strong { font-size: 13px !important; } .main-content .industry-note { font-size: 12px; } .main-content .industry-note strong { font-size: 13px; } .main-content .priority-mark, .main-content .job-demand-copy em, .main-content .company-logo, .main-content .match-chip, .main-content .panel-count, .main-content .commercial-pill, .main-content .version-badge, .main-content .issue-level, .main-content .lineage-flow > div span { font-size: 12px !important; } .main-content .partner-avatar, .main-content .owner-avatar, .main-content .project-progress span, .main-content .project-progress span strong, .main-content .demand-action span, .main-content .partner-tags span { font-size: 11px !important; } .main-content .action-stat span, .main-content .action-health span, .main-content .action-health strong { font-size: 12px !important; } .modal h2 { font-size: 24px; } .modal label > span, .modal .report-options strong, .modal .snapshot-card strong { font-size: 13px !important; } .version-badge { padding: 5px 8px; color: #5e7067; background: #eef2ef; border-radius: 7px; font-size: 8px; } .data-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr); gap: 14px; } .lineage-flow { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; margin-top: 20px; } .lineage-flow > div { min-width: 105px; flex: 1; padding: 13px; background: #f7f9f7; border: 1px solid var(--line-soft); border-radius: 11px; } .lineage-flow > div.active { background: var(--green-soft); border-color: #cce2d6; } .lineage-flow > div span, .lineage-flow > div strong, .lineage-flow > div small { display: block; } .lineage-flow > div span { color: var(--green-2); font-size: 7px; font-weight: 700; } .lineage-flow > div strong { margin: 7px 0 5px; font-size: 9px; } .lineage-flow > div small { color: var(--muted); font-size: 7px; } .lineage-flow > i { display: grid; width: 17px; flex: 0 0 auto; place-items: center; color: #a5afa9; } .lineage-flow > i svg { width: 13px; height: 13px; } .issue-list { margin-top: 12px; } .issue-list button { display: grid; width: 100%; grid-template-columns: 26px 1fr 14px; align-items: center; gap: 9px; padding: 11px 0; background: transparent; border-bottom: 1px solid var(--line-soft); text-align: left; } .issue-list button:last-child { border-bottom: 0; } .issue-level { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: 7px; font-weight: 700; } .issue-level.high { color: var(--red); background: var(--red-soft); } .issue-level.mid { color: #a16c13; background: var(--amber-soft); } .issue-level.low { color: var(--blue); background: var(--blue-soft); } .issue-list strong, .issue-list small { display: block; } .issue-list strong { margin-bottom: 4px; font-size: 8px; } .issue-list small { color: var(--muted); font-size: 7px; } .issue-list svg { width: 13px; height: 13px; color: #9ba59f; } /* 报告中心 */ .report-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .report-stat-grid article { position: relative; min-width: 0; padding: 20px; overflow: hidden; background: white; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); } .report-stat-grid article::after { position: absolute; right: -23px; bottom: -38px; width: 95px; height: 95px; background: var(--green); border-radius: 50%; content: ""; opacity: 0.04; } .report-stat-grid span, .report-stat-grid em { display: block; } .report-stat-grid span { margin-bottom: 8px; color: var(--muted); } .report-stat-grid strong { font-size: 30px; letter-spacing: -0.05em; } .report-stat-grid small { margin-left: 5px; color: var(--muted); } .report-stat-grid em { margin-top: 8px; color: var(--green-2); font-style: normal; } .report-stat-grid .report-version-value { font-size: 23px; letter-spacing: -0.03em; } .featured-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .featured-report-card { position: relative; display: grid; min-width: 0; min-height: 230px; grid-template-columns: minmax(0, 1fr) 152px; gap: 24px; padding: 24px; overflow: hidden; color: #e8f2ed; background: radial-gradient(circle at 85% 18%, rgba(198, 230, 111, 0.14), transparent 28%), linear-gradient(145deg, #173f33, #102e26); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); box-shadow: var(--shadow); } .featured-report-card.secondary { color: var(--ink); background: radial-gradient(circle at 90% 15%, rgba(73, 120, 168, 0.1), transparent 28%), white; border-color: var(--line-soft); } .featured-report-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; } .featured-report-copy > span:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; } .report-featured-label, .report-type-badge { display: inline-flex; padding: 5px 8px; color: #17392e; background: var(--lime); border-radius: 7px; font-size: 11px; font-weight: 700; } .secondary .report-featured-label { color: var(--green); background: var(--green-soft); } .featured-report-copy h2 { margin: 0; color: white; font-size: 22px; line-height: 1.35; letter-spacing: -0.03em; } .secondary .featured-report-copy h2 { color: var(--ink); } .featured-report-copy p { margin: 10px 0 17px !important; color: #a9c0b6; } .secondary .featured-report-copy p { color: var(--muted); } .featured-report-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; color: #89a69a; font-size: 12px; } .secondary .featured-report-meta { color: var(--muted); } .featured-report-actions { display: flex; gap: 8px; margin-top: 16px; } .featured-report-actions button { padding: 8px 12px; color: #17392e; background: var(--lime); border-radius: 8px; font-weight: 700; } .featured-report-actions button + button { color: #d7e7df; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); } .secondary .featured-report-actions button { color: white; background: var(--green); } .secondary .featured-report-actions button + button { color: var(--green); background: var(--green-soft); border-color: #d2e6dc; } .featured-report-cover { position: relative; align-self: center; height: 180px; padding: 20px 16px; color: var(--ink); background: #f7f7f0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px 13px 13px 4px; box-shadow: 0 18px 35px rgba(5, 22, 16, 0.2); transform: rotate(2deg); } .secondary .featured-report-cover { background: #f3f7fa; border-color: #dbe6ee; box-shadow: 0 16px 32px rgba(31, 57, 76, 0.13); } .featured-report-cover::before { position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--green); border-radius: 4px 0 0 4px; content: ""; } .featured-report-cover small, .featured-report-cover strong, .featured-report-cover span { display: block; } .featured-report-cover small { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; } .featured-report-cover strong { display: -webkit-box; max-height: 50px; margin-top: 14px; overflow: hidden; font-family: "Songti SC", "STSong", serif; font-size: 16px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .featured-report-mini { position: absolute; right: 16px; bottom: 51px; left: 16px; display: flex; height: 34px; align-items: flex-end; gap: 6px; padding: 4px 7px 0; overflow: hidden; background: repeating-linear-gradient(to top, transparent 0 10px, rgba(39, 54, 47, 0.075) 10px 11px), linear-gradient(90deg, #edf4ef, transparent); border-radius: 5px; } .featured-report-mini i { position: relative; z-index: 1; width: 11px; min-height: 7px; background: var(--green); border-radius: 3px 3px 0 0; } .featured-report-mini i:nth-child(2) { background: #4d7fa8; } .featured-report-mini i:nth-child(3) { background: #d39a35; } .featured-report-mini i:nth-child(4) { background: #7f6aaa; } .featured-report-mini i:nth-child(5) { background: #72b893; } .featured-report-mini b { position: absolute; right: 6px; bottom: 4px; width: 55%; height: 22px; border-top: 2px solid var(--green); border-radius: 60% 15% 0 0; transform: rotate(-8deg); } .featured-report-cover span { position: absolute; right: 16px; bottom: 18px; left: 16px; color: var(--muted); border-top: 1px solid #d9ded8; padding-top: 9px; font-size: 11px; } .report-library-panel { padding: 0; overflow: hidden; } .report-library-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 22px 15px; } .report-library-head h2 { margin: 0; } .report-library-tools { display: flex; align-items: center; gap: 9px; } .report-library-tools select { height: 40px; padding: 0 32px 0 12px; color: var(--ink-soft); background: white; border: 1px solid var(--line); border-radius: 9px; outline: 0; } .report-type-filters { display: flex; gap: 6px; padding: 0 22px 15px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); } .report-type-filters button { flex: 0 0 auto; padding: 8px 12px; color: var(--muted); background: #f3f6f3; border-radius: 8px; } .report-type-filters button.active { color: white; background: var(--green); font-weight: 700; } .report-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 8px 22px; } .report-list-item { display: grid; min-width: 0; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 0; background: transparent; border-bottom: 1px solid var(--line-soft); text-align: left; } .report-list-icon { display: grid; width: 44px; height: 52px; place-items: center; color: var(--green); background: var(--green-soft); border: 1px solid #d9e9e0; border-radius: 5px 10px 10px 5px; } .report-list-icon.school { color: var(--green); background: var(--green-soft); } .report-list-icon.college { color: var(--blue); background: var(--blue-soft); } .report-list-icon.profession { color: #8a6d21; background: var(--amber-soft); } .report-list-icon.industry { color: #786098; background: #f2edfa; } .report-list-icon.quality { color: #5d7067; background: #eef2ef; } .report-list-icon svg { width: 21px; height: 21px; } .report-list-copy { min-width: 0; } .report-list-copy strong, .report-list-copy small, .report-list-copy span { display: block; } .report-list-copy strong { overflow: hidden; margin-bottom: 5px; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .report-list-copy small { color: var(--muted); } .report-list-meta { display: flex !important; gap: 10px; margin-top: 7px; color: #859189; font-size: 11px; } .report-list-side { text-align: right; } .report-list-side em { display: block; padding: 5px 7px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 700; } .report-list-side em.review { color: #9a6818; background: var(--amber-soft); } .report-list-side svg { width: 15px; height: 15px; margin-top: 9px; color: #9aa59f; } .report-library-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; color: var(--muted); background: #f7f9f7; border-top: 1px solid var(--line-soft); } .report-library-foot button { padding: 7px 10px; color: var(--green); background: white; border: 1px solid #d6e4dc; border-radius: 8px; font-weight: 600; } .report-empty-state { grid-column: 1 / -1; display: grid; min-height: 190px; place-items: center; align-content: center; gap: 9px; color: var(--muted); text-align: center; } .report-empty-state svg { width: 30px; height: 30px; color: var(--green); } .report-empty-state strong, .report-empty-state small { display: block; } /* 报告正文阅读器 */ .report-reader { position: fixed; z-index: 110; inset: 0; display: flex; flex-direction: column; background: #eef1ed; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease; } .report-reader.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .report-reader-header { position: relative; z-index: 2; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 22px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(22, 48, 37, 0.06); } .report-reader-identity { display: flex; min-width: 0; align-items: center; gap: 10px; } .report-reader-close { flex: 0 0 auto; background: #f0f4f1; } .report-reader-identity small, .report-reader-identity strong { display: block; } .report-reader-identity small { margin-bottom: 4px; color: var(--muted); font-size: 12px; } .report-reader-identity strong { overflow: hidden; max-width: 560px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .report-reader-actions { display: flex; align-items: center; gap: 9px; } .reader-version { padding: 7px 9px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 12px; font-weight: 700; } .report-reader-layout { display: grid; min-height: 0; flex: 1; grid-template-columns: 250px minmax(0, 1fr); } .report-toc { min-height: 0; padding: 24px 18px; overflow-y: auto; background: #f8faf8; border-right: 1px solid var(--line); } .report-toc-label { display: block; margin: 0 10px 12px; color: #89958e; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; } .report-toc nav { display: flex; flex-direction: column; gap: 3px; } .report-toc button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px; color: var(--muted); background: transparent; border-radius: 8px; font-size: 13px; text-align: left; } .report-toc button span { color: #a3aca7; font-variant-numeric: tabular-nums; } .report-toc button.active, .report-toc button:hover { color: var(--green); background: var(--green-soft); font-weight: 700; } .report-reader-meta { margin-top: 24px; padding: 12px; background: white; border: 1px solid var(--line-soft); border-radius: 10px; } .report-reader-meta span, .report-reader-meta strong { display: block; } .report-reader-meta span { padding: 7px 0; color: var(--muted); border-bottom: 1px solid var(--line-soft); font-size: 11px; } .report-reader-meta span:last-child { border-bottom: 0; } .report-reader-meta strong { margin-top: 4px; color: var(--ink); font-size: 12px; } .report-document-wrap { min-width: 0; overflow: auto; scroll-behavior: smooth; } .report-document { width: min(1040px, calc(100% - 48px)); min-height: calc(100vh - 118px); margin: 24px auto 48px; color: #27362f; background: white; box-shadow: 0 18px 60px rgba(30, 52, 43, 0.12); } .report-cover-page { position: relative; display: flex; min-height: 570px; flex-direction: column; justify-content: space-between; padding: 68px 70px 56px; color: white; background: linear-gradient(140deg, rgba(198, 230, 111, 0.08), transparent 45%), linear-gradient(155deg, #184638, #0f2c24); overflow: hidden; } .report-cover-page::after { position: absolute; right: -90px; bottom: -120px; width: 390px; height: 390px; border: 1px solid rgba(198, 230, 111, 0.13); border-radius: 50%; box-shadow: 0 0 0 45px rgba(198, 230, 111, 0.025), 0 0 0 90px rgba(198, 230, 111, 0.018); content: ""; } .report-cover-brand { display: flex; align-items: center; gap: 12px; color: var(--lime); font-weight: 700; letter-spacing: 0.1em; } .report-cover-brand i { width: 34px; height: 4px; background: var(--lime); } .report-cover-main { position: relative; z-index: 1; } .report-cover-main span { display: block; margin-bottom: 18px; color: #9bb4a9; font-size: 14px; letter-spacing: 0.08em; } .report-cover-main h1 { max-width: 640px; margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 42px; line-height: 1.35; letter-spacing: 0.02em; } .report-cover-main p { max-width: 590px; margin: 24px 0 0; color: #aac0b7; font-size: 16px; line-height: 1.8; } .report-standard-stamp { display: inline-flex; margin-top: 18px; padding: 7px 10px; color: #dce8b9; background: rgba(198, 230, 111, 0.08); border: 1px solid rgba(198, 230, 111, 0.25); border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .report-cover-foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.13); } .report-cover-foot span, .report-cover-foot strong { display: block; } .report-cover-foot span { color: #829f93; font-size: 12px; } .report-cover-foot strong { margin-top: 6px; color: #e8f1ed; font-size: 14px; } .report-section { padding: 52px 64px; border-bottom: 1px solid #e5eae6; scroll-margin-top: 20px; } .report-section:last-child { border-bottom: 0; } .report-section-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .report-section-heading > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 10px; font-size: 13px; font-weight: 800; } .report-section-heading small, .report-section-heading h2 { display: block; } .report-section-heading small { margin-bottom: 5px; color: var(--green-2); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; } .report-section-heading h2 { margin: 0; font-size: 24px; letter-spacing: -0.03em; } .report-summary-callout { padding: 20px; color: #244036; background: #eff7f2; border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.8; } .report-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } .report-metric-grid div { padding: 16px; background: #f8faf8; border: 1px solid var(--line-soft); border-radius: 11px; } .report-metric-grid span, .report-metric-grid strong, .report-metric-grid small { display: block; } .report-metric-grid span { color: var(--muted); font-size: 11px; } .report-metric-grid strong { margin: 8px 0 5px; color: var(--ink); font-size: 24px; } .report-metric-grid small { color: var(--green-2); font-size: 11px; } .report-finding-list { display: flex; flex-direction: column; gap: 10px; } .report-finding { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 11px; } .report-finding > span:first-child { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 9px; font-weight: 800; } .report-finding strong, .report-finding small { display: block; } .report-finding strong { margin-bottom: 5px; font-size: 14px; } .report-finding small { color: var(--muted); font-size: 12px; line-height: 1.5; } .report-finding em { color: var(--green); font-style: normal; font-weight: 800; } .report-bar-list { display: flex; flex-direction: column; gap: 17px; } .report-bar-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px; align-items: center; gap: 13px; } .report-bar-row > span:first-child { font-size: 13px; font-weight: 600; } .report-bar-track { height: 10px; overflow: hidden; background: #edf1ed; border-radius: 6px; } .report-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #6bb18a); border-radius: 6px; } .report-bar-row strong { text-align: right; } .report-table { width: 100%; border-collapse: collapse; } .report-table th { padding: 11px 10px; color: var(--muted); background: #f4f7f4; border-bottom: 1px solid var(--line); font-size: 12px; text-align: left; } .report-table td { padding: 13px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; } .report-source-tag { display: inline-flex; padding: 4px 7px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 11px; font-weight: 700; } .report-action-list { display: flex; flex-direction: column; gap: 11px; } .report-action-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 13px; padding: 16px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 12px; } .report-action-priority { display: grid; width: 36px; height: 36px; place-items: center; color: #a14238; background: var(--red-soft); border-radius: 9px; font-size: 11px; font-weight: 800; } .report-action-card strong, .report-action-card small { display: block; } .report-action-card strong { margin-bottom: 6px; font-size: 14px; } .report-action-card small { color: var(--muted); font-size: 12px; line-height: 1.65; } .report-action-card button { padding: 7px 9px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 11px; font-weight: 700; } .report-method-note { margin-top: 18px; padding: 15px; color: #627169; background: #f7f8f5; border: 1px dashed #ced8d1; border-radius: 10px; font-size: 12px; line-height: 1.7; } .report-benchmark-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; overflow: hidden; background: #153d31; border-radius: 12px; } .report-benchmark-strip > span { position: relative; min-width: 0; padding: 15px 16px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .report-benchmark-strip > span:last-child { border-right: 0; } .report-benchmark-strip small, .report-benchmark-strip strong, .report-benchmark-strip em { display: block; } .report-benchmark-strip small { overflow: hidden; color: #a9beb5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .report-benchmark-strip strong { margin: 7px 0 4px; color: white; font-size: 22px; } .report-benchmark-strip em { color: var(--lime); font-size: 11px; font-style: normal; } .report-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; } .report-chart-card { min-width: 0; margin: 0; overflow: hidden; background: white; border: 1px solid #dfe7e1; border-radius: 14px; box-shadow: 0 7px 24px rgba(30, 60, 47, 0.06); } .report-chart-card.wide { grid-column: 1 / -1; } .report-chart-head { display: flex; align-items: center; gap: 9px; padding: 14px 15px 11px; border-bottom: 1px solid #edf1ee; } .report-chart-head > span { flex: 0 0 auto; padding: 4px 6px; color: var(--green); background: var(--green-soft); border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; } .report-chart-head strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .report-chart-stage { position: relative; min-height: 310px; overflow: hidden; background: radial-gradient(circle at 50% 18%, rgba(23, 107, 79, 0.035), transparent 45%), #fff; } .report-echart { width: 100%; height: 310px; } .report-chart-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; background: white; } .report-chart-fallback svg { display: block; width: 100%; height: 100%; } .report-chart-stage.is-interactive .report-chart-fallback { display: none; } .report-chart-card figcaption { min-height: 83px; padding: 12px 15px 14px; color: #65736c; background: #f8faf8; border-top: 1px solid #edf1ee; font-size: 11px; line-height: 1.65; } .report-evidence-code { display: inline-flex; margin-right: 5px; padding: 3px 6px; color: var(--green); background: #e8f4ee; border-radius: 5px; font-size: 11px; font-weight: 800; white-space: nowrap; } .report-interpretation { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 15px; margin-top: 16px; padding: 17px 18px; color: #29473c; background: linear-gradient(100deg, #edf7f1, #f8fbf7); border: 1px solid #dbeadf; border-radius: 12px; } .report-interpretation > span { align-self: start; padding: 5px 8px; color: white; background: var(--green); border-radius: 6px; font-size: 11px; font-weight: 800; text-align: center; } .report-interpretation p { margin: 0; font-size: 13px; line-height: 1.85; } .report-interpretation strong { color: var(--green); } .report-profile-banner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 20px; padding: 22px; color: #e7f0ec; background: radial-gradient(circle at 90% 0, rgba(198, 230, 111, 0.14), transparent 35%), linear-gradient(135deg, #173f33, #102e26); border-radius: 15px; } .report-profile-kicker { color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; } .report-profile-banner h3 { margin: 9px 0 8px; color: white; font-size: 19px; } .report-profile-banner p { margin: 0; color: #a9bdb5; font-size: 12px; line-height: 1.75; } .report-profile-attributes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .report-profile-attributes span { min-width: 0; padding: 10px; color: #8da79c; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; font-size: 11px; } .report-profile-attributes strong { display: block; overflow: hidden; margin-top: 5px; color: #eaf2ee; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .report-profile-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 10px; margin-top: 13px; } .report-profile-stat-grid article { min-width: 0; padding: 14px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 11px; } .report-profile-code, .report-profile-label, .report-profile-stat-grid article > strong, .report-profile-stat-grid article > em { display: block; } .report-profile-code { overflow: hidden; color: #84928a; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .report-profile-label { margin-top: 9px; color: var(--muted); font-size: 11px; } .report-profile-stat-grid article > strong { margin: 5px 0 4px; color: var(--ink); font-size: 23px; letter-spacing: -0.04em; } .report-profile-stat-grid article > strong small { margin-left: 3px; color: var(--muted); font-size: 11px; font-weight: 500; } .report-profile-stat-grid article > em { min-height: 32px; color: var(--green-2); font-size: 11px; font-style: normal; line-height: 1.5; } .report-profile-stat-grid details { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e8ede9; } .report-profile-stat-grid summary { color: var(--green); font-size: 11px; font-weight: 700; cursor: pointer; } .report-profile-stat-grid details > div { margin-top: 8px; padding: 9px; color: var(--muted); background: white; border: 1px solid #e8ede9; border-radius: 8px; font-size: 11px; } .report-profile-stat-grid details span, .report-profile-stat-grid details strong { display: block; } .report-profile-stat-grid details span + span { margin-top: 6px; } .report-profile-stat-grid details strong { margin-top: 2px; color: var(--ink); font-weight: 600; } .report-profile-stat-grid details p { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #dce5de; line-height: 1.6; } .report-finding-proof, .report-action-evidence { margin-top: 7px; color: var(--green-2) !important; font-size: 11px !important; font-weight: 600; } .report-finding-validation { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; padding: 13px; color: var(--muted); background: #f5f8f5; border: 1px dashed #d4ded7; border-radius: 10px; font-size: 11px; } .report-finding-validation strong { margin-right: 4px; color: var(--ink); } .report-finding-validation span { padding: 5px 7px; color: var(--green); background: white; border: 1px solid #dbe6df; border-radius: 6px; font-weight: 700; } .report-finding-validation i { color: #9aa69f; font-style: normal; } .report-subsection-title { margin: 28px 0 12px; font-size: 15px; } .report-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; } .report-table-wrap .report-table { border: 0; } .report-comparison-table { min-width: 760px; } .report-evidence-table { min-width: 860px; } .report-evidence-table td:first-child strong { color: var(--green); font-size: 11px; white-space: nowrap; } .report-evidence-table td:nth-child(2) small { display: block; min-width: 125px; margin-top: 5px; color: var(--muted); font-size: 11px; } .report-positive { color: var(--green); font-weight: 700; } .report-negative { color: #b45249; font-weight: 700; } .report-confidence { display: inline-flex; padding: 4px 7px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; } .report-evidence-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .report-evidence-summary span { min-width: 0; padding: 13px; background: #f7faf7; border: 1px solid var(--line-soft); border-radius: 10px; } .report-evidence-summary small, .report-evidence-summary strong { display: block; } .report-evidence-summary small { color: var(--muted); font-size: 11px; } .report-evidence-summary strong { overflow: hidden; margin-top: 6px; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .report-proof-chain { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 4px; margin-bottom: 15px; padding: 14px; background: #173e32; border-radius: 12px; } .report-proof-chain > span { min-width: 0; text-align: center; } .report-proof-chain i, .report-proof-chain strong, .report-proof-chain small { display: block; } .report-proof-chain i { width: 27px; height: 27px; margin: 0 auto 6px; padding-top: 5px; color: #173e32; background: var(--lime); border-radius: 8px; font-size: 11px; font-style: normal; font-weight: 800; } .report-proof-chain strong { color: white; font-size: 11px; } .report-proof-chain small { margin-top: 4px; color: #92aaa0; font-size: 11px; } .report-proof-chain > b { height: 1px; background: #668078; } .report-evidence-notice { margin-top: 14px; padding: 15px 17px; color: #6f5220; background: #fff9ed; border: 1px solid #eee0bd; border-radius: 10px; } .report-evidence-notice strong { display: block; margin-bottom: 5px; font-size: 12px; } .report-evidence-notice p { margin: 0; font-size: 11px; line-height: 1.7; } .report-method-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .report-method-steps article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 3px 11px; padding: 14px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 10px; } .report-method-steps article > span { display: grid; width: 34px; height: 34px; grid-row: 1 / 3; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 9px; font-size: 11px; font-weight: 800; } .report-method-steps strong { font-size: 12px; } .report-method-steps p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; } .report-action-cycle { display: grid; grid-template-columns: repeat(7, auto); align-items: center; justify-content: center; gap: 10px; margin-top: 17px; padding: 15px; color: #dcebe4; background: #173e32; border-radius: 11px; } .report-action-cycle span, .report-action-cycle strong, .report-action-cycle small { display: block; } .report-action-cycle strong { font-size: 11px; } .report-action-cycle small { margin-top: 3px; color: #91aaa0; font-size: 11px; } .report-action-cycle i { width: 28px; height: 1px; background: var(--lime); } /* 厂商超级管理员 */ .platform-view { --platform-blue: #346f9f; --platform-blue-soft: #eaf2f9; } .platform-view [id] { scroll-margin-top: 96px; } .platform-alert { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 14px; padding: 14px 16px; color: #1b5945; background: linear-gradient(90deg, #e7f4ed, #f3f8ec); border: 1px solid #d3e9db; border-radius: 13px; } .platform-alert-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--green); background: white; border-radius: 11px; } .platform-alert-icon svg { width: 20px; height: 20px; } .platform-alert strong, .platform-alert small { display: block; } .platform-alert strong { margin-bottom: 4px; font-size: 14px; } .platform-alert button { padding: 8px 11px; color: var(--green); background: white; border: 1px solid #cce2d5; border-radius: 8px; font-weight: 600; } .platform-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .platform-metric-grid article { position: relative; min-width: 0; padding: 20px; overflow: hidden; background: white; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); } .platform-metric-grid article::after { position: absolute; right: -25px; bottom: -35px; width: 95px; height: 95px; background: var(--platform-blue); border-radius: 50%; content: ""; opacity: 0.04; } .platform-metric-grid span, .platform-metric-grid em { display: block; } .platform-metric-grid span { margin-bottom: 9px; color: var(--muted); } .platform-metric-grid strong { font-size: 30px; letter-spacing: -0.05em; } .platform-metric-grid small { margin-left: 5px; color: var(--muted); } .platform-metric-grid em { margin-top: 9px; color: var(--green-2); font-style: normal; } .platform-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.65fr); gap: 14px; margin-bottom: 14px; } .platform-table-title strong, .platform-table-title small { display: block; } .platform-table-title strong { margin-bottom: 5px; color: var(--ink); } .platform-live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; } .platform-live i { width: 7px; height: 7px; background: #55ac78; border-radius: 50%; box-shadow: 0 0 0 4px rgba(85, 172, 120, 0.1); } .platform-service-list { margin-top: 14px; } .platform-service-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; background: transparent; border-bottom: 1px solid var(--line-soft); text-align: left; } .platform-service-list button:last-child { border-bottom: 0; } .platform-service-list button > span { position: relative; display: block; padding-left: 17px; } .platform-service-list i { position: absolute; top: 5px; left: 0; width: 7px; height: 7px; border-radius: 50%; } .service-green { background: #55ac78; } .service-amber { background: var(--amber); } .platform-service-list strong, .platform-service-list small { display: block; } .platform-service-list strong { margin-bottom: 5px; font-size: 13px; } .platform-service-list em { color: var(--green); font-style: normal; font-weight: 700; } .platform-tenant-panel { margin-bottom: 14px; } .tenant-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 17px; } .tenant-card { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px; background: #fafbf9; border: 1px solid var(--line-soft); border-radius: 12px; text-align: left; transition: transform 0.2s ease, border-color 0.2s ease; } .tenant-card:hover { border-color: #cbdad1; transform: translateY(-1px); } .tenant-logo { display: grid; width: 42px; height: 42px; place-items: center; color: white; background: var(--green); border-radius: 11px; font-weight: 700; } .tenant-logo.blue { background: var(--platform-blue); } .tenant-logo.amber { background: #b9822d; } .tenant-card strong, .tenant-card small { display: block; } .tenant-card strong { margin-bottom: 5px; } .tenant-card em { font-style: normal; } .platform-bottom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .platform-quick-list, .audit-list { margin-top: 13px; } .platform-quick-list button { display: grid; width: 100%; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; background: transparent; border-bottom: 1px solid var(--line-soft); text-align: left; } .platform-quick-list button:last-child, .audit-list button:last-child { border-bottom: 0; } .quick-icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 9px; font-weight: 700; } .quick-icon.blue { color: var(--platform-blue); background: var(--platform-blue-soft); } .quick-icon.amber { color: #956313; background: var(--amber-soft); } .platform-quick-list strong, .platform-quick-list small, .audit-list strong, .audit-list small { display: block; } .platform-quick-list strong, .audit-list strong { margin-bottom: 4px; } .platform-quick-list em { color: var(--green); font-style: normal; font-weight: 600; } .backup-hero { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; color: #e5f1eb; background: linear-gradient(135deg, #174132, #113027); border-radius: 12px; } .backup-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; color: var(--lime); background: rgba(198, 230, 111, 0.1); border-radius: 10px; } .backup-icon svg { width: 19px; height: 19px; } .backup-hero strong, .backup-hero small { display: block; } .backup-hero strong { margin-bottom: 5px; } .backup-hero small { color: #8fa99e; } .backup-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; } .backup-meta span { padding: 9px; color: var(--muted); background: #f6f8f6; border-radius: 8px; } .backup-meta strong { display: block; margin-top: 5px; color: var(--ink); } .backup-actions { display: flex; gap: 8px; margin-top: 13px; } .backup-actions .button { min-height: 38px; flex: 1; } .audit-list button { display: grid; width: 100%; grid-template-columns: 8px 1fr; align-items: center; gap: 10px; padding: 12px 0; background: transparent; border-bottom: 1px solid var(--line-soft); text-align: left; } .audit-dot { width: 7px; height: 7px; background: var(--green-2); border-radius: 50%; } .audit-dot.blue { background: var(--platform-blue); } .audit-dot.amber { background: var(--amber); } .platform-action-content { margin-top: 20px; } .platform-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .platform-action-content label { display: block; } .platform-action-content label.full { grid-column: 1 / -1; } .platform-action-content label > span, .platform-action-content fieldset > legend { display: block; margin-bottom: 7px; color: var(--ink-soft); font-weight: 600; } .platform-action-content input, .platform-action-content select, .platform-action-content textarea { width: 100%; padding: 11px 12px; background: #fafbf9; border: 1px solid var(--line); border-radius: 9px; outline: 0; } .platform-action-content fieldset { grid-column: 1 / -1; padding: 13px; background: #f7f9f7; border: 1px solid var(--line-soft); border-radius: 10px; } .platform-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .platform-check-grid label { display: flex; align-items: center; gap: 8px; padding: 9px; background: white; border: 1px solid var(--line-soft); border-radius: 8px; } .platform-check-grid input { width: 16px; height: 16px; accent-color: var(--green); } .platform-detail-card { padding: 14px; background: #f6f9f7; border: 1px solid var(--line-soft); border-radius: 11px; } .platform-detail-card + .platform-detail-card { margin-top: 10px; } .platform-detail-card strong, .platform-detail-card small { display: block; } .platform-detail-card strong { margin-bottom: 5px; } /* 弹窗、提示 */ .tooltip { position: fixed; z-index: 90; max-width: 230px; padding: 8px 10px; color: white; background: #102d25; border-radius: 7px; box-shadow: var(--shadow-high); font-size: 9px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 0.15s ease, transform 0.15s ease; } .tooltip.show { opacity: 1; transform: translateY(0); } .toast-region { position: fixed; z-index: 100; right: 24px; bottom: 24px; display: flex; width: min(360px, calc(100vw - 32px)); flex-direction: column; gap: 9px; pointer-events: none; } .toast { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; padding: 12px 14px; color: white; background: #16372d; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; box-shadow: var(--shadow-high); animation: toastIn 0.25s ease both; } .toast.out { animation: toastOut 0.22s ease both; } .toast-icon { display: grid; width: 28px; height: 28px; place-items: center; color: #19392e; background: var(--lime); border-radius: 8px; } .toast-icon svg { width: 15px; height: 15px; } .toast strong, .toast small { display: block; } .toast strong { margin-bottom: 3px; font-size: 10px; } .toast small { color: #9bb1a8; font-size: 8px; } @keyframes toastIn { from { opacity: 0; transform: translateX(18px); } } @keyframes toastOut { to { opacity: 0; transform: translateX(18px); } } .modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8, 25, 19, 0.56); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { position: relative; width: min(590px, 100%); max-height: calc(100vh - 40px); padding: 28px; overflow-y: auto; background: white; border-radius: 20px; box-shadow: var(--shadow-high); transform: translateY(12px) scale(0.985); transition: transform 0.22s ease; } .modal-backdrop.open .modal { transform: translateY(0) scale(1); } .modal-close { position: absolute; z-index: 2; top: 17px; right: 17px; display: grid; width: 31px; height: 31px; place-items: center; color: var(--muted); background: #f1f4f1; border-radius: 9px; } .modal-close svg { width: 14px; height: 14px; } .modal-kicker { margin-bottom: 6px; color: var(--green-2); font-size: 8px; font-weight: 800; letter-spacing: 0.15em; } .modal h2 { margin: 0; font-size: 21px; letter-spacing: -0.04em; } .modal > p, .report-modal-head p { margin: 8px 0 20px; color: var(--muted); font-size: 9px; line-height: 1.6; } .form-modal form { margin-top: 20px; } .form-modal label { display: block; margin-bottom: 14px; } .form-modal label > span { display: block; margin-bottom: 7px; color: #5e6f67; font-size: 9px; font-weight: 600; } .form-modal input, .form-modal select, .form-modal textarea { width: 100%; padding: 10px 11px; background: #fafbf9; border: 1px solid var(--line); border-radius: 9px; outline: 0; font-size: 10px; } .form-modal textarea { line-height: 1.6; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; } .report-modal { width: min(620px, 100%); } .report-modal-head { display: grid; grid-template-columns: 67px 1fr; align-items: center; gap: 14px; padding-right: 35px; } .report-modal-head p { margin-bottom: 0; } .report-graphic { display: grid; width: 62px; height: 62px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 15px; } .report-graphic svg { width: 43px; height: 43px; } .snapshot-card { margin: 20px 0; padding: 13px 15px; background: #f4f8f5; border: 1px solid #dfeae3; border-radius: 11px; } .snapshot-card span, .snapshot-card strong, .snapshot-card small { display: block; } .snapshot-card span { margin-bottom: 5px; color: var(--green-2); font-size: 7px; font-weight: 700; } .snapshot-card strong { margin-bottom: 4px; font-size: 9px; } .snapshot-card small { color: var(--muted); font-size: 7px; } .report-options { padding: 0; border: 0; } .report-options legend { margin-bottom: 9px; font-size: 9px; font-weight: 700; } .report-options label { display: grid; grid-template-columns: 17px 1fr; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .report-options input { width: 15px; height: 15px; accent-color: var(--green); } .report-options strong, .report-options small { display: block; } .report-options strong { margin-bottom: 4px; font-size: 9px; } .report-options small { color: var(--muted); font-size: 7px; } .report-progress { margin-top: 16px; padding: 13px; background: #f7f9f7; border-radius: 10px; } .report-progress > div { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 8px; } .report-progress > i { display: block; height: 6px; overflow: hidden; background: #e6ebe7; border-radius: 4px; } .report-progress b { display: block; width: 0; height: 100%; background: var(--green); border-radius: 4px; transition: width 0.2s ease; } .analysis-modal { width: min(470px, 100%); padding: 42px; text-align: center; } .analysis-orbit { position: relative; display: grid; width: 92px; height: 92px; margin: 0 auto 22px; place-items: center; } .analysis-orbit span { position: absolute; inset: 0; border: 1px solid #d8e5dd; border-radius: 50%; animation: orbit 3s linear infinite; } .analysis-orbit span:nth-child(2) { inset: 12px; border-style: dashed; animation-direction: reverse; animation-duration: 2.2s; } .analysis-orbit i { position: absolute; top: 4px; width: 9px; height: 9px; background: var(--lime); border: 2px solid var(--green); border-radius: 50%; transform-origin: 4px 42px; animation: pointOrbit 2.1s linear infinite; } .analysis-orbit svg { width: 27px; height: 27px; color: var(--green); } @keyframes orbit { to { transform: rotate(360deg); } } @keyframes pointOrbit { to { transform: rotate(360deg); } } .analysis-progress { height: 6px; margin: 23px 0 14px; overflow: hidden; background: #e8ece9; border-radius: 5px; } .analysis-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--green), #79bd8f); border-radius: 5px; transition: width 0.25s ease; } .analysis-steps { display: flex; justify-content: space-between; color: #a0aaa4; font-size: 7px; } .analysis-steps span.active { color: var(--green); font-weight: 700; } .sidebar-scrim { position: fixed; z-index: 29; inset: 0; display: none; background: rgba(8, 24, 18, 0.5); opacity: 0; transition: opacity 0.2s ease; } /* 响应式 */ @media (max-width: 1260px) { :root { --sidebar: 226px; } .main-content { padding-right: 22px; padding-left: 22px; } .dashboard-grid, .content-grid, .profession-layout, .collab-layout, .data-health, .data-bottom-grid { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .action-overview { grid-template-columns: 110px repeat(2, 1fr); } .action-health { grid-column: span 2; } .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .source-summary-grid { grid-template-columns: 1fr; } .lineage-stage-grid { grid-template-columns: 1fr; } .lineage-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-direction .lineage-stage.reports .lineage-stage-list { grid-template-columns: 1fr; } .lineage-connector { min-height: 36px; } .lineage-connector i { transform: rotate(90deg); } .lineage-gap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-grid { grid-template-columns: 1fr; } .platform-bottom-grid { grid-template-columns: 1fr 1fr; } .platform-audit-panel { grid-column: span 2; } .report-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-report-grid, .report-list-grid { grid-template-columns: 1fr; } .report-reader-layout { grid-template-columns: 210px minmax(0, 1fr); } .report-section { padding-right: 42px; padding-left: 42px; } } @media (max-width: 900px) { :root { --sidebar: 254px; } .sidebar { transform: translateX(-100%); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-scrim { display: block; opacity: 1; } .workspace { margin-left: 0; } .mobile-menu { display: inline-grid; } .profile-banner { grid-template-columns: repeat(2, 1fr); } .profile-score { grid-column: span 2; } .profile-divider { display: none; } .collab-stats { grid-template-columns: repeat(2, 1fr); } .collab-stats > div:nth-child(2)::after { display: none; } .source-grid { grid-template-columns: 1fr; } .source-filter-toolbar { align-items: flex-start; flex-direction: column; } .data-lineage-toolbar { grid-template-columns: 1fr; align-items: stretch; } .lineage-mode-switch { display: grid; grid-template-columns: 1fr 1fr; } .lineage-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lineage-gap-list { grid-template-columns: 1fr; } .tenant-card-grid { grid-template-columns: 1fr; } .source-filters { width: 100%; overflow-x: auto; } .source-filters button { flex: 0 0 auto; } .project-item { grid-template-columns: 42px minmax(0, 1fr) 90px 26px; } .project-partners { display: none; } .report-library-head { align-items: flex-start; flex-direction: column; } .report-library-tools { width: 100%; } .report-library-tools .search-field { flex: 1; } .report-reader-header { padding: 9px 12px; } .report-reader-actions .reader-version, .report-reader-actions .button.secondary { display: none; } .report-reader-layout { display: flex; flex-direction: column; } .report-toc { position: relative; z-index: 2; min-height: 56px; flex: 0 0 auto; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; } .report-toc::-webkit-scrollbar { display: none; } .report-toc-label, .report-reader-meta { display: none; } .report-toc nav { min-height: 40px; flex-direction: row; align-items: center; } .report-toc button { width: auto; flex: 0 0 auto; white-space: nowrap; } .report-document { width: min(100% - 20px, 1040px); margin-top: 10px; } .report-document-wrap { min-height: 0; flex: 1; } .report-cover-page { min-height: 510px; padding: 50px 32px 38px; } .report-cover-main h1 { font-size: 34px; } .report-section { padding: 38px 28px; } .report-metric-grid { grid-template-columns: repeat(2, 1fr); } .report-chart-grid { grid-template-columns: 1fr; } .report-profile-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .topbar { height: 68px; padding: 0 15px; } .breadcrumb { display: none; } .topbar-date { margin: 0; font-size: 10px; } .role-switcher { min-width: 42px; width: 42px; height: 42px; grid-template-columns: 1fr; padding: 3px; border: 0; background: transparent; } .role-switcher .role-copy, .role-switcher > svg, .edition-badge { display: none; } .main-content { padding: 24px 14px 45px; } .heading-with-actions, .profession-heading { align-items: flex-start; flex-direction: column; } .heading-actions { width: 100%; } .heading-actions .button { flex: 1; } .quality-strip { align-items: flex-start; flex-direction: column; gap: 4px; } .metric-grid { grid-template-columns: 1fr; } .metric-card { min-height: 132px; } .match-content { grid-template-columns: 1fr; justify-items: center; } .trend-chart-wrap { width: 100%; } .match-summary { align-items: flex-start; flex-direction: column; padding: 12px 5px 3px; } .panel { padding: 17px; } .panel-header { align-items: flex-start; flex-direction: column; } .panel-tools { width: 100%; justify-content: space-between; } .search-field { width: 100%; } .profession-rank .text-button { display: none; } .profile-banner { grid-template-columns: 1fr 1fr; gap: 19px; padding: 21px; } .tab-bar { overflow-x: auto; } .tab-bar button { min-width: 84px; } .skill-row { grid-template-columns: 76px minmax(0, 1fr) 38px; gap: 8px; } .collab-stats { grid-template-columns: 1fr 1fr; } .collab-stats > div { padding: 16px; } .collab-stats > div::after { display: none; } .partner-grid { grid-template-columns: 1fr; } .project-item { grid-template-columns: 38px minmax(0, 1fr) 24px; } .project-progress, .project-partners { display: none; } .action-overview { grid-template-columns: 1fr 1fr; } .action-ring { grid-column: span 2; margin: 0 auto; } .action-stat { border-left: 0; border-top: 1px solid var(--line-soft); } .action-health { grid-column: span 2; } .task-toolbar { align-items: stretch; flex-direction: column; } .filter-pills { overflow-x: auto; } .filter-pills button { flex: 0 0 auto; } .data-health-main { grid-template-columns: 1fr; } .report-stat-grid { grid-template-columns: 1fr; } .featured-report-card { min-height: auto; grid-template-columns: 1fr; } .featured-report-cover { display: none; } .report-library-tools { align-items: stretch; flex-direction: column; } .report-library-tools select { width: 100%; } .report-list-grid { padding-right: 16px; padding-left: 16px; } .report-reader-identity strong { max-width: 155px; font-size: 13px; } .report-reader-actions .button { min-height: 38px; padding: 0 11px; } .report-cover-page { min-height: 460px; padding: 42px 24px 32px; } .report-cover-main h1 { font-size: 29px; } .report-cover-main p { font-size: 14px; } .report-cover-foot { grid-template-columns: 1fr; } .report-section { padding: 32px 20px; } .report-section-heading h2 { font-size: 21px; } .report-metric-grid { grid-template-columns: 1fr 1fr; } .report-benchmark-strip, .report-evidence-summary, .report-profile-stat-grid { grid-template-columns: 1fr 1fr; } .report-benchmark-strip > span:nth-child(2) { border-right: 0; } .report-benchmark-strip > span:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .report-profile-banner { grid-template-columns: 1fr; padding: 18px; } .report-profile-attributes { grid-template-columns: 1fr 1fr; } .report-chart-grid { grid-template-columns: 1fr; } .report-chart-stage, .report-echart { min-height: 300px; height: 300px; } .report-chart-card figcaption { min-height: auto; } .report-interpretation { grid-template-columns: 1fr; gap: 10px; } .report-interpretation > span { justify-self: start; } .report-finding-validation { flex-wrap: wrap; } .report-proof-chain { grid-template-columns: 1fr; gap: 8px; } .report-proof-chain > b { width: 1px; height: 15px; justify-self: center; } .report-method-steps { grid-template-columns: 1fr; } .report-action-cycle { grid-template-columns: 1fr; text-align: center; } .report-action-cycle i { width: 1px; height: 14px; justify-self: center; } .report-finding, .report-action-card { grid-template-columns: 34px minmax(0, 1fr); } .report-finding em, .report-action-card button { grid-column: 2; justify-self: start; } .report-bar-row { grid-template-columns: 95px minmax(0, 1fr) 42px; } .report-document-wrap { overflow-x: hidden; } .platform-alert { grid-template-columns: 40px 1fr; } .platform-alert button { grid-column: 1 / -1; width: 100%; } .platform-metric-grid, .platform-bottom-grid { grid-template-columns: 1fr; } .platform-audit-panel { grid-column: auto; } .platform-form-grid, .platform-check-grid { grid-template-columns: 1fr; } .data-usage-note { grid-template-columns: 38px 1fr; } .data-usage-note button { grid-column: 1 / -1; width: 100%; } .data-lineage-header, .lineage-gap-heading { align-items: flex-start; flex-direction: column; } .lineage-snapshot-badge { align-self: flex-start; } .lineage-mode-switch button { padding: 0 8px; } .lineage-summary-grid, .lineage-stage-list { grid-template-columns: 1fr; } .lineage-legend { align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; } .lineage-legend small { width: 100%; margin-left: 0; text-align: left; } .data-lineage-canvas { padding: 10px; } .lineage-gap-toggle { min-height: 34px; } .lineage-gap-card dl div { grid-template-columns: 1fr; gap: 2px; } .data-issue-owner-list { grid-template-columns: 1fr; } .source-license-grid { grid-template-columns: 1fr; } .health-score { padding: 0 0 17px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .health-meta { align-items: flex-start; flex-direction: column; gap: 8px; } .lineage-flow { align-items: stretch; flex-direction: column; } .lineage-flow > i { width: 100%; height: 15px; transform: rotate(90deg); } .form-row { grid-template-columns: 1fr; gap: 0; } .modal { padding: 23px 19px; } .report-modal-head { grid-template-columns: 50px 1fr; } .report-graphic { width: 46px; height: 46px; } .report-graphic svg { width: 31px; height: 31px; } .toast-region { right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }