.ham-panel-diagram{margin-bottom:4px}.ham-panel-system-info{margin-top:24px}.ham-panel-toggle{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;margin-bottom:8px;padding:0;font-size:1rem;font-weight:600;display:flex}@media (width<=600px){.ham-panel-diagram{margin-bottom:8px}.ham-panel-system-info{margin-top:12px}}.diagram-header{border-bottom:1px solid var(--color-border-secondary);justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.diagram-container,.diagram-container *,.recharts-wrapper,.recharts-surface{-webkit-tap-highlight-color:transparent;outline:none!important}.diagram-actions{gap:8px;display:flex}.diagram-content{width:100%;position:relative}.diagram-container .recharts-cartesian-grid-horizontal line,.diagram-container .recharts-cartesian-grid-vertical line{stroke:var(--chart-grid-color);stroke-opacity:.3}.diagram-container .recharts-text{fill:var(--chart-text-color);font-size:11px}.diagram-container .recharts-legend-wrapper .recharts-default-legend .recharts-legend-item{color:var(--chart-text-color)}.diagram-container .recharts-tooltip-wrapper{background:var(--chart-tooltip-bg);border:1px solid var(--chart-tooltip-border);border-radius:4px;box-shadow:0 2px 8px #00000026}.diagram-container .recharts-default-tooltip{background:var(--chart-tooltip-bg)!important;border:1px solid var(--chart-tooltip-border)!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important}.diagram-container .recharts-tooltip-label{font-weight:600;color:var(--chart-text-color)!important}.diagram-container .recharts-tooltip-item{color:var(--chart-text-color)!important}.chart-wrapper{width:100%;margin-bottom:20px}.chart-title{color:var(--color-text-primary);text-align:center;margin:0 0 15px;font-size:16px;font-weight:600}.info-section{margin-bottom:24px}.info-section h2{color:var(--color-text-primary);margin:0 0 16px;font-size:24px;font-weight:600}.info-section h3{color:var(--color-text-secondary);margin:0 0 12px;font-size:18px;font-weight:500}.info-section p{color:var(--color-text-muted);margin:0 0 16px;line-height:1.5}.custom-tooltip{box-shadow:var(--color-shadow-medium);border-radius:4px;padding:8px 12px;font-size:13px;background:var(--color-background-tertiary)!important;border:1px solid var(--color-border-primary)!important}.tooltip-label{color:var(--color-text-primary);margin:0 0 4px;font-weight:600}.chart-selector{margin-bottom:20px}.chart-selector-label{color:var(--color-text-primary);margin-bottom:10px;font-size:14px;font-weight:700}.chart-selector-buttons{flex-wrap:wrap;gap:8px;display:flex}.chart-selector-button{border:1px solid var(--color-border-primary);background-color:var(--color-background-primary);color:var(--color-text-primary);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:6px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:500;transition:all .2s}.chart-selector-button:hover{background-color:var(--color-surface-hover);border-color:var(--color-accent-primary)}.chart-selector-button:focus{box-shadow:0 0 0 2px var(--color-accent-highlight-soft);outline:none}.chart-selector-button:active{transform:translateY(1px)}.chart-selector-button.active{background-color:var(--color-accent-primary);color:var(--color-text-contrast);border-color:var(--color-accent-primary);box-shadow:var(--color-shadow-medium)}.chart-selector-button.active:hover{background-color:var(--color-accent-primary-hover);border-color:var(--color-accent-primary-hover)}.chart-selector select{transition:border-color .2s,box-shadow .2s}.chart-selector select:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 2px var(--color-accent-highlight-soft);outline:none}@media (width<=768px){.chart-title{font-size:14px}.chart-selector select{width:100%;margin-top:5px}.chart-selector-buttons{flex-direction:column}.chart-selector-button{text-align:center;width:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chart-content{animation:.15s ease-out fadeIn}.chart-empty-state{text-align:center;color:var(--color-text-muted);background-color:var(--color-background-secondary);border:1px dashed var(--color-border-secondary);border-radius:8px;padding:40px;font-style:italic}.chart-loading{height:400px;color:var(--color-text-muted);justify-content:center;align-items:center;font-style:italic;display:flex}.chart-loading:before{content:"";border:2px solid var(--color-border-secondary);border-top:2px solid var(--color-accent-primary);border-radius:50%;width:20px;height:20px;margin-right:8px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}