.options-chart-container{width:100%;background:var(--bg-white);border-radius:0;box-shadow:var(--shadow-small);overflow:visible;position:relative;z-index:1}.options-chart-container.error,.options-chart-container.loading{display:flex;align-items:center;justify-content:center;min-height:200px}.options-chart-container .chart-loading{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);color:var(--text-secondary)}.options-chart-container .chart-loading .loading-spinner{width:32px;height:32px;border-top:3px solid var(--border-color);border:3px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.options-chart-container .chart-error{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);color:var(--error-color)}.options-chart-container .chart-error .retry-button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--primary-color);color:var(--text-light);border:none;border-radius:0;cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-speed)}.options-chart-container .chart-error .retry-button:hover{background:color-mix(in srgb,var(--primary-color) 90%,black)}.options-chart-container .chart-header{display:flex;align-items:center;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--border-color);background:var(--bg-light)}.options-chart-container .chart-header .chart-header-top-mobile{display:flex;align-items:center;width:100%;gap:var(--spacing-lg)}.options-chart-container .chart-header .chart-title{display:flex;flex-direction:column;align-items:right;font-weight:600;color:var(--text-color)}.options-chart-container .chart-header .chart-title .entry-price{font-size:14px;color:var(--primary-color);font-weight:500;border-radius:4px}.options-chart-container .chart-header .chart-header-data{display:flex;flex-direction:column;background:var(--bg-light);border-radius:var(--border-radius);font-size:var(--font-size-xs)}.options-chart-container .chart-header .chart-header-data .header-main-info{display:flex;justify-content:space-between;align-items:center}.options-chart-container .chart-header .chart-header-data .header-main-info .price-volume{display:flex;gap:var(--spacing-md);align-items:center;flex-direction:row}.options-chart-container .chart-header .chart-header-data .header-main-info .price-volume .price,.options-chart-container .chart-header .chart-header-data .header-main-info .price-volume .volume{font-weight:500;color:var(--text-secondary);font-size:var(--font-size-xs);min-width:30px}.options-chart-container .chart-header .chart-header-data .header-main-info .price-volume .price-volume-item{display:flex;align-items:center;gap:var(--spacing-xs);min-width:80px}.options-chart-container .chart-header .chart-header-data .header-baseline{display:flex;justify-content:space-between;align-items:center;min-height:20px}.options-chart-container .chart-header .chart-header-data .header-baseline .iv-vw{display:flex;gap:var(--spacing-md);align-items:center}.options-chart-container .chart-header .chart-header-data .header-baseline .iv-vw .iv,.options-chart-container .chart-header .chart-header-data .header-baseline .iv-vw .vw{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500;min-width:30px}.options-chart-container .chart-header .chart-header-data .header-baseline .iv-vw .iv-vw-item{display:flex;align-items:center;gap:var(--spacing-xs);min-width:80px}.options-chart-container .chart-header .timeframe-selector{display:flex;gap:var(--spacing-xs);background:var(--bg-white);border-radius:0;padding:var(--spacing-xs);border:1px solid var(--border-color)}.options-chart-container .chart-header .timeframe-selector .timeframe-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;background:rgba(0,0,0,0);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:500;border-radius:0;cursor:pointer;transition:all var(--transition-speed)}.options-chart-container .chart-header .timeframe-selector .timeframe-btn:hover{background:var(--bg-light);color:var(--text-color)}.options-chart-container .chart-header .timeframe-selector .timeframe-btn.active{background:var(--primary-color);color:var(--text-light)}.options-chart-container .chart-wrapper{position:relative;width:100%;background:var(--bg-white);overflow:visible}.options-chart-container .chart-wrapper .chart-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg-white) 70%,transparent);pointer-events:none;z-index:2}.options-chart-container .chart-wrapper canvas{max-width:100%!important;max-height:100%!important}.options-chart-container .chart-wrapper [data-hw-time-tooltip]{z-index:1000!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid var(--border-color)}.options-chart-container .chart-legend{display:flex;justify-content:center;gap:var(--spacing-xxl);padding:var(--spacing-md) var(--spacing-xl);background:var(--bg-light);border-top:1px solid var(--border-color);font-size:var(--font-size-xs);color:var(--text-secondary)}.options-chart-container .chart-legend .legend-item{display:flex;align-items:center;gap:var(--spacing-sm)}.options-chart-container .chart-legend .legend-item .legend-color{width:12px;height:12px;border-radius:0}.options-chart-container .chart-legend .legend-item .legend-color.green{background:#3deaa5}.options-chart-container .chart-legend .legend-item .legend-color.red{background:#f05050}.options-chart-container .chart-legend .legend-item .legend-color.orange{background:#f59e0b}.options-chart-container .chart-wrapper canvas{z-index:1}.options-chart-container .chart-wrapper .lightweight-charts-markers{z-index:10}@media(max-width:768px){.options-chart-container .chart-header{flex-direction:column;gap:var(--spacing-md);align-items:stretch}.options-chart-container .chart-header .chart-title{justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm)}.options-chart-container .chart-header .timeframe-selector{justify-content:center}.options-chart-container .chart-legend{flex-wrap:wrap;gap:var(--spacing-lg)}.options-chart-container .chart-wrapper{margin-bottom:4px}.options-chart-container .chart-wrapper [data-hw-time-tooltip]{top:8px!important;font-size:11px!important;padding:3px 6px!important}}@media(max-width:480px){.options-chart-container .chart-header{padding:var(--spacing-md) var(--spacing-lg)}.options-chart-container .chart-header .chart-title{font-size:var(--font-size-sm)}.options-chart-container .chart-header .chart-title .entry-price{font-size:12px}.options-chart-container .chart-header .timeframe-selector .timeframe-btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.options-chart-container .chart-legend{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--font-size-xs)}.options-chart-container .chart-wrapper [data-hw-time-tooltip]{top:6px!important;font-size:10px!important;padding:2px 4px!important;max-width:200px;overflow:hidden;text-overflow:ellipsis}.mobile-timeline{height:20px}.mobile-timeline .time-label{font-size:9px;padding:1px 2px}}.mobile-timeline{position:relative;height:24px;background:var(--bg-white);border-top:1px solid var(--border-color);display:flex;align-items:center;margin:0 var(--spacing-md);padding:0 var(--spacing-xs);z-index:1}.mobile-timeline .time-label{position:absolute;transform:translateX(-50%);font-size:10px;color:var(--text-secondary);font-weight:400;background:var(--bg-white);padding:2px 4px;border-radius:2px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.1);min-width:20px;text-align:center}.mobile-timeline .time-label.first-label{transform:translateX(0);left:2px!important;right:auto!important}.mobile-timeline .time-label.last-label{transform:translateX(-100%);right:2px!important;left:auto!important}.mobile-timeline .time-label.middle-label{transform:translateX(-50%);min-width:30px}@media(max-width:480px){.mobile-timeline .time-label.middle-label{min-width:25px;font-size:9px;padding:1px 2px}}.mobile-timeline .time-label:first-child:not(.middle-label):not(.last-label){transform:translateX(0);left:2px!important}.mobile-timeline .time-label:last-child:not(.first-label):not(.middle-label){transform:translateX(-100%);right:2px!important;left:auto!important}@media(min-width:769px){.mobile-timeline{display:none}.options-chart-container .chart-wrapper{margin-bottom:0}}