.tint-preview-section{border-top:1px solid var(--border);background:#141617}.preview-layout{display:grid;grid-template-columns:320px 1fr;gap:30px;align-items:start}.preview-controls{border:1px solid var(--border);background:#1b1d1e;padding:27px}.preview-step{display:flex;gap:13px;align-items:center;margin-bottom:21px}.preview-step>span,.preview-step-number{color:var(--yellow);font-size:.75rem;font-weight:800;letter-spacing:.1em}.preview-step h3{font-size:1.15rem;margin:0;line-height:1.3}.vehicle-fields{display:grid;grid-template-columns:85px 1fr;gap:14px 12px}.vehicle-field{min-width:0}.vehicle-field label{display:block;font-size:.875rem;font-weight:700;margin-bottom:7px}.vehicle-field input,.vehicle-field select{width:100%;min-height:47px;border:1px solid #505556;border-radius:0;background:#101213;color:#f5f5f2;padding:10px 12px;font:inherit;line-height:1.3}.vehicle-field input:focus,.vehicle-field select:focus{outline:2px solid var(--yellow);outline-offset:2px;border-color:transparent}.model-field{grid-column:1/-1}.field-help{font-size:.75rem;color:#bbc1c2;line-height:1.6;margin:12px 0 20px;min-height:38px}.body-field{margin-bottom:29px}.shade-fieldset{padding:0;margin:0;border:0;min-width:0}.shade-fieldset legend{padding:0;font-size:1.05rem;font-weight:800;line-height:1.4;margin-bottom:18px;display:flex;gap:13px;align-items:center}.shade-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.shade-option{cursor:pointer;position:relative}.shade-option input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.shade-option>span{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #515758;background:#121516;min-height:83px;padding:10px 4px;line-height:1.2;text-align:center}.shade-option strong{font-size:1.4rem}.shade-option small{font-size:.75rem;color:#b3babb;display:block;margin-top:8px;line-height:1.25}.shade-option input:checked+span{background:var(--yellow);border-color:var(--yellow);color:#111}.shade-option input:checked+span small{color:#383006}.shade-option input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:3px}.shade-baseline{grid-column:1/-1}.shade-baseline>span{flex-direction:row;justify-content:space-between;padding:12px 14px;min-height:51px;gap:12px}.shade-baseline strong{font-size:.875rem}.shade-baseline small{margin:0;font-size:.75rem}.shade-explanation{color:#b3babb;font-size:.8125rem;line-height:1.65;margin:17px 0 0}.preview-display{min-width:0}.preview-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 22px;background:#1b1d1e;border:1px solid var(--border);border-bottom:0}.preview-caption>div{min-width:0}.preview-caption>div>span{font-size:.75rem;letter-spacing:.1em;color:var(--muted);font-weight:700;display:block;margin-bottom:7px}.preview-caption h3{font-size:1.4rem;line-height:1.3;margin:0;overflow-wrap:anywhere}.selected-shade{font-size:.75rem;line-height:1.35;letter-spacing:.06em;font-weight:800;background:var(--yellow);color:#111;padding:9px 13px;text-align:center;flex-shrink:0;max-width:120px}.preview-stage{position:relative;border:1px solid var(--border);background:#25292b;min-height:200px;overflow:hidden}.preview-stage canvas{display:block;width:100%;height:auto;aspect-ratio:3/2}.preview-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#e4e7e7;background:#202426;padding:30px;font-size:.9375rem;line-height:1.6}.preview-loading[hidden]{display:none}.comparison-labels{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.comparison-labels[hidden]{display:none}.comparison-labels span{font-size:.75rem;font-weight:700;background:#111c;border:1px solid #ffffff30;padding:5px 9px;backdrop-filter:blur(3px)}.comparison-labels span:last-child{color:var(--yellow)}.preview-status-row{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;margin-top:15px}.preview-status-row>p{font-size:.75rem;line-height:1.5;color:#b8bfc0;margin:0;max-width:310px}.compare-toggle{display:flex;gap:9px;align-items:center;font-size:.8125rem;font-weight:600;line-height:1.4;cursor:pointer;max-width:195px}.compare-toggle input{width:18px;height:18px;accent-color:var(--yellow);flex-shrink:0;margin:0}.compare-toggle:has(input:disabled){opacity:.45;cursor:default}.compare-toggle input:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.preview-selection-note{border-top:1px solid var(--border);margin-top:23px;padding-top:19px}.preview-selection-note strong{color:var(--yellow);font-size:.95rem}.preview-selection-note p{font-size:.8125rem;color:#b6bdbd;line-height:1.65;margin:8px 0 0}.preview-quote-row{display:flex;align-items:center;gap:22px;margin-top:23px}.preview-quote-row .button{flex-shrink:0}.preview-quote-row p{font-size:.8125rem;color:#bdc3c3;line-height:1.6;margin:0}.preview-noscript{color:var(--yellow);padding:20px;border:1px solid var(--yellow);margin-top:20px}.preview-noscript a{text-decoration:underline}
@media(max-width:1100px){.preview-layout{grid-template-columns:285px 1fr;gap:24px}.preview-controls{padding:22px}.preview-status-row{flex-direction:column;gap:12px}.preview-status-row>p{max-width:none}.preview-quote-row{flex-direction:column;align-items:flex-start;gap:15px}.shade-option strong{font-size:1.25rem}.shade-baseline strong{font-size:.875rem}}
@media(max-width:850px){.preview-layout{grid-template-columns:1fr}.preview-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.preview-step{grid-column:1}.vehicle-fields{grid-column:1;grid-row:2}.field-help{grid-column:1;grid-row:3;min-height:0;margin-bottom:16px}.body-field{grid-column:1;grid-row:4;margin-bottom:0}.shade-fieldset{grid-column:2;grid-row:1/4}.shade-explanation{grid-column:2;grid-row:4;margin-top:0}.shade-fieldset legend{margin-bottom:21px}.shade-options{gap:10px}.shade-option>span{min-height:86px}.shade-baseline>span{min-height:51px}.preview-status-row{flex-direction:row;gap:20px}.preview-quote-row{flex-direction:row;align-items:center;gap:22px}}
@media(max-width:620px){.preview-controls{display:block;padding:23px}.vehicle-fields{grid-template-columns:85px 1fr}.preview-step{margin-bottom:18px}.field-help{margin:12px 0 18px}.body-field{margin-bottom:27px}.shade-fieldset legend{margin-bottom:18px;font-size:1.05rem}.shade-explanation{margin-top:16px}.shade-option strong{font-size:1.5rem}.shade-baseline strong{font-size:.875rem}.preview-caption{padding:16px;gap:12px}.preview-caption h3{font-size:1.15rem}.selected-shade{padding:8px 10px;max-width:100px}.preview-stage{min-height:0}.preview-stage canvas{aspect-ratio:3/2}.preview-loading{font-size:.875rem;padding:18px}.comparison-labels{top:10px;left:10px;right:10px}.comparison-labels span{font-size:.75rem;padding:4px 6px}.preview-status-row{flex-direction:column;gap:12px;margin-top:15px}.compare-toggle{max-width:none;font-size:.875rem}.preview-selection-note{margin-top:19px;padding-top:16px}.preview-quote-row{display:block;margin-top:20px}.preview-quote-row p{margin-top:14px}}