:root{--chart-controls-bg-start: rgba(248, 249, 250, .95);--chart-controls-bg-end: rgba(255, 255, 255, .9);--chart-controls-border: rgba(0, 0, 0, .08);--chart-controls-shadow: 0 4px 16px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);--chart-controls-padding: 20px 24px;--chart-controls-border-radius: 12px;--btn-bg: rgba(255, 255, 255, .8);--btn-border: rgba(226, 232, 240, .8);--btn-color: #475569;--btn-hover-bg: rgba(255, 255, 255, 1);--btn-hover-color: #1e293b;--btn-hover-border: rgba(203, 213, 225, 1);--btn-active-bg: linear-gradient(135deg, rgba(59, 130, 246, .1) 0%, rgba(37, 99, 235, .15) 100%);--btn-active-color: #2563eb;--btn-active-border: rgba(59, 130, 246, .3);--date-input-bg: rgba(255, 255, 255, .9);--date-input-border: rgba(226, 232, 240, .8);--date-input-focus-border: #3b82f6;--date-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, .1)}.chart-controls-unified{background:linear-gradient(135deg,var(--chart-controls-bg-start) 0%,var(--chart-controls-bg-end) 100%);border-radius:var(--chart-controls-border-radius);padding:var(--chart-controls-padding);border:1px solid var(--chart-controls-border);box-shadow:var(--chart-controls-shadow);display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}.chart-controls-unified:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(37,99,235,.1) 1px,transparent 0);background-size:24px 24px;opacity:.03;pointer-events:none}.control-section{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}.date-inputs-wrapper{display:flex;align-items:center;gap:12px}.date-picker-group{display:flex;flex-direction:column;align-items:center;gap:4px}.date-picker-group .form-label{font-size:11px;color:#666;margin:0;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.date-input{border:1px solid var(--date-input-border);border-radius:6px;padding:2px 6px;font-size:11px;width:100px;height:28px;text-align:center;background:var(--date-input-bg);transition:all .2s ease}.date-input:focus{border-color:var(--date-input-focus-border);box-shadow:var(--date-input-focus-shadow);outline:none;background:#fff}.date-separator{font-size:11px;color:#94a3b8;font-weight:500;margin:0 4px 6px;align-self:flex-end}.toggle-btn,.zoom-btn{background:var(--btn-bg)!important;border:1px solid var(--btn-border)!important;color:var(--btn-color)!important;font-size:11px!important;padding:6px 12px!important;transition:all .2s ease!important;font-weight:500!important}.toggle-btn:hover,.zoom-btn:hover{background:var(--btn-hover-bg)!important;color:var(--btn-hover-color)!important;border-color:var(--btn-hover-border)!important;transform:translateY(-1px);box-shadow:0 2px 4px #00000014}.btn-check:checked+.toggle-btn,.zoom-btn:active{background:var(--btn-active-bg)!important;color:var(--btn-active-color)!important;border-color:var(--btn-active-border)!important;box-shadow:inset 0 1px 2px #3b82f61a}.btn-group.toggle-group .btn.toggle-btn{border-radius:0!important}.btn-group.toggle-group label.toggle-btn:first-of-type{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important}.btn-group.toggle-group label.toggle-btn:last-of-type{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important}.zoom-presets .zoom-btn:first-child{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important}.zoom-presets .zoom-btn:last-child{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important}@media (max-width: 1024px){.chart-controls-unified{flex-direction:column;gap:12px;align-items:center}.date-inputs-wrapper{flex-direction:row;gap:12px;justify-content:center;align-items:center}}@media (max-width: 640px){.presets-section{display:none!important}.date-picker-group{flex-direction:row;align-items:center;gap:4px}.date-separator{align-self:center;margin-bottom:0;font-size:12px}}.chart-controls-unified--compact{--chart-controls-padding: 16px 20px}.chart-controls-unified--compact .control-section{gap:6px}.chart-controls-unified--compact .toggle-btn,.chart-controls-unified--compact .zoom-btn{padding:4px 10px!important;font-size:10px!important}
