/* Reference mode layout, scoped to the free page so VIP keeps its own layout. */
.free-prediction-page{--free-blue:#1f5eff;--free-red:#f53f3f;--free-line:#dfe4eb;--free-input:#f2f3f5;--free-muted:#8793a5;--free-text:#44566f}
.free-prediction-page .ab-heading h1{font-size:20px}
.free-prediction-page .ab-filter-panel{padding:20px;border-radius:0}
.free-prediction-page .ab-label{display:block;margin:0 0 8px;line-height:22px}
.free-prediction-page .ab-categories{height:32px;padding:3px}
.free-prediction-page .ab-categories button{height:26px;min-height:26px;padding:2px 13px;line-height:22px}
.free-mode-field{margin-top:20px}
#app .free-prediction-page .free-mode-field input{display:block;width:100%;height:32px;min-height:32px;padding:5px 12px;border:1px solid transparent;border-radius:1px;background:var(--free-input);color:var(--free-text);font:inherit;line-height:20px;box-shadow:none}
#app .free-prediction-page .free-mode-field input::placeholder{color:var(--free-muted);opacity:1}
#app .free-prediction-page .free-mode-field input:disabled{background:var(--free-input);color:var(--free-muted);opacity:1;-webkit-text-fill-color:var(--free-muted);cursor:not-allowed}
.free-mode-select{position:relative}
.free-mode-select select{display:block;width:100%}
.free-favorite-feedback{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;color:var(--free-muted);font-size:12px}
.free-favorite-feedback.is-error{color:#b42318}
.free-mode-help{margin-left:3px;font-size:12px;color:var(--free-muted)}
.free-mode-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.free-mode-options>.free-mode-field{margin-top:0;min-width:0}
.free-favorite-inline{flex:1 1 220px}
.free-favorite-inline [data-free-favorite-field],.free-amount-inline{display:flex;align-items:center;gap:8px}
.free-favorite-inline .free-mode-select{flex:1;min-width:0}
.free-prediction-page .free-mode-options .ab-label{margin:0;white-space:nowrap;flex-shrink:0}
.free-amount-inline{flex:0 0 auto}
.free-prediction-page .free-amount-inline #free-amount{width:100px}
.free-favorite-inline .free-favorite-feedback{margin-top:0}
.free-periods-field{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap;color:var(--free-text)}
.free-prediction-page #free-periods{width:110px}
.free-prediction-page .free-mode-options>[data-free-preview]{margin-left:auto}
.free-mode-odds{display:flex;align-items:center;gap:12px}
.free-mode-odds .ab-categories button{min-width:44px;padding-inline:10px}
.free-prediction-page .ab-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:15px}
.free-profit-curve{position:relative;margin-top:16px;padding:18px 18px 12px;border:1px solid var(--free-line);background:#fff;color:var(--free-text)}
.free-curve-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.free-curve-net>span{display:block;font-size:12px;color:var(--free-muted)}
.free-curve-net>strong{display:block;font-size:22px;line-height:1.35;font-weight:500;color:var(--free-red);font-variant-numeric:tabular-nums}
.free-curve-net>strong.is-negative{color:var(--free-blue)}
.free-curve-net small{font-size:14px;font-weight:400}
.free-curve-title{text-align:right}
.free-curve-title h2{margin:0;font-size:14px;line-height:22px;font-weight:500;color:var(--skin-text,#202b3e)}
.free-curve-title p{margin:3px 0 0;font-size:12px;color:var(--free-muted)}
.free-curve-legend{display:flex;gap:18px;margin:0 0 6px 52px;font-size:12px;color:var(--free-muted)}
.free-curve-legend span:before{content:"";display:inline-block;width:16px;height:3px;margin-right:6px;vertical-align:middle;background:var(--free-red)}
.free-curve-legend span+span:before{background:var(--free-blue)}
.free-curve-plot{width:100%;min-width:0}
.free-curve-plot svg{display:block;width:100%;overflow:visible}
.free-curve-plot svg text{font:11px var(--skin-font,"Microsoft YaHei",sans-serif);fill:var(--free-muted)}
.free-curve-plot svg .free-curve-axis-title{fill:var(--free-text)}
.free-curve-grid{stroke:#edf0f5;stroke-width:1}
.free-curve-zero{stroke:#a8b4c5;stroke-width:1}
.free-curve-guide{stroke:#9aaac1;stroke-width:1;stroke-dasharray:3 3}
.free-curve-readout{display:flex;flex-wrap:wrap;align-items:center;gap:5px 18px;min-height:36px;border-top:1px solid var(--free-line);padding-top:10px;color:var(--free-muted);font-size:12px}
.free-curve-readout strong,.free-curve-readout [data-curve-period]{color:var(--free-text);font-weight:400;font-variant-numeric:tabular-nums}
.free-curve-inspector{display:flex;align-items:center;gap:12px;margin:7px 0 0;color:var(--free-muted);font-size:12px}
#app .free-prediction-page .free-curve-inspector input[type=range]{flex:1;min-width:30px;width:auto;height:14px;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--free-blue)}
.free-curve-inspector output{min-width:78px;text-align:right;font-variant-numeric:tabular-nums}
.free-curve-tooltip{position:absolute;z-index:2;pointer-events:none;padding:7px 10px;border:1px solid var(--free-line);border-radius:3px;background:#fff;box-shadow:0 4px 14px #16294d14;color:var(--free-text);font-size:12px;white-space:nowrap}
@media(max-width:767px){
 .free-prediction-page .ab-filter-panel{padding:14px}
 .free-mode-options{flex-wrap:wrap;gap:18px 24px}
 .free-prediction-page .ab-categories button{padding-inline:9px}
 #app .free-prediction-page .free-mode-field input{font-size:16px}
 .free-prediction-page .ab-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.free-curve-plot{min-height:290px}