.fuel-page { width:min(100%,1100px); }
.fuel-page .hero { padding-top:48px; }
.calculator-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:stretch; }
.fuel-panel,.estimate-panel { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:26px; padding:30px; }
.fuel-page h2 { font-family:Montserrat,sans-serif; font-size:23px; font-weight:400; letter-spacing:-.6px; line-height:1.3; margin:0 0 10px; }
.fuel-page .section-note { font-size:13px; color:var(--muted); margin:0 0 24px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
.field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field label { font-size:12px; font-weight:500; }
.field input,.field select { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:var(--bg); font:inherit; font-size:16px; }
.field input:focus,.field select:focus { border-color:var(--muted); }
.field input::placeholder { color:var(--muted); opacity:1; }
.hint { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.estimate-panel { display:flex; flex-direction:column; justify-content:center; padding:36px; background:var(--soft); }
.estimate-panel .eyebrow { margin-bottom:14px; }
.trip-total { font-size:clamp(42px,6vw,64px); font-weight:300; letter-spacing:-2.5px; font-variant-numeric:tabular-nums; line-height:1.15; margin:0 0 8px; overflow-wrap:anywhere; }
.estimate-caption { margin:0; color:var(--muted); font-size:13px; }
.estimate-breakdown { margin:28px 0 0; border-top:1px solid var(--line); padding-top:10px; font-size:14px; }
.estimate-breakdown div { display:flex; justify-content:space-between; gap:18px; padding:10px 0; }
.estimate-breakdown dt { color:var(--muted); }
.estimate-breakdown dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0; }
.estimate-note { color:var(--muted); font-size:11px; margin:22px 0 0; line-height:1.7; }
.route-panel { margin-top:24px; }
.route-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.route-heading .eyebrow { margin-bottom:8px; }
.route-tag { background:var(--soft); border-radius:999px; color:var(--muted); padding:6px 14px; font-size:11px; }
.route-actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 16px; }
.route-actions button:disabled { opacity:.55; cursor:wait; }
.fuel-page .status { margin-bottom:18px; padding:12px 16px; background:var(--soft); border-radius:12px; font-size:12px; }
.fuel-page .status.warn { border:1px solid var(--line); color:var(--text); }
#map { height:400px; border:1px solid var(--line); border-radius:18px; overflow:hidden; isolation:isolate; background:var(--soft); }
#map .leaflet-popup-content-wrapper,#map .leaflet-popup-tip { background:var(--panel); color:var(--text); }
#map .leaflet-bar a { background:var(--panel); color:var(--text); border-color:var(--line); }
#map .leaflet-bar a:hover { background:var(--bg); }
#map .leaflet-control-attribution { background:var(--panel); color:var(--muted); }
#map .leaflet-control-attribution a { color:var(--text); }
.map-note { color:var(--muted); font-size:11px; margin:12px 0 0; }
.calculation-details { margin-top:22px; }
.formula { padding:14px 0; line-height:1.8; }
.formula code { color:var(--text); background:var(--soft); padding:2px 5px; border-radius:5px; white-space:normal; }
@media(max-width:760px) { .calculator-layout { grid-template-columns:1fr; } .estimate-panel { padding:28px; } .trip-total { font-size:54px; } }
@media(max-width:480px) { .fuel-page .hero { padding-top:30px; } .fuel-panel { padding:22px; border-radius:22px; } .field-grid { grid-template-columns:1fr; gap:18px; } .route-actions { flex-direction:column; } .route-actions .pill { width:100%; } #map { height:320px; border-radius:14px; } }