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