body { font-family: 'Inter', sans-serif; background-color: #F0F4F8; }
.chart-card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 1rem; }
.chart-container-sm { position: relative; height: 220px; width: 100%; }
.efficiency-chart-container { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 1rem; height: 100%; min-height: 300px; transition: all 0.3s ease-in-out; }
.team-circle { cursor: pointer; transition: all 0.3s ease; stroke: #000; stroke-width: 1.5; }
.team-circle.selected { stroke: #FFA600; stroke-width: 4; }
.tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px; border-radius: 5px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.grid-line { stroke: #e0e0e0; stroke-dasharray: 2,2; }
.axis { stroke: #333; stroke-width: 1.5; }
.average-line { stroke: #999; stroke-dasharray: 4,4; stroke-width: 1; }
.data-card { transition: all 0.4s ease-in-out; opacity: 1; }
.data-card.loading { opacity: 0.5; transform: scale(0.98); }
.pe-tooltip { position: absolute; text-align: left; padding: 8px; font: 12px sans-serif; background: #2D3748; color: #fff; border: 0px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.pe-axis path, .pe-axis line { fill: none; stroke: #A0AEC0; shape-rendering: crispEdges; }
.pe-axis text { fill: #4A5568; }
.pe-grid path, .pe-grid line { fill: none; stroke: #E2E8F0; shape-rendering: crispEdges; }
.control-label { color: #003F5C; font-weight: 600; }
.pe-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }