.roi{gap:var(--type-lede);grid-template-columns:1fr;width:100%;display:grid}.roi__tile,.roi__stats{min-width:0}.roi__tile{padding:var(--spacing-l);background:var(--color-neutral-100);border-radius:var(--radius-xl)}.roi__panel{background:var(--color-neutral-50);border-radius:var(--radius-lg);flex-direction:column;justify-content:center;gap:28px;height:100%;padding:37px 32px;display:flex}.roi__slider{gap:var(--spacing-3);flex-direction:column;display:flex}.roi__slider-header{justify-content:space-between;align-items:center;gap:var(--spacing-3);font-size:var(--type-label-s);color:var(--color-text-secondary);font-weight:500;display:flex}.roi__slider-value{font-size:var(--type-label-m);color:var(--color-text-primary);white-space:nowrap}.roi__slider-scale{font-size:var(--type-caption);color:var(--color-text-tertiary);justify-content:space-between;display:flex}.roi__range{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px}.roi__range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-action-primary-bg) var(--fill), var(--color-bg-muted) var(--fill));border-radius:3px;height:6px}.roi__range::-moz-range-track{background:linear-gradient(to right, var(--color-action-primary-bg) var(--fill), var(--color-bg-muted) var(--fill));border-radius:3px;height:6px}.roi__range::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);background:var(--color-bg-surface);border:1px solid var(--color-border-default);width:18px;height:18px;box-shadow:var(--shadow-xs);margin-top:-6px}.roi__range::-moz-range-thumb{border-radius:var(--radius-full);background:var(--color-bg-surface);border:1px solid var(--color-border-default);width:18px;height:18px}.roi__input-row{gap:var(--spacing-2);font-size:var(--type-label-s);color:var(--color-text-secondary);flex-direction:column;font-weight:500;display:flex}.roi__field{background:var(--color-bg-canvas);border:1px solid var(--color-border-default);border-radius:8px;align-items:center;gap:2px;padding:14px 20px;display:flex}.roi__field-prefix{font-size:var(--type-label-m);color:var(--color-text-primary);font-weight:500}.roi__field-input{min-width:0;font:inherit;font-size:var(--type-label-m);color:var(--color-text-primary);background:0 0;border:0;flex:1 1 0;font-weight:500}.roi__field-input:focus{outline:none}.roi__field:focus-within{outline:2px solid var(--color-text-primary);outline-offset:2px}.roi__field-suffix{font-size:var(--type-body-s);color:var(--color-text-tertiary);white-space:nowrap;font-weight:400}.roi__stats{gap:var(--type-lede);grid-template-columns:1fr;display:grid}.roi__stat{justify-content:space-between;gap:var(--spacing-m);min-height:290px;padding:var(--spacing-m);background:var(--color-bg-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);flex-direction:column;display:flex}.roi__stat-icon{border-radius:var(--radius-full);background:var(--color-bg-surface);flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.roi__stat-metric{flex-direction:column;gap:6px;display:flex}.roi__stat-title,.roi__stat-label{font-size:var(--type-body-s);color:var(--color-text-secondary)}.roi__stat-value{color:var(--color-text-primary);font-weight:400}@media (width>=768px){.roi__stats{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.roi{grid-template-columns:repeat(2,1fr)}}.roi__sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.roi--split{gap:var(--spacing-l)}.roi--split .roi__tile,.roi--split .roi__stats{padding:var(--spacing-l);background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);flex-direction:column;gap:28px;display:flex}.roi--split .roi__panel{background:0 0;border-radius:0;padding:0}.roi--split .roi__panel-title{color:var(--color-text-primary);font-weight:400}.roi--split .roi__stat{background:0 0;border:0;border-radius:0;min-height:0;padding:0}.roi--split .roi__stat+.roi__stat{border-top:1px solid var(--color-border-subtle);padding-top:28px}@media (width>=768px){.roi--split .roi__stats{grid-template-columns:1fr}}@media (width>=1024px){.roi--split{grid-template-columns:repeat(2,1fr);align-items:stretch}}
