.fuel-overview, .fuel-monthly-report { margin: 0 0 2.5rem; padding: 1.5rem; background: #191e24; border: 1px solid #303b46; border-radius: 20px; }
.fuel-overview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.fuel-overview-heading h2, .fuel-monthly-report h2 { font-size: 1.55rem; margin-bottom: .6rem; }
.fuel-overview-heading p:not(.fuel-eyebrow), .fuel-monthly-intro { color: #b9c5d0; max-width: 65ch; margin-bottom: 0; line-height: 1.6; }
.fuel-eyebrow { color: #70caff; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; margin-bottom: .65rem; }
.fuel-volume-control { flex: 0 0 210px; }
.fuel-volume-control label { display: block; font-weight: 600; margin-bottom: .4rem; }
.fuel-volume-input { display: flex; align-items: center; gap: .75rem; }
.fuel-volume-input input { width: 110px; min-height: 46px; padding: .5rem .75rem; border: 1px solid #657b8f; background: #10151a; color: #fff; border-radius: 9px; font-size: 1.2rem; }
.fuel-volume-input input:focus-visible { outline: 3px solid #70caff; outline-offset: 2px; }
.fuel-volume-control small { display: block; margin-top: .4rem; color: #b9c5d0; font-size: .75rem; }
#fuel-volume-error:not([hidden]) { color: #ffd18c; }
#fuel-volume-error[hidden] { display: none; }
.fuel-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fuel-best-card, .fuel-month-card { min-width: 0; padding: 1.15rem; border-radius: 13px; background: #222a32; border: 1px solid #35424e; }
.fuel-best-card h3, .fuel-month-card h3 { font-size: .95rem; color: #d6e3ef; margin-bottom: .75rem; }
.fuel-best-price { font-size: 2rem; line-height: 1.1; font-weight: 700; margin-bottom: .8rem; font-variant-numeric: tabular-nums; }
.fuel-best-price span { display: block; font-size: .75rem; font-weight: 400; color: #b9c5d0; margin-top: .4rem; }
.fuel-best-station { font-weight: 600; margin-bottom: .2rem; }
.fuel-best-address, .fuel-best-ties, .fuel-best-updated { font-size: .8rem; color: #b9c5d0; margin-bottom: .5rem; overflow-wrap: anywhere; }
.fuel-best-ties { color: #8bd2fc; }
.fuel-best-saving { border-top: 1px solid #3b4752; padding-top: .8rem; margin: .8rem 0 0; font-size: .8rem; line-height: 1.7; }
.fuel-best-saving strong { color: #a9e6ba; white-space: nowrap; }
.fuel-best-total { grid-column: 1 / -1; margin-top: .7rem; padding: .85rem 1rem; border: 1px solid #466176; border-radius: 10px; background: #182a37; }
.fuel-best-total > span { display: block; font-size: .8rem; color: #c4d7e5; }
.fuel-best-total > strong { display: block; margin-top: .25rem; font-size: 1.65rem; color: #fff; line-height: 1.25; font-variant-numeric: tabular-nums; }
.fuel-overview-note { font-size: .8rem; line-height: 1.6; margin: 1rem 0 0; color: #b9c5d0; }
.fuel-overview a, .fuel-monthly-report a, .fuel-refresh { color: #70caff; text-underline-offset: .2em; }
.fuel-refresh { background: none; border: 0; padding: .25rem 0; text-decoration: underline; font: inherit; }
.fuel-refresh:focus-visible { outline: 2px solid #70caff; outline-offset: 3px; }
.fuel-stale-label { color: #ffd18c; background: #49381c; padding: .2rem .45rem; border-radius: 5px; font-size: .72rem; }
.fuel-station-stale { border-left: 3px solid #d99d42; }
.fuel-monthly-report { margin-top: 2.5rem; }
.fuel-monthly-intro { margin-bottom: 1.25rem; }
.fuel-month-range { margin: 1rem 0; }
.fuel-month-range div { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid #35424e; }
.fuel-month-range dt { font-size: .78rem; font-weight: 400; color: #b9c5d0; }
.fuel-month-range dd { margin: 0; font-size: .85rem; white-space: nowrap; }
.fuel-month-change { font-size: .9rem; line-height: 1.6; }
.fuel-month-coverage { font-size: .75rem; color: #b9c5d0; margin-bottom: 0; }
.fuel-best-empty { color: #ffd18c; line-height: 1.5; }
@media (max-width: 767.98px) {
    .fuel-overview, .fuel-monthly-report { padding: 1rem; }
    .fuel-overview-heading { flex-direction: column; gap: 1rem; }
    .fuel-overview-heading h2 { font-size: 1.3rem; }
    .fuel-overview-heading p:not(.fuel-eyebrow) { font-size: .8rem; }
    .fuel-volume-control { flex: auto; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .5rem; }
    .fuel-volume-control label { margin: 0; font-size: .85rem; }
    .fuel-volume-control small, .fuel-volume-control noscript { grid-column: 1 / -1; }
    .fuel-volume-input input { width: 120px; }
    .fuel-overview-grid { grid-template-columns: 1fr; }
    .fuel-best-card { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; }
    .fuel-best-card h3 { grid-column: 1; margin-bottom: .5rem; align-self: center; }
    .fuel-best-card .fuel-best-price { grid-column: 2; grid-row: 1 / span 3; text-align: right; font-size: 1.8rem; }
    .fuel-best-card .fuel-best-price span { font-size: .7rem; }
    .fuel-best-card .fuel-best-station, .fuel-best-card .fuel-best-address { grid-column: 1; }
    .fuel-best-card .fuel-best-ties, .fuel-best-card .fuel-best-updated, .fuel-best-card .fuel-best-saving, .fuel-best-card .fuel-best-empty { grid-column: 1 / -1; }
}

.fuel-best-route { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; margin: .4rem 0 .7rem; border: 1px solid #496b85; border-radius: 8px; background: #203747; font-size: .85rem; font-weight: 600; text-decoration: none; }
.fuel-best-route:hover { background: #2a4a61; color: #fff; }
.fuel-best-route:focus-visible, .fuel-best-ties summary:focus-visible, .fuel-tied-stations a:focus-visible { outline: 2px solid #70caff; outline-offset: 3px; }
.fuel-best-ties { grid-column: 1 / -1; margin: .25rem 0 .8rem; }
.fuel-best-ties summary { cursor: pointer; padding: .6rem 0; color: #8bd2fc; line-height: 1.5; }
.fuel-tied-stations { list-style: none; margin: .25rem 0 0; padding: 0; }
.fuel-tied-stations li { padding: .75rem; margin-top: .5rem; background: #17212a; border: 1px solid #3d4b58; border-radius: 8px; }
.fuel-tied-stations strong, .fuel-tied-stations li > span { display: block; }
.fuel-tied-stations strong { color: #fff; }
.fuel-tied-stations li > span { color: #c2cdd7; margin: .25rem 0; overflow-wrap: anywhere; }
.fuel-tied-stations a { display: inline-block; padding: .5rem 0; }
.fuel-station-cost { display: flex; flex-wrap: wrap; gap: .2rem .65rem; border-top: 1px solid #38434c; margin-top: .5rem; padding: .45rem 0 .25rem; font-size: .75rem; line-height: 1.6; color: #c7d2db; }
.fuel-station-cost strong { color: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuel-station-cost-best { color: #a9e6ba; }
.fuel-station-cost-extra { color: #c7d2db; }
.fuel-station-cost-extra > span { white-space: nowrap; }
.fuel-station-cost-unavailable { margin: .45rem 0 .2rem; font-size: .72rem; color: #b9c5d0; line-height: 1.5; }