#roasPage .page-title { align-items: flex-start; }
.roas-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.roas-card, .roas-results { padding: 24px; }
.roas-card-title, .roas-results-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.roas-card-title h2, .roas-results-heading h2 { margin: 0; color: #172033; font-size: 18px; font-weight: 750; }
.roas-card-title p { margin: 3px 0 0; color: #7b879d; font-size: 12px; }
.roas-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 17px; }
.roas-icon-blue { color: #2563eb; background: #eaf1ff; }
.roas-icon-green { color: #079669; background: #e6f8f2; }
.roas-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.roas-field { display: grid; gap: 7px; color: #344054; font-size: 12px; font-weight: 650; }
.roas-field .form-control { min-height: 43px; }
.roas-help { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border: 1px solid #98a2b3; border-radius: 50%; color: #667085; background: #fff; font-size: 10px; font-style: normal; font-weight: 800; cursor: help; vertical-align: middle; }
.roas-help::after { content: attr(data-help); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 9px); width: 250px; padding: 10px 12px; border-radius: 9px; color: #fff; background: #172033; box-shadow: 0 8px 24px rgba(16,24,40,.2); font-size: 11px; font-weight: 500; line-height: 1.45; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,5px); transition: opacity .15s ease,transform .15s ease; }
.roas-help::before { content: ''; position: absolute; z-index: 31; left: 50%; bottom: calc(100% + 3px); border: 6px solid transparent; border-top-color: #172033; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity .15s ease; }
.roas-help:hover::after, .roas-help:hover::before, .roas-help:focus::after, .roas-help:focus::before { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.roas-help:hover::before, .roas-help:focus::before { transform: translateX(-50%); }
.roas-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.roas-results { grid-column: 1 / -1; }
.roas-results-heading { justify-content: space-between; }
.roas-results-heading .eyebrow { margin-bottom: 3px; }
.roas-status { padding: 7px 12px; border-radius: 999px; color: #43506a; background: #eef2f7; font-size: 11px; font-weight: 750; }
.roas-status.good { color: #067647; background: #dcfae6; }
.roas-status.warning { color: #b54708; background: #fef0c7; }
.roas-status.danger { color: #b42318; background: #fee4e2; }
.roas-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.roas-metric { min-width: 0; padding: 17px; border: 1px solid #e7ebf2; border-radius: 13px; background: #fbfcfe; }
.roas-metric span { display: block; color: #7b879d; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.roas-metric strong { display: block; margin: 7px 0 4px; color: #172033; font-size: 22px; line-height: 1.2; }
.roas-metric small { color: #8a95aa; font-size: 10px; }
.roas-message { margin-top: 16px; padding: 13px 15px; border-radius: 11px; color: #344054; background: #f2f4f7; font-size: 12px; line-height: 1.5; }
.roas-message.good { color: #067647; background: #ecfdf3; }
.roas-message.warning { color: #93370d; background: #fffaeb; }
.roas-message.danger { color: #b42318; background: #fef3f2; }
.roas-formula { margin: 18px 0 0; color: #7b879d; font-size: 11px; line-height: 1.55; }
.roas-range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.roas-range article { padding: 15px; border: 1px solid #e7ebf2; border-radius: 12px; background: #fff; }
.roas-range article:nth-child(1) { border-left: 4px solid #ef4444; }
.roas-range article:nth-child(2) { border-left: 4px solid #f59e0b; }
.roas-range article:nth-child(3) { border-left: 4px solid #10b981; }
.roas-range span { display: block; color: #7b879d; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.roas-range strong { display: block; margin-top: 7px; color: #172033; font-size: 19px; }
.roas-simulator { margin-top: 24px; padding-top: 21px; border-top: 1px solid #e7ebf2; }
.roas-simulator h3 { margin: 0 0 5px; color: #172033; font-size: 16px; }
.roas-simulator > p, .roas-simulator > small { color: #7b879d; font-size: 11px; }
.roas-table { margin: 14px 0 10px; }
.roas-table th, .roas-table td { text-align: right; }
.roas-table th:first-child, .roas-table td:first-child { text-align: left; }
.roas-positive { color: #067647 !important; font-weight: 750; }
.roas-negative { color: #b42318 !important; font-weight: 750; }
@media (max-width: 1050px) { .roas-layout { grid-template-columns: 1fr; } .roas-results { grid-column: auto; } .roas-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .roas-fields, .roas-metrics, .roas-range { grid-template-columns: 1fr; } .roas-card, .roas-results { padding: 18px; } .roas-actions { flex-direction: column-reverse; } .roas-actions .btn { width: 100%; } }