.help-banner{background:var(--color-help-banner-bg);border:1px solid var(--color-help-banner-border);border-radius:var(--radius-xl);padding:var(--spacing-lg) var(--spacing-xl);margin-bottom:var(--spacing-2xl);animation:slideDown .3s ease-out}.help-banner__content{display:flex;align-items:center;gap:var(--spacing-md);position:relative}.help-banner__icon{font-size:var(--font-size-4xl);flex-shrink:0}.help-banner__text{flex:1;color:var(--color-text-primary);font-size:var(--font-size-sm);line-height:1.6}.help-banner__text strong{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.help-banner__close{background:0;border:0;color:var(--color-text-secondary);font-size:var(--font-size-2xl);line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast);flex-shrink:0}.help-banner__close:hover{background:rgba(0,0,0,0.05);color:var(--color-text-primary)}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.u-hidden{display:none !important}#strategy-visualizer-page{max-width:none;width:100%}#strategy-visualizer-page .container{max-width:none;width:100%}.page-subtitle{text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-lg);margin-top:calc(var(--spacing-sm) * -1);margin-bottom:var(--spacing-3xl)}.strategy-tabs{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-3xl);border-bottom:var(--border-width-sm) solid var(--color-border-secondary);overflow-x:auto;padding-bottom:var(--spacing-xs)}.strategy-tab-btn{padding:var(--spacing-md) var(--spacing-2xl);background:transparent;border:0;border-bottom:3px solid transparent;cursor:pointer;font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);color:var(--color-text-muted);transition:color .2s ease,background-color .2s ease;white-space:nowrap;position:relative;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.strategy-tab-btn::after{content:'';position:absolute;bottom:-1px;left:50%;width:0;height:3px;background:var(--color-primary);transition:width .25s ease,left .25s ease;border-radius:3px 3px 0 0}.strategy-tab-btn:hover:not(:disabled){color:var(--color-text-secondary);background:rgba(0,0,0,0.03)}.strategy-tab-btn:hover:not(:disabled)::after{width:60%;left:20%}.strategy-tab-btn.active{color:var(--color-primary);border-bottom-color:transparent}.strategy-tab-btn.active::after{width:80%;left:10%}.strategy-tab-btn:disabled{cursor:not-allowed;opacity:.5}.coming-soon{font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);color:var(--color-text-muted);margin-left:var(--spacing-xs)}.strategy-content{display:none}.strategy-content.active{display:flex;width:100%;flex:1}.strategy-layout{display:grid;grid-template-columns:1fr 3fr;gap:var(--spacing-2xl);align-items:start;width:100%;flex:1}.strategy-sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg);position:sticky;top:var(--spacing-2xl);max-height:calc(100vh - 40px);overflow-y:auto}.controls-card{background:var(--color-bg-secondary);padding:var(--spacing-xl);border-radius:var(--radius-xl);border:var(--border-width-sm) solid var(--color-border-secondary);box-shadow:var(--shadow-sm)}.controls-card h3{margin:0 0 var(--spacing-md) 0;margin-bottom:var(--spacing-lg);text-transform:uppercase;letter-spacing:.5px;padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--color-primary);display:inline-block;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.control-section{padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-secondary)}.scenario-analysis-section{margin-top:var(--spacing-lg)}.control-button{width:100%;padding:var(--spacing-sm) var(--spacing-lg);background:var(--gradient-primary);color:var(--color-text-white);border:0;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);margin-top:var(--spacing-md)}.control-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.control-button:active{transform:translateY(0)}.control-button:disabled{opacity:.5;cursor:not-allowed}.loading-message{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);color:var(--color-text-muted);font-size:var(--font-size-sm)}.spinner-small{width:16px;height:16px;border:2px solid var(--color-border-secondary);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.education-card{background:var(--color-bg-secondary);border-radius:var(--radius-xl);border:var(--border-width-sm) solid var(--color-border-secondary);overflow:hidden;transition:border-color var(--transition-fast)}.education-card:hover{border-color:var(--color-primary)}.education-header{padding:var(--spacing-lg);cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background var(--transition-fast)}.education-header:hover{background:var(--color-bg-tertiary)}.education-header h3{margin:0;color:var(--color-text-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}.education-header h3::before{content:"📚 ";margin-right:var(--spacing-xs)}.toggle-icon{color:var(--color-primary);font-size:var(--font-size-base);transition:transform var(--transition-fast);font-weight:var(--font-weight-bold)}.toggle-icon.collapsed{transform:rotate(-90deg)}.education-content{padding:0 var(--spacing-lg) var(--spacing-lg);max-height:2000px;overflow:hidden;transition:max-height .3s ease-out,padding .3s ease-out}.education-content.collapsed{max-height:0;padding:0 var(--spacing-lg)}.education-text{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-lg);font-size:var(--font-size-sm)}.strategy-types{display:flex;flex-direction:column;gap:var(--spacing-md)}.strategy-type-card{background:var(--color-bg-primary);padding:var(--spacing-md);border-radius:var(--radius-md);border:var(--border-width-sm) solid var(--color-border-tertiary)}.strategy-type-card h4{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.strategy-type-card p{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.4}.strategy-main{display:flex;flex-direction:column;gap:var(--spacing-2xl);min-width:0;width:100%}.position-summary-card{background:var(--gradient-primary);color:var(--color-text-white);padding:var(--spacing-xl) var(--spacing-2xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.summary-title-group{display:flex;align-items:center;gap:var(--spacing-md)}.summary-title-group h3{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.summary-type-badge{padding:var(--spacing-xs) var(--spacing-md);background:rgba(255,255,255,0.2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.summary-metrics-row{display:flex;gap:var(--spacing-2xl);align-items:flex-end;padding:var(--spacing-md) 0;border-top:1px solid rgba(255,255,255,0.1)}.spread-info-row{display:flex;gap:var(--spacing-2xl);align-items:center}.spread-info-item{display:flex;flex-direction:column;gap:var(--spacing-2xs);text-align:right}.spread-info-value{font-size:var(--font-size-base);color:white;font-weight:var(--font-weight-semibold)}.summary-primary-item{display:flex;flex-direction:column;gap:var(--spacing-sm);flex:1}.primary-label{opacity:.8}.primary-value-group{display:flex;align-items:baseline;gap:var(--spacing-sm)}.primary-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:1.2}.primary-value.success{color:#4ade80}.primary-percent{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);opacity:.9}.summary-row-pl{padding-top:var(--spacing-lg);border-top:2px solid rgba(255,255,255,0.15);justify-content:center;gap:var(--spacing-2xl)}.summary-row-pl .summary-primary-item{flex:none;text-align:center}.summary-row-pl .primary-value-group{display:flex;align-items:baseline;gap:var(--spacing-sm);justify-content:center}.summary-row-pl .primary-value{font-size:var(--font-size-2xl,1.5rem)}.summary-row-pl .primary-percent{font-size:var(--font-size-xl,1.25rem)}.chart__placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-base);z-index:1;background:var(--color-bg-primary)}.chart__placeholder.u-hidden{display:none}.placeholder-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);text-align:center;max-width:400px;padding:var(--spacing-xl)}.placeholder-icon{font-size:var(--font-size-4xl);opacity:.6}.placeholder-text{font-size:var(--font-size-base);line-height:1.6;color:var(--color-text-secondary)}.placeholder-text strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.scenario-controls-card{background:var(--color-bg-primary);padding:var(--spacing-2xl);border-radius:var(--radius-xl);border:var(--border-width-sm) solid var(--color-border-secondary);box-shadow:var(--shadow-sm)}.scenario-controls-card h3{margin:0 0 var(--spacing-xs) 0;color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.controls-subtitle{margin:0 0 var(--spacing-xl) 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.slider-group{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--spacing-sm);row-gap:var(--spacing-2xs);align-items:center;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.slider-group:last-child{margin-bottom:0}.price-range-row{display:flex;gap:var(--spacing-md);align-items:flex-end;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.price-range-row.slider-group{display:flex}.price-range-input{flex:1;display:flex;flex-direction:column}.price-range-input label{margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.price-range-input label span{font-weight:var(--font-weight-bold);color:var(--color-primary)}.slider-group label{grid-column:1;grid-row:1;font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.slider-group .slider-info{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-sm)}.slider-group .slider-value{font-weight:var(--font-weight-bold);color:var(--color-primary);font-size:var(--font-size-md)}.slider-group input[type="range"]{grid-column:1 / -1;grid-row:2;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.slider-group input[type="text"],.slider-group input[type="number"]{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-sm) solid var(--color-border-secondary);border-radius:var(--radius-md);background:var(--color-bg-primary);color:var(--color-text-primary);font-size:var(--font-size-sm);font-family:inherit;transition:border-color .2s ease,background-color .2s ease}.slider-group input[type="text"]:focus,.slider-group input[type="number"]:focus{outline:0;border-color:var(--color-primary);background:var(--color-bg-secondary)}.slider-group input[type="text"]:disabled,.slider-group input[type="number"]:disabled{opacity:.5;cursor:not-allowed;background:var(--color-bg-secondary)}.slider-change{font-size:var(--font-size-sm);color:var(--color-text-muted)}input[type="range"]{width:100%;height:6px;border-radius:var(--radius-md);background:var(--color-bg-quaternary);outline:0;appearance:none;-webkit-appearance:none;touch-action:pan-y;cursor:pointer}input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-md);background:linear-gradient(to right,var(--color-primary) 0,var(--color-bg-quaternary) 0)}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:0 2px 6px rgba(46,73,100,0.35);border:2px solid white;transition:transform .15s ease,box-shadow .15s ease;margin-top:-5px}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 8px rgba(46,73,100,0.45)}input[type="range"]::-moz-range-track{height:6px;border-radius:var(--radius-md);background:var(--color-bg-quaternary)}input[type="range"]::-moz-range-progress{height:6px;border-radius:var(--radius-md);background:var(--color-primary)}input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid white;box-shadow:0 2px 6px rgba(46,73,100,0.35)}.chart-card{background:var(--color-bg-primary);padding:var(--spacing-lg);border-radius:var(--radius-xl);border:var(--border-width-sm) solid var(--color-border-secondary);box-shadow:var(--shadow-sm)}.chart-header{margin-bottom:var(--spacing-lg)}.chart-header h3{margin:0 0 var(--spacing-xs) 0;color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.chart-description{margin:0 0 var(--spacing-lg) 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.chart-title-with-tooltip{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:-var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);justify-content:center}.chart-params-info{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-sm);margin-left:var(--spacing-4xl);padding-top:var(--spacing-xs)}.chart-container{padding:0 var(--spacing-4xl) var(--spacing-4xl) var(--spacing-4xl);position:relative;width:100%;height:400px}.strategy-chart{width:100%;height:100%}.pl-table-container{position:relative;width:100%;min-height:400px}.pl-table-wrapper{width:100%;overflow-x:auto;max-height:calc(100vh - 300px);overflow-y:auto}.pl-table{width:100%;border-collapse:collapse;font-size:.85em}.pl-table thead{position:sticky;top:0;z-index:10}.pl-table thead tr{background:var(--color-bg-tertiary)}.pl-table th{padding:var(--spacing-sm);border:var(--border-width-sm) solid var(--color-border-secondary);font-weight:var(--font-weight-semibold);text-align:center}.pl-table th:first-child{text-align:left}.pl-table td{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-sm) solid var(--color-border-secondary);text-align:center}.pl-table td:first-child{text-align:left;font-weight:var(--font-weight-medium)}.pl-table tbody tr:hover{background:var(--color-bg-tertiary)}.pl-table td.current-price-cell{background:var(--color-warning-bg,#fff3cd);font-weight:var(--font-weight-semibold)}.pl-table td.scenario-cell{background:var(--color-primary-light,rgba(102,126,234,0.1));font-weight:var(--font-weight-semibold);border:var(--border-width-md) solid var(--color-primary)}.chart-content-wrapper{position:relative}.chart-tab-content{display:none}.chart-tab-content.active{display:block}@media(max-width:1200px){.strategy-layout{grid-template-columns:1fr}.strategy-sidebar{position:relative;top:0;max-height:none;flex-direction:row;flex-wrap:wrap}.controls-card,.education-card{flex:1;min-width:300px}.summary-grid{grid-template-columns:repeat(2,1fr)}.pl-table-wrapper{max-height:calc(100vh - 300px)}}@media(max-width:768px){.help-banner{padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.help-banner__content{position:relative;padding-right:32px}.help-banner__icon{font-size:var(--font-size-3xl);flex-shrink:0}.help-banner__text{font-size:var(--font-size-xs);line-height:1.5}.help-banner__close{position:absolute;top:0;right:0;width:24px;height:24px}.page-subtitle{font-size:var(--font-size-base)}.strategy-tabs{gap:var(--spacing-sm)}.strategy-tab-btn{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-sm)}.strategy-sidebar{flex-direction:column}.summary-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.spread-info-row{display:flex;flex-wrap:wrap;gap:var(--spacing-sm) var(--spacing-2xl);width:100%}.spread-info-item{text-align:left;gap:var(--spacing-xs);flex:1 1 calc(50% - var(--spacing-2xl));min-width:120px}.summary-metrics-row{display:flex;flex-wrap:wrap;gap:var(--spacing-sm) var(--spacing-lg);padding:var(--spacing-sm) 0}.summary-primary-item{flex:1 1 calc(50% - var(--spacing-lg));min-width:calc(50% - var(--spacing-lg))}.summary-primary-item .primary-value{font-size:var(--font-size-lg)}.position-summary-card{padding:var(--spacing-md) !important}.summary-row-pl .primary-value{font-size:1.1em}.summary-row-pl .primary-percent{font-size:1em}.strategy-chart{height:350px}.scenario-controls-card,.chart-card,.controls-card{padding:var(--spacing-lg)}.pl-table-wrapper{max-height:none}}@media(max-width:480px){.page-title{font-size:var(--font-size-2xl)}.strategy-chart{height:300px}.summary-title-group{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.summary-metrics-row{flex-wrap:wrap}.summary-primary-item{flex:1 1 calc(50% - var(--spacing-lg));min-width:calc(50% - var(--spacing-lg))}.spread-info-item{flex:1 1 calc(50% - var(--spacing-2xl));min-width:calc(50% - var(--spacing-2xl))}.summary-row-pl .primary-value{font-size:1em}.chart-title-with-tooltip{font-size:var(--font-size-lg)}.pl-table{font-size:.75em}.pl-table th,.pl-table td{padding:var(--spacing-xs) var(--spacing-xs)}.pl-table-wrapper{max-height:none}}.strategy-description{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0 0 var(--spacing-lg) 0;font-style:italic}.leg-section{background:rgba(102,126,234,0.05);padding:var(--spacing-md);border-radius:var(--radius-md)}.leg-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0 0 var(--spacing-md) 0}.leg-info{margin-top:var(--spacing-md);padding:var(--spacing-sm);background:var(--color-bg-primary);border-radius:var(--radius-sm);border:var(--border-width-sm) solid var(--color-border-tertiary)}.info-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) 0}.info-label{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.info-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.info-value.cost{color:var(--color-error)}.info-value.credit{color:var(--color-success)}.spread-summary{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:var(--border-width-md) solid var(--color-primary)}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) 0}.summary-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)}.summary-value{font-size:var(--font-size-base);font-weight:var(--font-weight-bold)}.summary-value.total{font-size:var(--font-size-lg);color:var(--color-primary)}.info-value-with-edit{display:flex;align-items:center;gap:var(--spacing-xs)}.premium-edit-input{width:80px;padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-sm) solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-bg-primary);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.premium-edit-input:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(102,126,234,0.1)}.label-note{font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);color:var(--color-text-muted);font-style:italic}#strategy-legs-summary{display:flex;flex-direction:column;gap:var(--spacing-sm)}.summary-leg-item{padding:var(--spacing-md);background:var(--color-bg-secondary);border:var(--border-width-sm) solid var(--color-border-primary);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--spacing-xs)}.summary-leg-main{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;font-weight:var(--font-weight-semibold)}.summary-leg-badges{display:flex;gap:var(--spacing-xs)}.summary-leg-details{font-size:var(--font-size-sm);color:var(--color-text-secondary);display:flex;gap:var(--spacing-md);flex-wrap:wrap}.btn-primary{background:var(--gradient-primary);color:white;border:0;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:opacity var(--transition-fast)}.btn-primary:hover{opacity:.9}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-md) solid var(--color-border-primary);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--color-bg-tertiary);border-color:var(--color-border-secondary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}