.quality-heading-actions { display: flex; align-items: center; gap: 12px; }
.quality-heading-actions > span { color: #8a8e93; font-size: 10px; }
.quality-heading-actions > span.demo-data { padding: 5px 8px; border: 1px solid #efc6c3; border-radius: 3px; background: #fff4f3; color: #bd2d27; font-weight: 700; }
.quality-filter-panel { display: block; margin-bottom: 18px; padding: 17px 18px 18px; border-top: 2px solid var(--navi-accent); }
.quality-filter-title { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eceeef; }
.quality-filter-title > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; background: #fce8e6; color: #c42a23; font-size: 18px; }
.quality-filter-title b, .quality-filter-title small { display: block; }
.quality-filter-title b { color: #24272b; font-size: 12px; }
.quality-filter-title small { margin-top: 3px; color: #8b9095; font-size: 8px; line-height: 1.4; }
.quality-filters { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px 10px; align-items: end; }
.quality-filters label { min-width: 0; }
.quality-filters label > span { display: block; margin-bottom: 6px; color: #6d7278; font-size: 9px; font-weight: 700; }
.quality-filters select, .quality-filters input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid #d7d9db; border-radius: 4px; outline: 0; background: #fff; color: #303438; font-size: 10px; }
.quality-filters select:focus, .quality-filters input:focus { border-color: var(--navi-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navi-accent) 7%, transparent); }
.quality-filters button { height: 36px; padding: 0 16px; border-radius: 4px; white-space: nowrap; }
.quality-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.quality-metric-grid.single { grid-template-columns: minmax(0,1fr); }
.quality-metric-grid.single .quality-metric-card { min-height: 112px; }
.quality-metric-card { position: relative; min-height: 135px; overflow: hidden; padding: 17px 18px 15px; border: 1px solid #dedfe1; border-top: 3px solid #262a2e; border-radius: 5px; background: #fff; box-shadow: 0 2px 9px #17191c08; cursor: pointer; transition: transform .15s,border-color .15s,box-shadow .15s; }
.quality-metric-card:hover { transform: translateY(-1px); box-shadow: 0 7px 18px #17191c12; }
.quality-metric-card.active { border-color: var(--navi-accent); border-top-color: var(--navi-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--navi-accent) 7%, transparent); }
.quality-metric-card::after { content: ""; position: absolute; right: -23px; bottom: -34px; width: 100px; height: 100px; border: 18px solid #17191c06; border-radius: 50%; }
.quality-metric-card.stability:first-child { border-top-color: var(--navi-accent); }
.quality-metric-card > div { display: flex; align-items: center; justify-content: space-between; }
.quality-metric-card > div span { color: var(--navi-accent); font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.quality-metric-card > div small { color: #979ba0; font-size: 9px; }
.quality-metric-card strong { display: block; margin: 10px 0 2px; color: #202327; font-size: 29px; line-height: 1; }
.quality-metric-card p { margin: 7px 0 0; color: #494e53; font-size: 11px; font-weight: 700; }
.quality-metric-card em { display: block; margin-top: 5px; color: #999da2; font-size: 8px; font-style: normal; }
.quality-visual-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(320px,.75fr); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.quality-report-panel, .metric-definition-panel { overflow: hidden; }
.quality-report-table { min-width: 900px; }
.quality-report-table th, .quality-report-table td { padding: 11px 13px; font-size: 9px; white-space: nowrap; }
.quality-report-table th { font-size: 8px; }
.quality-report-table td strong { color: #24272b; }
.quality-report-table .positive { color: #198157; font-weight: 800; }
.quality-report-table .warning { color: #b56f09; font-weight: 800; }
.metric-definition-list { overflow: auto; }
.metric-definition { display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 15px 17px; border-bottom: 1px solid #eceeef; }
.metric-definition:last-child { border-bottom: 0; }
.metric-definition > b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 4px; background: #202326; color: #fff; font-size: 9px; }
.metric-definition:first-child > b { background: var(--navi-accent); }
.metric-definition header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.metric-definition header strong { color: #24272b; font-size: 11px; }
.metric-definition header span { color: #999da2; font-size: 8px; }
.metric-definition code { display: block; margin: 7px 0; padding: 7px 8px; overflow: auto; border-left: 2px solid var(--navi-accent); background: #f6f6f5; color: #45494e; font-family:"Cascadia Mono",Consolas,monospace; font-size: 8px; white-space: nowrap; }
.metric-definition p, .metric-definition small { margin: 0; color: #71767b; font-size: 8px; line-height: 1.55; }
.metric-definition small { display: block; margin-top: 4px; color: #9a9ea2; }
.quality-chart { min-height: 285px; padding: 12px 16px 6px; display: grid; align-items: center; }
.quality-chart .empty-state { min-height: 245px; }
.quality-chart svg { display: block; width: 100%; height: 245px; overflow: visible; }

.overview-period-legend { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0 0 10px 300px; padding: 0 18px; color: #777c82; font-size: 10px; font-weight: 800; text-align: center; }
.overview-project-filter { display: flex; align-items: end; gap: 18px; margin-bottom: 14px; padding: 14px 18px; border-top: 2px solid var(--navi-accent); }
.overview-project-filter label { flex: 0 1 360px; }
.overview-project-filter label span { display: block; margin-bottom: 6px; color: #656a70; font-size: 9px; font-weight: 800; }
.overview-project-filter select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d7d9db; border-radius: 4px; background: #fff; color: #2d3135; font-size: 11px; }
.overview-project-filter p { margin: 0 0 9px; color: #8b9095; font-size: 9px; line-height: 1.5; }
.quality-overview-grid { display: grid; gap: 14px; }
.overview-loading { min-height: 180px; display: grid; place-items: center; color: #8b9095; }
.overview-metric { overflow: hidden; display: grid; grid-template-columns: 280px minmax(0,1fr); padding: 0; border-top: 2px solid var(--navi-accent); }
.overview-metric > header { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid #e8eaec; background: linear-gradient(135deg,#fff 0%,#fbfbfb 100%); }
.overview-metric-mark { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 5px; background: var(--navi-accent); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.overview-metric header h2 { margin: 0 0 6px; color: #202327; font-size: 18px; }
.overview-metric header p { margin: 0; color: #8b9095; font-size: 9px; line-height: 1.55; }
.overview-metric header button { position: absolute; right: 15px; top: 15px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #e1e3e5; border-radius: 4px; background: #fff; color: #60656a; cursor: pointer; }
.overview-metric header button:hover { border-color: var(--navi-accent); color: var(--navi-accent); }
.overview-metric header button .ui-icon { width: 15px; height: 15px; }
.overview-period-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.overview-period { min-width: 0; padding: 17px 18px 13px; border-right: 1px solid #eceeef; }
.overview-period:last-child { border-right: 0; }
.overview-period-title b, .overview-period-title span { display: block; }
.overview-period-title b { color: #4f5459; font-size: 10px; }
.overview-period-title span { margin-top: 3px; overflow: hidden; color: #a1a5a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.overview-period > strong { display: block; margin: 10px 0 6px; color: #202327; font-size: 25px; line-height: 1; }
.overview-sparkline { position: relative; height: 60px; }
.overview-sparkline svg { display: block; width: 100%; height: 42px; overflow: visible; }
.overview-sparkline polyline { fill: none; stroke: var(--navi-accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.overview-sparkline small { position: absolute; right: 0; bottom: 0; font-size: 8px; font-weight: 800; }
.overview-sparkline small.positive { color: #198157; }
.overview-sparkline small.negative { color: #c43a33; }
.overview-sparkline.empty { display: grid; place-items: center; color: #a1a5a9; font-size: 8px; }
.project-health-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.project-health-stat { position: relative; min-width: 0; overflow: hidden; padding: 18px 20px; border: 1px solid #e0e2e3; border-top: 3px solid #303438; border-radius: 5px; background: #fff; box-shadow: 0 2px 9px #17191c08; }
.project-health-stat::after { content: ""; position: absolute; right: -28px; bottom: -42px; width: 108px; height: 108px; border: 20px solid currentColor; border-radius: 50%; opacity: .04; }
.project-health-stat span,.project-health-stat small { display: block; }
.project-health-stat span { color: #656a6f; font-size: 10px; font-weight: 800; }
.project-health-stat strong { display: block; margin: 10px 0 6px; color: #202327; font-size: 32px; line-height: 1; }
.project-health-stat small { color: #989ca1; font-size: 8px; }
.project-health-stat.severe { border-top-color: #c7352e; color: #c7352e; }
.project-health-stat.light { border-top-color: #d88a18; color: #d88a18; }
.project-health-stat.research { border-top-color: #287a9d; color: #287a9d; }
.project-health-method { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 15px 18px; border-left: 3px solid var(--navi-accent); }
.project-health-method b { color: #2a2e32; font-size: 11px; }
.project-health-method p { margin: 5px 0 0; color: #7d8287; font-size: 9px; line-height: 1.5; }
.project-health-method > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 3px; background: #f4f5f5; color: #6d7277; font-size: 9px; font-weight: 800; }
.project-health-table { min-width: 1050px; }
.project-health-table th,.project-health-table td { padding: 12px 13px; font-size: 9px; white-space: nowrap; }
.project-health-table th { font-size: 8px; }
.project-health-table td strong { color: #24272b; }
.project-score { font-size: 14px; }
.project-score.severe { color: #c7352e; }
.project-score.light { color: #b86f09; }
.project-score.research { color: #287a9d; }
.project-health-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 8px; font-weight: 800; }
.project-health-badge.severe { background: #fff1f0; color: #bd302a; }
.project-health-badge.light { background: #fff8ea; color: #a86508; }
.project-health-badge.research { background: #edf7fb; color: #256f90; }
.chart-grid line { stroke: #e8eaed; stroke-width: 1; }
.chart-grid text, .chart-points text { fill: #92979d; font-size: 9px; }
.chart-area { fill: color-mix(in srgb, var(--navi-accent) 5%, transparent); }
.chart-line { fill: none; stroke: var(--navi-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-points circle { fill: #fff; stroke: var(--navi-accent); stroke-width: 2.5; }
@media(max-width:1250px){.quality-filters{grid-template-columns:repeat(3,1fr)}.quality-metric-grid{grid-template-columns:repeat(2,1fr)}.quality-metric-grid.single{grid-template-columns:1fr}.quality-visual-grid{grid-template-columns:1fr}.metric-definition-list{max-height:none}.overview-period-legend{display:none}.overview-metric{grid-template-columns:230px 1fr}.overview-period-grid{grid-template-columns:repeat(2,1fr)}.overview-period:nth-child(2){border-right:0}.overview-period:nth-child(-n+2){border-bottom:1px solid #eceeef}.project-health-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.quality-heading{align-items:flex-start}.quality-heading-actions{align-items:flex-end;flex-direction:column}.quality-filters{grid-template-columns:1fr 1fr}.quality-metric-grid{grid-template-columns:1fr}.quality-filters button{grid-column:1/-1}.quality-filter-title{display:none}.overview-project-filter{align-items:stretch;flex-direction:column;gap:9px}.overview-project-filter label{flex-basis:auto}.overview-project-filter p{margin:0}.overview-metric{grid-template-columns:1fr}.overview-metric>header{border-right:0;border-bottom:1px solid #e8eaec}.overview-period-grid{grid-template-columns:1fr 1fr}.project-health-method{align-items:flex-start;flex-direction:column}.project-health-method>span{align-self:flex-start}}
@media(max-width:560px){.project-health-summary{grid-template-columns:1fr 1fr;gap:10px}.project-health-stat{padding:15px}.project-health-stat strong{font-size:27px}}