:root {
--km-clip: none;
}

#metricsPanelContainer {
box-sizing: border-box !important;
padding: 4px 0 !important;
}

.km-wrap, .km-wrap * { box-sizing: border-box; }
.km-wrap { padding: 0 !important; margin: 0; width: 100%; }

.km-h {
margin: 0 0 12px !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-size: 15px;
font-weight: 800;
letter-spacing: .2px;
color: var(--text-light);
text-shadow: none;
}

.matrix-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}

.metric-row {
position: relative;
border-radius: var(--radius-sm);
background: transparent;
padding: 0;
border: 1px solid var(--border-color);
filter: none;
box-shadow: var(--shadow-card);
transition: border-color .15s ease, box-shadow .2s ease;
animation: kmIn .5s ease backwards;
}

.km-rim-in {
position: relative;
border-radius: var(--radius-sm);
background: var(--bg-panel);
background-image: var(--surface-sheen);
box-shadow: var(--inset-hairline);
padding: 10px 12px;
display: flex;
flex-direction: column;
height: 100%;
}
.metric-name {
font-size: 10px;
color: var(--text-secondary);
margin-bottom: 3px;
letter-spacing: .2px;
line-height: 1.3;
}
.metric-score {
font-weight: 800;
font-size: 17px;
color: var(--text-light);
margin-bottom: 5px;
line-height: 1;
text-shadow: none;
}
.metric-progress {
height: 2px;
background: var(--border-color);
border-radius: 2px;
margin-top: auto;
overflow: hidden;
}
.metric-progress-fill {
height: 100%;
background: var(--primary);
box-shadow: 0 0 6px var(--primary-glow);
transition: width .6s ease;
width: 0%;
}

.matrix-grid .metric-row:nth-child(1)  { animation-delay: .02s; }
.matrix-grid .metric-row:nth-child(2)  { animation-delay: .05s; }
.matrix-grid .metric-row:nth-child(3)  { animation-delay: .08s; }
.matrix-grid .metric-row:nth-child(4)  { animation-delay: .11s; }
.matrix-grid .metric-row:nth-child(5)  { animation-delay: .14s; }
.matrix-grid .metric-row:nth-child(6)  { animation-delay: .17s; }
.matrix-grid .metric-row:nth-child(7)  { animation-delay: .20s; }
.matrix-grid .metric-row:nth-child(8)  { animation-delay: .23s; }
.matrix-grid .metric-row:nth-child(9)  { animation-delay: .26s; }
.matrix-grid .metric-row:nth-child(10) { animation-delay: .29s; }

.total-score-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
flex-wrap: wrap;
gap: 10px;
}
.total-score-label {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.total-score-text {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-secondary);
}
#finalScoreDisplay {
font-size: 28px;
font-weight: 800;
color: var(--text-light);
text-shadow: none;
}
.total-score-max {
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
}

.priority-badge {
position: relative;
isolation: isolate;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background: var(--bg-panel);
box-shadow: var(--shadow-card);
padding: 6px 16px;
font-weight: 800;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--primary);
text-shadow: none;
transition: border-color .15s ease, box-shadow .2s ease;
}
.priority-badge::before {
display: none;
}
@keyframes kmIn {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
.metric-row:hover {
background: transparent;
filter: none;
transform: none;
border-color: var(--border-color-strong);
}
.priority-badge:hover {
background: var(--bg-panel);
filter: none;
}
}